css メディアサイトのように要素を指定列に並べる方法

メディアサイトのように要素を指定列に並べる方法

最近Webサイトを実装したのですが、メディアサイトのように指定列数の要素を並べる方法がわからず戸惑ったので、実装方法を書き残しておきます。

＊環境

macOS
CSS3
HTML5

＊参考

＊実装

HTML で一般的な記事の構造を書いてみました。
今回クリックしても記事には遷移しません。また、イメージはサンプルのものを使っています。

article タグ ---- 内容が単体で完結した要素で、記事やお知らせなどそこを読めば理解できるブロックへの使用が適しています。（divを使っても問題ないです）

<HTML>

<div class="main">
  <article class="archive-list">
    <div class="eye-catch">
      <a>
        <img src="http://placehold.jp/200x180.png">
      </a>
      <span class="type-name">サンプル</span>
    </div>
  </article>
...
</div>

今回は記事を 3列に並べたかったので、<article>の幅を25%にしました。こうすることで、画面を拡大縮小しても 3列のまま列数を維持することができます。（marginの値によって割合は調整してください）

display ---- inline-blockを指定することで要素を横並びにすることができます。floatプロパティでも要素を横並びにすることができ昔から使われている方法ですが、要素が浮いた状態になり高さを指定しないとレイアウトが崩れる可能性があり、回り込ませて表示させたい場合以外はメリットがありません。
position ---- 記事内に要素を重ねて配置したい場合は、親要素にrelativeを指定して子要素にabsoluteを指定します。こうすることで、子要素は親要素を基準にして移動することができます。
vw ---- viewportの幅によって可変になります。1vw で 1%に相当します。

<CSS>

body {
  background: #fff;
  padding: 10px;
  font-family: Helvetica;
}

.archive-list {
  margin: 0 3% 20px 0;
  width: 25%;
  height: 35vw;
  display: inline-block;
  border: 1px solid #e2e5e8;
}

.eye-catch {
  position: relative;

  img {
    max-width: 100%;
  }
}

.type-name {
  position: absolute;
  top: 0;
  left: 0;
  padding: 2px;
  font-size: 14px;
}

＊所感

要素を横並びにする方法は複数あるのですが、メリット・デメリットをよく考慮して適切な CSS を使えるようにしておきたいと思います。

登録: コメントの投稿 (Atom)