新・元地方の中規模印刷会社で苦悩するWebデザイナー改めWebディレクターの日記

自由な20代、窮屈な30代を経て、遂に40代になっちまったWebディレクター&パソコン講師の覚書と思う言(こと)。略称【ちほちゅう】

*

CSS2.1まとめ書き-font編(HTML・CSSリファレンス)

   

  • このエントリーをはてなブックマークに追加

1年以上前の記事です。内容が古い可能性があります。

HTML5やCSS3がそろそろ出てきそうなこの時期に今更感漂いますが、
現在多く使われているCSS2に関して、プロパティのまとめ書きについてまとめてみました。

まずは、フォント(Font)周りから。

スポンサーリンク
 

まとめ書きの前にそれぞれの個別のプロパティを解説しておきます。
実際よく使われる書き方で解説します。

font-size:14px;

フォントのサイズを指定します。
上記はフォントのサイズを14pxにする場合の例。
他に%やキーワード(xx-small、medium、x-large等)で指定することもできます。

font-weight:bold;

フォントを太くしたい場合、上記のように書きます。
他に数値(100~900で100刻み)で指定することも可能です。

font-style:italic;

フォントをイタリック体(斜体)にしたい場合、上記のように書きます。

font-variant:small-caps;

フォントをスモールキャップス(small caps)にしたい場合、上記のように書きます。
ただし、日本語では余り使うことはありません。

font-family:”MS Pゴシック”,”MS PGothic”,Osaka,sans-serif;

フォントの書体を設定したい場合、上記のように書きます。
フォント名かキーワード(sans-serif、serif等)を順に「,」で区切って書くと左から優先的にある書体を表示します。
フォント名にスペースが入る場合はクォーテーションで囲む必要があります。
「sans-serif」はゴシック系のフォント。「serif」は明朝系のフォントから適当なフォントを選んで表示してくれます。

line-height:1.5;

DTP業界では行送りと呼ばれる行と行の間のスペースを設定します。
上記の表記の場合は文字のサイズの1.5倍(行間は0.5倍)を行送りとして設定しています。
数値+単位で設定(20px等)することも可能です。

で、それぞれのプロパティをfontプロパティを使って半角スペースで区切ることでまとめて書くことができるんですが、記入するプロパティの順番と、必ず設定しなければならない必須プロパティを気にしないといけません。
基本的な書き方はこんな感じになります。(上記同様の設定をまとめて書いてみます。)

font:bold italic small-caps 14px/1.5 “MS Pゴシック”,”MS PGothic”,Osaka,sans-serif;

順番を注意すべき点は font-size(14px)→line-height(1.5)→font-family(”MS Pゴシック”,”MS PGothic”,Osaka,sans-serif)。
この前にfont-style(italic)、 font-weight(bold)、 font-variant(small-caps)が入りますがこちらは順不同でも構いません。
つまり、

font:small-caps italic bold 14px/1.5 “MS Pゴシック”,”MS PGothic”,Osaka,sans-serif;

でもいいわけです。

それと、font-size、font-familyは省略することができません。
したがって

font:bold 14px “MS Pゴシック”,”MS PGothic”,Osaka,sans-serif;

はOKですが、

font:bold 14px/1.5;

はNGということになります。

まとめます。(プロパティ名にて表記)

font:[font-style font-weight font-variant] font-size/line-height font-family;

大括弧([])内順不同可、赤字必須。

 - Webデザイン, デザイン

アドセンス広告メイン

Message

メールアドレスが公開されることはありません。

  関連記事

画像の下にどうしても隙間が残る場合はタグにvertical-align:bottomが正解【Webデザイン・CSS】

1年以上前の記事です。内容が古い可能性があります。これは知らなかった。。というか …

モバイルサイトを本格的に始めよう

1年以上前の記事です。内容が古い可能性があります。これからはケータイだのなんだの …

no image
使えない検索サイト「Dooggle」

1年以上前の記事です。内容が古い可能性があります。なんだか最近新しい検索サイトが …

Webデザイン時のHTML・CSSコーディングにおけるCSSセレクタの優先順位の出し方

1年以上前の記事です。内容が古い可能性があります。WebデザインにおいてHTML …

no image
日本人に読めないフォント「Electroharmonix」が本当に読めない

1年以上前の記事です。内容が古い可能性があります。日本人に読めないフォントという …

ツイッター(Twitter)を新しいレイアウトにしてみた

1年以上前の記事です。内容が古い可能性があります。最近、ちょこちょこ今までのレイ …

no image
今、ネットではやっているもの。

1年以上前の記事です。内容が古い可能性があります。ねこ鍋、FX、twitter、 …

携帯サイト(ケータイサイト)の作り方Part2

1年以上前の記事です。内容が古い可能性があります。携帯サイト作成に関するすばらし …

no image
全てはWebに踏襲される「Skype」も「Kindle」も【今週のトピック】

1年以上前の記事です。内容が古い可能性があります。何でもかんでもWebブラウザさ …

紙サイズ一覧Web対応版

1年以上前の記事です。内容が古い可能性があります。実は僕、印刷会社にいながらもち …

血液型オヤジ