PHPをやる前に、HTMLとCSSとJavascriptを終わらせなければいけないため今回の自習勉強ではCSSを重点的に進めました。
list-style-positionは、リスト項目の行頭記号の表示位置を指定するプロパティです。
list-stle-typeは、リスト項目の行頭記号の種類を指定するプロパティです。list-style-imageプロパティで画像が指定されている場合は、その画像が行頭記号として優先して表示されます。
list-style-imageは、行頭記号として表示される画像を指定するプロパティです。画像が表示できない場合は、list-style-typeプロパティで設定されている行頭記号が表示されます。
list-styleは、リスト関連の値をまとめて設定できるプロパティです。値は半角スペースで区切って任意の順序で指定できます。値として「none」だけに指定すると、list-style-typeとlist-style-imageの両方が「none」に設定されて行頭記号が消えます。
これらを使い、ul,liタグのリスト項目の表示位置やリストの行頭記号を画像にしたりとリストにちょっとした工夫を加えてあげることができます。また、display blockを使ってリストをブロックの用に並べ、そこにリンクを貼るなど、ホームページのメニュー画面みたいなものも作ることができました。
10月17日 宮本 勇