CSSでTaratailやStackOverFlow等の様な記事一覧の作り方を教えてください

Question

CSS初心者です。

現在PHPの勉強で掲示板を作っているのですが、スレッド一覧画面で少し困っています。
イメージ的にはタイトルの通りで、スレッド一覧にレス数、タイトル、投稿日、タグを表示させたいのですが、CSSでli内にそれらをそれぞれのサイズ、レイアウトで配置する方法がわかりません。
どこかで掲示板やブログの記事一覧のサンプルや参考になる様なサイトなどはありますでしょうか？
初めての質問で拙いですが、よろしくお願いします。

Comments

[kei344]

ひとまずご自身で書かれたコードを質問文に追記いただいたほうが回答を得られやすいと思います。

Answer 1

li要素の中身をこのような形に分けてマークアップすればできると思います。
使用するタグは、文書構造に応じて適切なものを選択してください。（teratailの一覧とかを参考に）

後はボックスをCSSで横並びにするのですが、これは色々なやり方があり、
それぞれにメリット・デメリットがあります。
（float、table-cell、inline-block、flexbox、およびそれらの複合）
どれを選択すれば一番良い最適解になるかは、
画面仕様をどうしたいのかによって変わってきますので、
作りたい画面の仕様と各プロパティの特性を考慮して判断すると良いでしょう。

各手法の特徴やメリット・デメリットなどは、
「css ボックス 横並び」などのキーワードで検索すれば
沢山情報が出てきますので、調べてみましょう。

Answer 2

CSSフレームワークはおそらく使っていない・・ですよね？？

キーワードだけアップするのでご自身で調べてみるとよろしいかと思います。
（ぱっと思いついものだけです〜）

• tableタグ, table-cell
• flex box
• レスポンシブ〇〇 )Ex. デザイン、レイアウト、カラム、、、

teratailでもstack overflowでもブラウザのデバッグツールで要素検証すればヒントは得られるかと思います。
後はそういったレイアウトを構築する上で、メリット・デメリットを考えた上での手段選択をするだけです。