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は見た目やサイズなどの指定がほとんどで、レスポンシブの部分は少ないです。

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

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

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

これにヘッダー・フッターも付けました。スマホやタブレットで表示するときは、メニューがメインコンテンツの下に表示されます。

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

2019/2/4

サンプルコードをさらに更新しました。4パターンをラジオボックスで選ぶことで切り替わるツールを追加しています。

また、かんたんにですが見た目のデザインをそれなりのものに変えました。-> 新しいサンプルページ

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

最初にサンプルページを用意したのでそれを見てみましょう。-> サンプルページ

カラム変更のツールを用意したのでラジオボタンを変更して動かしてみてください。カラム数や位置が変わるはずです。

今度はこれをコードの面から見ていきましょう。最初はHTMLです。

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

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

<!DOCTYPE HTML>
<html lang="ja">
<head></head>
<body class="column1">
  <div class="wrap">
    <header>
      <div class="logo">Sample site</div>
    </header>
    <div class="content">
      <div class="main"></div>
      <div class="side-menu left">
        <article>
          <h3 class="title">Sample</h3>
          <div class="content"></div>
        </article>
        <article>
          <h3 class="title"></i>Sample</h3>
          <div class="content"></div>
        </article>
        <article>
          <h3 class="title">Sample</h3>
          <div class="content"></div>
        </article>
      </div>
      <div class="side-menu right">
        <article>
          <h3 class="title">Calendar</h3>
          <div class="content"></div>
        </article>
        <article>
          <h3 class="title">People</h3>
          <div class="content"></div>
        </article>
        <article>
          <h3 class="title">Fun!</h3>
          <div class="content"></div>
        </article>
      </div>
    </div>
    <footer>
      <section class="footer1"></section>
      <section class="footer2">© 20xx sample.com</section>
    </footer>
  </div>
</body>
</html>

このコードは、サンプルからツールの部分やアイコンなどカラム変更とは関係ないのを外したものです。

HTMLではむずかしいことはしていません。カラム変更の部分のポイントはひとつです。それは<bory>タグのクラスです。

  • 1カラム -> class="column1"
  • 2カラム(左メニュー)-> class="column2 left"
  • 2カラム(右メニュー)-> class="column2 right"
  • 3カラム(両端メニュー)-> class="column3"

4つのパターンごとにクラス名を変更します。HTMLではこれだけです。

ほかにポイントをあげるとすれば、ページのコンテンツの最大幅をコントロールする.wrapと、HTML5から追加された新しいタグを使うくらいです。最近は、HTML5からしか知らない人も多いので気にすることはないです。

  • ヘッダ・フッタの専用タグ(<header>, <footer>)
  • コンテンツのグループ化(<article>, <section>)

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

次にCSSです。デザインやアイコンの部分を除いた、レスポンシブの部分だけを抜粋します。

/*
 * 1カラム
 */
body.column1 .left, body.column1 .right {
  display: none;
}
/*
 * 2カラム
 */
body.column2.left .right {
  display: none;
}
body.column2.right .left {
  display: none;
}
/*
 * タブレット横向き以上(PCサイズ)
 */
@media screen and (min-width: 992px) {
  .wrap {
    max-width: 1200px;
    margin: 0 auto;
  }
  /*
   * 1カラム
   */
  body.column1 .wrap {
    max-width: 780px;
  }
  /*
   * 2カラム
   */
  body.column2 .left, body.column2 .right {
    width: 350px;
  }
  /*
   * 3カラム
   */
  body.column3 .left, body.column3 .right {
    width: 280px;
  }
  /*
   * メニューの横並び
   */
  body.column2 .wrap > .content, body.column3 .wrap > .content {
    display: flex;
  }
  body.column2 .left, body.column3 .left {
    order: -1;
  }
  body.column2 .main, body.column3 .main {
    flex: 1 1 auto;
  }
  body.column2 .left, body.column2 .right, body.column3 .left, body.column3 .right {
    flex: 0 0 auto;
  }
}

