Menu
たったこれだけタグ講座
サンプルソースで覚えるCSSテクニック商用利用可！無料CSSテンプレート配布
スポンサードリンク
このページでは、初心者でも比較的使いやすいものだけを抜粋しています。また、スタイルシートの指定に関しては「外部CSS」に記述しているものとします。その他の記述方法は「スタイルシートの定義方法」を参照して下さい。
文字の色
p{ color: red; }
値にはキーワードによる指定のほかに「#ff0000」などでも指定出来ます。
文字の装飾文字の装飾文字の装飾
<p>文字の装飾<span>文字の装飾</span>文字の装飾</p>
p span{ text-decoration: underline; }
リンクの張ってあるテキスト（アンカーテキスト）などの下線を消す際も使用します。その際の指定は「text-decoration: none;」とします。
行の高さ[line-height:1.5;]
サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル。
行の高さ[line-height:1.5em;]
サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル。
行の高さ[line-height:150%;]
サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル。
行の高さ[line-height:2;]
サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル。
行の高さ[line-height:2em;]
サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル。
行の高さ[line-height:200%;]
サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル。
p{ line-height: 2em; }
em による指定のほかに px % 倍(1, 1.5, 2) と指定する事が出来ます。
em % での指定の際に気を付ける点
一括指定（bodyなどで）すると、見出しタグのh1などでは文字が隠れてしまうので「倍」指定がお薦めです。「em」「%」を使用するなら段落タグ(p)に限定した方が良いです。
行揃え/text-align:left;
行揃え/text-align:center;
行揃え/text-align:right;
p{ text-align: center; }
p{ text-align: right; }
p{ text-align: left; }
文字間隔/デフォルト
文字間隔/letter-spacing:0.5em;
p{ letter-spacing: 0.5em; }
Mac IE のバージョンによってはレイアウトがおかしくなります。（横方向へのスクロールバーが付きます。）
文字の大きさ/font-size:200%;
p{ font-size: 200%; }
% のほかにも px em pt などがありますが、アクセシビリティ上フォントサイズの単位は % em などの相対単位を使用しましょう。
スポンサードリンク
