つらい・・・

CSSを使用して段落？リスト？を調整したい

解決済

質問者：non05410
質問日時：2020/01/22 13:03
回答数：2件

質問させて頂きます。
件面うまく思いつかず申し訳ありません…

HTMLとCSSを用いて下記のように表示させたいと考えているのですがうまいやり方が分からず困っています。
ご存じの方いらっしゃいましたら教えて頂けると幸いです。
---------------------------------------
名　前：たかし
年　齢：19歳
出身地：東京
趣　味：食べ歩き
　　　　特に○○が好き
特　技：料理
　　　　バスケット
---------------------------------------
上記のように項目(左側)と実際の内容(右側)の幅をきれいに揃えて表示したいと考えています。
なにより、同じ項目で二行目以降も同じ位置から文字が始まるようにしたいです。

よろしくお願いいたいます。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (2件)

ベストアンサー優先
最新から表示
回答順に表示

No.1ベストアンサー

回答者： naokita
回答日時：2020/01/22 14:13

１，

簡単な方法は、テーブル
th/tdセルで分けて利用する方法

２，
文法構造的には、定義リストが妥当
<dl>
<dt>名前</dt>
<dd>たかし</dd>
<dt>年齢</dt>
<dd>19歳</dd>
</dl>

互換共通のCSSなら、
dt{ float: left; clear: left; width: 3em; margin: 0; padding: 1em 0 0;}
dt:after{ content: ':';}
dd{ margin: 0; padding: 1.1em 0 0.1em 3.3em; border-bottom: dashed 1px silver;}
みたいな感じでも綺麗になるし、floatじゃなく負のmarginでも良い
CSS3なら各種で複数の方法があるし、
CMSならテンプレで用意されているでしょうｗ
あとは、
その程度のテキストならレスポンシブ不要だけど、対応させるなら上記CSSをPC用にするだけ。

- 0
- 件

通報する

この回答へのお礼

回答いただきありがとうござました！
自分の環境だとうまくいかなかったのですが、参考にさせて頂きます！

通報する

お礼日時：2020/01/23 11:50

No.2

回答者： gura_
回答日時：2020/01/22 21:58

non05410さん

>････幅をきれいに揃えて表示したい･･････････

例えば↓

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<title>Grid Layoutの例</title>
<style>
.samp-box {
width:300px; margin:0 auto; text-align:left; font-size:14px; padding:5px;
display: grid; /* Grid Layoutで配置 */
grid: repeat(7, 1.4em)/4.2em 10em; /* (4.3em 10em)を7行並べる */
}
.samp-item { padding-left:0.1em; }
</style>
</head>
<body>
<main>
<div class="samp-box">
<div class="samp-item">名　前：</div>
<div class="samp-item">たかし</div>
<div class="samp-item">年　齢：</div>
<div class="samp-item">19歳</div>
<div class="samp-item">出身地：</div>
<div class="samp-item">東京</div>
<div class="samp-item">趣　味：</div>
<div class="samp-item">食べ歩き</div>
<div class="samp-item"></div>
<div class="samp-item">特に○○が好き</div>
<div class="samp-item">特　技：</div>
<div class="samp-item">料理</div>
<div class="samp-item"></div>
<div class="samp-item">バスケット</div>
</div>
</main>
</body>
</html>