これまで、記号や数字、いろんな国の文字を使ったリストの作り方をご紹介してきました。
今回は、オンラインサロン「リトルシアターユニオン」さんのサイトで使った、
画像を使ったリストの作り方をご紹介したいと思います。
リストの前に涙目の画像やハートの画像がありますね。
画像リストのサンプル
枠の中にあるようなリストを作る方法をご紹介したいと思います。
- 項目１
- 項目２
- 項目３
使用するタグ
今までご紹介したリストは、ulタグや、olタグを使いました。
画像を使うときは、これらのタグではなく、
記述型リストを使います。
記述型リストとは、
「description list(dl）= 説明リスト」
「description term(dt）= 説明する言葉」
「definition description(dd）= その言葉の説明文」
の3つで記述します。
上記を、記述型リストで書くと、次のようになります。
- description list(dl）
- 説明リスト
- description term(dt）
- 説明する言葉
- definition description(dd）
- その言葉の説明文
＜dl＞ ＜dt＞description list(dl）＜/dt＞ ＜dd＞説明リスト＜/dd＞ ＜dt＞description term(dt）＜/dt＞ ＜dd＞説明する言葉＜/dd＞ ＜dt＞definition description(dd）＜/dt＞ ＜dd＞その言葉の説明文＜/dd＞ ＜/dl＞
全体をdtタグで囲みます。
dtタグは太字となり、
ddタグは右にインデントされて表示されます。
画像リストを作ろう
では、先ほどのリストを作るためのコードをご紹介します。
＜dl class="list_block"＞ ＜dt class="list_a"＞項目１＜/dt＞ ＜dt class="list_a"＞項目２＜/dt＞ ＜dt class="list_a"＞項目３＜/dt＞ ＜/dl＞
HTMLコードでは、
CSSで装飾するために、クラスを設定します。
.list_block .list_a::before {
position: absolute;
display: block;
top: .75em;
left: 0;
width: 2em;
height:2em;
line-height: 2;
text-align: center;
font-family: Arial,sans-serif;
content:"";
background:url("https://nekopress.castelodelego.org/wp-content/uploads/2021/05/nyako_normal.jpg") no-repeat;
background-size:contain;
}
.list_block .list_a {
position: relative;
padding: 0.75em 1em 1em 3em;
line-height: 1.8;
}
文字部分を親要素、
画像部分を子要素として、場所の設定等をします。
親要素
文字部分に関する設定について説明します。
.list_block .list_a {
position: relative;
padding: 0.75em 1em 1em 3em;
line-height: 1.8;
}
- position: relative;
子要素の位置を設定するためのコードです。
子要素には、absoluteを設定し、親子関係を作ります。
- padding: 0.75em 1em 1em 3em;
要素の周りの幅/高さを指定します。
- line-height: 1.8;
文字の行間を設定します。
子要素
画像部分に関する設定について説明します。
- .list_block .list_a::before {
- 〜〜〜
- }
list_blockというdlタグの中の
list_aというdtタグの前に入れる画像の設定をしています。
- position: absolute;
親要素との関係を作ります。
- display: block;
リストをブロック要素に変換します。
ブロック要素にすることで、高さや幅などを変更することができます。
- top: .75em;
ボックス要素の上からの配置位置を指定します。
- left: 0;
ボックス要素の左からの配置位置を指定します。
- width: 2em;
ボックス要素の幅を設定します。
この数字を大きくすれば、画像の横幅が広くなります。
- height:2em;
ボックス要素の高さを設定します。
この数字を大きくすれば、画像の高さが高くなります。
- line-height: 2;
行間の高さを設定します。
この数字を大きくすれば、次のリスト項目との距離が広くなります。
- text-align: center;
ボックス要素内での画像の位置を中央に設定します。
- content:””;
ボックス内の内容を空にし、
画像を表示するための準備をします。
- background:url(“画像の場所”) no-repeat;
背景として画像を設定します。
no-repeatは、繰り返さず、1つだけ表示するために設定します。
- background-size:contain;
containを指定することで、画像を切り取ったり縦横比を崩すことなく、画像ができるだけ大きくなるよう拡大縮小して、表示させます。
その他の指定方法としては以下があります。
| 値 | 内容 |
| cover | 画像の縦横比を崩すことなく、画像ができるだけ大きくなるよう拡大縮小します。必要に応じて画像の切り取りをします。 |
| auto | 縦横比が維持されるように、背景画像を拡大縮小します。 |
| 長さ（数字を記載） | 指定された長さになるよう画像を拡大縮小します |
| 割合（％で記載） | 指定された割合になるよう拡大縮小します。 |
まとめ
画像を使うと、更にリスト表示の幅が広がりますね。
コメント