ここまでアストラの設定変更のみでカスタマイズしてきました。ですがついに CSS の出番です。

リストデザインの変更

最初に CSS 無しのリストスタイルを見てみましょう。
下が通常のスタイルです。

• リスト１
• リスト２
• リスト３

気にならない人もいるでしょう。どこがおかしいの？と思う方も。ですが私たちはリストマークを文章内に配置したいと思っています。上のデザインはマーク後の文章先頭を他の文章とツラ合わせしています。

では次に CSS を当ててみましょう。

• リスト１
• リスト２
• リスト３

上のリストスタイルは、リストに対してCSS を適用したわけではありません。ブロック自体に CSS を適用してあります。

CSS による見出しデザイン

既にお気付きの方もいらっしゃると思いますが、見出しにも CSS を当てています。このサイトで適用しているCSS は次のとおりです。

1. 見出し
2. ボックス
3. ボックス用見出し
4. 画像枠

これらの詳細についてはまた次の機会にご説明しようと思います。