TechAcademy（テックアカデミー） Webデザインコース Webデザイン 【Webデザインに必須！】無料で使えるかっこいいフォントまとめ！
icon
icon
Webデザイン

【Webデザインに必須！】無料で使えるかっこいいフォントまとめ！

無料で利用できるかっこいいフォントをまとめています。現役のWebデザイナーも利用しているおすすめなフォントです。初心者でも簡単にかつ無料で利用できるので、ぜひ活用してみてください。

テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社　調査期間：2021年8月12日～8月16日　 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名　 調査手法：インターネット調査

かっこいい・クール系フォントの中から、無料で商用利用も可能なものをまとめました。

フォント一つでサイトの印象もガラリと変わるので、皆さんもぜひ使ってみてください！
(※商用利用については規模などによって使用料の発生するものも含まれています。各配布サイトの利用規約をご確認ください。)

 

なお本記事は、TechAcademyのWebデザインオンラインブートキャンプのカリキュラムをもとに執筆しています。

 

カガクゴ

cool_f_1

横書き専用、迫力のあるデザインのフォントです。

カガクゴ

 

19seg box

cool_f_2

昔のコンピューターで使うようなデジタルな雰囲気を持ったフォント。

19seg box

 

[PR] Webデザインで副業する学習方法を動画で公開中

鉄瓶ゴシック

cool_f_3

力強い太めのゴシック体フォント。

鉄瓶ゴシック

 

Mgen+ (ムゲンプラス)

cool_f_4

「M+ FONTS」に未収録の特殊な漢字を補った合成フォント。

Mgen+ (ムゲンプラス)

 

ほのか明朝

cool_f_5

澄み切ったイメージを出したい時に便利な、すっきりした明朝系フォント。日記やポエムを投稿するのに向いていそうです。

ほのか明朝

 

851チカラヅヨク

cool_f_6

テレビのテロップなどで出てきそうな、迫力のあるフォント。手書き感が残っていて良いですね。

851チカラヅヨク

 

1時間でできる無料体験！

らんすあたっく！

cool_f_7

絵を組み合わせたようなユニークなフォント。漢字は含まれていません。

らんすあたっく！

 

スマートフォントUI

cool_f_8

少しだけ縦長にデザインされたゴシック体フォント。見栄えと読みやすさを重視しています。

スマートフォントUI

 

カナ0816

cool_f_9

斜体系のカナフォント。数字も入力することができます。

カナ0816

 

さいとうしんぐ店

cool_f_10

商店街で使われたものをイメージした、太めの独特なフォント。

さいとうしんぐ店

 

マキナスFlat

cool_f_11

無感情な印象がテーマのフォント。第二水準やIBM拡張漢字などにも対応しています。

マキナスFlat

 

オリエンタル

cool_f_12

レトロな雰囲気を持った、カタカナ専用のフォントです。

オリエンタル

 

DBストレート12

cool_f_13

ひらがな、カタカナ、英数字用のデジタルなフォント。

DBストレート12

 

GD-高速道路ゴシックJA

cool_f_14

高速道路の標識で使用されるフォント。遠くから見てもわかりやすいようになっています。

GD-高速道路ゴシックJA

 

カリン91

cool_f_15

スタイリッシュなカタカナ用フォント。

カリン91

 

飴鞭ゴシック

cool_f_16

M+フォントをベースに、文字の端にトゲや丸みを追加したフォント。

飴鞭ゴシック

 

ゾウ

cool_f_17

カタカナ・横書き専用の太めでクールなフォント。

ゾウ

 

ステンシル・パイプ

cool_f_18

ロゴなどに使えるユニーク系フォント。カタカナ専用になっています。

ステンシル・パイプ

 

ロゴたいぷゴシック

cool_f_19

柔らかくも格好いいデザインのゴシック系フォント。

ロゴたいぷゴシック

 

NEUTRAL

cool_f_20

縦長でフラットなフォント。スマートな印象になります。

NEUTRAL

 

以上、無料で使えるかっこいいフォントを紹介しました。

初心者の方でも気軽に利用できるフリーフォントなので、サイトの作成やデザインの作業などにおすすめです。

[お知らせ]TechAcademyでは初心者でも最短4週間でオリジナルWebサイトを公開できるWebデザインオンラインブートキャンプを開催しています。

記事を検索

関連するキーワード

関連する記事

無料で使える！ホームページ作成におすすめのテンプレート10選

