まだインターネットをパソコンでしか使えなかった時代には、ウェブページはパソコン向けに作られていて、横が長く、1ページにたくさんの情報を表示していました。しかし、iPhoneを始めとするモバイルでのインターネット使用の拡大により、ウェブページはパソコンだけのものではなくなりました。モバイル端末は画面がパソコンに比べて小さいため、既存のパソコン向けデザインは不便となりました。

モバイル専用のウェブページやアプリケーションも登場することになりましたが、二つ以上を同時に運用することは負担が大きくなります。そこで登場したのがレスポンシブデザインで、画面の大きさに合わせてレイアウトを自動的に変更してくれますので、一つのウェブページで色々なディスプレイ環境に対応できます。また、ウェブの技術も進歩し、専用アプリケーションを代替する時代になっています。

今回は私が作成した以下のサンプルページを使い、レスポンシブデザインの基本について説明したいと思います。もちろん、私も初心者ですので、内容に不足は多々あると思いますが、少しずつ補完していきたいと思います。

Demo Page

とてもシンプルなページですが、HTMLとCSS、そしてJavaScriptを使っているため、METAやBODYなどのセクションを分けて説明したいと思います。

Index

  1. META
  2. COMMON
  3. HEADER

Meta

まず最初に紹介するmeta要素は、HTMLの<head>タグ内に記述する、ページ内の情報を持つ要素になります。<head>タグ内には、meta要素以外にもcssファイルのリンクやjavascriptの宣言などが記述されます。次はサンプルのHTMLから抜粋した<head>タグ内のソースとなります。

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta property="og:title" content="Timegarden">
  <meta property="og:type" content="website">
  <meta property="og:url" content="http://timegarden.jp/demo/responsive.html">
  <meta property="og:image" content="http://timegarden.jp/demo/bg.jpg">
  <meta property="og:description" content="Prepare for the Coming Future.">
  <title>Timegarden</title>
  <link rel="stylesheet" type="text/css" href="stylesheet.css">
  <link rel="stylesheet" type="text/css" href="responsive.css">
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.6/css/all.css">
  <script type="text/javascript" src="jquery-3.3.1.min.js"></script>
  <script type="text/javascript" src="script.js"></script>
</head>

  • charset
    ページの文字コードを指定します。
  • viewport
    スマホやタブレットでもページがうまく表示させるための記述です。使用デバイスの画面サイズに合わせてページを表示してくれます。
  • og
    LINEやSNSにページがシェアされた時にページの情報を正しく表示させることができます。タイトルや説明、画像をなどを設定できます。
  • title
    ページのタイトルを指定します。
  • link
    外部のリソースを指定します。主にスタイルシートであるCSSファイルを指定する時に使います。
  • script
    外部のスクリプト(JavaScript)などを指定する時に使います。

Common

続いて説明するのはウェブページの中で共通的に使われるCSSの設定となります。一般的に文字のサイズやフォント、全体的なレイアウトの設定を行います。設定が長い場合は別途のCSSファイルに書いた方が効率的でしょう。

* {
  box-sizing: border-box;
}
html, body {
  margin: 0;
  height: 100%;
  font-family: "Hiragino Kaku Gothic ProN", "meiryo", sans-serif;
}
h1, h2, h3 {
  margin: 0;
}
h1 {
  font-size: 48px;
}
h2 {
  font-size: 32px;
}
a {
  text-decoration: none;
}

まず、全要素に対するbox-sizingの設定ですが、ボックスのサイズを計算する方法を指定出来ます。border-boxにすると、パディングやマージンを含んだサイズで計算出来ますので便利です。

次の、htmlbody要素に対する設定は、基本フォントの指定と、ページ内のマージンを0にして、高さを100%にする設定です。この設定を行った理由は、全てのディスプレイにおいて、トップページを全体表示させるためです。

後は、h1h2などの文字の表示スタイルを設定しています。因みにtext-decorationは文字に下線や取り消し線などを付ける要素で、noneにすると逆にその表示が無効になります。

ここから本格的なサンプルページの説明となります。まず、ロゴとメニューを表示するヘッダーから説明します。簡単なサンプルとは言え、CSSの設定が長いため、少し見づらいかも知れませんが、予めご了承ください。

<header>
  <div class="header-left">
    <a href="#1">Timegarden</a>
  </div>
  <i class="fas fa-list menu-icon"></i>
  <div class="header-right">
    <a href="#1">Top</a>
    <a href="#2">History</a>
    <a href="#3">Future</a>
    <a href="#4">Contact</a>
  </div>
</header>

ヘッダーは専用のheaderタグの中で表現しています。 header-leftはロゴを、header-rightはメニューを表現していています。iタグは「Font Awesome」というWebフォントを使うためのもので、ここではスマホで表示するメニューアイコンとなります。

header {
  height: 65px;
  width: 100%;
  background-color: rgba(34, 49, 52, 0.9);
  position: fixed;
  top: 0;
  z-index: 10;
}
.header-left {
  float: left;
  font-weight: bold;
}
.header-right {
  float: right;
  margin-right: -45px;
}
header a {
  line-height: 65px;
  padding: 0 25px;
  color: white;
  display: block;
  float: left;
  transition: all 0.5s;
}
.header-right a:hover {
  background-color: rgba(255, 255, 255, 0.3);
}
.menu-icon {
  color: white;
  float: right;
  font-size: 25px;
  margin: 20px;
  visibility: hidden;
}

続いてはCSSの設定ですが、header要素には全体的なレイアウトの大きさ(幅、高さ)と、常に上部に表示させるために、positionfixedにして、top0にしています。また、他の要素に隠れないするために、z-index10に設定しています。

ヘッダーのロゴとメニューを指すheader-leftheader-rightクラスはfloatを使ってそれぞれ左寄せと右寄せをしています。また、floatは要素を浮かせることが出来ますので、divのようなブロック要素もspanのように並べることができます。

その次のheader aheader要素の中のa要素を指しています。高さとパディングと色を設定していますが、a要素はインライン要素であるため、displayblockdivのようにブロック要素に変えて、floatで並べるようにしています。

:hoverは疑似クラスと言って、マウスカーソルが乗ってる間の変化を設定できます。ここでは、a要素の背景色を0.3と薄くしていますが、header aで指定したtransitionの設定により、瞬時ではなく、ゆっくりと薄くなるのが特徴です。

最後にメニューのアイコンを指すmenu-iconですが、サイズと色を設定して、右寄せにしています。これはスマホの画面上で表示させる必要があるので、デフォルトはvisibilityの設定で非表示にしています。表示は後のレスポンシブ設定で行います。

Top

ページに接続して一番最初に表示されるトップについて説明します。上記でも説明した通り、トップは全てのディスプレイにおいて全体表示するようにしているのが特徴です。

<div class="top" id="1">
  <h1>Prepare for the Coming Future.</h1>
</div>

HTMLはすごくシンプルで、単にh1タグで見出しを表示しているだけです。

.top {
  height: 100%;
  background-image: url(bg.jpg);
  background-size: cover;
  color: white;
  text-align: center;
}
.top h1 {
  position: relative;
  top: 50%;
}

CSSでは全体表示のために、高さを100%に設定し、背景のサイズも縦横比を保ちながら拡大縮小するcoverに設定しています。見出しの位置は常にトップの中央に表示したいので、positionを相対位置であるrelativeと設定し、上からの配置位置を中央である50%に設定しています。行揃えは.toptext-alignにて中央に設定しています。

History

次はトップの次に来るコンテンツ「ヒストリー」について説明します。トップと同じく、基本はディスプレイの高さに合わせて表示していますが、タブレットやスマホなどの画面ではレスポンシブ専用のCSS設定によって、高さをpx単位に切り替えます。レスポンシブ専用CSSはフッターの後に別途説明します。

<div class="history" id="2">
  <div class="container">
    <h2>History of Human Society</h2>
    <div class="society">
      <div class="icon">
        <i class="fas fa-leaf" style="color: LimeGreen;"></i>
        <p class="title">Title</p>
      </div>
      <p class="text">テキスト</p>
    </div>
  </div>
</div>

HTMLはhistoryクラス名を持つdivタグの中に見出しとアイコン、テキストを含む形になっています。アイコンとテキストは同じ仕組みのものが4つあるため、1つに省略しています。アイコンはFont Awesomeの無料素材を使って表現しました。詳しい使い方などは当ホームページをご参考ください。

.history, .future, .contact {
  height: 100%;
  background-color: WhiteSmoke;
  text-align: center;
}
.container {
  position: relative;
  top: 25%;
}
.future .society {
  width: 100%;
}

CSSはヒストリー以外にも使っている共通的な部分を最初に説明します。historyfuturecontactクラスは基本的にディスプレイの100%高さで表示し、同じ背景色を使います。また、中身は中央寄せにしています。コンテンツを含むcontainerクラスはトップと同じようにpositionを相対位置に設定し、中央より上にコンテンツを表示しています。

.society {
  float: left;
  padding-top: 50px;
  width: 25%;
}
.society i {
  font-size: 150px;
}
.title {
  font-weight: bold;
}
.text {
  width: 75%;
  display: inline-block;
  margin: 0;
  color: #b3aeb5;
}

続いて各アイコン(コンテンツ)に対するCSS設定ですが、4つを横に並べるためにfloatを使い、width25%に設定しています。また、テキストはdisplayinline-blockを設定していますが、width75%にするためにはブロック要素である必要が、更にそのブロックを中央寄せにするためにはinline要素である必要があるからです。

Future

HTMLの内容はヒストリーとほぼ一緒ですが、アイコンが一つになっているため、以下のようにwidth100%に設定しています。他に特筆すべき内容はありません。

.future .society {
  width: 100%;
}

Contact

実際にメッセージを送ったりは出来ませんが、入力フォームのサンプルも作ってみました。メッセージの入力欄は一般的に使われるtextareaタグをそのまま使っていますが、ボタンはbuttonタグではなく、sapnタグにCSSの設定を適用してボタン化しているのが特徴です。

<div class="contact" id="4">
  <div class="container">
    <h2>Contact</h2>
    <br>
    <h3>未来は自分の手で作っていくものです。<br>共に未来を作っていきませんか?</h3>
    <textarea placeholder="Message"></textarea>
    <br>
    <span class="button" ontouchstart="">Send Message</span>
    <br>
  </div>
</div>

HTMLはシンプルな作りになっています。注意すべき点はボタンとして使うspanタグ内のontouchstartですね。PC上のブラウザでは問題ありませんが、タッチデバイスでCSSの:active:hoverなどの疑似クラスを適用させるための設定です。

textarea {
  border: 0px none;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.7);
  width: 50%;
  height: 100px;
  padding: 20px;
  margin: 30px;
  font-size: 18px;
}

.button {
  width: 50%;
  padding: 15px 40px;
  border-radius: 4px;
  background-color: #5dca88;
  color: white;
  cursor: pointer;
  box-shadow: 0px 7px #1a7940;
  display: inline-block;
}

.button:active {
  position: relative;
  top: 7px;
  box-shadow: none;
}

textareaタグの設定は単純に見た目を良くするだけの設定ですので割愛します。buttonクラスはマウスが置かれた時のカーソルをpointerにし、box-shadowの設定により下部に陰影を付けています。:activeの疑似クラスで、ボタンがクリックされた時に、top7px分ずらし、陰影をなくすことでボタンが押されるアニメーションを演出しています。JavaScriptを使わずにボタンのアニメーションを作れるのです。

HTMLの最後となるフッターですが、一行の文字列を表示するだけのシンプルな形になっています。機会があればTOPに戻るボタンなどを追加したいなと思っています。

<footer>
  <p>© Timegarden</p>
</footer>

専用のfooterタグを使っているため、本当にシンプルです。

footer {
  padding: 15px;
  color: white;
  background-color: #2E3138;
}

footer p {
  margin: 0;
}

同じく特筆すべき点はありませんが、一応記述しておきます。

Responsive

ページを構成するHTMLとCSSの説明が終わりましたので、続いて画面の大きさによって自動的にレイアウトを変更してくれるレスポンシブのCSSについてです。今回のサンプルはPC(デフォルト)、タブレット、スマートフォンの合わせて3つのレイアウトに対応していますが、タブレットとスマートフォンの記述はほぼ似ているため、スマートフォン設定のみを説明します。

