CSS2.1まとめ書き-font編(HTML・CSSリファレンス)
1年以上前の記事です。内容が古い可能性があります。
HTML5やCSS3がそろそろ出てきそうなこの時期に今更感漂いますが、
現在多く使われているCSS2に関して、プロパティのまとめ書きについてまとめてみました。
まずは、フォント(Font)周りから。
まとめ書きの前にそれぞれの個別のプロパティを解説しておきます。
実際よく使われる書き方で解説します。
フォントのサイズを指定します。
上記はフォントのサイズを14pxにする場合の例。
他に%やキーワード(xx-small、medium、x-large等)で指定することもできます。
フォントを太くしたい場合、上記のように書きます。
他に数値(100~900で100刻み)で指定することも可能です。
フォントをイタリック体(斜体)にしたい場合、上記のように書きます。
フォントをスモールキャップス(small caps)にしたい場合、上記のように書きます。
ただし、日本語では余り使うことはありません。
フォントの書体を設定したい場合、上記のように書きます。
フォント名かキーワード(sans-serif、serif等)を順に「,」で区切って書くと左から優先的にある書体を表示します。
フォント名にスペースが入る場合はクォーテーションで囲む必要があります。
「sans-serif」はゴシック系のフォント。「serif」は明朝系のフォントから適当なフォントを選んで表示してくれます。
DTP業界では行送りと呼ばれる行と行の間のスペースを設定します。
上記の表記の場合は文字のサイズの1.5倍(行間は0.5倍)を行送りとして設定しています。
数値+単位で設定(20px等)することも可能です。
で、それぞれのプロパティをfontプロパティを使って半角スペースで区切ることでまとめて書くことができるんですが、記入するプロパティの順番と、必ず設定しなければならない必須プロパティを気にしないといけません。
基本的な書き方はこんな感じになります。(上記同様の設定をまとめて書いてみます。)
順番を注意すべき点は 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-size、font-familyは省略することができません。
したがって
はOKですが、
はNGということになります。
まとめます。(プロパティ名にて表記)
大括弧([])内順不同可、赤字必須。
アドセンス広告メイン
関連記事
-
Webデザイナーピンチ!!15分でサイトが作れる「みんなのビジネスオンライン」
1年以上前の記事です。内容が古い可能性があります。中小企業経営者にとっては朗報、 …
-
実はユーザーはオープンよりもクローズドを求めている
1年以上前の記事です。内容が古い可能性があります。何かとオープン化オープン化とい …
-
個人情報を守れ
1年以上前の記事です。内容が古い可能性があります。今回は個人情報といってもセキュ …
-
WordPress(ワードプレス)で「text-indent:-9999」が効かない時の対処法 #wp
1年以上前の記事です。内容が古い可能性があります。先日、久しぶりにWordPre …
-
レイアウトが整っている方がCTRは落ちるの法則
1年以上前の記事です。内容が古い可能性があります。漠然となのですがこれ、以前から …
-
コンバージョン率を上げるランディングページのコツ
1年以上前の記事です。内容が古い可能性があります。□クリック率を上げるバナー広告 …
-
Ajax
1年以上前の記事です。内容が古い可能性があります。Ajaxってのがはやっているら …
-
画像共有サイト(写真共有サイト・フォトシェアリング)ってたくさんあるんだね
1年以上前の記事です。内容が古い可能性があります。前記事からの流れで画像共有サイ …
-
エロパワー
1年以上前の記事です。内容が古い可能性があります。ビデオが一般に普及したのはアダ …
-
センタリングさせるデザインで「absolute」が使えない【CSS】
1年以上前の記事です。内容が古い可能性があります。先日、CSSでセンタリングさせ …