HTMLの質問です。
HTMLの質問です。 画像の様なものをHTMLで作成したいのですが、どの様に表記すればうまく表示されるかを教えて頂けないでしょうか。 全画面に囲い枠を二つ並べ(少し隙間を空けて)、その中に見出し、ライン、テキスト、画像を表示したいです。 よろしくお願いします。
HTML、CSS・47閲覧・100
ベストアンサー
考え方として、 ・昆虫の種ひとつひとつを figure 要素で記述 ・div を親要素、figure を子要素として flexbox を適用 ・figure 要素に対して border-radius で角丸みをつける ・特徴を ul/li 要素で表現。ul を親要素、li を子要素として grid レイアウトを適用 ・li 要素のマーカーを list-style-type: none で除去 ・各要素の margin と padding を調整 ● CSS DIV.insects {width: 800px; display: flex; flex-wrap: wrap; background-color: white;} FIGURE.species {width: 390px; margin: 5px auto; border: gray solid 1px; border-radius: 10px;} .species figcaption {color: rgb(55, 115, 226); font-size: 105%; font-weight: bold; border-bottom: gray solid 2px; padding: 5px; background-color: beige;} .sci-name {font-family: 'Times New Roman', Times, serif; font-style: italic;} .species P {margin: 0; padding: 5px; font-size: 95%;} .species IMG {width: 390px; height: 300px; vertical-align: bottom;} UL.features {padding: 5px; margin: 0; display: grid; grid-template-columns: 180px auto 180px; grid-template-rows: auto auto auto auto; border-bottom: gray solid 1px;} .features LI {list-style-type: none; padding: 0; width: 100%; font-size: 95%;} .length {grid-column: 1; grid-row: 1;} .season {grid-column: 1; grid-row: 2;} .env {grid-column: 1; grid-row: 3;} .dist {grid-column: 1; grid-row: 4;} .rareness {grid-column: 3; grid-row: 1;} .rob {grid-column: 3; grid-row: 2;} ● HTML <div class="insects"> <figure class="species"> <figcaption>和名<br><span class="sci-name">Scientific Name</span></figcaption> <ul class="features"> <li class="length">体長｜</li> <li class="season">時期｜</li> <li class="env">環境｜</li> <li class="dist">分布｜</li> <li class="rareness">レア度｜</li> <li class="rob">ROBカテゴリー｜</li> </ul> <p>テキストテキストテキストテキストテキストテキスト</p> <img src="images/abcd.jpg" alt=""> </figure> <figure class="species"> <figcaption>和名<br><span class="sci-name">Scientific Name</span></figcaption> <ul class="features"> <li class="length">体長｜</li> <li class="season">時期｜</li> <li class="env">環境｜</li> <li class="dist">分布｜</li> <li class="rareness">レア度｜</li> <li class="rob">ROBカテゴリー｜</li> </ul> <p>テキストテキストテキストテキストテキストテキスト</p> <img src="images/abcd.jpg" alt=""> </figure> （上記繰り返し） </div>
質問者からのお礼コメント
ご丁寧に解り易い回答をありがとうございました！
お礼日時：6/28 11:35
