HTML05_よく使うCSSプロパティ(文字編)

こんばんは! Benです。
今回は、前回の続きでよく使うCSSプロパティをノートします。IT関係でないサラリーマンの方でもホームページを扱う方は、結構使う機会が多いと思います。

20160118a.gif
まずは文字に関するものです。前回もお話ししましたが、古いバージョンのHTMLは実際のコンテンツとデザインなどの見栄えが入り混じっていて一つのHTMLファイルができてました。そのときに使われていたタグとして、太字は<b>タグ、下線は<u>タグ、イタリック文字は<i>タグなどです。しかし、これらは現在、スタイルシートでの代替記述が推奨されていて、いずれなくなる方向で進んでいます。その代替記述がこれらのCSSのプロパティです。

下線
従来の<u>に代わるものですtext-decoration:underlineで指定します。
太字
従来の<b>です。font-weight:boldで太字になります。100~900までの数字(大きいほど太い)でも指定できますが、対応していないブラウザもあるようです。
イタリック
従来の<i>です。font-style:italicで指定します。
フォントの色はcolor、背景色はbackground-colorです。規定されているred,blue,greenなどのほかrgbなどで自由に色を指定できます。その時は赤緑青の順で、それぞれ数字で0から255までで指定します。真っ赤は赤がMAXの255、その他はゼロなのでrgb(255,0,0)となります。黒はすべての色がゼロなのでrgb(0,0,0)、白は光の3原色を全て合成した結果の色なのでrgb(255,255,255)です
文字のサイズ
昔はフォントの色も含めて<font>タグで指定していました。今はfont-sizeのCSSで指定します。少し大きいのはlarge、より大きいのはx-large、小さいのはsmallですが、その他にドット数で示すpx(ピクセル)、ワープロソフトでよく使うpt(ポイント)なども指定できます。また、(デフォルトのサイズの)120%などの相対指定も使えます。
行間
line-heightで指定します。正確にはこれは行間というよりは行の高さなので文字の部分を含むノートの罫線の幅のようなものです。これも既定値やpx、pt、%など使用できます。また、こちらでは既定の一行が1emという単位を使うので、その1.5倍とかの意味で1.5emとかの指定もできます。


色々な表記があって選択肢が増えるとともに覚えることが多くなります。そのほかにも文字に関するプロパティはありますが、上記のものがあれば、のようなにわか管理者のサラリーマンには十分だと思います。次回はよく使うCSSのレイアウト編をノートします。本日もお疲れ様でした

この記事へのコメント


この記事へのトラックバック