スタート!CSS入門

フォントファミリー

全333コースを10日間無料で

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
フォントを指定するには、font-familyプロパティを使います。ここでは、使用時の注意点もふまえて、font-familyプロパティの使い方を紹介します。
講師:
04:59

字幕

このレッスンでは font を指定するためのfont プロパティについて紹介します。font-family プロパティに使える値は font-family 名総称ファミリー 名です。font-family 名は使いたいfont-family の名前を指定します。総称ファミリー 名はのちほど紹介するキーワードを指定します。これらの値はカンマ区切りで指定でき書いた順番が優先順位になります。そのほかの仕様は御覧の表の通りです。では実際に CSS を書いてみましょう。編集画面とウェブブラウザを開きます。ここではウェブページ全体に対してverdana という font を指定するよう書いてみます。verdana は英語用の font ですのでアルファベットと数字の部分にのみ適用されることに注意してください。ウェブページ全体の font-family を変更するには body 要素を使います。body 要素に対してfont-family を使ってfont を verdana に設定します。ウェブブラウザを見るとアルファベットと数字の部分に verdana が適用されました。次に windows に搭載されているメイリオという日本語 font を指定してみましょう。 verdana の後ろにカンマで区切ってメイリオと指定します。font-family が日本語だったり名前の中に半角スペースが含まれる場合は必ず引用符でくくります。引用符は一重でも二重でも構いません。ウェブブラウザを確認するとfont にメイリオが適用されています。なお、ここで注意すべき点があります。font-family プロパティでfont を指定してもそのウェブページを見ているユーザーが指定された font を持っていない時は指定が無視されます。例えばメイリオはwindows 以外の環境はデフォルトでインストールされていません。そのため font を指定するときは総称ファミリー も合して指定することをお勧めします。総称ファミリー はウェブページを見ているユーザーの環境の中から適切な font を選択し適用するしくみです。総称ファミリー のリストを確認してみましょう。総称ファミリー は全部で五つありそれぞれキーワードとして値に指定できます。1つめはセリフです。これは日本語では明朝体にあたります。二つ目は sans-serif です。これは日本語ではゴシック体にあたります。三つ目は cursive です。 アルファベットを続けてかくことの筆記体です。四つ目は fantasy です。特殊な装飾によってデザインされた font です。最後は monospace です。すべての文字が同じ幅で使われているいわゆる等幅 font です。プログラムのソースを表示するときなどに使います。では実際に総称ファミリー を指定してみましょう。先ほどのメイリオの指定の後にカンマ区切りで sans-serif日本語のゴシック体にあたるfont を指定します。この環境ではメイリオが適用されるため見た目は変わりませんがメイリオがインストールされていない環境ではゴシック体にあたる font が適用されます。このように font-family プロパティを使う時にはウェブページを閲覧する多種多様な環境を想定してfont-family と総称ファミリー 名を併用することをお勧めします。このレッスンでは font を指定するためのfont-family プロパティについて学びました。

スタート!CSS入門

CSSはWebページに視覚的な表現、つまりスタイルを与えるための言語です。HTMLと組み合わせることで、より自由なデザインをウェブ上で実現できます。このコースでは初めてCSSに触れる方でも体系的な理解が得られるように、Web標準としての仕様の成り立ちからさまざまな文法、ボックスモデルなどの基本概念まで幅広い内容を解説します。

5時間21分 (71 ビデオ)
現在、カスタマーレビューはありません…
 
ソフトウェア・トピック
価格: 3,990
発売日:2014年11月25日

このコースは、「オンデマンド」でご利用可能であり、ダウンロードすることもオンラインで見ることもできます。

ダウンロードすると、オフラインでコースを使用し、豊富なインターフェースをフルに活用できます。複数のデバイスを使用したり、 一度に全コースをダウンロードしたくない場合は、アカントにログインして、ストリーミング・ビデオとしてコースのレッスンを視聴してください。

ビデオトレーニングをお楽しみいただけますように! お問い合わせは、cs-jp@lynda.com宛までご連絡ください。