中央揃え・右揃え・左揃え
テキストの配置は、text-align プロパティで変更する。
まず、h1 タグを中央揃えに設定する。
次に、migi というクラスを作成して、右揃えに設定する。
同様に、hidari というクラスを作成して、左揃えに設定する。
左揃えはデフォルトなので、通常は指定しないが、ここでは学習のため記述している。
ファイル名は003.cssとした。
CSS
h1 { text-align: center; }
.migi { text-align: right; }
.hidari { text-align: left; }HTMLタグでテキストを記述
HTML では、h1 タグで見出しを記述する。
次に、p タグの class 属性で migi を指定してスタイルを適用する。
同様に、hidari も指定する。
なお、ここで指定したクラスの migi と hidari は、HTML タグを指定していないので、p タグ以外にも適用出来る。
HTML
<link href="003.css" rel="stylesheet" type="text/css">
<h1>中央揃えの見出し</h1>
<p class="migi">この文章は右揃えになります。</p>
<p class="hidari">こちらは左揃えになります。</p>プロパティ理解の重要性
テキスト装飾の CSS は、セレクタとプロパティの組み合わせなので、直感的で分かりやすい。
しかし、美しい見栄えや効果的なデザインのためには、もっと色々な表現力が必要になって来る。
沢山のプロパティを覚えて、実用的な技術を身に付けたいものである。