今回は手軽に使えるホームページのテンプレートを紹介しています。 今回紹介するサイトでは手軽に使えるホームページのテンプレートですが、それぞれのページに利用...
Webデザイン

【今すぐ知っておきたい！】Webデザイナーの転職に必要なスキルとは

IT関連の職種で「Webデザイナー」という言葉を耳にしたことがある人は多いでしょう。 プログラミングやWebマネジメントなどIT関連の専門職は多様化し、増...
Webデザイン

Webデザイナーとは？必要なスキルや学習方法を細かく解説

この記事では、Webデザイナーとはどんな仕事をする人なのか、どんなスキルが必要なのか詳しく紹介しています。 これから在宅での仕事を考えている人や転職したい...
Webデザイン

表示位置を変えたい！CSSでpositionの使い方【初心者向け】現役エンジニアが解説

CSSのpositionの使い方について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 CSSで位置の調...
CSS

バナー広告の改善に！CTRを上げるクリエイティブ事例20選

本稿は、Canva Design Schoolのブログ記事を了解を得て日本語翻訳し掲載した記事になります。 なお本記事は、デザイナーであるMaria Jo...
Webデザイン

CSSの軽量フレームワーク10選を現役エンジニアが解説【初心者向け】

CSSの軽量フレームワーク10選について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。  ...
CSS

あわせてよく読まれている記事

今年のトレンド！2016年最も売れたフォント、トップ50を集めてみた

本稿は、Designmodeのブログ記事を了解を得て日本語翻訳し掲載した記事になります。 また、本記事は、Doru Ciobanu氏によって投稿されました。   タイポグラフィは、独自の世界観、テクニック、統一感を組み合わせたアートです。素晴らしいデザインには、素晴らしいタイポグラフィがあります。 Webデザインまたは出版物のデザインでも、パンフレットやユーザーインターフェースのデザインでも、ロゴのデザインでも、プロジェクトを成功させるために重要な鍵となるものの1つはフォントです。 フォント、色、その他デザインをどのように組み合わせるかという選択が、成功と失敗の分岐点となります。こうした細部に十分な注意を払わないがために、優れた製品を生み出すために費やした全ての努力が無駄になることもあります。 しかし幸いなことに、優れたタイポグラフィのためのガイドとなるリソースは、豊富に存在しています。 そして、これから紹介するのは、2016年に最も売れた50のフォントです。   1. FF DIN デザイナー：Albert-Jan Pool デザインされた年：1995 発行者：FontFont FF Dinは、1995年から2009年にかけて、オランダのデザイナーAlbert-Jan Poolｚ氏によって制作されたフォントです。FF Dinには、20のウェイト（フォントの太さ）があります。 編集、出版物、広告、パッケージ、ブランディング、クリエイティブ産業（creative industries：知的財産権に関わるデザイン）、ポスター、看板、Webや画面の設計に適しています。なお、キリル文字とギリシャ語の書記体系については、サポートが限られています。   2. Brandon Grotesque デザイナー：Hannes vonDöhren デザインされた年：2010 発行者：HVD Fonts Brandon Grotesqueは、6つのウェイトとそれに対応する6つのイタリック体から成る、有名なサンセリフのフォントです。このフォントは、可読性を高めるために光学的な修正を加えた幾何学的形状から、インスピレーションを受けています。 Brandon Grotesqueは機能的かつエレガントなフォントです。ウェイトの太さをthinで色をブラックにすると、展示デザインに適しています。 Brandon Grotesqueは、洗練されたプロフェッショナルな印象を与えるデザインを生み出すには良い選択です。また、西ヨーロッパ言語だけでなく、中欧および東ヨーロッパ言語をサポートする拡張文字のセットもあります。   [PR] Webデザインで副業する学習方法を動画で公開中3. Century Gothic デザイナー：Monotype Design Studio　Sol Hess　Morris Fuller Benton デザインされた年：1990-1995-2007 発行者：Monotype Century Gothicは、Futuraフォントの競合他社の2つの書体から派生したフォントですが、Futuraフォントの影響も強く受けています。 軽くて広々とした印象の書体であり、クリーンな縁取りを備えた、細部まで完璧なフォントです。見出しや大きな看板のデザインには理想的です。   4. Proxima Nova デザイナー：Mark Simonson デザインされた年：2005 発行者：Mark Simonson Proxima Novaのフォントファミリーは、有名なProxima Sansフォントの完全な復古版です。OpenTypeフォント機能は48個に拡張されました。 3つの幅には、それぞれ16のフォントが対応しています。 人間的な比率と幾何学的なデザインを組み合わせた、スタイリッシュなフォントです。ほとんどのラテン語系言語の文字をサポートしています。   5. Avenir デザイナー：Adrian Frutiger デザインされた年：1988 発行者：Linotype Avenirも、Futuraフォントの影響を受けたフォントですが、幾何学的なデザインを取り入れたフォントではありません。 垂直方向の文字が、水平方向の文字とアセンダ （アルファベット文字において、標準的な高さのx文字よりも背の高いb、fなどの文字の、上に突き出た部分）よりも太い幅になっているデザインです。 可読性が重視されるテキストに最適です。   6. Helvetica Neue デザイナー：Edouard Hoffmann デザインの日付：1983 発行者：Linotype Helveticaは世界で最も人気のある書体の1つであり、マーケティングが成功した例です。 このフォントファミリーは51種類のウェイトから構成されています。 古典的なサンセリフのフォントであり、時代を超えたニュートラルなデザインです。あらゆるコミュニケーションや情報媒体に適したデザインです。   7. Avenir Next Pro デザイナー：Adrian Frutiger　Akira Kobayashi デザインされた年：2004～2007 発行者：Linotype Avenirファミリーは、これまでに作成されたフォントファミリーの中で最も優れたものの1つですが、画面上での表示の問題があったため、これを解決するために代替フォントのAvenir Nextが開発されました。 32種類のフォントから構成されています。：それぞれに8種類のウェイトがあり、ローマ字とイタリックに対応しています。また2種類の幅を選択できます。 グリフは、小文字と同じ高さの大文字、下付き文字、上付き文字、合字を含むように拡張されました。   8. Isidora デザイナー：Enrique Hernandez デザインされた年：2016 発行者：Latinotype Isidoraは、機能性に重点を置いて開発された、現代的な幾何学的フォントです。表現力豊かでフレンドリーな印象ですが、合理性を兼ね備えたフォントでもあります。 Isidoraは28種類のフォントから構成されていて、サブファミリーフォントとして、7ウェイトの2つのフォントがあります。 ロゴ、ブランディング、見出し、パッケージ、Web上での利用、出版物に最適です。複数の言語をサポートしているユニバーサルデザインフォントです。   9. Sagona デザイナー：Rene Bieder デザインされた年：2016 発行者：Rene Bieder 力強いセリフ体を特徴とするフォントです。 小さな文字サイズのテキストと見出しの両方に使用できる汎用の書体です。このフォントファミリーはイタリック体に対応していて、9つのウェイトがあります。 OpenTypeフォントの機能として、代替グリフ、合字、オールドスタイル数字などが幅広くサポートされています。   10. Trade Gothic デザイナー：Jackson Burke デザインされた年：1948 発行者：Linotype Trade Gothicは曲線的デザインのサンセリフ体のフォントです。サンセリフ体のフォント特有の厳密さを破っています。 Trade
Webデザイン

