HTML5&CSS3: レスポンシブ対応の基本フォーマットを作成した

  • -

    シェア
  • ---

    LINEで送る
  • -

    はてなブックマーク
    ブックマーク
  • -

    pocket
  • -

    rss
他言語サイト
翻訳はみつかりませんでした
html5 css3 image
イラストACの画像をもとに加工しています。

HTMLとCSSだけで作る、レスポンシブに対応したWebページの基本フォーマットを用意しました。

  • 1カラム
  • 2カラム(左メニュー、右メニュー)
  • 3カラム(両端メニュー)

の4パターンがあります。

cssクラスを1か所変えるだけでパターン変更ができて、スマホサイズになるとサイドメニューが下の方に表示されるようにしています。

HTML,CSS基本フォーマット作成に際して

近年、Webのフロント開発では当たり前になっているレスポンシブウェブデザイン。

それを実現するには、とくにCSSに専門性の高い知識が求められます。
(高度なことを行う場合はJavaScript, jQueryも)

ですが、実際に触ってみると意外と簡単にできてしまうのもHTML、CSSの魅力です。

今回、HTMLとCSSだけで、レスポンシブウェブデザイン対応のHTMLの基本フォーマットを作成しました。

2018/10/28
HTML5, CSS3から、かんたんに作れるようになったので、ソースコードサンプルを全面的に作り直しました。さらに完成度の高いコードになっています。

このようなものは、WordPressのテーマなど、テンプレートの中にすでに組み込まれています。普段は意識する必要はないですし、絶対に必要な知識でもありません。

しかし、根本的なことを知ることは損ではないので、学習用としてあってもいいかなと思って作成しました。

HTMLは20行もありません。CSSは90行ぐらいですが、視覚的にわかりやすいような定義が30%ぐらいで、レスポンシブの部分に関する記述は少ないです。

たったこれだけの記述で、cssのクラス名を1か所変えるだけで、4パターンのフォーマットが切り替えられるようになっています。

