Q&A
現実のHTML, CSSコードを提示してください。
以下のような構成にしたいのですが、どうも調べても分かりません。
'テキスト 横並べ' '高さ 改行に合わせて'など調べても図のような状況を紹介しているページが見つかりませんでした。
テキストの行数に合わせて緑枠を伸ばす事は出来ましたが、そこに合わせて赤枠を合わせることが出来ない状態です。
追記
コードを載せていないのはこちら側の配慮不足でした、大変申し訳ないです。
このコードの場合、ContentBlockのheight, widthにautoを指定できない (0px x 0px)になるので
目視で調整しなければならず余り良いコードには出来ませんでした...
html
1<!DOCTYPE HTML> 2<html> 3 <head> 4 <style> 5 *{ 6 padding: 0px; 7 border: 0px; 8 margin: 0px; 9 } 10 11 .ContentBlock{ 12 height: 220px; 13 width: 429px; 14 padding: 20px; 15 margin: 0px auto; 16 background-color: red; 17 } 18 19 .text--base{ 20 display: inline; 21 } 22 .text--left{ 23 text-align: left; 24 } 25 .text--right{ 26 text-align: right; 27 } 28 .right--border{ 29 border-right: 2px; 30 border-style: solid; 31 border-color: black; 32 } 33 34 .base__box{ 35 height: auto; 36 float: left; 37 margin: 0px auto; 38 } 39 .large__part__box{ 40 width: auto; 41 padding-right: 5px; 42 background-color: gray; 43 } 44 .large__info__box{ 45 width: auto; 46 padding-left: 20px; 47 background-color: cornflowerblue; 48 } 49 </style> 50 </head> 51 52 <body> 53 <div class="ContentBlock"> 54 <div class="base__box large__part__box right--border"> 55 <h2 class="text--base text--right"> 56 項目1<br> 57 項目2<br> 58 項目3<br> 59 <br> 60 <br> 61 項目4 62 </h2> 63 </div> 64 <div class="base__box large__info__box"> 65 <h2 class="text--base text--left"> 66 AAAAAAAAAAAAAAAAAAA<br> 67 BBBBBBBBB<br> 68 CCCCCCCCCCCCCCCCC<br> 69 CCCCCCCCCCCCCCCCCCCC<br> 70 CCCCCCCCCCCC<br> 71 DDDDDDDDDDDDDDD 72 </h2> 73 </div> 74 </div> 75 </body> 76 77</html>
回答2件
0
ベストアンサー
コードの提示がないので、一般的な回答を。
項目、説明のリストとのことなので、dl, dt, dd タグを使うといいでしょう。
<dl>: 説明リスト要素 - HTML: HyperText Markup Language | MDN
html
1<dl> 2 <dt>日付:</dt> 3 <dd>XXXX / XX / XX</dd> 4 <dt>人物:</dt> 5 <dd>XXX XX</dd> 6 <dt>概要:</dt> 7 <dd> 8 XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX<br> 9 XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX<br> 10 XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX<br> 11 XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX<br> 12 </dd> 13 <dt>資金:</dt> 14 <dd>XXXXX 円</dd> 15</dl>
CSSは、Flexboxレイアウトか、Gridレイアウトをつかうといいでしょう。
フレックスボックスの基本概念 - CSS: カスケーディングスタイルシート | MDN
グリッドレイアウトの基本概念 - CSS: カスケーディングスタイルシート | MDN
Flexboxレイアウトのコード例
css
1* { 2 box-sizing: border-box; 3 margin: 0; 4} 5 6dl { 7 display: flex; 8 flex-wrap: wrap; 9 width: 800px; 10 gap: 2px; 11 margin: 10px; 12} 13 14dt{ 15 width: 180px; 16 border: 1px solid pink; 17} 18dd{ 19 width: 600px; 20 border: 1px solid green; 21}
grid レイアウトのコード例
css
1dl { 2 display: grid; 3 grid-template-columns: 150px 1fr; 4 width: 800px; 5 gap: 2px; 6} 7dt{ 8 border: 1px solid pink; 9} 10dd{ 11 border: 1px solid green; 12}
投稿2022/06/08 00:54
編集2022/06/08 01:06総合スコア33699
回答ありがとうございます。
dl,dt,ddタグ...リストとして表示させるならulしか知らなかったので驚きです。
Gridを外しても自動でインデントを取ってくれるのは便利ですね。
単位frも便利で助かりました。
0
テーブルではダメでしたか？
html
1 <table> 2 <tbody> 3 <tr> 4 <th>日付</th> 5 <td>XXXX/XX/XX</td> 6 </tr> 7 <tr> 8 <th>人物</th> 9 <td>XX XX</td> 10 </tr> 11 <tr> 12 <th>概要</th> 13 <td>XXXXXXXX <br> 14 XXXXXXXXXXXXX <br> 15 XXXXXXXXXXXXXX</td> 16 </tr> 17 <tr> 18 <th>資金</th> 19 <td>XXXX円</td> 20 </tr> 21 </tbody> 22 </table>
css
1 table { 2 border-collapse: collapse; 3 } 4 5 th { 6 border: solid tomato; 7 } 8 9 td { 10 border: solid olive; 11 }
投稿2022/06/08 00:35
総合スコア36074
回答ありがとうございます。
tableタグなんてあるのですね...まさかhtmlだけで完結出来るとは知りませんでした。
こちらは最低限の記載で済み、ウィンドウ幅に合わせて自動で改行してくれるのが便利ですね。
あなたの回答
tips
プレビュー
