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ということになります。
まとめます。(プロパティ名にて表記)
大括弧([])内順不同可、赤字必須。
アドセンス広告メイン
関連記事
-
Dreamweaverでよく使う正規表現
1年以上前の記事です。内容が古い可能性があります。Dreamweaverを使って …
-
CSSだけで作る最も単純なプルダウンメニュー(ドロップダウンメニュー)【Webデザイン】
1年以上前の記事です。内容が古い可能性があります。今まではIE6の存在等もあって …
-
テンパリ気味
1年以上前の記事です。内容が古い可能性があります。モブログで少し気分を和らげたと …
-
Instagram(インスタグラム)でミニチュア風写真が撮れた
1年以上前の記事です。内容が古い可能性があります。一時期流行っていたミニチュア風 …
-
自宅サーバーどうなった?
1年以上前の記事です。内容が古い可能性があります。本職?が忙しくなりなんもできて …
-
デザイナーではありえない。社会人に聞いた好きなフォント1位は「MS ゴシック」
1年以上前の記事です。内容が古い可能性があります。個人的にはFutura好き。 …
-
印刷会社なのに。。
1年以上前の記事です。内容が古い可能性があります。印刷会社なのにWebをやらされ …
-
「www」はワールドワイドウェブではありません
1年以上前の記事です。内容が古い可能性があります。2ちゃんねるなんかでよく見かけ …
-
昨日の続き
1年以上前の記事です。内容が古い可能性があります。と、いうことで、 いろいろ見て …
-
Web制作会社はいずれなくなる? アメリカにWeb制作会社がない5つの理由
1年以上前の記事です。内容が古い可能性があります。アメリカにはWeb制作会社がな …