ID:HDbejG さんの質問

【CSS】例えば、contentでp要素の前に入れた文字列の幅をwidth: 20%のように指定し、その後ろに入る文字（p要素に元々入っている文字）をwidth: 80%と指定することは可能でしょうか？
----- 表示させたい形 -----
見出し
カテゴリー1の題名：カテゴリー1カテゴリー1…
カテゴリー2の題名：カテゴリー2カテゴリー2…
　　　　　　　　　　…カテゴリー2
----- HTML -----
<h1>見出し</h1>
<p id="p1" class="p">カテゴリー1</p>
<p id="p2" class="p">カテゴリー2</p>
----- CSS -----
#p1:before {
　　content: "カテゴリー1の題名：";
}
#p2:before {
　　content: "カテゴリー2の題名：";
}
.p {
　　display: inline-block;
　　width: 20%;
}
p要素の中身が長くなる場合、上記のように題名を超えずに表示させたいです。
疑似クラスを用いてコンテンツ（題名）を追加した場合、このようなことは難しいでしょうか？
ご回答いただけるとありがたいです。

みんなの回答 5 件

ID:HDbejG さんの回答

すみません、一部コードミスがありました。
.p {
　　display: inline-block;
　　width: 20%;
}
ではなく、
.p:before {
　　display: inline-block;
　　width: 20%;
}
が正しいです。

ID:cHdBhx さんの回答

こういうのは、dl使った方がいい気がします。
<dl class="clearfix">
<dt>カテゴリー1の題名</dt><dd>カテゴリー1...</dd>
<dt>カテゴリー2の題名</dt><dd>カテゴリー2...</dd>
</dl>
dl{
width: 100%;
}
dt{
width: 20%;
float: left;
clear: both;
margin-bottom: 5px;
}
dd{
margin-left: 20%;
float: left;
width: 80%;
margin-bottom: 5px;
}
確認してませんが、こんな感じでできませんかね。

ID:HDbejG

ご回答ありがとうございます。
後出しになってしまい恐縮なのですが、元々のソースは、dlで書かれておりまして、そのうちのdd要素に題名をつけて表示させたいと思ってまして…。
もちろん入れ子にすれば可能だと思うのですが、題名を入れるためだけにコードを増やすのも…と思い、疑似クラスでなんとかできないかと思っております。。

ID:EXwz8a

いつもこういうコード見る度に思うんだが...

dl{}
dt{
width: 〇〇em;（入る文字数分のem）
float: left;
clear: both;
}
dd{
margin-left: 〇〇em;（上記の入る文字数分のemとマージン含めたem）
}

色んな意味でこっちの方がいい。
clearfixも必要ない。

ID:Ta0ngE さんの回答

:beforeをdisplay:blockにして、float:leftで20%指定ではどうでしょうか。
さらに高さを指定すればp要素のところで折り返してくれますが… これってどうなんでしょう。
コードが増えると言っても、HTMLの構成上必要な要素であれば適切にマークアップする必要があると思いますよ。

ID:HDbejG

アドバイスありがとうございます。
p要素の中身はDBから持ってくる（変動する）のですが、高さを指定するとずれてしまいました…。
何行になるかを計算し、動的に変えるしかないですよね…。

ちなみに、入れようとしている題名は必ずしも必要な要素、というものではなく、なくても問題はないけどもあるとわかりやすいのでは、という目的で入れようとしているものになります。

ID:rq37ge さんの回答

こんな感じでどうでしょう
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<style>
#p1:before {
     content: "カテゴリー1の題名：";
     width: 20%;
     position:absolute;
     left:-20%;
     text-align:left;
     background:#aaa;
     text-overflow:ellipsis;/折り返したい場合以下3行を削除/
     overflow:hidden;
     white-space:nowrap;
}
#p2:before {
     content: "カテゴリー2の題名：";
     width: 20%;
     position:absolute;
     left:-20%;
     text-align:left;
     background:#aaa;
     text-overflow:ellipsis;
     overflow:hidden;
     white-space:nowrap;
}
p {
     position:relative;
     margin: 0 0 10px 20% ;
     background:#67A0CC;
}
</style>
</head>
<body>
<h1>見出し</h1>
<p id="p1" class="p">カテゴリー1</p>
<p id="p2" class="p">カテゴリー2カテゴリー2カテゴリー2カテゴリー2カテゴリー2カテゴリー2カテゴリー2カテゴリー2カテゴリー2カテゴリー2カテゴリー2カテゴリー2カテゴリー2カテゴリー2カテゴリー2カテゴリー2</p>
</body>
</html>

ID:HDbejG

ご回答ありがとうございます。
こちらの書き方できちんと表示できました！目から鱗です。
とても助かりました、ありがとうございます。

ID:CaDuAw さんの回答

文字列を選択できない。
検索エンジンに採用されない。
音声リーダー、テキストリーダーに認識されない。
文書の内容がhtmlとcssに分散される。
こういう場合に:beforeを使うのは、tableレイアウトにも劣るレイアウトだけできればなんでもいい的な明らなバッドノウハウだと思うな。

ID:HDbejG

アドバイスありがとうございます。
質問の仕方が悪く、誤解を与えてしまっているようですみません。
beforeで入れようとしている文章が構造的に必要なものであれば入れる必要は当然あると思いますが、今回はその限りではないのでHTMLには入れていません。
（今回は、dt要素の中に含まれている複数のdd要素の一つに、“：”や“※”のような記号的要素のものを入れるイメージです）

最終更新日:2014-07-23 (2,523 views)

みんなの回答 5 件

すみません、一部コードミスがありました。.p { display: inline-block; width: 20%;}ではなく、.p:before { display: inline-block; width: 20%;}が正しいです。

関連するトピックス

すみません、一部コードミスがありました。
.p {
　　display: inline-block;
　　width: 20%;
}
ではなく、
.p:before {
　　display: inline-block;
　　width: 20%;
}
が正しいです。