どうも！ニシドラ(@nishidorablog)です。
この記事ではCSSでの装飾方法について解説します。
HTML解説講座で解説した「ulタグ」や「olタグ」を使ってのリスト作成は、ではどうしても味気ない感じになったり、WEBサイトのデザインと合わないなんてことがよくあります。
このような問題を解決するにはCSSで装飾します。
リストを装飾する利点としては「WEBサイトにあったデザインにできる」や「読みやすくなる」という点があげられます。
そんなCSSでの「リストの装飾方法」をこの記事では解説します。
HTMLで箇条書きリストの作成方法がわからない方は下の関連記事から読んでみてください！
リストマーカーの装飾
リスト項目の先頭に表示されているマークのことを「リストマーカー」と呼びます(ulタグでは黒い丸、olタグでは数字が表示される)。
リストマーカーの種類変更
このリストマーカーを変更するときに、CSSでは「list-style-typeプロパティ」を使います。
list-style-typeプロパティで指定できる値はさまざまで、下の表にまとめてみました。
左の欄(1、3列)が指定できる値で、右の欄(2、4列)が値の説明を記しています。
| none | リストマーカー無し | lower-roman | ローマ数字の小文字 |
| disc | 黒い点 | upper-roman | ローマ数字の大文字 |
| circle | 白い点 | decimal-leading-zero | 0を付けた数字 |
| decimal | 数字 | cjk-ideographic | 漢数字 |
| aquare | 黒い四角 | lower-alpha- , lower-latin |
アルファベットの小文字 |
| harigana | ひらがな | upper-alpha , lower-latin |
アルファベットの大文字 |
| katakana | カタカナ | higragana-iroha | ひらがなのいろは |
| katakana-iroha | カタカナのいろは | lower-greek | 小文字のギリシャ文字 |
| hebrew | ヘブライ数字 | armenian | アルメニア数字 |
| georgian | グルニア数字 |
使い方はシンプルで、指定したいタグ(ulかol)にプロパティと値を入れます。
CSSのコードは下のようになります。
list-style-type: circle;
}
ol {
list-style-type: hiragana;
}
それぞれulタグを白い点に、olタグをひらがなに変えてみました。
ブラウザで表示させたのが下の画像になります。
リストマーカーに画像の使用
リストマーカーを任意のものに変える値を前項で説明しましたが、「list-style-imageプロパティ」を使うことで、リストマーカーに画像を使うこともできます。
どう使うかというと、list-style-imageプロパティの後に「url( )」を記述します。
「( )」の中にはHTMLでの画像の指定方法と同じように「画像の場所/画像名.拡張子」を書きます。
HTMLでの画像の指定方法を知りたい方は下の記事を読んでみてください。
実際にリストマーカーに画像を付けてみます。
状況としては「imageフォルダ」の中に「notes.gif(音符のマークの画像)」という画像があり、HTMLファイルの「ulタグ」のリストマーカーに「notes.gif」を表示させたいとします。
CSSのコードは下のようになります。
list-style-image: url(../notes.gif);
}
Google chromeで表示すると下の画像のようになります。
リストマーカーの表示位置
「list-style-position」プロパティを使うと、リストマーカーの表示位置を変更することができます。
イメージとしては下の図のようになると思ってください。
リストマーカーをボックスの内側(緑色の部分)か外側かどちらかに表示することができます。
黒い点のulタグには「inside」という値でボックスの内側にリストマーカーを表示し、数字のolタグには「outside」という値でボックスの外側にリストマーカーを表示させています。
CSSのコードは下のようになります。
list-style-position: inside;
}
ol {
list-style-position: outside;
}
list-styleプロパティ
これまでに「list-style-type」プロパティ、「list-style-image」プロパティ、「list-style-position」プロパティと説明してきましたが、実は「list-style」プロパティだけで、これらの項目をまとめて指定することができます。
値は好きな順番で書くことができ、スペースで区切って指定します。
list-style: outside url(image/notes.gif) aquare;
}
まとめ
今回の内容をまとめると以下のようになります。
- list-style-typeプロパティでリストマーカーを任意のものに変えることができる
- list-style-imageプロパティでリストマーカーを任意の画像に変えることができる
- list-style-positionプロパティでリストマーカーをボックスの内側か外側に表示するか変えることができる
- list-styleプロパティを使うことでlist-style-typeプロパティ、list-style-imageプロパティ、list-style-positionプロパティを同時に指定することができる
黒い丸や数字ではデザインが味気ないので、list-style-typeプロパティで装飾しましょう。
他にもCSSの解説をしているので下の記事一覧から読んでみてください！
コメント