HTML&CSS,【新旧比較】レスポンシブ対応の基本フォーマットを作成した

html5 css3 image
イラストダウンロードサイト【イラストAC】
の画像をもとに加工しています。

HTMLとCSSだけで作ったレスポンシブに対応したWebページの基本フォーマットを全面的にアップデートしました。

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

の4パターンを用意。ここでは新旧サンプルの比較を行います。

かんたんに超高速WordPressでサイトを作る、KUSANAGIが使える低価格クラウド・VPS・レンタルサーバ

HTML,CSS基本フォーマットのアップデートについて

HTML5, CSS3は、レスポンシブウェブデザインに対応するため、いろいろな機能が追加されています。

それによって、いままでちょっと工夫が必要だった処理がかんたんにできるようになりました。

ぼくが以前つくったサンプルも、もっとかんたんに、さらに完成度が高いものができるようになったので、全面的に作り替えることにしました。

新旧のサンプルの記事はこちらです。

html5 css3 image

HTML&CSS 【旧】レスポンシブ対応の基本フォーマットを作成した

tadtadya.com
html5 css3 image

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

tadtadya.com

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

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

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

レスポンシブに対応した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>

修正前の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="header">Header</div>
  <div class="content column1">
    <div class="left-group">
      <div class="main">Main Content</div>
      <div class="side-menu side-left">Left Side Menu</div>
    </div>
    <div class="right-group">
      <div class="side-menu side-right">Right Side Menu</div>
    </div>
  </div>
  <div class="footer">Footer</div>
</body>
</html>

無駄なdivがなくなってスリムになっています。また、ヘッダー・フッターは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;
  }
}

次に修正前のCSSです。

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

/* content width init */
.column1 .main {
  width: 976px;
}
.column2-left .main, .column2-right .main {
  width: 670px;
}
.column3 .main {
  width: 670px;
}

/* detail configure of responsive web design */
/* above pc laptop (exclude iPad Pro) */
@media (min-width: 1025px) {
  .column3 .main {
    width: 475px;
  }
}

@media (min-width: 1100px) {
  .column3 .main {
    width: 540px;
  }
}

@media (min-width: 1200px) {
  .column3 .main {
    width: 650px;
  }
}

@media (min-width: 1300px) {
  .column3 .main {
    width: 670px;
  }
}

.column2-left .side-menu, .column2-right .side-menu {
  width: 300px;
}
.column3 .side-menu {
  width: 260px;
}

.right-group {
  vertical-align: top;
}

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

/* PC All */
@media (min-width: 992px) {
  .left-group, .right-group {
    display: inline-block;
  }
  .column2-left .main, .column2-left .side-left {
    float: right;
  }
  .column3 .main, .column3 .side-left {
    float: right;
  }
  /* tweak */
  .side-left {
    margin-right: 6px;
  }
}

/* iPad Pro */
@media (max-width: 1024px) {
  .column3 .right-group {
    display: block;
  }
  .column3 .side-right {
    margin-left: 310px;
    margin-right: 50px;
    margin-top: 10px;
    width: 640px;
  }
}

/* PC: laptop */
@media (max-width: 1200px) {
  .column2-left .side-menu, .column2-right .side-menu {
    width: 270px;
  }
}

/* Tablet */
/* phone */
@media (max-width: 991px) {
  .column1 .main {
    max-width: 990px;
    width: auto;
  }
  .column2-left .main, .column2-left .side-menu {
    max-width: 990px;
    width: auto;
  }
  .column2-right .main, .column2-right .side-menu {
    max-width: 990px;
    width: auto;
  }
  .column3 .main, .column3 .side-menu {
    max-width: 990px;
    width: auto;
  }
  .column3 .side-right {
    margin: 0;
    max-width: 990px;
    width: auto;
  }
}

ボリュームが50行、1/3くらい減りました。一番の違いは、レスポンシブの動きを『float:left, float:right』の回り込みから、『display:flex』に替えたことです。

flexコンテナはCSS3から使えるもので、レスポンシブデザインのために追加されました。これを使うことで細かい微調整がいらなくなりました。

メディアクエリ（@media）で細かいデバイスの区切りが不要になったこともその一つです。今回のサンプルでは、メディアクエリは1つしか使っていません。

新コードの解説はあとにして、まずはサンプルページを表示してみましょう。

（比較のために、修正前のサンプルページもリンクします。）

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

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

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

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

修正前は、微調整のためにマージンを使っているので、コンテンツの間にどうしても余白ができてしまいます。

また、ヘッダー・フッターの幅がメインコンテンツと違います。これだと、PCのモニターが27インチなど大きなものではバランスが悪くなります。

修正後は、これらがかんたんに解決されています。完成度が一段と高くなっていると思います。

（2カラム・3カラムでも修正されています。）

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

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

修正前は、floatを使って回り込みしているので、サイドメニューが下になる一瞬、デザインが崩れているように見えます。

PCのブラウザの幅を変えながら確認すると、修正後のデザインはなめらかに変化します。これが少ないコードでかんたんに解決しています。

（2カラムの右サイドメニュー、3カラムでも修正されています。）

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

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

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

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

まとめ

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

HTMLのスリム化、CSSのボリューム削減は、floatによるコンテンツの回り込みから、flexコンテナに替えたことでできました。

そして、処理の内容もシンプルになっています。

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

行なっている処理はこれだけです。古いブラウザに対応するために、HTML5, CSS3の新機能を使うのに躊躇する人もいると思いますが、余程のことがないかぎり使っていく方がよいです。

かんたんに超高速WordPressでサイトを作る、KUSANAGIが使える低価格クラウド・VPS・レンタルサーバ
前の投稿
HTML5&CSS3, レスポンシブ対応の基本フォーマットを作成した
HTMLとCSSだけで円を描く方法。サイズ、色はCSSで変更できる。
次の投稿
  1. ホーム /
  2. 上級者 - 最高のWebマスター /
  3. HTMLとCSS /
  4. HTML&CSS,【新旧比較】レスポンシブ対応の基本フォーマットを作成した

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

domain image

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

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

tadtadya.com
コメントを残す

*

新着記事