カテゴリー
プログラミング

Flexboxで3カラム/1カラムのレスポンシブ。ブレイクポイントの活用。

ブレイクポイントを使ってカラムを切り替えよう

前記事『リストを作るには?ulタグ・olタグ・liタグを使おう。』では「display:inline-block」を使って要素を均等に並べる演習をしましたね。

今回は「Flexbox」という手法を学びます。「ブレイクポイント」を使って「パソコンでは3カラム(3列)」「スマートフォンでは1カラム(1列)」に表示を切り替える方法です。

HTML・CSSの記述に一手間加えるだけで、レスポンシブWEBデザインを表現できる大変便利な手法ですので、基礎的な考え方と記述をマスターしていきましょう。

HTMLでリストを作成する

HTMLコーディングするエンジニア

まずは、HTMLファイルを作成し、基本的なリストの記述をしましょう。

前記事『リストを作るには?ulタグ・olタグ・liタグを使おう。』では<ul>タグや<ol>タグを使いましたが、今回は異なるタグを使ってリストを作成してみます。

・題名:<dt>タグ

・説明:<dd>タグ

以上のイメージで記述をしてみましょう。

では、テキストエディタに「index.html」ファイルを作り、下のHTMLのサンプルコードを写してみてください。

<head>
     <meta charset="utf-8">
     <title>Flexboxの練習</title>
     <meta name="description" content="Flexboxの演習です">
     <link rel="stylesheet" href="sample.css">
</head>
<section>
     <h2>会員カード 3つのメリット</h2>
     <dl>
        <dt>年会費無料!</dt>
          <dd>年会費は永年無料。気軽に登録できて、お友達紹紹介特典も充実。</dd>
        <dt>最大50%のお値引き!</dt>
          <dd>年に4回の感謝セールで最大50%のお値引き。人気の商品が格安で購入できます。</dd>
        <dt>嬉しいポイント還元</dt>
          <dd>お買い物で貯まったポイントは1ポイント=1円でお買い物に利用可能です。</dd>
     </dl>
</section>

上記のHTMLコードは「年会費無料!」などの題名を示す<dt>タグに対して、その説明を<dd>タグで行っています。1つのセットの中身は<dt>が1つ以上<dd>が1つ以上必要。1つの<dt>に対して<dd>が2つ並んでも問題ありません。

上記のコードをブラウザに写すと、下の画像のようになります。

<HTMLでのデフォルト表示>

HTMLでのデフォルト表示の画像

1つの<dl>の中に複数<dt>と<dd>がセットで入っているだけですので、単に文字が並んでいるだけですね。

ここから、このHTMLファイルに記述を加えていきます。

flexboxによる3カラムに挑戦

ダブルモニターの作業机

ブレイクポイントを使って「パソコンでは横に3つ並び」「スマートフォンでは縦1列」となるように記述していきましょう。

グローバルナビゲーションの作り方【HTML・CSSコード付き】』にて解説した「display:inline-block」は、文字量が少ないときは便利ですが、文字量に差があると高さが揃わずにイビツな見え方になってしまいます。そこで高さを揃えようと思っても、文字が要素からはみ出るなどの事態にもなるのです。

そこで「Flexbox」と呼ばれる手法を使います。

「Flexbox」を適用すると、文量に差があっても自動的に高さがそろいます。意図しないカラム落ちも防ぐことができるので、大変便利なんですね。

では、先ほどのHTMLに追記をしていきましょう。CSSで見栄えを整える前の下準備だと思ってください。

具体的には、以下の追記を行います。

①横並びにする3つのかたまりを<div>タグで囲みclassを付ける

②親要素となる<dl>タグにもclassを付ける

下記のHTMLのdivタグとclassを追加したHTMLコードを写してみましょう

<divタグとclassを追加したHTMLコード>

<head>
    <meta charset="utf-8">
    <title>Flexboxの練習</title>
    <meta name="description" content="Flexboxの演習です">
    <link rel="stylesheet" href="sample.css">
</head>


<section>
     <h2>会員カード 3つのメリット</h2>
     <dl class="flex-container">
     <div class="flex-item">
        <dt>年会費無料!</dt>
          <dd>年会費は永年無料。気軽に登録できて、お友達紹紹介特典も充実。</dd>
     </div>
     <div class="flex-item">
        <dt>最大50%のお値引き!</dt>
          <dd>年に4回の感謝セールで最大50%のお値引き。人気の商品が格安で購入できます。</dd>
     </div>
     <div class="flex-item">
        <dt>嬉しいポイント還元</dt>
          <dd>お買い物で貯まったポイントは1ポイント=1円でお買い物に利用可能です。</dd>
     </div>
     </dl>
</section>

<div>タグというのは、HTMLタグでありながらも実はそれ単体では意味は持ちません。<section>や<article>には該当しないがCSSを適用させるためにかたまりを作りたい場合、あるいはclassを付与したい、といった場合に使います。

そして、上記のコードをブラウザに写すと…まだ先ほどと変わらず、下の画像のように変化はありません。

