今回はCSSでフォントを指定する方法を説明します。
フォント一つでサイトの印象が大きく変わります、実際の業務でも必要になるので、覚えておきましょう。
実際にCSSでフォントを指定する方法を説明していきます。
フォントの指定には「font-family」というプロパティを使います。
また、フォントの指定には「フォントファミリ名」で指定する方法と
「総称ファミリ名」で指定する方法があります。
まず、フォントファミリ名での指定方法を説明します。
【書き方について】
p{
font-family: "MS Pゴシック";
}
︎上記のように書くことでフォントを指定することができます。
フォントの指定もWebページの制作において大事な要素の一つになります。
また、候補としていくつか設定することができます。
font-family: 候補1,候補2,候補3;
上記のように”,”(カンマ)で区切って複数の候補を設定することで、候補1が使えない時、候補2のフォントを適用します。候補2が適用できない時は候補3を適用し、それを繰り返します。
また、「cursive」を指定して日本語のテキストを表示しようとすると、一部環境ではそのテキストが正常に表示されないこともあるようです。
一点注意しておきたいこととして、フォント名を指定していても、利用している環境にそのフォントがインストールされていなければ指定したフォントでの表示はされません。
(ただWEBフォントを使用すれば端末にインストールされたフォントに左右されずに表示できます、WEBフォントについては次回以降の記事で紹介します。)
直接のフォントの指定をしてもいいですが、最後の候補に「総体ファミリ名」を入れるようにすると良いです。
p{
font-family: "MS Pゴシック","arial black","arial narrow","sans-serif";
}
総称ファミリ名のイメージは「最後の砦」です。
もしページを開いた際にパソコンに指定したフォントが全く入っていなかった場合に
最後に指定しておきます。上記の黄色いマーカーが総称ファミリ名になります。
また、総称ファミリ名で指定する方法では、次の5種類で指定することができます。
「sans-serif」 ・・・ ゴシック体系のフォント
「serif」 ・・・ 明朝体系のフォント
「cursive」 ・・・ 筆記体系のフォント
「fantasy」 ・・・ 装飾系のフォント
「monospace」 ・・・ 等幅系のフォント
ほぼ全てのウェブサイトが総称フォントファミリーとして「sans-serif」と「serif」のどちらかを指定しています。
ゴシック体系のフォントを使いたいのであれば「sans-serif」を、明朝体系のフォントを使いたいのであれば「serif」を指定すると良いでしょう。
【HTML】
<html>
<head>
<meta charset="utf-8">
<title>cybergreen</title>
<link rel="stylesheet" type="text/css" href="sample.css">
</head>
<body>
<p class="font1">Fate/stay night Unlimitied Blade Works (fantasy)</p>
<p class="font2">Fate/Zero (sans-serif)</p>
<p class="font3">Fate/Apocrypha (cursive)</p>
</bod>
</html>
【CSS】
p.font1{
font-family: fantasy;
}
p.font2{
font-family: sans-serif;
}
p.font3{
font-family: cursive;
}
【ブラウザ表示例】
Fate/stay night Unlimitied Blade Works (fantasy)
Fate/Zero (sans-serif)
Fate/Apocrypha (cursive)
︎上記の用にしたフォントに変わりました。
以上、CSSでフォントを指定する方法を解説しました。
2つの段落に異なったフォントを設定できたり、サイトの雰囲気をフォントで変えることができるので便利です。
使う機会があると思うので使ってみてください。
皆さま、こんにちは。
今年の夏は涼しいですね。ただ天気が良くないので、なかなか出かけるのも億劫な感じでもあります。
皆さまはどんな夏をお過ごしですか？
ウェブデザインで有名なフォントと言えば、「モリサワフォント」が有名ですね。
モリサワフォントにはいろいろとメジャーで使い勝手のよいフォントがたくさん詰まっています。
実際に多くの企業のロゴやポスターなどに使われていますよね。
ただ、やはり有料なのがネックです。しかもお安くなかったりします・・・
というわけで、今回は無料で利用できるオシャレなフォントをご紹介していきたいと思います。
実際私がよく利用させてもらっている素敵な日本語フォント10選です。
ここで紹介したフォントは、無料なのにクオリティーがとても高いので、デザイナーにとって必須のフォントたちと言えるのではないでしょうか。
今回紹介できなかった素敵なフォントはまだまだありますので、次の機会に紹介いたします！
]]>前回はFont Awesomeの使い方応用編で、アイコンの大きさや色を変えたりくるくる回したりしました。
Font Awesomeを初めて使ってみると、色々なカスタマイズのアイデアが浮かぶかもしれません。
今回は応用編その２。さらに便利な使い方、面白い使い方を見ていきましょう。
ノーマルなリストは通常ul（リスト範囲）タグの中にli（個々のリスト）タグを書きます。
今回、ulに「fa-ul」というclass（「fa-ul」はul用のスタイル）、liに「fa-li」というclass（「fa-li」はli用のスタイル）をそれぞれ設定します。
以下ソースです。
<ul class=”fa-ul”>
<li><i class=”fa fa-bus fa-li”></i>バス</li>
<li><i class=”fa fa-ship fa-li”></i>船</li>
<li><i class=”fa fa-car fa-li”></i>車</li>
<li><i class=”fa fa-motorcycle fa-li”></i>バイク</li>
</ul>
以下のように表示されましたでしょうか。
- バス
- 船
- 車
- バイク
水平方向に反転させるには「fa-flip-horizontal」、垂直方向に反転させるには「fa-flip-vertical」というclassを設定します。
リストを使って書いてみましょう！
<ul class=”fa-ul”>
<li><i class=”fa fa-motorcycle fa-li fa-flip-horizontal”></i>水平方向に反転させるには「fa-flip-horizontal」</li>
<li><i class=”fa fa-motorcycle fa-li fa-flip-vertical”></i>垂直方向に反転させるには「fa-flip-vertical」</li>
</ul>
以下のように表示されます。
- 水平方向に反転させるには「fa-flip-horizontal」
- 垂直方向に反転させるには「fa-flip-vertical」
使う場面が想像できない方もいらっしゃると思いますが、「バイクが反転した」だけではなく反転させると別のものに見立てることも可能です（バイクだったら、垂直方向の反転で虫のようにも見えます・・）。
アイコンの種類が増えたような感覚ですね。
Font AwesomeではCSSファイルを自由にダウンロードすることができます。
トップページで「ダウンロード」ボタンを押します。
Font AwesomeWEBサイト
http://fontawesome.io/
- Font Awesomeトップページのダウンロードボタンを押します。
- ウィンドウが表示されるので「No thanks, just download Font Awesome 4」ボタンを押します。
ダウンロードしたファイルを自分のWEBサイトのプロジェクトフォルダに置き、CSSを独自に変更して使うことも可能です（この場合、head内にCSSへのlinkを書いてくださいね）。
あらかじめ用意されたスタイルはご紹介したものの他にも沢山ありますので、一度CSSファイルを開いて見てください♪
Font Awesomeについてはまだまだご紹介できることがたくさんあります！
今後また続編でご紹介しますので、お楽しみに！！
前回の私の記事ではFont Awesomeについてご紹介しました。
Font Awesomeを使う準備作業、基本的な使い方について解説しましたが、綺麗に表示されましたでしょうか！？
今回は応用編でアイコンのカスタマイズについてご紹介します！
前回のおさらいです。
WEBページにコメントのアイコンを表示させてみましょう。
<i class=”fa fa-comment” aria-hidden=”true”></i>
class=”fa fa-comment”に注目してください。
デフォルトで準備されているclassは2つです。
fa（フォントオーサムのアイコン全体のクラス） fa-comment（アイコンの種類）ここにアイコンの設定を書き加えます
それではアイコン設定を書き加えてみましょう。
サイズは1.3倍～5倍の5種類が用意されています。
今回2倍の大きさにしてみましょう。
<i class=”fa fa-comment fa-2x” aria-hidden=”true”></i>
アイコン２倍
クラスの書き方は下記の通りです。
fa-lg 1.3倍
fa-2x 2倍
fa-3x 3倍
fa-4x 4倍
fa-5x 5倍
アイコンをくるくる回すにはfa-spinを書き加えます。
<i class=”fa fa-comment fa-spin” aria-hidden=”true”></i>
アイコンをくるくる回す
あらかじめ用意されているスタイルはありません。
自分で文字色指定のスタイルを作りましょう。
cssファイル（またはhead内styleタグ、または直接styleタグを追加）に文字色のスタイルを作成します。
今回は赤にしてみます。
<i class=”fa fa-comment” style=”color:red;” aria-hidden=”true”></i>
以上いかがでしたでしょうか？
自分で自由に変更できると楽しくなってきますね！
アイコンのカスタマイズについてはまた続編でご紹介しますのでお楽しみに！！
皆さまこんにちは！フローラです。
突然ですがアイコンは何で表示させていますか！？
私がWEB制作の仕事をしていた数年前はアイコンは当たり前のように画像ファイルで作っていましたが、最近は画像ではなく文字で表示させる「Font Awesome（フォントオーサム）」が登場し使われています。
画像ファイルではない最大のメリットは大きさや色がスタイルシートで変更できること（わざわざ画像を作り直すことなく、手軽に変更できる！）
また、このFont Awesomeは他にも色々なメリットがあります。
- WEBページが作れれば誰でも簡単に使うことができること。
- 手軽にアイコンを回転させたり重ねたりできること。
- CSSの知識があれば色々とカスタマイズが可能！
早速詳しくみてみましょう。
- 必要ファイルをダウンロードする
- CDNを利用する（head内にリンクを書き加える）
Font Awesomeを利用するのには上記の方法がありますが、今回はより簡単な方法「CDNを利用する」方法をご紹介したいと思います。
※CMSを利用している方はプラグインで簡単に導入できる場合があります。
<head>~</head>に下記コードをコピー＆ペーストしてください。
<link rel=”stylesheet” href=”path/to/font-awesome/css/font-awesome.min.css”>
準備は以上でおしまいです！本当に簡単ですね！！
Font AwesomeのWEBサイト「Icons」のページよりHTMLをコピーし、自分のWEBページにペーストします。
- Font AwesomeのWEBサイトを表示し、「icons」をクリックしお好みのアイコンを表示する
- HTMLをコピーし、自分のWEBページに貼り付けます。
基本設定は以上です！
表示されましたでしょうか？
次回はアイコンのカスタマイズなどについてご紹介したいと思います。