コメント欄などにユーザー情報を表示するHTMLとCSS

会員制サイトによくある構成

コメント投稿系の会員制サイトなどでよくある、ユーザー情報のヘッダ部分のHTMLとCSSを作成します。

デザインのイメージは以下

ユーザーアイコンとユーザー名、投稿日時というよくある組み合わせです。ユーザー名の下にコンテンツを投稿した日付を表示するようにします。

HTMLとCSS

HTML

<div class="item__header clearfix">
  <span class="item__user-icon">
    <img src="./img/jibanyan.jpg" height="48" width="48" alt="ジバニャン" class="item__user-icon-img" />
  </span>
  <span class="item__user-name">
    <strong>ジバニャン</strong>
  </span>
  <span class="item__date">
    2014/08/29 19:00
  </span>
</div>

各情報はそれぞれspanタグで囲いました。

CSS

.item__header {
  padding: 10px;
}

.item__user-icon {
  float: left;
}

.item__user-name, .item__date {
  display: block;
  margin-left: 60px;
}

上記以外でfloatを解除するために、bootstrapで利用できる汎用クラスのclearfixを使用しています。clearfixにスタイルがないと崩れるはずです。

spanタグを使用したため、display:block;を指定しました。

参考

CSSのクラス命名はコチラを参考にしました。