Help us understand the problem. What is going on with this article?

[Sass] flexboxを用いて、画像をmedia queryごとに適切に表示したい

概要

webエンジニアにとって、responsive designを考慮した設計は不可欠となっている。ただ、gridとかflexboxとかやり方は様々にあるので、実装しているときにどれを使用すれば良いか、最初はわからなかった。
ただ、flexboxを使った方が結果的に楽だったので、今回はflexboxを使用した画像の表示をさせたいと思う。

前提条件

使用言語(CSS)

実務においてCSSで書くことがほとんどなかったので、今回はSassで書いていきます。Stylusでもほぼ同じです。
所要時間は20分でした。まあ、サクサクと描けるレベルです。

難易度

★☆☆☆☆
Sassの書き方さえ慣れれば、これまた簡単にできます。

ファイル構造

以下の条件を満たしたファイル構成を行いました。

  • Sassで記述したCSSをgulpでcompileできる状態である。
  • HTMLは今回はpureなHTML5で記述する(今後はgulpでpugが使えるように実装したい)
  • imgを保存できるフォルダの作成(本当はassetsフォルダにcss/js/imgをまとめるのが良いが、今回は素材が少なく、階層が深くなるのは個人的に嫌だった。なので、ルートディレクトリ配下に設置。)
. -
  |- index.html
  |- css
      |- style.sass
      |- style.css(触らない)
  |- img
      |- (image.jpg)
  |- gulpfile.js
  |- package-lock.json
  |- package.json

コード

1. HTML

  • .container 配下に .title-box image-list を設置。
  • ui li を使用して、画像をリスト表示させた。
  • - 本当はimgタグの下にあるdivは caption タグを使用したかったが、使い勝手が悪かったため、今回はdivで統一。
  • class名は、componentごとに設定。後にフロントエンド開発にてAtomic Designに準拠した開発ができるように。
<!DOCTYPE html>
<head>
  <link rel="stylesheet" type="text/css" href="./css/style.css">
</head>
<body>
  <div class="container">
    <div class="title-box">
      <h1>Media Query CSS</h1>
    </div>
    <ul class="image-list">
      <li class="image-box">
        <img src="./img/cat01.jpg" alt="cat01">
        <div>image cat 01</div>
      </li>
      <li class="image-box">
        <img src="./img/cat02.jpg" alt="cat02">
        <div>image cat 02</div>
      </li>
      <li class="image-box">
        <img src="./img/cat03.jpg" alt="cat03">
        <div>image cat 03</div>
      </li>
      <li class="image-box">
        <img src="./img/cat04.jpg" alt="cat04">
        <div>image cat 04</div>
      </li>
      <li class="image-box">
        <img src="./img/cat01.jpg" alt="cat01">
        <div>image cat 01</div>
      </li>
      <li class="image-box">
        <img src="./img/cat02.jpg" alt="cat02">
        <div>image cat 02</div>
      </li>
      <li class="image-box">
        <img src="./img/cat03.jpg" alt="cat03">
        <div>image cat 03</div>
      </li>
      <li class="image-box">
        <img src="./img/cat04.jpg" alt="cat04">
        <div>image cat 04</div>
      </li>
    </ul>
  </div>
</body>

2. CSS(Sass)

  • colorとbreakpointは片んすうを使用。このことで、特に色に関して管理がしやすくなる(中・大規模開発に対応)
  • 本当は、reset.cssとbasic.css(デフォルトのcss設定)を挟むべきだが、今回は書かなかった。
  • スマホベースでsassを記載し、tablet -> desktopの順番で書いた。desktopから書くよりもCSSの調整が簡単になるので、このやり方はおすすめ。
// variables
$background-color: #f2f2f2
$black: #111111
$white: #ffffff

// breakpoint
$tablet: 768px
$desktop: 1024px

* 
  box-sizing: border-box

html
  font-size: 10px
  overflow: auto

body
  background-color: $background-color
  box-sizing: border-box
  margin: 0
  overflow: hidden
  min-width: 100%
  width: 100%

.container
  margin: 0
  padding: 0 2rem
  width: 100%

.title-box
  margin-bottom: 2rem
  padding: 1rem

  h1
    font-size: 4.8rem
    font-weight: bold
    line-height: 1.5em
    text-align: center

.image-list
  display: block
  list-style: none
  margin: 0
  padding: 0
  width: 100%

  @media (min-width: $tablet)
    display: flex
    flex-wrap: wrap

  .image-box
    margin-bottom: 3.2rem
    padding: 1rem
    width: 100%

    @media (min-width: $tablet)
      width: calc(50% - 1.6rem)

      &:nth-child(odd)
        margin-right: 1.6rem

    @media (min-width: $desktop)
      width: calc(25% - 1.6rem)

      &:not(:nth-child(4n))
        margin-right: 1.6rem

    img
      margin-bottom: 1rem
      max-width: 100%
      width: 100%

    div
      font-size: 3.0rem
      font-weight: bold
      line-height: 1.5em
      text-align: center

完成図

sp
tablet
desktop

まとめ

なるべくHTMLとCSSの記述の時には、余計なコードを書かないように努力している。SassはCSSよりも記述量が圧倒的に少なく、入れ子構造で入力できるので、管理も簡単になる。HTMLも、普段はpugで記述しているんおで、タグをわざわざつける必要もない。
あとは、ここにJSで開発をゴリゴリやって、動的に画像を挿入したり、infinity scroll導入してみたりするのもあり。
まあ、今回はこんな感じ。
良い記述方法など会ったら、教えてください!!!

AkihideEgashira
Freelancer. UI / UX designer. Front-End Engineer(Vue.js). 使用言語: HTML5 / CSS3(Sass, Stylus) / JS(vanilla JS, jQuery, vue, React, node.js) 最近Golangも勉強中。
https://www.behance.net/shingashi09a9b
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした