ドットインストール：レスポンシブウェブデザイン入門#01~#03
ドットインストールさんでHTMLやらCSSやらの学習をしています。
今回は無料版の最後。
「レスポンシブウェブデザイン入門」に入っていきます。
#01 レスポンシブウェブデザインを作ろう
概要
「レスポンシブWebデザイン」とは、一つのソースコードで複数のデバイスに合わせたレイアウトを実現するための技術です。
「PC版で見ても、スマホで見ても
同じデザインにできるものですよね？」
はてなブログも、レスポンシブデザインに対応していますよね。
（このブログはあえて対応させていませんが）
その技術が学べるということですね！
完成版の確認
今回のレッスンでは、このようなサイトを構築していきます！
こんな感じのサイトです。
最後には動画も埋め込まれています。
レスポンシブデザインなので、
幅をつめると
こうやって、レイアウトが変わっていきます。
どうやって作るんだろう？わくわくしますね。
必要となる知識
必要となる知識は、ドットインストールさんの
HTML入門、CSS入門、CSS3です。
環境
Chromeの最新版のみです。
構築開始！
今回も、デスクトップに「Mysite」というフォルダを作って始めていきます。
画像はすでに用意してあるそうです。
fontawesome5
今回、右上に見える「メニュー」のアイコンは
三本線のものですね。
これは、「Font Awesome」を使います。
これについては、「実践！ウェブサイトを作ろう」の#07で学習しています。
Font Awesomeのサイトを開いて、ダウンロードして使います。
注(2018年2月)
：Font Awesomeがバージョン５になったため、サイトやダウンロードされるファイルの構成がこの段階とは変わっているそうです。
「ダウンロード」を開くとこのようになっているので、
CSSとfontを
「Mysite」に移動しましょう。
#02 開発の準備を整えよう
さあ、いよいよ始めましょう。
コマンド+Nで新しいファイルを開き、HTML5の書き方でどんどん書いていきましょう！
<!DOCTYPE.html>
<html lang="ja">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="css/font-awesome.min.css">
<title>RWD</title>
</head>
<body>
</body>
</html>
まずはFontAwesomeを使いたいので、
cssファイルの名前を見ます。
圧縮版のminの方を使うので、
そちらのほうの名前をコピペして赤字のところに入れましょう。
ここまでできたら一度保存。
「index.html」という名前をつけて保存します。
さて、次はスタイルシートのほうです。
@charset"utf-8"
文字コードを設定して、
まずは共通のスタイルから書いていきます。
/* common*/
body{
font-size:14px;
font-family:Verdana,sans-serif;
margin:0;
padding:0;
color:#333;
}
フォントのVerdana,sans-serifについては
「実践！ウェブサイトを作ろう」の#03の最後のほうでちらっと触れています。
次はpタグのスタイルです。
p{
line-height:2;
}
line-heightについては、「CSS入門編」の#22で学習しています。
ここまでできたら、コマンド+Sで保存をします。
CSSフォルダの中に、「styles.css」と名前をつけて保存をします。
そして、htmlのほうにも読み込みます。
<link rel="stylesheet" href="css/font-awesome.min.css">
これの下に、
をつけます。
また、viewportを設定します。
これをしないと、スマホで見たときにパソコン版のデザインだと見なされて
すっごく小さい見た目になってしまったりします。
幅はデバイスの幅に合わせ、
initial-scaleを等倍にします。
これがレスポンシブデザインに必要なものなのですね！
しっかり覚えていきたいところです。
（たぶん２０回くらい見たら覚えられる？）
#03 メディアクエリーを使ってみよう
レスポンシブデザインは、メディアクエリーという仕組みをCSSの中で使っていくことによって
画面幅ごとのスタイルを切り替えていきます。
CSSは上から読み込まれるので、まずは狭い幅を基準にするか、広い幅を基準にするか考えていきます。
どちらでもいいのですが、
昨今はモバイルファーストといって、モバイルを優先することが多いです。
なので、今回は小さいサイズから書いて行きましょう。
先ほどpタグの下に、
/*medium*/
@media(min-width:570px){
}
このようにすると、この中に書いたスタイルが横幅が570px以上になったときだけ読み込まれる仕組みになります。
次は、大きなデバイスサイズになったときの読み込まれ方です。
/*large*/
@media(min-width:820px){
}
「大きな幅」というのは、今回は820px以上になったときというように指定します。
では、うまくいっているかどうか確認するために
bodyに背景色をつけてみましょう。
グレーですね。
これで、「小さい幅のときにはグレー」となります。
次に、中くらいの幅です。
/*medium*/
@media(min-width:570px){
body{
background:skyblue;
}
}
中くらいの幅のときには背景色はスカイブルー。
/*large*/
@media(min-width:820px){
body{
background:lime;
}
}
大きい幅のときには背景色はライムに指定してみました。
まずは、狭い幅では
薄いグレー！
幅が570px以上になったらスカイブルー！
幅が820px以上になったらライム！
こんなふうに、メディアクエリを使うと
幅が変わるごとにスタイルが当てられるのですね。
なんだかおもしろいぞ…！
次回も楽しみです。
