レスポンシブWebデザインのHTMLとCSSの基礎と学習方法 |

Web制作を学習している方に向けてWebページを作成するにあたり、HTMLで最低限必要な記述のベースとCSSのメディアクエリ（Media Queries）を使ったレスポンシブWebデザインの書き方をご紹介します。

また、後半ではちょっとした学習方法もご紹介します。

HTMLでの記述のベース

まずディレクトリ構造は、CSSフォルダの中にstyle.css、JSフォルダの中にscript.jsを、画像はimagesフォルダで管理するという構造でサンプルコードの話しを進めます。

HTMLの記述のベースは以下のようになります。

最初のDOCTYPE宣言からlang属性で言語の指定、文書の情報を入れるheadタグ。
headタグ内には最低限必要なmeta要素を。charsetで文字コード、titleタグでページのタイトル、その他キーワードとディスクリプション、linkタグでCSSファイルの読み込みなど。

「<meta http-equiv=”X-UA-Compatible” content=”IE=edge” />」はIEのブラウザで互換表示させないように記述しておきます。
「viewport」はタブレット端末をはじめスマートフォンなどのモバイル端末に表示を合わせられるように絶対に必要な記述です。viewportはデザインの状況に応じて変更しても良いです。今回は基本形です。

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <title>Responsive Web Design</title>
  <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0">
  <meta name="keywords" content="">
  <meta name="description" content="">
  <link rel="stylesheet" href="css/style.css">
</head>
<body>

  <!-- header -->
  <header>
  </header>
  <!-- /header -->

  <!-- Global Navigation -->
  <nav>
  </nav>
  <!-- /Global Navigation -->

  <!-- main -->
  <main>

    <article>
      <section>
      </section>
    </article>

  </main>
  <!-- /main -->

  <!-- footer -->
  <footer>
  </footer>
  <!-- /footer -->

  <script src="js/script.js"></script>

</body>
</html>

Webページにはheaderとfooter、普通のWebサイトに必ずある案内リンクのグローバルナビゲーションは設置するでしょうからnav、ページのコンテンツが入るmainや記事としてのまとまりであるarticle、文書の一般的なセクション（章や節や項のような内容）で使うsectionと。
articleやsectionはサイトの種類（企業サイト/ブログサイト）やデザインによって使い方は変わってきます。

JSファイルの読み込みはbodyの終了タグの直前に書いていますが、読み込み場所はheadタグ内とbodyタグ内、どちらでも可能です。

Webサイト表⽰⾼速化の⼀つの⽅法として、レンダリングをブロックさせるCSSとJavaScriptをHTMLのhead内ではなくbodyの終了タグの直前に読み込ませるというものがあります。

昨今、ユーザーにストレスを感じさせないようにWebサイト表⽰⾼速化が勧められていますので、Webサイトのパフォーマンス向上のためにbodyの終了タグの直前に書くのが⼀般的となっています。
ただ、HTMLをすべて読み込む前にJSでなんらかの処理をさせる場合は先に読み込んでおかなければならないので、そういった場合はheadタグ内に記述します。

CSS

CSSではレスポンシブWebデザインにしますのでメディアクエリ（Media Queries）を使います。
メディアクエリ（Media Queries）とは、Webページの表示をデバイス環境に応じて切り替える機能。
CSS3より導入された新しい要素です。

ここではモバイルファーストの書き方で説明します。

はじめにモバイルをベースとしたすべてに共通するスタイルを記述して、タブレット端末の幅の時、PCのブラウザ幅の時とだんだん幅の大きくなっていくにつれて効くスタイルを書いていきます。
サンプルコードでは768px以上からタブレット、920px以上からPCのスタイルとします。

style.css

@charset "UTF-8";

/*------------------------------------------------------
 Base (Mobile First)
------------------------------------------------------*/

/* モバイルをベースとしたすべてに共通するスタイル */

/*------------------------------------------------------
 Tablet ~
------------------------------------------------------*/
@media screen and (min-width:768px) {

  /* タブレット端末から効くスタイル */

}


/*------------------------------------------------------
 PC
------------------------------------------------------*/
@media screen and (min-width:920px) {

  /* PCから効くスタイル */

}

モバイルファーストの書き方が苦手なかたは最初にPCのスタイルを書き、「@media screen and (max-width:919px)」のようにメディアクエリでだんだん小さいサイズの記述を書いても良いです。

またブラウザがデフォルトで持つCSSが効いてしまうと自分のやりたいようにできないことがあるので、CSSリセットも書きます。
それを踏まえて、ベースが以下になります。

style.css（CSSのベース）

@charset "UTF-8";