【Webデザインに必須！】無料で使えるおしゃれなフォントまとめ！

お洒落で見やすいフォントの中から、無料で商用利用も可能なものをまとめました。 最近では記事を発信しているメディアも増えてきているので、よりフォントが重要になってきています。フォントひとつでサイトの印象を大きく変えるので、妥協せずに満足できるものを選びましょう。 (※商用利用については規模などによって使用料の発生するものも含まれています。各配布サイトの利用規約をご確認ください。)   なお本記事は、TechAcademyのWebデザインオンラインブートキャンプのカリキュラムをもとに執筆しています。   フロップデザインフォント シンプルで使いやすいゴシック体フォント。文字が読みやすいように工夫してデザインされています。 フロップデザインフォント   ピグモ01 絵のようなユニークなフォント。第二水準漢字などにも対応しています。 ピグモ01   [PR] Webデザインで副業する学習方法を動画で公開中ほのかアンティーク角 アンチック体の、優しい雰囲気を持つフォントです。 ほのかアンティーク角   はれのそら明朝 明朝系のすっきりしたフォント。 はれのそら明朝   しねきゃぷしょん 洋画の字幕のような雰囲気を持つフォントです。 しねきゃぷしょん   刻ゴシックフォント 漢字に対してひらがなとカタカナが少し小さく縦長にデザインされたゴシックフォント。 刻ゴシックフォント   セプテンバー ペンで紙に書いた文字から作られた、やわらかい雰囲気を持ったフォント。 セプテンバー   櫻井幸一フォント　フェルトペン フェルトペンで書かれた手書き風のフォント。 櫻井幸一フォント　フェルトペン   刻明朝フォント 「刻ゴシックフォント」の明朝体版。クラシックな雰囲気が特徴です。 刻明朝フォント   刻丸明朝かな 「刻明朝フォント」のひらがなとカタカナだけを少し丸みのあるデザインにアレンジしたもの。(漢字は含まれていません) 刻丸明朝かな   なごみ極細ゴシック 漢字は直線的に、かなは曲線的にデザインされたフォント。 なごみ極細ゴシック   超極細ゴシック体 とても細いゴシック体のフォントです。 超極細ゴシック体   青梅ぷらすゴシックP シンプルでやわらかい雰囲気のゴシック体フォント。 青梅ぷらすゴシックP   ほのか丸ゴシック 漢字より少しだけかな表記を小さくした丸ゴシック体フォントです。 ほのか丸ゴシック   明朝體フォント むつき 古い本の活字のような独特の明朝体フォント。 明朝體フォント むつき   小瑠璃フォント 丸めデザインのすっきりしたフォント。 小瑠璃フォント   851手書き雑フォント 手書き風のフォント。絵文字や各種外国語にも対応しています。 851手書き雑フォント   ロゴたいぷゴシック-コンデンスド 少し縦長にデザインされたゴシック体フォント。 ロゴたいぷゴシック-コンデンスド   こころ明朝体 角丸の明朝体フォント。やさしい雰囲気を持っています。 こころ明朝体   うつくし明朝体 横書きの見栄えを意識したオールド系明朝体フォント。 うつくし明朝体   以上、サイトの見栄えがおしゃれに見えるフォントを紹介しました。 明朝体ひとつとっても様々な種類のフォントが存在します。ぜひいろいろ見てサイトに活用してみてください。 [お知らせ]TechAcademyでは初心者でも最短4週間でオリジナルWebサイトを公開できるWebデザインオンラインブートキャンプを開催しています。
Webデザイン

【Webデザインに必須！】無料で使える！女性っぽくかわいいフォントまとめ

女性が好きそうな可愛いサイトにしたいけど、デザインがいまいちピンとこない… そういうときは、フォントを可愛いものに変えてみましょう！ そこで今回は、可愛らしい・女性らしい雰囲気のフォントの中から、無料で商用利用も可能なものをまとめました。 皆さんもぜひ使ってみてください！ (※商用利用については規模などによって使用料の発生するものも含まれています。各配布サイトの利用規約をご確認ください。)   なお本記事は、TechAcademyのWebデザインオンラインブートキャンプのカリキュラムをもとに執筆しています。   こども丸ゴシック 小学校の1年生から3年生までに習う漢字が入った、手書き風のフォントです。 こども丸ゴシック   やまフォント 可愛らしい手書き風のフォント。商用での利用は報告とクレジットの表記が必要になります。 やまフォント   [PR] Webデザインで副業する学習方法を動画で公開中やさしさゴシック 見やすく、優しい印象のゴシック体フォント。 やさしさゴシック   Holiday（ホリデイ）-MDJP05 複雑な漢字にも対応した手書きフォント。顔文字なども使用できます。 Holiday（ホリデイ）-MDJP05   たんぽぽ 縦長のひらがな用フォント。丸くて明るいイメージのデザインです。 たんぽぽ   うずらフォント 手書き風のフォント。第二水準の漢字などにも対応しています。 うずらフォント   JKゴシック 名前の通り、女子高生風の細いゴシック系フォント。 JKゴシック   ふんわりうさぎフォント ひらがな・カタカナ・アルファベットと一部の記号に対応した手書き風フォント。 ふんわりうさぎフォント   ふわもこフォント 雲のような形のユニークなフォント。ひらがな・カタカナ・英字・一部の記号に対応しています。 ふわもこフォント   ゆずポップ 4つの太さが選択できるポップ体フォント。 ゆずポップ   ＫＦひま字 横書き・縦書き対応の手書き風かわいいフォント。ギリシャ文字などにも対応。 ＫＦひま字   ねずみ 横書き専用のフォント。漢字と一部の記号は含まれません。綺麗な読みやすいデザイン。 ねずみ   よもぎフォント 縦書きも可能な等幅の手書きフォント。半角英数・カタカナでの表記も可能です。 よもぎフォント   しろうさぎ ひらがな用の太め・可愛らしいフォント。 しろうさぎ   タロ子フォント 筆ペンでの手書き風フォント。基本的な漢字にも対応しています。 タロ子フォント   mini-わくわく 丸い書き文字フォント。漢字は含まれませんが太めの丸ゴシック体と組み合わせて一緒に使うことができます。 mini-わくわく   やさしさゴシック手書き やさしさゴシックに手作り感を加えたもの。より柔らかい印象になっています。 やさしさゴシック手書き   ゆたココ 丸文字手書き風フォント。半角英数字に対応しています。 ゆたココ   ぼくたちのゴシック 子供向けな雰囲気のシンプルなゴシック体フォントです。 ぼくたちのゴシック   うたミンフォント 歌う文字をテーマにした音符のようなユニークなフォント。 うたミンフォント   以上、無料で使える可愛い系フォントを紹介しました。全てフリーフォントなので、初心者の方でも気軽に利用できます。 紹介したフォントを使って、可愛いサイトデザインにチャレンジしてみてください！ また、現役エンジニアから学べる無料のプログラミング体験会も実施しているので、ぜひ参加してみてください。 [お知らせ]TechAcademyでは初心者でも最短4週間でオリジナルWebサイトを公開できるWebデザインオンラインブートキャンプを開催しています。
Webデザイン