<divタグとclassを追加したHTMLのブラウザ表示>

divタグとclassを追加したブラウザの画像

この段階はあくまで下準備、ではCSSの記述に入りましょう。

CSSファイルにコードを記述

では「見栄え担当」のCSSコードを書いていきます。

下のコードを写すか、コピーしてCSSファイル(sample.css)に記述しましょう。

<CSSに記述するコード>

/*全体の設定*/
*{
   box-sizing: border-box;
   margin: 0;
   padding: 0;
   }
section{
   width: 90%;
   padding-top: 20px;
   padding-bottom: 40px;
   margin: 40px auto 0;
   border: 1px dashed #ccc;
   text-align: center;
}
h2{margin-bottom: 1em;}


/*dlタグの設定*/
.flex-container{
   display: flex;
   justify-content: space-around;
}
.flex-item{
   background: #b22222;
   color: #fff;
   padding: 1em;
   flex-basis: 30%;
}
.flex-item dt{
   margin-bottom: 10px;
   font-size: 1.2em;
   font-weight: bold;
}

横並びにしたい要素の親要素(.flex-container)に「display: flex」と指定するだけで、中身(.flex-item)が横並びになります。ここからさらに細かい設定をすることが可能です。

本記事では小さな要素を「パソコンでは3カラム(スマートフォンでは1カラム)」にしていますが、大きな要素で行えば、ページ全体のレイアウトを組むこともできます。

では、ブラウザで見てみましょう。

<CSS記述後のブラウザ>

CSS記述後のブラウザの画像

きれいに並びましたね。

しかし…これ実はスマホで確認すると下の画像のように、長方形の縦3列になってしまうのです。

画面の小さいスマホではこれだと非常に読みにくく困りものですね。

<スマートフォンで見た場合のブラウザ>

スマートフォンで見た場合のブラウザ

そこで、CSSにモバイル(スマートフォンや小型タブレット等)用のコードを追加します。

モバイル用CSSコードを追加

スマホを持つ男性

モバイル用のCSSに、下記のCSSコードを追加してみましょう。先ほど書いたコードに続けて書いていきます。

<モバイル用の追加CSSコード>

@media screen and (max-width:480px)
h2{font-size: 1.1em;}
.flex-container{flex-direction:column;}
.flex-item{margin: 0 1em 1em;}

子要素が縦に並ぶので、それぞれがくっつかないようmarginを「margin: 0 1em 1em」と指定しています。なお、親要素に高さの指定がある場合は前項目で書いた記述「justify-content: space-around」が縦方向に効くので、縦のmarginは必要ありません。

flex-direction:column」は、子要素を並べる向きの設定です。パソコン用のコードには記述がなかったですが、初期値「flex-direction:row」が設定されていました。「row→横向き」「column→縦向き」という挙動になります。

上記コードを追加すると、以下のような表示に変わります。

<モバイル用の追加コードが反映されたブラウザ>

モバイル用の追加コードが反映されたブラウザの画像

 

横長の長方形が縦にひとつづつ並び、非常に見やすくなりましたね。スマホサイトでよくみる風景だと思います。

flexbox関連のプロパティは、数が多くバラエティに富んでいます。並べる向きを変えたり、位置を変えたりと、色々な設定ができるのが特長。いろいろなプロパティを調べてみて、変化を持たせてみましょう。

今回もおつかれさまでした。

基礎段階から意識する「フレキシブルな技法」

Macbookとスマホの写真

プログラミング学習の一歩となる、HTML・CSSの学習。この段階からすでに、今回のようにフレキシブルなWEB表現の技法を学ぶのは今や一般的となっています。

スマートフォン時代の現代において、基礎学習の段階から、

「スマホでの見え方」
「パソコンでの見え方」
「タブレットでの見え方」

以上を視野に入れ、それぞれの操作性・UI/UXも当然加味したプログラミングが大切です。当然、chromeやfirefoxなどブラウザ、iOSやアンドロイドなどOSごとの挙動等も意識することになります。

今回の演習のように、基本からレスポンシブの基礎を学びながら、だんだんと応用的なアレンジにも慣れていきましょう。

基礎学習の積み重ねが応用力につながる

オンラインでプログラミング学習をする人

いきなり難しいことに取り組む学習方法もプログラミングの特長という風潮もありますが、当サイト「キソプロ」ではその逆に学び方を推奨しています。

地味でつまらないかもしれませんが、HTMLやCSSそれぞれの特性や、コーディングやプログラミングにある法則やルールをきちんと理解することを優先しています。

基礎学習の積み重ねこそが、その先の応用力に繋がるからです。

プログラミングに対し、理解を曖昧のまま勢いで学ぶことなく、着実に一つひとつをつぶしながら学んでいきたい方、担当のメンターが学生などでなく経験豊富なエンジニアからマンツーマンで学びたい方。

しかも、オンラインで効率よく学びたい場合、一度 “基礎プロ” へご相談ください。