/*
YUI 3.18.1 (build f7e7bcb)
Copyright 2014 Yahoo! Inc. All rights reserved.
Licensed under the BSD License.
http://yuilibrary.com/license/
*/
html{color:#000;background:#FFF}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0}table{border-collapse:collapse;border-spacing:0}fieldset,img{border:0}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal}ol,ul{list-style:none}caption,th{text-align:left}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}q:before,q:after{content:''}abbr,acronym{border:0;font-variant:normal}sup{vertical-align:text-top}sub{vertical-align:text-bottom}input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit;*font-size:100%}legend{color:#000}#yui3-css-stamp.cssreset{display:none}


/*------------------------------------------------------
 Base (Mobile First)
------------------------------------------------------*/
body{
  color: #333;
  width: 100%;
  line-height: 1.6;
  -webkit-text-size-adjust: 100%;
  font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', '游ゴシック  Medium', meiryo, sans-serif;
}

h1 {
  font-size: 2em;
}

h2 {
  font-size: 1.5em;
}

h3 {
  font-size: 1.17em;
}

h4 {
  font-size: 1.12em;
}

h5 {
  font-size: .83em;
}

h6 {
  font-size: .75em;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: bold;
  line-height: 1.4;
}

img{
  width: 100%;
  height: auto;
  vertical-align: bottom;
}

/* clearfix */
.clearfix:before,
.clearfix:after {
  content: '';
  display: table;
}

.clearfix:after {
  clear: both;
}

/* For IE 6/7 only */
.clearfix {
  *zoom: 1;
}

/* header
================================================ */
header {

}

/* nav
================================================ */
nav {

}

/* contents
================================================ */
main {

}

/* footer
================================================ */
footer {

}


/*------------------------------------------------------
 Tablet ~
------------------------------------------------------*/
@media screen and (min-width:768px) {

  /* タブレット端末から効くスタイル */

}


/*------------------------------------------------------
 PC
------------------------------------------------------*/
@media screen and (min-width:920px) {

  /* PCから効くスタイル */

}

最初に記述してあるYUI 3.18.1のリセットCSSはライセンス表記を消さなければ改変したりしても良いみたいですが、他のリセットCSSはライセンスを確認しておいたほうが良いでしょう。
よくわからない場合はライセンス表記を入れること前提で使わせていただきましょう。

body要素の-webkit-text-size-adjustはiPhoneやAndroid、タブレット端末で縦向き横向きの文字サイズを自動調整してくれる機能です。
h1〜h6などは文字サイズをリセットCSSでリセットされたのでベースとしての記述です。
imgには画像の下に余白ができるのでそれを調整。
clearfixはfloatした祭のレイアウト崩れを直すために。「overflow: hidden;」などでもレイアウト崩れは直せますがpositionプロパティやbox-shadowを使った時に厄介なのでclearfixはまだまだ使い勝手がいいのかなと。
clearfixやfloatに関してはここでは説明しないので調べてみてください。

コツとしてはコメントアウトなどを使ってheader部分やcontents部分のスタイルが書いてあるところをわかりやすくしておくとCSSを触るときに見やすくて良いでしょう。

HTMLの学習方法

ここからはちょっとしたHTMLの学習方法とご紹介します。

Web制作を難しく考える必要はありません。
HTML構文のタグの集まりです。
そういう意識で学習しましょう。

参考書で学ぶ

HTMLやCSSの参考書は沢山あります。
基礎知識を学ぶには一冊持っておくと良いでしょう。

時代の進化で、廃止される要素があったり新しい要素が追加されたりと、どんどんHTMLも変わっていきます。
2023年現在のおすすめとして、一部の書籍をご紹介します。

1冊ですべて身につくHTML ＆ CSSとWebデザイン入門講座

スラスラわかるHTML＆CSSのきほん第2版

HTMLやCSSの参考書まだまだあります。

しかし、参考書を買って読んでいるからといって知識が身につくわけではありません。
実際にコードを書いてうまくいかなくて挫折する人もいます。
また、「この本は私には合わない」なんていって参考書ばかり買いあさって参考書貧乏にならないようお気をつけください。
あくまで参考書はほどんどが入門編であって新たに出てくる最近のWeb技術のお話しまでは詳しく書かれていないです。

Webサービスで学ぶ

よく聞くのがProgateでしょうか。

Progateは無料のWebサービスです。
HTML&CSS基礎編と応用編があります。

Progate
https://prog-8.com/

動画で学ぶ

ドットインストールというサイトで動画で学ぶことができます。

ドットインストール
https://dotinstall.com/

ドットインストールでは、ある程度のスキルは無料で少し高度なスキルになると有料（プレミアム会員は月額￥880）になります。

もちろん動画は収録なのでわからない場合は質問ができません。
理解するまで何回も見直すことはできますが。

デベロッパーツールを使って参考サイトで学ぶ

Webブラウザのデベロッパーツールを使って気になる参考サイトがどのように構築されているのか、どんなスタイルが効いているのかを見ることができます。
操作を簡単に行うショートカットキーを使うとよいです。
Windowsでは「Ctrl + Shift + i」または「F12」で開くことができます。「F12」では開いたり閉じたりとトグル動作が可能です。
Macの場合は「option + command + i」。