CSSでフォントをメイリオにする方法を現役デザイナーが解説【初心者向け】

CSSでフォントをメイリオにする方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 CSSについてそもそもよく分からないという方は、CSSの書き方について解説した記事をまずご覧ください。   なお本記事は、TechAcademyのオンラインブートキャンプ、Webデザイン講座のCSSカリキュラムをもとに執筆しています。   田島悠介 今回は、CSSに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 フォントをメイリオにする方法について詳しく説明していくね！ 大石ゆかり お願いします！   CSSでフォントをメイリオにする方法について CSSでフォントをメイリオにする方法について解説してみます。   メイリオというフォントについて まずは、メイリオというフォントについておさらいしましょう。メイリオは、Windows OSにて使われているフォントで、従来のMSゴシック、MSPゴシックに代わって採用されたシステム用の書体のことです。 システム用書体なので、WindowsOSの入ったマシンを起動したり、ブラウザなどであらゆる箇所に表示されています。なめらかに・視認性・可読性に優れたフォントです。 語源は日本語の「明瞭」から来ており、明瞭に、視認性・可読性を向上させるために開発されました。漢字・ひらがな・カタカナ・数字それぞれがゴシック体です。 従来のMSゴシックからは、大きく形が変わり、Windows10など最新バージョンでも、バージョンアップされた「メイリオUI」として引き続き採用されています。 【参考資料】メイリオについて ちょっと難しい用語も出ていますが、以下は国内大手のフォントメーカー「モリサワ」のフォント解説です。 参考資料として読んでみてください。 Windows Vista以降のシステム表示用に採用されたフォントで、フォントの名称は「明瞭」に由来します。 従来のMS UIゴシックよりも高い可読性を目標に作られました。 画面描画用のビットマップを持たないため、すべてのサイズでClearTypeによるスムージング処理が行われます。 文字セットはWindows Vistaで採用されたJIS X 0213：2004に対応し、Windows XPまでに搭載されていたフォントとは122文字（マイクロソフト社公表文字数）の字形が異なります。キリル文字やプロポーショナルのギリシア文字などでメイリオ固有の文字セットを持っているため、この文字セット自体を「メイリオ文字セット」と呼ぶことがあります。 「メイリオ文字セット」をはじめとするマイクロソフト社の文字セットは、主要フォントメーカが基本としている文字セット「Adobe-Japan1」に比べて、非常に独特で、JIS2004対応フォント「MS明朝」「MSゴシック」、そして「メイリオ」の間であっても、完全な互換性はありません。 モリサワ フォント用語より引用 また、メイリオUIについての詳しい解説は以下のサイトも参考になります。 意外と知らないメイリオUI・Yu Gothic UI。UIフォントとはなんなのか（外部サイト）   [PR] Webデザインで副業する学習方法を動画で公開中サイト内のフォントをメイリオ指定してみよう！ font-familyを使おう フォントを指定するには、CSSの「font-family」を使います。サイト内で文字の表示を指定するCSSです。WordやEXCELなどで、文字を統一するためにインストールされたフォントを選んだ経験があるのではないでしょうか？それと同じで、制作者側から書体を指定します。 body{ font-family:フォント名; } 実際にフォントをメイリオ指定する 実際に記述する場合は、以下のようになります。実際は、古いバージョンのWindows向けユーザー、Mac向けユーザーへも配慮するのでもう少したくさんの記述をしますが今回はメイリオだけ。とします。 body{ font-family:'メイリオ', 'Meiryo', sans-serif; } フォント名は、日本語表示の場合、シングルクォーテーションまたはダブルクオーテーションでくくります。あれ？2つはいっているじゃないか、と思われたかもしれません。これは、例えば、OSが英語である場合も想定して、という意味です。OSが英語などである場合は、Wordなどで出てくるフォントもすべて英語ベースになります。 なので、日本語向けOSのカタカナ表記、英語ベースのOSの場合も考慮し、フォント表示も英語と2種類で表記しておいたほうが良いのです。 最後に入れているのは、メイリオがOSにインストールされていない場合を想定して、「メイリオも無ければ、同じゴシック体表示をして欲しい！」という意味です。   【参考資料】メイリオが入っていないMacOSではどうなるの？ プリインストールされていないMacOSでは、font-familyで指定してもメイリオでは表示されません。 端末にフォントデータが入っていないからです。 ここは仕方ありません。Macでプリインストールされているフォントも添えておくことがベターでしょう！ body{ font-family:'メイリオ', 'Meiryo','ＭＳ ゴシック','Hiragino Kaku Gothic ProN','ヒラギノ角ゴ ProN W3',sans-serif; } 今回は、CSSでフォントをメイリオにする方法を解説してみました。   監修してくれたメンター ゆかちん先生 フリーランスのクリエイティブディレクター。 制作会社、インハウス、スタートアップ企業などで、グラフィックデザイン・ウェブデザイン・アプリデザイン、ウェブディレクションなどに携わってきました。TechAcademyではWeb Designコース・ウェブディレクションコース・WordPressコースを担当しています。   大石ゆかり 内容分かりやすくて良かったです！ 田島悠介 ゆかりちゃんも分からないことがあったら質問してね！ 大石ゆかり 分かりました。ありがとうございます！ TechAcademyでは初心者でも、オリジナルWebサイトを公開できる、オンラインブートキャンプを開催しています。 また、現役エンジニアから学べる無料体験も実施しているので、ぜひ参加してみてください。
CSS

