前回、「Webサイト構築入門 – 簡単なウェブサイトを作ってみよう」で簡単なWebサイトを作成しました。
今回は、そのページをレスポンシブ化していきます。
レスポンシブにするための設定
まずは、「ビューポート」、「プレークポイント」の設定をしていきます。
index.htmlの<head></head>で「ビューポート」を設定しましょう。
ちなみに、ビューポートは「Webサイト制作に必要なファイルを準備しよう」から進めている方や、完成版をダウンロードしてスタートされた方は、下記の記述はすでにあることに気付くかと思います。
その場合は、飛ばして次に進んでください。
もし、記述されていない場合は下記を追加してください。
index.html
<head>
<meta charset="UTF-8">
<!--ここから追加-->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--ここまで追加-->
</head>続いて、ブレークポイントを設定します。
今回は、CSSで設定していきます。ちなみに、ブレークポイントに関しては「Webサイト構築入門 – 簡単なウェブサイトを作ってみよう」の「ブレークポイントはどのように決めるのか？」でも説明していますが、本来コンテンツの内容に合ったブレークポイントを設定すべきです。
ですが、こちらでは設定方法とレスポンシブ化の流れを学習する為、予め決定しておきます。
style.cssのfooterについての記述の下に追加します。
style.css
footer p{
text-align: right;
}
/*ここから追加*/
@media screen and (max-width: 768px) {
}
@media screen and (min-width: 769px) {
}
@media screen and (min-width: 769px) and (max-width: 1199px) {
}
/*ここまで追加*/設定したブレークポイントは、「768px以下の場合」、「769px以上の場合」、「769px~1199pxまで」の3つのブレークポイントに設定しました。
レイアウト設定
続いて、レイアウトの設定をしていきましょう。「wrapperクラス（コンテンツ全体を包括するコンテナ）」を変更します。
style.css
@media screen and (max-width: 768px) {
/*ここから追加*/
.wrapper{
width: 100%;
padding: 0 15px;
}
/*ここまで追加*/
}
@media screen and (min-width: 769px) {
}
@media screen and (min-width: 769px) and (max-width: 1199px) {
/*ここから追加*/
.wrapper{
width: 100%;
padding: 48px 15px;
}
/*ここまで追加*/
}ヘッダーの設定
レイアウトの設定ができましたので、次にヘッダーを編集していきましょう。
ヘッダー部分では、コンテンツ幅が768px以下になるとメニューをドロワーメニューになるようにします。
今回は、「Drawer」というjQueryブラグインを使用して実装していきます。
ファイルをダウンロードしてもよいのですが、今回はCDNを使用します。
CSSとjQueryファイルを読み込む
まずは、CSSとjQueryファイルを読み込んでいきましょう。
index.html
<!--ここから追加-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/drawer/3.2.2/css/drawer.min.css">
<!--ここまで追加-->
<link rel="stylesheet" href="css/style.css">
<!--body終了タグの直前に追加-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/iScroll/5.2.0/iscroll.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/drawer/3.2.2/js/drawer.min.js"></script>
<script>
$(document).ready(function() { $('.drawer').drawer(); });
</script>ヘッダーの内容を変更する
初級編では、シンプルなヘッダーの内容でしたが、この部分に変更を加えていきます。まずは、修正前のソースを見ていきます。
修正前：index.html
<header>
<div class="logo">
<a href="index.html">HTML Introduction</a>
</div>
<nav>
<div class="navigation clearfix">
<a href="">Concept</a>
<a href="">Service</a>
<a href="">Contact</a>
</div>
</nav>
</header>修正後：index.html
<body class="drawer drawer--right">
<header role="banner">
<div class="logo">
<a href="index.html">HTML Introduction</a>
</div>
<button type="button" class="drawer-toggle drawer-hamburger">
<span class="sr-only">toggle navigation</span>
<span class="drawer-hamburger-icon"></span>
</button>
<nav class="drawer-nav" role="navigation">
<ul class="drawer-menu navigation">
<li><a class="drawer-brand" href="index.html">HTML Introduction</a></li>
<li><a class="drawer-menu-item" href="#">Concept</a></li>
<li><a class="drawer-menu-item" href="#">Service</a></li>
<li><a class="drawer-menu-item" href="#">Contact</a></li>
</ul>
</nav>
</header>1つ1つ見ていきましょう。
<body class="drawer drawer--right">こちらは、bodyタグに「drawer」と「drawer–right」というクラス名を記述します。先程読み込んだ外部CSSの内容を反映させます。ちなみに「drawer–right」の”right”はメニューが画面の右側と左側どちらに表示されるのかを示しています。左側に表示したい場合は、「drawer–left」とします。
<header role="banner">role属性とは、HTML5から追加された属性で、「役割」を示します。Webアクセシビリティの為に、情報をより分かりやすくしてくれます。このプラグインを使用するために必要な記述となります。「banner」とは「この範囲はヘッダーの役割です。」という意味になります。このプラグインでは、role属性が指定された範囲がドロワーメニューとして格納されます。
<button type="button" class="drawer-toggle drawer-hamburger">
<span class="sr-only">toggle navigation</span>
<span class="drawer-hamburger-icon"></span>
</button>こちらは、メニューを開閉させるためのボタンです。クラス名は、プラグイン固有のものです。
<nav class="drawer-nav" role="navigation">
<ul class="drawer-menu navigation">
<li><a class="drawer-brand" href="index.html">HTML Introduction</a></li>
<li><a class="drawer-menu-item" href="#">Concept</a></li>
<li><a class="drawer-menu-item" href="#">Service</a></li>
<li><a class="drawer-menu-item" href="#">Contact</a></li>
</ul>
</nav>こちらでも、role属性がでてきました。こちらは、ナビゲーションを示しています。メニューを開いた際に表示される項目をこちらに記述します。
続いてCSSです。
今回は、このドロワーメニューを「768px以下」の画面の場合のみ表示させます。必要のないコンテンツは、「display:none;」で非表示にします。
style.css
@media screen and (max-width: 768px) {
.wrapper{
width: 100%;
padding: 0 15px;
}
/*ここから追加*/
.drawer-hamburger{
height: 70px;
padding: 0 15px;
}
.drawer-hamburger-icon{
margin-top: 0;
}
.drawer--right.drawer-open .drawer-hamburger{
background: #FFF;
}
.navigation li a{
float: none;
}
/*ここまで追加*/
}
@media screen and (min-width: 769px) {
/*ここから追加*/
.drawer--right .drawer-nav{
position: relative;
top: 0;
right: 0;
overflow: visible;
width: auto;
height: auto;
}
.drawer-hamburger{
display: none;
}
.navigation{
float: right;
line-height: 70px;
}
.navigation li{
float: left;
padding:0;
}
.navigation li a{
padding:0 15px;
}
.drawer-menu li:first-child{
display: none;
}
/*ここまで追加*/
}これで、ヘッダー部分は完了です。但し、ブラウザで確認するとまだメニュー部分は完成ではありません。あと少しだけ追加する必要があります。次のコンテンツ部分の所にも追加をします。
コンテンツの設定
続いて、コンテンツ部分です。先に、ドロワーメニューの残りの部分を追加します。
</header>
<!--ここから追加-->
<main role="main">
<!--ここまで追加-->
・
・
<!--ここから追加-->
</main>
<!--ここまで追加-->
<footer><header>の終了タグの下に<main role=”main”>を追加しています。こちらもrole属性です。
終了タグは、<footer>の前に記述します。この<main>タグは、文書内のメインコンテンツを指定する要素です。
ちなみに、<header>、<footer>、<aside>、<article>の各要素内（入れ子）に定義することはできません。
メニューを上部に固定する
レスポンシブサイトだとスマホ画面で見たときに、どうしても縦長のサイトになります。
その際、メニューが上部にあるため、ユーザービリティ的に注意しなければなりません。したがって、ヘッダー部分をスクロールしても上部に固定されたままにしましょう。
固定するのは、簡単です。以下を追加します。
style.css
header{
width: 100%;
height: 70px;
padding: 0 15px;
background: #F6F6F6;
/*ここから追加*/
position: fixed;
top: 0;
z-index: 10;
/*ここまで追加*/
}「position:fixed;」で固定し、「top:0;」で最上部に、「z-index:10;」（※最前面になるなら10でなくても良いです。）で重なりが前面になるようにしています。
これで、ヘッダーが上部に固定されました。しかし、固定したことでヘッダーがメインビジュアルと重なってしまっています。
これを解消するために、メインビジュアルの位置を修正しましょう。
style.css
#main_visual{
width: 100%;
margin-bottom: 96px;
/*ここから追加*/
margin-top: 70px;
/*ここまで追加*/
}これで、ドロワーメニューが完成です。ブラウザで正しく動作するか確認してみてください。
メインビジュアルのレスポンシブ化
メインビジュアルをレスポンシブ化していきましょう。と言っても、メインビジュアルに関しては、追加する必要はありません。初級編で、すでに「width」を100%にしてあるためです。
横並びコンテンツのレスポンシブ化
続いては、「各言語の説明」部分をレスポンシブ化していきましょう。この部分は、初級編で「width」を25%に設定しました。しかし、スマホ画面では非常に表示範囲が狭くなってしまいますので、50%（一行に２つのコンテンツ）に変更します。
style.css
@media screen and (max-width: 768px) {
・
・
/*ここから追加*/
#contents_area .inner{
width: 50%;
}
/*ここまで追加*/
}これで、レイアウトを設定できました。しかし、画像がレイアウトからはみ出してしまっています。これを解消するために、画像の最大幅を設定しましょう。
ちなみに、「#contents_area」の「img」に設定しても良いのですが、画像は様々なページで使用されます。
したがって、どのページでも画像が画面からはみ出さないように設定すると毎回設定せずに済みます。
ですので、今回は「img」タグに直接スタイルを設定しましょう。
style.css
a{
text-decoration: none;
color: #333;
}
/*ここから追加*/
img{
max-width: 100%;
height: auto;
}
/*ここまで追加*/
}これで、画像が画面からはみ出すことがなくなりました。
もう一つだけ設定します。通常は文章中の英単語の途中で折り返すことはありませんが、今回は折り返す設定にします。
「word-wrap: break-word;」を使うことで可能です。
style.css
*{
box-sizing: border-box;
/*ここから追加*/
word-wrap: break-word;
/*ここまで追加*/
}これで完了です。
お問い合わせボタンのレスポンシブ化
お問い合わせボタンをレスポンシブ化していきましょう。今回は、「768px以下」の場合には「width」を「100%」にします。但し画面幅が広い場合、少しボタンが大きすぎるので、最大幅を「300px」にします。これで、300px以上大きくはなりません。
style.css
@media screen and (max-width: 768px) {
・
・
#contents_area .inner{
width: 50%;
}
/*ここから追加*/
#contact_area a{
width: 100%;
max-width: 300px;
}
/*ここまで追加*/
}リンクのhoverを設定する
いくつかリンクを設定していますが、hover時（マウスを乗せたとき）の設定をしていきましょう。
今回は、全体のテキストリンクには文字色と下線を、お問い合わせボタンには背景と文字色を設定してみます。
まずは、全体の設定です。
style.css
a{
text-decoration: none;
color: #333;
}
/*ここから追加*/
a:hover{
color: #CCC;
text-decoration: underline;
}
/*ここまで追加*/これで、リンクの文字色と下線を設定できました。続いて、お問い合わせボタンの設定です。
style.css
#contact_area a{
display: block;
width: 300px;
height: 50px;
margin: 0 auto;
font-size: 16px;
color: #FFF;
background: #076ab6;
border-radius: 5px;
text-align: center;
line-height: 50px;
}
/*ここから追加*/
#contact_area a:hover{
background: #add8f9;
color: #076ab6;
text-decoration: none;
}
/*ここまで追加*/これで、背景と文字色の設定ができました。ちなみに、ボタンでは下線は必要ないので「text-decoration:none;」を設定しています。
フッターの設定
最後に、フッターの設定をしていきましょう。フッターでは、画面幅が狭い時は、余白を少なくし、右寄せのテキストを中央寄せにします。
style.css
@media screen and (max-width: 768px) {
・
・
#contact_area a{
width: 100%;
max-width: 300px;
}
/*ここから追加*/
footer p {
text-align: center;
padding: 15px 0;
margin-bottom: 0;
}
/*ここまで追加*/
}これで、すべての設定が完了です。
いかがでしたか？
今回は、はじめてレスポンシブ化に挑戦する方向けに記事にしてみました。
さらに、ここから「フォームを作成」したり、「複数のページを作成する」等も記事にしていければと思います。
理解するポイントまとめ
- ブレークポイントを決めましょう。
- レイアウトを可変にしましょう。
- 画像は、max-widthを使ってはみ出さないようにしましょう。
- 作業ごとにブラウザで確認しながら進めることで間違っている箇所を見つけやすくできます。