Q&A
『<br>なんてしたらダメそうだし……』とのことですが、ダメな理由はHTMLの仕様に違反しているからですか？
それとも、見え方の問題ですか？
.list-inline を使用した「新着情報」
以下のコードで新着情報一覧を作りました。
PHP
1<div class="news"> 2 <h3>新着情報</h3> 3 <ul class="list-inline"> 4 <li class="list-inline-item news-date">7月14日</li><!-- width: 80px; --> 5 <li class="list-inline-item news-category">お知らせ</li><!-- width: 100px; --> 6 <li class="list-inline-item news-subject">本日のイベントは雨天のため、中止いたします。</li><!-- width: 900px; --> 7 </ul> 8</div>
しかしこれだけですと、上記コードの「お知らせ」という文字が「イベント情報」や「PR」だったりしたときに、文字数が増減する関係で「本日のイベントは雨天のため、中止いたします。」の開始位置（頭）が揃わないんです。
なので仕方なく以下のCSSを追加しました。
CSS
1.news-date { 2 width: 80px; 3} 4.news-category { 5 width: 100px; 6} 7.news-title { 8 width: 900px; 9}
これでそれぞれの位置はバッチリです。以下の画像のようにピッタリ揃いました。（画像上部の「ALL お知らせ イベント、一覧を見る」の部分はスルーしてください）
ところがこれをスマホで表示させると、画面表示域を大幅に超えてしまって表示が崩れてしまいます。
ではやはりピクセルで指定してはダメなのか……と思い、CSSを削除したところ、
そもそも上記PHPコード（.list-inlineを用いた方法）ではスマホでの表示レイアウトを自由に組めないといいますか、うまいこといきそうにありませんでした。
スマホ表示での理想は以下の画像のような感じだったんです。
日付（7月14日）とカテゴリー（お知らせ）のあとに改行を入れて、
件名（本日のイベントは雨天のため～）を表示させる形です。
でもカテゴリーの部分に改行ってどうやって入れるんだろう……
<br>なんてしたらダメそうだし……そうすると .list-inline じゃダメなのか……と。
そこで、col を使う方法ならどうだろう？と思い、実際に試してみました。
row col を使用した「新着情報」
PHP
1<div class="row news"> 2 <h3>新着情報</h3> 3 <div class=""> 4 <div class="col-6 col-md-2 news-date">7月14日</li> 5 <div class="col-6 col-md-2 news-category">お知らせ</li> 6 <div class="col-12 col-md-8 news-subject">本日のイベントは雨天のため、中止いたします。</li> 7 </div> 8</div>
先ほどCSSで指定していたそれぞれの width は全て削除し、col-md-2 とか col-md-8 とかで横幅を調整しました。
ただ、惜しいような気もするんですが、とにかく隙間が広すぎて。
何とか狭めようと思って col-md-1 とかすると 2019/07/1<改行>4 とかなっちゃってダメでした。
そして結局最初の .list-inline でレスポンシブに対応する方法ってそもそもあるんだろうか～と悩んでいるところです。
もしくは全く違う別の方法があるのでしょうか。
どなたかお教えいただければ幸いです。どうかよろしくお願いいたします。
すみません、今ちょっと実際にスマホで表示させてみたんですが、そもそも<br>を書かなくとも（何もしてなくても）、「お知らせ」の後に改行が入ったような見た目にはなっていました。
恐らくCSSの最後の width: 900px; だけが一行で収まらないために下の段に落ちているんだと思います。なので<br>する必要すらないかもしれません。
一応『<br>なんてしたらダメそうだし……』と言った理由は、HTMLの仕様的にこんなことしたら怒られそうといった感じのものです。それくらいやっちゃって大丈夫でしょ、ってことであれば全然やっちゃう気ではおります。
ただ、じゃあ何が問題なのかというとこの最後の width: 900px; がスマホの画面を右に飛び出してずーっと続いていっちゃうんです。なのでこの部分（「本日のイベントは雨天のため、中止いたします。」の部分）はスマホの幅までで表示、かつ折返し表示にできれば問題はほぼ解決だと思うんですが……。
あれ？となると、CSS側でメディアクエリを sm md lg ごとに設定してあげればいいのかな……ちょっとやってみます！
HTML構造について補足願います。
新着情報が複数ある場合は、
<ul>
<li>
<li>
<li>
</ul>
<ul>
<li>
<li>
<li>
</ul>
...
ですか？
はい、そうです！ホントは
<ul>
<li>
<li>
<li>
<li>
<li>
<li>
</ul>
みたいにやりたいんですけど、これもまた3つ<li>が出てきたら改行……みたいなのができなかったので、ちょっとHTML的にはどうなんだと思いながらも一行ごとに
<ul>
<li>
<li>
<li>
</ul>
で表示させています。お世話になります！
そうだとすると、
.news-date {
width: 80px;
}
.news-category {
width: 100px;
}
だけで、1行表示はできませんか？
そうなんです、それで１行表示ができてるっぽいんです。
実はさきほど 45_Shingoさん の回答にもございましたが width: 900px が省かれておりましたのでこれを試したところ、PC版では全部が１行表示に、スマホ版では news-date と news-category が一行、改行が入って news-subject が表示されたんです。（希望している表示）
ただ私自身が理解できてなくて「え？なんで！？」と驚いていたところです。
Lhankor_Mhyさん、どうやらもうほとんどあと一歩のところまで来た感じです。おっしゃる通り、news-dateとnews-categoryの2つのwidthだけをピクセル指定して、news-subjectは何も指定しないだけでほぼうまいこといってる感じです。
原因究明のためにご尽力くださって、ありがとうございました！助かりました！
inline-block はブロック要素が1文字として扱われるイメージなんですよね。
なので、ul要素で囲われたinline-blockの要素は、
<ul>123</ul>
と同様の振る舞いです。
li 要素が横長の文字になったと思えば理解しやすいかと。
なるほど、そんな感じなんですね。だいぶしっくりきました。わかりやすい説明ありがとうございます！
回答2件
0
ベストアンサー
ちょっとhtmlが煩雑になってしまったのですが、こういう感じではどうでしょうか？
HTML
1<div class="news"> 2 <h3>新着情報</h3> 3 <ul class="list-group list-group-flush"> 4 <li class="list-group-item d-flex flex-wrap"> 5 <div class="d-flex col-12 col-md-auto"> 6 <div class="news-date">7月14日</div> 7 <div class="news-category">お知らせ</div> 8 </div> 9 <div class="news-subject col-12 col-md-9">〇〇〇</div> 10 </li> 11 <li class="list-group-item d-flex flex-wrap"> 12 <div class="d-flex col-12 col-md-auto"> 13 <div class="news-date ">7月14日</div> 14 <div class="news-category">イベント情報</div> 15 </div> 16 <div class="news-subject col-12 col-md-9">本日のイベントは雨天のため、中止いたします。本日のイベントは雨天のため、中止いたします。本日のイベントは雨天のため、中止いたします。本日のイベントは雨天のため、中止いたします。</div> 17 </li> 18 </ul> 19</div> 20
CSS
1.news-date { 2 width: 80px; 3} 4.news-category{ 5 width: 100px; 6}
dateとcategoryをわざわざ別のdivで囲っているのは、お知らせ文字数が長くても短くても同じレイアウトになるようにするためです。
bootstrap4ではrowクラスも内部的にはflexboxなのですが、d-flexとすることで同じ要素に別のdisplay要素が指定されている場合でも強制的にflexbox化できます。
投稿2019/07/06 06:29
編集2019/07/06 06:31
総合スコア177
スマホ版での表示はすごくそれっぽくなりました！
list-groupの説明は bootstrap4移行ガイド を見て、「あぁ、これじゃなさそうだな」と素通りしておりました。ありがとうございます！
ただ今度はPC版での表示がですね、若干意図しない感じになっておりまして。どうもこれは私のせいっぽいので、今は一旦ちょっとそっちの原因を探っています。
すみません、list-group等は無理に使わなくてもOKです。
参考に載せていただいている画像を見る限り、見た目用には別途CSSが作成されているのかと思いますので
list-groupとlist-group-itemは外してしまっても構わないです。見た目用のCSSが無かったため、似たような表示になるように使用していただけでしたので。
なるほど、そうでしたか！となるとやはりカギは、news-subject の width:900px を外してもらったところにありそうですね。ありがとうございます、もうちょっとでいけそうな感じです！
いけました！感謝です！
良かったです。お疲れ様でした
0
ご希望に合うかどうかわかりませんが。
HTML
1<div class="news"> 2 <h3>新着情報</h3> 3 <ul class="list-inline"> 4 <li class="list-inline-item news-date">7月14日</li><!-- width: 80px; --><li class="list-inline-item news-category">お知らせ</li><!-- width: 100px; --><li class="list-inline-item news-subject">本日のイベントは雨天のため、中止いたします。</li><!-- width: 900px; --> 5 </ul> 6</div>
CSS
1.list-inline{ 2 white-space: pre-line; 3}
投稿2019/07/06 06:02
総合スコア36115
やってみたところ、どうも .list-inline の効果が解除されてしまうのか、横並びリストだったものが縦並びリスト（何もCSSとかをいじっていないデフォルトの ul li 表示）になってしまいます。
ただ white-space: pre-line なんていうものを初めて見ましたので、どうにか使えないかもう少し調べてみます。ありがとうございます！
あ、ちがうんです。
一緒にHTMLの改行を削除してください。
white-space: pre-line;
は、HTMLコードの改行をそのまま表示するCSSなんです。
えぇ……改行なんてしてな……あっ！？ソースコードのインデント的な改行も反映されるってことか！と気づいて修正してみました。さっきと違って、ちゃんと一行で表示されました！
しかし、ここからどうしたら良いのかがわからずでおります。現状、この white-space: pre-line を使用していなかった時とほぼ同じ挙動となっている感じです。
HTMLコードの改行をそのまま表示するCSSを使うということは、HTMLコードのどこかで私が任意にEnterキーを押して改行させてやる……ということかなと思うんですが……と書いていて気づきました。
これ、私の質問の仕方が悪かったです！実はこの新着情報、Wordpressのループ処理で吐き出してるヤツなんです。今回の質問には関係ないだろうと思って、この質問のタグやらコードやらには一切wordpressであることを出してなかったんです。申し訳ございません！！
なるほど……HTMLは変更不可、ということですね。
追記します。
ですので好きな位置で手動で改行して表示、ということができないんです。それとタイトルが長かったり短かったりするので、何かこう、力技でうまいことエイッとできない感じと言いますか。
ただ、最初の回答をいただいた際にメディアクエリでうまいことできるかも……とも思いましたので、ちょっとそちらをやってみたいと思います。
あなたの回答
tips
プレビュー
