テキストの配置

中央揃え・右揃え・左揃え

テキストの配置は、text-align プロパティで変更する。
まず、h1 タグを中央揃えに設定する。
次に、migi というクラスを作成して、右揃えに設定する。
同様に、hidari というクラスを作成して、左揃えに設定する。
左揃えはデフォルトなので、通常は指定しないが、ここでは学習のため記述している。
ファイル名は003.cssとした。

h1 { text-align: center; }
.migi { text-align: right; }
.hidari { text-align: left; }

HTMLタグでテキストを記述

HTML では、h1 タグで見出しを記述する。
次に、p タグの class 属性で migi を指定してスタイルを適用する。
同様に、hidari も指定する。
なお、ここで指定したクラスの migi と hidari は、HTML タグを指定していないので、p タグ以外にも適用出来る。

<link href="003.css" rel="stylesheet" type="text/css">
<h1>中央揃えの見出し</h1>
<p class="migi">この文章は右揃えになります。</p>
<p class="hidari">こちらは左揃えになります。</p>

プロパティ理解の重要性

テキスト装飾の CSS は、セレクタとプロパティの組み合わせなので、直感的で分かりやすい。
しかし、美しい見栄えや効果的なデザインのためには、もっと色々な表現力が必要になって来る。
沢山のプロパティを覚えて、実用的な技術を身に付けたいものである。