PHPで全角文字と半角文字を変換する方法を現役エンジニアが解説【初心者向け】

今回は、PHPで全角文字と半角文字を変換する方法について解説します。実際のコードをもとに解説していきますので、理解を深めていきましょう。   そもそもPHPについてよく分からないという方は、PHPとは何なのか解説した記事を読むとさらに理解が深まります。   なお本記事は、TechAcademyのオンラインブートキャンプPHP/Laravel講座の内容をもとに紹介しています。   田島悠介 今回は、PHPに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 PHPで全角文字と半角文字を変換する方法について詳しく説明していくね！ 大石ゆかり お願いします！   全角文字や半角文字とは 全角文字とは、現在表示されている日本語表示のような文字を意味します。例えば全角文字の数字の１は１と表示されます。 半角文字とは、全角文字の半分程度のサイズの文字を意味します。例えば半角文字の数字の1は1と表示されます。 全角文字と半角文字の数字を実際に並べて比較するとこのようになります。   １（全角文字） 1（半角文字）   全角文字と半角文字を変換する方法 全角文字と半角文字を変換するためには、 mb_convert_kana()という関数を利用します。 mb_convert_kana()は、PHP4.0.6以降のphp4系、 PHP5系、 PHP7系で利用することが可能です。   基本の書き方 mb_convert_kana ( 変換する文字 , 変換オプション)   解説 mb_convert_kanaの()内に引数を指定することで変換することが可能です。 引数とは、関数を利用する際に指定する値です。引数を変化させることで、柔軟に関数を操作することが可能です。 変換する文字には、実際の文字列を指定してもよいのですが、変数を利用することが多いです。変数とは、値を入れる箱のようなもので、mb_convert_kana関数を利用する前に、変数内に変換したい文字列を格納することで、柔軟性の高い処理が可能になります。 変換オプションに様々なオプション値を指定することで、具体的な変換処理が可能です。   変換オプション例 rを指定すると、 「全角」英字を「半角」に変換することが可能です Rを指定すると、 「半角」英字を「全角」に変換することが可能です nを指定すると、 「全角」数字を「半角」に変換することが可能です N を指定すると、「半角」数字を「全角」に変換することが可能です a を指定すると、「全角」英数字を「半角」に変換することが可能です A を指定すると、「半角」英数字を「全角」に変換することが可能です sを指定すると、 「全角」スペースを「半角」に変換することが可能です S を指定すると、「半角」スペースを「全角」に変換することが可能です kを指定すると、 「全角カタカナ」を「半角カタカナ」に変換することが可能です Kを指定すると 、「半角カタカナ」を「全角カタカナ」に変換することが可能です hを指定すると、 「全角ひらがな」を「半角カタカナ」に変換することが可能です H を指定すると、「半角カタカナ」を「全角ひらがな」に変換することが可能です cを指定すると、 「全角カタカナ」を「全角ひらがな」に変換することが可能です Cを指定すると、 「全角ひらがな」を「全角カタカナ」に変換することが可能です Vを指定すると、 濁点付きの文字を一文字に変換します。注意点として、Vを指定する場合は、KやHと一緒に指定します   [PR] Webデザインで副業する学習方法を動画で公開中実際に書いてみよう サンプルコード <?php $str = 'ﾃｯｸｱｶﾃﾞﾐｰＴＥＣＨＡＣＡＤＥＭＹ'; $str = mb_convert_kana($str, "KVa"); echo $str; ?>   表示結果 テックアカデミーTECHACADEMY   解説 1行目の<?phpでは、PHPプログラムを開始するということを宣言しています 2行目の$str = ‘ﾃｯｸｱｶﾃﾞﾐｰＴＥＣＨＡＣＡＤＥＭＹ’;では、変数strに、「半角カタカナ」のﾃｯｸｱｶﾃﾞﾐｰと、「全角」英数文字のＴＥＣＨＡＣＡＤＥＭＹを代入しています 3行目の、$str = mb_convert_kana($str, “KVa”);では、2行目で代入した文字である、「半角カタカナ」を「全角カタカナ」に変換し、「全角」英数字を「半角」に変換したあと、変数strに代入しています 4行目のecho $str;では、変数strの中身を表示しています。表示結果では、半角カタカナが全角カタカナに変換され、全角英数文字が半角英数文字に変換された、テックアカデミーTECHACADEMYが表示されています 5行目の?>は省略可能です。PHPの処理が終了することを意味しています   今回は、PHPで全角文字と半角文字を変換する方法について解説しました。   筆者プロフィール 中本賢吾（なかもとけんご） アジマッチ有限会社　代表取締役社長 開発実績：PHPフレームワークを利用した会員制SNS・ネットショップ構築、AWSや専用サーバー下でLinuxを使用したセキュアな環境構築、人工知能を利用したシステム開発、店舗検索スマホアプリ開発など。 地域の職業プログラマー育成活動では、小学生がオリジナルAndroidアプリをGooglePlayでリリース、NHK Whyプログラミング入賞、全国Programing Festival入賞。ゲームで遊ぶより作ろうぜ！を合言葉に、小学生でも起業できる技術力を育成可能で有ることを証明し続けている。   大石ゆかり 内容分かりやすくて良かったです！ 田島悠介 ゆかりちゃんも分からないことがあったら質問してね！ 大石ゆかり 分かりました。ありがとうございます！   TechAcademyでは、初心者でもPHPやフレームワークのLaravelを使ってWebアプリケーション開発を習得できるオンラインブートキャンプPHP/Laravel講座を開催しています。 挫折しない学習方法を知れる説明動画や、現役エンジニアとのビデオ通話とチャットサポート、学習用カリキュラムを体験できる無料体験も実施しているので、ぜひ参加してみてください。
PHP