@media all and (max-width: 670px) {
  .container {
    top: 100px;
  }
  .header-right {
    display: none;
    margin: 0;
    width: 100%;
    text-align: center;
    background-color: rgba(34, 49, 52, 0.7);
  }
  .header-right a {
    width: 100%;
  }
  .menu-icon {
    visibility: visible;
    cursor: pointer;
  }
  〜省略〜
}

記述が長いため簡単なフォントの設定や幅、高さの変更などは割愛しました。画面の大きさによってレイアウトが変わるのは、メディアクエリ@mediaのおかげです。上記では幅が670px以下の場合に下のCSS設定を適用するようになっています。他にも条件はありますが、一般的に使われる条件はwidthheightですね。続いてスマートフォンでのCSS設定内容について説明します。

containerクラスはPCではtop25%でしたが、スマートフォンでは表示領域が狭いため、100pxに固定しています。メニューを表示するheader-rightクラスは非表示にし、幅を100%に設定しています。これはスマートフォンでドロップダウンメニューを表示するためです。PCでは非表示にしていたmenu-iconクラスは逆に表示にします。動的制御は次のJavaScriptで説明します。

JavaScript

画面の大きさによるレイアウトの変化はCSSで対応可能ですが、メニューがクリックされた時のアクションや画面の動的制御などはJavaScriptを使って定義することができます。JavaScriptはブラウザで動作するスクリプト言語で、ウェブでなんでも出来るようになった現代では欠かせないものとなりました。今回は、そんなJavaScriptをもっと簡単に書けるようにしてくれるjQueryを使って説明します。
(生のJavaScriptもいつか新しいサンプルで説明する予定です)

$(function() {
  $(".menu-icon").click(function() {
    $(".header-right").slideToggle();
    fixedScroll();
  });

  $(".header-right a")
    .on('touchstart', function() {
      $(this).css('background-color',
        'rgba(255, 255, 255, 0.3');
    }).on('touchend', function() {
      $(this).css('background-color',
        'rgba(255, 255, 255, 0');
    }).on('click', function() {
      if ($(window).width() <= 670) {
        $(".header-right").hide();
        fixedScroll();
      }
    });

  $(window).resize(function() {
    if ($(".header-right").is(':hidden')) {
      if (state) fixedScroll();
    }
    if ($(window).width() > 670) {
      $(".header-right").show();
      if (state) fixedScroll();
    } else if ($(window).width() <= 670) {
      $(".header-right").hide();
    }
  });
});

まず1行目にある$(function() {〜処理〜}はHTMLが読み終わった時に実行される関数で、ready関数と呼びます。このready関数の中でイベントや設定などのスクリプトを記述しています。jQueryでは画面の要素を$(セレクタ)という形で簡単に操作することができます。セレクタの中にはIDやクラス、タグ名などを設定することができます。では、このJavaScriptで設定しているイベントについて説明します。

最初はスマートフォンで表示されるメニューアイコンを指しているmenu-iconクラスのクリックイベントです。メニューアイコンをクリックすると、jQueryにあるslideToggle関数により、アニメーション付きでメニューがスライドで表示されます。逆にメニューが表示されている時はメニューが消えます。同時にfixedScroll関数でスクロールを固定しますが、この関数は外部のもののため、後で別途紹介します。

次はメニューを指しているheader-rightクラスの中のaタグのイベントですが、on関数を使って複数のイベントを同時に設定しています。touchstarttouchendはタッチデバイスでのタッチ操作時のイベントです。タッチ時に背景色を変えて、タッチ後に戻すイベントを設定しています。また、スマートフォンでメニューをクリックした時にメニューを隠す処理も合わせて設定しています。

最後はレスポンシブ制御によるバグを回避するための処理です。表示しているディスプレイのサイズが変わった時に、メニューheader-rightが隠れて:hiddenいてもスクロールが固定になる場合があるので、その対策を設定しています。また、横のサイズが670px以上は必ずメニューheader-rightを表示し、逆の場合はメニューheader-rightを隠す処理も設定しています。

上記では記述していないfixedScroll関数ですが、以下ページより参考にしております。実装方法や使い方などは以下のページをご確認ください。

【jQuery・CSS】メニューが開いている間はスクロールを固定する