この記事では、レスポンシブなサイト、スマホ向けサイトの基本として画面サイズに応じて画像のサイズも変化するサイトを作成してみます。
はじめに
2017年頃からGoogleがサイトのランキングに影響する要素として、あらゆる端末で適切な表示が可能か？という部分を挙げました。
そのサイトをパソコンで見てもタブレットでみてもあるいはスマートフォンで見ても、見やすく使いやすいサイトであるかという事です。
パソコンとスマートフォンは縦横比が決定的に違います。
これに対応している意味合いのレスポンシブという言葉があります。
レスポンシブなサイトを分かりやすく言えば、パソコンでもスマホでも綺麗に表示されるサイトという意味になります。
HTMLのみではレスポンシブなサイトは実現出来ません。
ここでCSSを使います。
レスポンシブなサイトの作り方
レスポンシブなサイトのひな型を示します。
HTMLファイルをindex.html、CSSファイルをstyle.cssとして保存してください。
なお、CSSファイルから背景画像（lined_paper.png）とオラウータンの画像（oranutan.jpg）を呼び出しています。
以下のリンクから画像ファイルをダウンロードして使ってください。
HTML部分
HTML部分全体です。
imgタグに画像ファイルを指定しています。
imgタグのwidthとheightは画面に合わせてサイズが変わるため、空欄としています。
index.html
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"> <link rel="stylesheet" type="text/css" href="style.css"> <title>レスポンシブなページ</title> </head> <body> <h1>レスポンシブなページ</h1> <article> <h2>レスポンシブなページとは？</h2> <p>画面サイズに応じて、サイトレイアウトも見やすく変化するページのことを指します。<br> 最近はスマートフォンやタブレット、パソコンなど画面サイズや縦横比が異なる端末でサイトを閲覧するためサイト制作者は日々頭を悩ませています。</p> </article> <article> <p>ウインドウサイズを変化させてみてください。<br> 下の画像サイズが変化します。</p> <figure> <img src="oranutan.jpg" width="" height="" alt="オランウータンの画像"> <figcaption>シンガポール動物園で撮影したオランウータンです。</figcaption> </figure> </article> <footer>© 2018 dianxnao.com</footer> </body> </html>
CSS部分
まずは、今回のサンプルのCSS部分全体を示します。
style.css
/* style.css */
*{
margin: 0;
padding: 0;
}
body{
background-image: url("lined_paper.png"); /* 背景画像 */
font-size: 16pt;
font-family: '游ゴシック', 'メイリオ';
margin: 50px;
}
h1{
border-bottom: solid 1px skyblue;
color: skyblue;
font-size: 1.5em;
}
h2{
font-size: 1.1em;
padding-top: 1em;
}
p, figure{
padding-top: 1em;
padding-left: 1em;
line-height: 1.5em;
letter-spacing: 0.2em;
}
img{
width: 80%; /* 画面サイズに応じて変化する */
height: auto; /* 画面サイズに応じて変化する */
box-shadow: 5px 5px 10px #777; /* 画像に影をつける */
}
footer{
color: #777;
padding: 1em;
text-align: right;
}
/* 横幅に応じた対処 */
@media screen and (max-width: 800px){ /* 800pxより小さくなったとき */
body{
margin: 2em;
}
h1, h2{
font-size: 95%;
}
p, figure, footer{
font-size: 13pt;
}
}
@media screen and (max-width: 480px){ /* 480pxより小さくなったとき */
body{
margin: 0.8em;
}
h1, h2{
font-size: 85%;
}
p, figure, footer{
font-size: 11pt;
}
}
imgタグの設定
CSSでレスポンシブなページにする設定を行います。
1つ目のポイントはimgタグです。
画像を縦長でも横長の画面でも画面にフィットさせる必要があります。
img{
width: 80%; /* 画面サイズに応じて変化する */
height: auto; /* 画面サイズに応じて変化する */
}
width要素は何%でも良いのですが、対応するheight（高さ）要素をautoにしています。
ここがポイントです。
メディアクエリによる画面サイズに応じたレイアウト
2つ目のポイントは画面サイズによってCSSの設定を変更する点です。
通常メディアクエリと呼んでいる設定方法です。
メディアクエリとは？
メディアクエリを使いたい場合は、CSSに@mediaを先頭に記述して用います。
メディアクエリを使って画面幅に応じたfont-size（フォントサイズ）やpadding（余白）などを変更することは多いと思います。
以下の例では、メディアクエリを使って、横幅が800ピクセル以下の場合のCSS設定をしています。
@media screen and (max-width: 800px){ /* 800pxより小さくなったとき */
body{
margin: 2em;
}
h1, h2{
font-size: 95%;
}
p, figure, footer{
font-size: 13pt;
}
}
以上、レスポンシブなサイト、スマホ向けサイトの基本でした。
コメント