今日の実習では、午後からドットインストールでレスポンシブデザインを重点的に勉強しました。
近年、ユーザーのネット環境も変わり、PC以外の端末でWebを見ることを想定したレスポンシブデザインの急増から、
レスポンシブデザインに対応したコーディングが出来るかどうかも、採用において選考材料になることがある、と言う話をよく耳にします。
しかしながら、コーディングの経験も浅い私は未だにレスポンシブを意識したコーディングをするとなると、ヒーヒーいってしまいますし、おまじないのように「えいっ！」としたらなんとなくできてる？みたいな認識がふわっとしたところが正直まだまだあります。
そこで今日は、自分の頭の中の整理も兼ねてレスポンシブデザインのサイトを作る際の、超基本、初めの第一歩についておさらいしていきたいと思います。
viewportとメディアクエリと向き合ってみる
1.viewport
1-1.まずviewportとはなにか、
viewportという言葉自体を日本語に訳すと「表示領域」といった言葉になります。
つまり、「ブラウザ上で表示することができる大きさ」といったニュアンスで、
「表示できる大きさを仮のカンバスとして指定する事が出来るコード」という意味になります。
1-2.viewportの書き方
viewportはhead内でmeta要素として記述され、幅(width,height)や倍率(scale)、画面密度など様々なものを指定することができます。
わたしがおまじないだと思っていた、良く見かけるViewportの表記
<meta name=viewport content=”width=device-width, initial-scale=1″>
このコードを見たことがある方、コピペしたことがある方、多いのではないかとおもいます。
今日は、おまじないだと思わずに、ちゃんと向き合って訳してみようと思います。
1-3.自分なりにおまじないを訳してみました。
先ほどのコードを私なりに訳してみました。
<meta name=viewport content=”width=device-width, initial-scale=1″>
meta name=viewport：「PC以外で見たときの表示領域宣言しま～す！」
width=device-width：「幅はデバイスに合わせて表示してください～！」
initial-scale=1：「縮小とか拡大とかいいんで、そのままでお願いしま～す！」
ということではないでしょうか。
そう思うと、ちょっと抵抗のあった部分も距離が縮みそうですね！笑
そのほかにも、設定方法は様々あるので、更に理解を深めていきたいですが、今日はひとまずviewportはここまでです！
2.メディアクエリ
2-1.メディアクエリとは
メディアクエリとは、CSS3以降の新しい要素です。
端末のサイズに対応するためにサイズが切り替わるところ（ブレイクポイント）などを指定する事ができます。
2-2.メディアクエリの書き方
記述する方法は、
①link要素としての記述②スタイルシートへの記述の２つがあります。
①link要素としての記述
html<head>内に他のlink要素と同様に記述します。
例：<link rel=”stylesheet” href=”style.css” media=”screen and (max-width:480px)”>
この場合、メディアクエリな部分はand以降の and (max-width:480px)←ここです！
また、linkするCSSをPC用、スマホ用、タブレット用など分けて管理することも可能です。
②スタイルシートへの記述
１つのＣＳＳに記述できたほうがわかりやすく、読み込むＣＳＳが１つで済む為、こちらのほうが、多いのではないかと思います。
例：@media screen and (max-width: 480px) {
body {
background-color:#F9DF2C;
}
}
①．②を訳してみました。
①
<link rel=”stylesheet” href=”style.css” media=”screen and (max-width:480px)”>
「スタイルシートとつながっていることをここに宣言いたしま～す！」
「style.cssから指示しま～す！」
「この指示は横幅最大480pxの一般的なディスプレイの場合のことです～」
②
@media screen and (max-width: 480px) {
body {
background-color:#F9DF2C;
}
}
「画面の最大幅480pxの場合、背景色#F9DF2Cでよろしくー！」
･･･ということですね!笑
以上、基本の基本ではありますが、viewportとメディアクエリについて少し時間をかけて考えてみました！
（追記）
今日の出来事
午前の実習ではイラレで作ったスライドで、自己紹介をさせていただきました。
今後の転職活動のスケジュールについて、業界のこと、ふたっぱさんの活動実績について、転職についてのアドバイスなど、盛りだくさんの内容で、とても貴重なお話を聞かせていただきました。ひとつひとつ、私達の悩みや課題に耳を傾けて頂いて本当にありがとうございます。
ポートフォリオに載せるサイトに実績がまだまだ無いのが現状ですが、自身の作ったサイトをブラッシュアップさせること、クライアント様とのやりとりをシュミレーションして作り進めていくことからも学びがあるということを改めて実感しました。
今後は今まで以上にセミナーや勉強会・交流会などにも積極的に参加していきたいです！
