【HTML/CSS】いろいろなリストを作ろう（画像編）

HTML/CSS

2021.06.042021.07.05

これまで、記号や数字、いろんな国の文字を使ったリストの作り方をご紹介してきました。

今回は、オンラインサロン「リトルシアターユニオン」さんのサイトで使った、
画像を使ったリストの作り方をご紹介したいと思います。

リストの前に涙目なみだめの画像やハートの画像がありますね。

contents

画像リストのサンプル
使用するタグ
画像リストを作ろう
1. 親要素
2. 子要素
まとめ

画像リストのサンプル

枠の中にあるようなリストを作る方法をご紹介したいと思います。

項目１
項目２
項目３

使用するタグ

今までご紹介したリストは、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	縦横比が維持いじされるように、背景画像を拡大縮小します。
長さ（数字を記載）	指定された長さになるよう画像を拡大縮小します
割合（％で記載）	指定された割合になるよう拡大縮小します。