CSSでfont-familyを使ってフォントを指定する方法【初心者向け】

CSS初心者向けに、font-familyを使ってフォントを指定する方法を解説する記事です。 CSSの基礎がわからない場合は、CSSの書き方の記事を先にお読みください。   本記事は、TechAcademyのWebデザインオンライン講座のCSSのカリキュラムをもとに執筆しています。   なお、今回の記事の内容は動画でもご覧いただけます。 テキストよりも動画の方が理解しやすいという場合はぜひご覧ください。   田島悠介 今回はfont-familyプロパティについて解説しよう。 大石ゆかり 田島メンター！！font-familyは何をするんですか～？ 田島悠介 文字のフォントを指定するプロパティなんだ。値で示されたフォントが文字列に適用されるよ。実際の例で見てみよう。 大石ゆかり 分かりました！   font-familyとは CSSのfont-familyプロパティを使用することによって、文字列のフォントを指定することができます。Webページを見せる際のフォントを指定したい場合は設定しましょう。   事前準備 事前準備として、HTMLファイルとCSSファイルをそれぞれ用意しました。なお、CSSのファイルは「sample.css」にすることにします。 ぜひ自分のPCでもやってみましょう。   HTMLファイル： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <link rel="stylesheet" href="sample.css" type="text/css"> </head> <body> <p class="sample1">ここに文章を表示</p> </body> </html>   [PR] Webデザインで副業する学習方法を動画で公開中font-familyを使う 使い方は簡単で、「font-family:」のあとに指定するフォントを記述するだけです。 例えばこのようになります。sans-serifはゴシック体のことです。 p.sample1 {font-family:sans-serif; } ブラウザで表示させると、このように文字列がゴシック体で表示されています。   田島悠介 値に”sans-serif”を入力したことで、文字列にフォントが適用されたよ。 大石ゆかり この部分によってフォントの種類が変わるんですね。 田島悠介 そうだね。値を変更してもう一度画面で確認してみよう。   今度は明朝体の「serif」にしています。先ほどの、sans-serifの部分をserifに変えるだけです。 p.sample1 {font-family:serif; }   ブラウザで表示させると、明朝体になりました。     また、フォントの指定は”MS 明朝”というようにフォントの「名称」で指定することもできます。 この際に名称を””などの引用符で囲んで入力します。ここでは「メイリオ」のフォントを指定しています。 p.sample1 {font-family:"Meiryo"; }   先ほどのようにブラウザ上ではメイリオのフォントになりました。     font-familyの書き方について注意点 font-familyの書き方について注意点です。これらのフォントを表示させるためには、作成者ではなく閲覧者のPCに該当のフォントがインストールされている必要があります。また、WindowsとMacではインストールされているフォントが異なるため、注意が必要です。 もしも閲覧者側に該当のフォントがなかった場合のために、あらかじめ次に表示させる候補を用意することができます。 その場合は下記のように記述します。 font-family: 候補1,候補2,候補3,フォントの種類; 「,(カンマ)」を入れる形で指定しておくと、候補1のフォントがなかった場合は候補2、候補2もなかった場合は候補3というようにフォントが決まっていきます。 また、英語フォントと日本語フォントの両方を指定する場合は、先に英語フォントを指定します。そうすることで、アルファベットには英語フォントが、日本語には日本語フォントが使用されるようになります。 最後の「フォントの種類」とは、指定した全てのフォントがインストールされていなかった場合に使用されるキーワードです。以下の中から指定できます。 フォントの種類 使用されるフォント serif 明朝体系フォント sans-serif ゴシック体系フォント cursive 筆記体系フォント fantasy 草食系フォント monospace 等幅系フォント   具体的な記述方法はこちらです。 p.sample1 {font-family: "游ゴシック","arial unicode ms",sans-serif;} すると、「游ゴシック」がインストールされていないPCでは、2つ目に指定していた「arial unicode ms」が、両方インストールされていないPCでは、PCにインストールされているフォントの中からゴシック体系のフォントで文字列が表示されます。   font-familyの書き方の例 最後に、実際に使われている、font-familyの書き方の例をいくつか見ていきましょう。 ※ブラウザはchrome、言語は日本語で確認した例です。 Google https://www.google.co.jp/ font-family: arial, sans-serif;   Twitter https://twitter.com/ font-family: Arial, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, メイリオ, Meiryo, "ＭＳ
CSS

あなたの目的に合わせて学べるコース

副業したい方

Web制作の力を身につけ
副業までサポート

はじめての副業コース

転職したい方

未経験から16週間で
エンジニアに

エンジニア転職保証コース

スキルアップしたい方

AIも統計解析もできる
Pythonを学ぶ

Pythonコース

※ 経済産業省の第四次産業革命スキル習得認定講座で、厚生労働省指定の専門実践教育訓練給付制度の対象です。条件を満たすことで支払った受講料の最大70％（最大306,460円）が給付金として支給されます。詳しくは エンジニア転職保証コース のページ内の注意事項をご確認ください。

TechAcademyから
現役エンジニアの方へ
お知らせ

テックアカデミーGAIナレッジベース
TechAcademy（テックアカデミー） Webデザインコース Webデザイン 【Webデザインに必須！】無料で使えるかっこいいフォントまとめ！