気づいたでしょうか? CSSでのポイントは、カラム変更の処理でスマホサイズはほとんどありません。メニューの表示/非表示のコントロールだけです。

処理のほとんどはPCサイズの処理です。PCの場合メニューをヨコに並べるので自然と処理が多くなります。

メニューの表示/非表示

xxx {
  display: none;
}

DOMから要素を外して隠します。DOMから消すのでその領域もなくなります。

DOM(Document Object Model)

htmlのタグや属性の情報をメモリ上に展開したもの。オブジェクト(変数)でhtmlタグの内容が参照できる。

htmlに限らず、xmlなどのマークアップ言語全般に関する規定。W3Cから勧告されている。

ツリーの構成をしているので、DOMツリーとも呼ばれる。

JavaScriptでhtmlの情報をあつかうときは、DOMにアクセスしている。

column1のときは、メニューをふたつとも消します(left, right)。column2のときは、左メニュー表示のときは右メニューを消して、右メニュー表示のときは左メニューを消します。両方メニューを表示するときは何もしません。

タブレット横向き以上のサイズの処理

@media screen and (min-width: 992px) {

}

@mediaは『メディアクエリ』と言います。端末サイズごとに処理を分けるのに使います。min-width: xxxは、ページを表示するサイズ幅が指定以上の場合の処理です。

992px以上は、タブレット横向き、小さめのノートPC、デスクトップPCが対象になります。

じっさいのサイズはメーカーや商品によってまちまちです。992pxはだいたいの端末であてはまるので区分としてよく使います。

ページの最大幅と中央表示

ページの最大幅指定
.wrap {
  max-width: 1200px;
}

widthはヨコ幅を固定にしますがmax-widthは最大値です。指定サイズを超えると固定サイズになります。サンプルでは1200pxを超えるまで横のサイズが変わります。

中央表示
.wrap {
  margin: 0 auto;
}

display: blockの要素を中央に表示します。

ブロック要素はデフォルトでヨコ幅いっぱいに広がります。左右のマージンをautoにすると、要素は広がらずマージンを均等に割り当てるので要素が中央に表示されます。

ブロック要素の中央寄せのオーソドックスな使い方です。

(text-align: centerだと、ブロックの横はMaxで広がるので中央寄せしません。)

ブロックとインライン

インラインは文章のようにヨコに並ぶこと。それに対してブロックは段落のようにタテに並ぶ。

インライン: <a>, <span>など

ブロック: <div>, <table>, <img>など

ブロックは、『ヨコに並ぶのをブロックして次の段に要素を配置する』と考えると覚えやすい。インラインの対だからアウトラインと言いたくなるが、そうじゃないところに注意が必要。

メインコンテンツとメニューのサイズ指定

メインコンテンツとメニューのサイズ指定
body.column1 .wrap {
  max-width: 780px;
}
body.column2 .left, body.column2 .right {
  width: 350px;
}
body.column3 .left, body.column3 .right {
  width: 280px;
}

メインコンテンツだけのとき、コンテンツを強調したいのでヨコ幅を大きくとります(780px)。でも1200pxまでは広げません。文章などが読みにくくなるからです。

サイドメニューのサイズは固定にします。メニューが両方にある場合は、コンテンツのジャマになるのでサイズを小さくします。

新書や文庫など、本を参考にするとよいです。だいたい1行あたり35~40文字くらいの幅を持たせると読みやすくなります。

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

コンテンツとメニューの横並び

ヨコ並び
body.column2 .wrap > .content, body.column3 .wrap > .content {
  display: flex;
}
body.column2 .left, body.column3 .left {
  order: -1;
}
body.column2 .main, body.column3 .main {
  flex: 1 1 auto;
}
body.column2 .left, body.column2 .right, body.column3 .left, body.column3 .right {
  flex: 0 0 auto;
}

今回のサンプルのクライマックスです。ほかはサイズ指定とか装飾をつける処理で人によって内容はまちまちです。正直どうでもいいです。

