新・元地方の中規模印刷会社で苦悩する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

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

  関連記事

Webデザイナーピンチ!!15分でサイトが作れる「みんなのビジネスオンライン」

1年以上前の記事です。内容が古い可能性があります。中小企業経営者にとっては朗報、 …

実はユーザーはオープンよりもクローズドを求めている

1年以上前の記事です。内容が古い可能性があります。何かとオープン化オープン化とい …

no image
個人情報を守れ

1年以上前の記事です。内容が古い可能性があります。今回は個人情報といってもセキュ …

WordPress(ワードプレス)で「text-indent:-9999」が効かない時の対処法 #wp

1年以上前の記事です。内容が古い可能性があります。先日、久しぶりにWordPre …

no image
レイアウトが整っている方がCTRは落ちるの法則

1年以上前の記事です。内容が古い可能性があります。漠然となのですがこれ、以前から …

no image
コンバージョン率を上げるランディングページのコツ

1年以上前の記事です。内容が古い可能性があります。□クリック率を上げるバナー広告 …

no image
Ajax

1年以上前の記事です。内容が古い可能性があります。Ajaxってのがはやっているら …

no image
画像共有サイト(写真共有サイト・フォトシェアリング)ってたくさんあるんだね

1年以上前の記事です。内容が古い可能性があります。前記事からの流れで画像共有サイ …

no image
エロパワー

1年以上前の記事です。内容が古い可能性があります。ビデオが一般に普及したのはアダ …

センタリングさせるデザインで「absolute」が使えない【CSS】

1年以上前の記事です。内容が古い可能性があります。先日、CSSでセンタリングさせ …

血液型オヤジ