CSS によるデザイン変更

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

リストデザインの変更

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

  • リスト1
  • リスト2
  • リスト3

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

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

  • リスト1
  • リスト2
  • リスト3

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

CSS による見出しデザイン

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

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

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