ここで一番大事なのは、コンテンツのヨコ並びにflexを使うところです。

flexでは、ヨコ並びにするコンテンツの親にdisplayプロパティを指定するだけです。これで子要素が1行でヨコに並びます。

.container {
  display: flex;
}

flexのすごいところは子要素の並び順も変えることができることです。

.items {
  order: -1;
}

デフォルトが0で、小さい値が左、大きい値が右に配置されます。サンプルでは左メニューに-1をつけて一番左に表示するようにしています。

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

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

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

今回のサンプルでは、

  • サイドメニュー:拡大・縮小なし。つねにwidthの幅。
  • メインコンテンツ:拡大・縮小あり。ヨコ1行に表示しようとするとwidthが足りないとき、サイズがレスポンシブになる(自動的に縮小する)

になります。

CSS3からレスポンシブデザインのためにflexが追加されました。

サンプルを更新した最大の理由がこれです。float, display:inline-block, clearなどで並び替えしていたものをごっそりやめて、flexに変更しました。

float, display:inline-block, clearでの並び替えは、慣れないとなかなかできないものでしたが、flexでサクッとできるようになっています。

HTML&CSSはこれで終わりです。改めてサンプルページを表示してみましょう。-> サンプルページ

ブラウザの開発ツール(ChromeならF12)やスマホ・タブレットで確認してみてください。レスポンシブにコンテンツが配置されているはずです。

【解説】ツールについて

パターン切り替えのツールのしくみはとても簡単です。ラジオボタンでパターンを選んだら、<body>のクラス名をJavaScriptで変更しているだけです。

見た目の動きではJavaScriptで何か特別なことをしているように思うかもしれませんが、JavaScriptでは動きはコントロールしていません。

あくまで動きをコントロールしているのはCSSです。

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

レスポンシブデザインを行なうのに、メディアクエリは必ず使います。メディアクエリは、端末サイズごとにCSSを設定します。

でも、メディアクエリを細かく区切ってそれぞれのデバイスの設定を行うのは大変です。

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

  • CSSの基準デバイスはスマホ
  • タブレットのタテ向きまではスマホと同じデザイン
  • タブレットのヨコ向き、PCは同じデザイン(メディアクエリで設定)
  • デザインの区切りは、幅992pxの1つだけ

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

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

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

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

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

スマホはヨコ幅が小さいのでコンテンツは上から下へ流します。HTMLも上から下に向かって書くのでそのまま表示できます。とてもシンプルです。CSSもデバイスの幅(width)やコンテンツの配置を考える必要がありません。

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

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

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

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

サンプルコードでもメディアクエリ内の処理が半分以上をです。大きいデバイスが複雑になりやすいことが一目で分かります。

もうひとつ、全体にかかわる指定はスマホ用の部分に書くべきです。(色とか、基準サイズとか)

PC用の部分はただでさえ複雑になりやすいので、CSSの全体像が見えにくくなります。全体像が見えにくいと、修正などの保守・メンテナンス作業がつらくなります。

まとめ

HTML5, CSS3で作ったフォーマットは、デザインが崩れることが一瞬もないので、スムーズにレスポンシブデザインに対応できます。

まだ昔の使い方をしている人は、完成度の高いレスポンシブデザインを実現するために積極的に使っていきましょう。

HTML5, CSS3しか知らない人は、昔のことは雑学程度にしておきましょう。ほぼ使うことはありません。

(古いブラウザが対象になっているなどレアケースは除く)

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

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

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

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

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

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

HTML&CSSの本
post-cta-image

どうしてもインターネットで調べて勉強するのが苦手という人のために、HTMLとCSSの最新技術と基本を網羅できる本を2冊選びました。

この内容を身につければ、ほかの本は必要ありません。将来的には、自分の力で、書籍を使わずに、インターネットにある情報だけで学べます。


HTML&CSSの本2選

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

*

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

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