パターンは次の4つです。

  • 1カラム(メインコンテンツのみ
  • 2カラム(左メニュー、右メインコンテンツ
  • 2カラム(右メニュー、左メインコンテンツ
  • 3カラム(両端メニュー、中央メインコンテンツ

これにヘッダー・フッターも付けました。

スマホやタブレットサイズで表示するときは、メニューがメインコンテンツの下に表示されます。

レスポンシブデザインをどのように実現しているのか知りたい人にぜひ参考にしていただければと思います。

レスポンシブに対応したHTML文

HTMLの全文です。たったこれだけです。

ソースコードサンプルのボックスをタップすると(またはボックスにマウスを合わせると)、右上にコピーボタンが出てコードのコピーができます。

慣れないうちは、とりあえずコピー&ペーストで、自分で動かすところから始めると良いです。

<!DOCTYPE HTML>
<html>
<head>
    <link rel='stylesheet' id='rwd-base-css'  href='rwd-base.css' type='text/css' media='all' />
</head>
<body>
    <div class="column1">
        <header>Header</header>
        <div class="content">
            <div class="main">Main Content</div>
            <div class="side-menu side-left">Left Side Menu</div>
            <div class="side-menu side-right">Right Side Menu</div>
        </div>
        <footer>Footer</footer>
    </div>
</body>
</html>

ヘッダー・フッターはHTML5から追加されたheader・footerタグを使っています。

レスポンシブに対応したCSS記述

次にCSSです。90行くらいありますが、レスポンシブ用のCSSは、25行目からです。難しいことは何1つしていません。

/* base configure */
header, footer, .main, .side-menu {
    padding: 15px;
    text-align: center;
    font-size: 1.2rem;
    color: #fff;
}
header, footer {
    background: #ffe9b6;
    margin: 0 auto;
}
.main {
    background: #7fc2ef;
}
.side-left {
    background: #d687b0;
}
.side-right {
    background: #dbe159;
}
.main, .side-left, .side-right {
    min-height: 200px;
}

/* display column */
.column1 .side-left, .column1 .side-right {
    display: none;
}
.column2-left .side-right, .column2-right .side-left {
    display: none;
}

/* Sideways tablet, PC */
@media (min-width: 992px) {
    /* content width init */
    .column1 header, .column1 footer {
        max-width: 900px;
    }
    .column2-left header, .column2-left footer,
    .column2-right header, .column2-right footer {
        max-width: 1030px;
    }
    .column3 header, .column3 footer {
        max-width: 1160px;
    }
    .column1 .main {
        width: 900px;
    }
    .column2-left .main, .column2-right .main {
        width: 700px;
    }
    .column3 .main {
        width: 580px;
    }
    .column2-left .side-menu, .column2-right .side-menu {
        width: 300px;
    }
    .column3 .side-menu {
        width: 260px;
    }
    .content {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    }

    /* content position */
    .side-left {
    order: -1;
    }
    .side-right {
    order: 1;
    }

    /* grow shrink base-size*/
    .main {
        -webkit-box-flex: 0;
    -ms-flex: 0 1 auto;
    flex: 0 1 auto;
    }
    .side-menu {
        -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    }
}

CSS3で、レスポンシブデザインのためにflexコンテナが追加されたことで、いままで苦労していた微調整がいらなくなりました。

サンプルページを表示してみましょう。

レスポンシブ対応基本フォーマットのサンプルページ

それぞれ4パターンのサンプルページを用意しました。ソースは上のHTML・CSSの2つです。各ボタンを押すとサンプルが表示されます。

ブラウザの横幅を変えるだけでレスポンシブにコンテンツが変化します。ブラウザの開発ツールでテスト用スマホ、タブレットでも確認できます。

1カラム(メインコンテンツのみ)のサンプルページ

ヘッダー・フッターの幅も指定できるようにしました。大きいデバイスの場合の、ページ全体の幅を指定できます。

2カラム(左メニュー、右メインコンテンツ)のサンプルページ

HTMLは、7行目の<div class="column1">を<div class="column2-left">に変更するだけです。

たったこれだけで、コンテンツが切り替わります。

PCのブラウザの幅を変えながら確認すると、デザインがなめらかに変化します。これは以前はなかなかできないことでした。

2カラム(右メニュー、左メインコンテンツ)のサンプルページ

同じように、<div class="column1">を<div class="column2-right">に変更します。

3カラム(両端メニュー、中央メインコンテンツ)のサンプルページ

もうお分かりだと思いますが、<div class="column1">を<div class="column3">に変更するだけです。

【解説】フォーマット切り替え

サンプルコードの細かい説明をします。HTMLはシンプルなので説明はしません。CSSを頭から見ていきましょう。(最初の25行は、見栄えの設定なので省略します。)

今回のサンプルでは、1カラム・2カラム・3カラムのフォーマット切り替えを、HTML(divタグ)のクラス名を変更するだけで行えるようにしました。

そのコントロールを行っているのはCSSです。

/* display column */
.column1 .side-left, .column1 .side-right {
    display: none;
}
.column2-left .side-right, .column2-right .side-left {
    display: none;
}

たった6行で、サイドメニューの表示・非表示をコントロールしています。

  • 1カラム(class="column1")のとき:両サイドメニュー非表示
  • 2カラム(class="column2-left")のとき:右サイドメニュー非表示
  • 2カラム(class="column2-right)のとき:左サイドメニュー非表示
  • 3カラム(class="column3")のとき:何もしない。(両サイドメニュー表示)

かんたんですね? ここでは、サイドメニューの表示・非表示だけをコントロールしているだけで、サイドメニューの位置の設定は行っていません。

【解説】メディアクエリ(@media)を最小限の数にする

レスポンシブデザインを行なうのに、メディアクエリは必ず使います。でも、このメディアクエリを細かく区切ってそれぞれのデバイスの設定を行うのは大変です。

今回は、メディアクエリを1つだけ使って作業量を最小限に抑えました。デザインを2タイプに絞ることで、CSSのボリュームを小さくしています。

  • CSSの基準デバイスはスマホ
  • タブレットの縦向きまではスマホと同じデザイン
  • タブレットの横向き、PCは同じデザイン(メディアクエリで設定)
  • デザインの区切りは、幅992pxの1つだけ
/* Sideways tablet, PC */
@media (min-width: 992px) {
    /* content width init */
    .column1 header, .column1 footer {
        max-width: 900px;
    }
    .column2-left header, .column2-left footer,
    .column2-right header, .column2-right footer {
        max-width: 1030px;
    }
    .column3 header, .column3 footer {
        max-width: 1160px;
    }
    .column1 .main {
        width: 900px;
    }
    .column2-left .main, .column2-right .main {
        width: 700px;
    }
    .column3 .main {
        width: 580px;
    }
    .column2-left .side-menu, .column2-right .side-menu {
        width: 300px;
    }
    .column3 .side-menu {
        width: 260px;
    }
    ・
    ・
    ・
}

メディアクエリで最初に設定しているのは、コンテンツの幅(width)です。大きいデバイスは、コンテンツを横並びすることがあるので、widthを設定する必要があります。

今回のポイントは、header, footerは"max-width"を使って、横並びするコンテンツ(メインコンテンツ、サイドメニュー)は"width"を使っているところです。

header, footerのサイズはここでレスポンシブ対応していますが、そのほかは対応していません。あとで出てくるflexコンテナで行うからです。

スマホではwidthを設定していません。コンテンツをデバイス幅いっぱいに上から下へ順に表示するためです。(未設定ではwidthのデフォルトは100%)

【ちょっとブレイク】レスポンシブに対応したCSSの書き方のコツ

今回のCSSで、『基準のデバイスをスマホにしている』のが気になった人もいると思います。

これは、レスポンシブに対応したCSSをシンプルにするためのちょっとしたコツです。さきほどのメディアクエリの数を少なくするのと合わせると、CSSの内容がシンプルになります。

CSSのコードの基準をPCにして、スマホの設定をメディアクエリで行うコードはよく見かけます。でも、この書き方を行うとCSSのコードは膨らみます。

その理由は、『デバイスが大きい方(PC)がCSSは複雑になる』からです。

スマホは横幅が小さいので、コンテンツは上から下へ1つずつ表示します。なのでHTMLはシンプルです。CSSもデバイスの幅(width)を考える必要がないのでシンプルになります。

一方、PCなどデバイスが大きいものは、横幅が広いのでコンテンツを横にも配置します。これは、CSSを複雑にするし、場合によっては、HTMLに調整用タブ(divなど)を追加するので、さらにCSSコードが増える原因になります。

このように、大きいデバイスのCSSは読みづらい傾向があります。これを、メディアクエリで細かく区切って書いていくと、さらにボリュームが大きくなります。

これを、スマホを基準にして、メディアクエリの区切りを少なくするとすっきりします。メディアクエリでは、大きいデバイスの複雑な設定だけを記述します。

  • CSSのデバイスの基準はスマホ(スマホ用CSSがメイン)
  • メディアクエリに大きいデバイスの設定を書く(PC用CSSはサブ)
  • メディアクエリの区切りはできるだけ少なくする(1つでもイケる)

【解説】コンテンツの横並びはflexコンテナを使う

CSS3から、コンテンツの横並びのコントロールはflexでかんたんにできるようになりました。

/* Sideways tablet, PC */
@media (min-width: 992px) {
    ・
    ・
    ・
    .content {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
    }

    /* content position */
    .side-left {
        order: -1;
    }
    .side-right {
        order: 1;
    }

    /* grow shrink base-size*/
    .main {
        -webkit-box-flex: 0;
        -ms-flex: 0 1 auto;
        flex: 0 1 auto;
    }
    .side-menu {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
    }
}

flexコンテナでは、横並びするコンテンツの親に"display: flex"を設定するだけです。これで、子要素が1行で横並びされます。

"justify-content: center"は、並んだコンテンツを中央表示して、余白は端に集まります。

flexのすごいところは、子要素の並び順も変えることができます("order: xx")。デフォルトが0で、小さい値が左、大きい値が右に配置されます。

サンプルでは、横並びのコンテンツの幅はwidthしか設定していません。でも、実行結果では、メインコンテンツのサイズはレスポンシブに変化します。

それをコントロールしているのがflexプロパティです。これには3つの設定を行います。

  • コンテンツ幅の拡大の有無(0:拡大しない, 1:拡大する )
  • コンテンツ幅の縮小の有無(0:縮小しない, 1:縮小する)
  • コンテンツの基準幅(auto: widthの値, その他: px, %など)

※ flexを縦並びにすると、設定するものは幅ではなく高さになる

今回のサンプルでは、

  • サイドメニュー:拡大無し・縮小無し。つねにwidthの幅になる
  • メインコンテンツ:拡大無し・縮小あり。1行に表示しようとするとwidthより小さくなる時、サイズがレスポンシブになる

です。まだ、どうしてあんなにまとまって、レスポンシブに変化するのか分かりにくいですね? header, footerも同じように変化するのが不思議に思うかもしれません。

これは、header, footerの最大値(max-width)と、メインコンテンツ+サイドメニューの最大値(width)を同じすることで実現します。

  • header, footer:基準値(max-width)を超えると幅は変化しない
  • メインコンテンツ+サイドメニュー:基準値(width)を下回るとメインコンテンツが縮小(flex)する。基準値を上回るとwidthが効いてくるので、それ以上に変化しない

まとめ

HTML5, CSS3で作ったフォーマットは、デザインが崩れることが一瞬もないので、スムーズにレスポンシブデザインに対応できます。完成度の高いレスポンシブデザインを実現するために、積極的に使っていきましょう。

また、クラス名を変えるだけでフォーマットが変更される仕組みは、すべてのフォーマットに対応するクラス名をCSSに書くことです。

HTMLのクラス名を変更すると、それに対応したCSSの定義だけが実行され、フォーマットが切り替わります。プログラムでクラス名を変更して動的にフォーマット変更することもできます。

HTMLは、スマホの表示順に合わせてサイドメニューを定義しています。スマホの場合、CSSではほとんどコントロールしていません。HTMLを上から順に表示しています。

  • HTMLはスマホの表示順に合わせて書く
  • CSSはスマホメインで書く
  • CSSのメディアクエリは、PCの横並びコンテンツ調整が中心
  • フォーマット切り替えはHTMLでクラス名を変更するだけ

レスポンシブの方法はだいたいこんな感じです。ほとんどのことはこれの応用でできるでしょう。

HTML、CSSで不可能な、もっと高度なことをしたい場合は、JavaScript(jQuery)を使うことになります。

 

最近Webカテゴリでよく読まれている記事です。
blog image

ドメイン取得の意味が分からない人へ。王道の方法を紹介します。

ドメインの登録業者を選ぶのに悩む必要はないです。サイトを簡単に早く公開するには全くいらないことで、むしろ邪魔です。『お名前.com』というサービスは必ず耳にします。そのお名前.comのメリットとデメリットと一緒に、ドメインの意味が分からない人が一番失敗しないドメインの取得方法を紹介します。

tadtadya.com

_

SNSでも記事を配信しています。
コメントを残す

*

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

この記事を気に入ったらぜひシェアも!!