第5回 スマホ対応レスポンシブデザインとBootstarap
レスポンシブデザイン
PCであれば、モニターサイズに。
タブレット、スマホであれば、その画面サイズに応じてレイアウトが変化します。
どのようにレイアウトが変化するのか
実は、当塾のHPもレスポンシブデザインで作られており、どのようにレイアウトがするかを確認することができます。
確認方法は画面上で右クリックの後、メニューの中から『検証』をクリックでChromeのデベロッパーツールを開きます。
ツール右上にある『デバイス切り替えのON/OFF』スイッチをクリックします（以下の画像参照）。
あとは画面中央上部にある『デバイスの切り替え』プルダウンでデバイスを選択し、幅を変更します。
iPadからiPhoneの複数サイズがあるので様々な画面幅の表示が確認できます。
レスポンシブデザインの利用方法
レスポンシブデザインは、利用するのに何も難しいことはいらず、CSSだけで実現できます。
まず、以下のボタンから教材をダウンロードしてください。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | .lead{font-size: 60px;}/*---iPad Pro---*/@media only screen and (max-width: 1280px) { .lead{font-size: 48px;}}/*---iPad,タブレット---*/@media only screen and (max-width: 800px) { .lead{font-size: 38px;}}/*---スマートフォン---*/@media only screen and (max-width: 767px) { .lead{font-size: 28px;}}/*---スマートフォン 小サイズ---*/@media only screen and (max-width: 350px) { .lead{font-size: 18px;}} |
書き方は上の通りです。
ブレイクポイントと呼ばれる幅を設定し、そこの枠内で定義されたCSSが横幅に応じて適用されるというものです。
例えば、『max-width: 350px』であれば、横幅が350px以下になったときに、class『lead』に対して『font-size: 18px』が適用されるということです。
この特性を利用すれば、横幅に応じて画像サイズを変更したり、文字サイズを変更したりしてデバイスに応じたレイアウトデザインとして表示することができるというわけです。
Bootstarap
よく使われるデザインや機能を最初からセットとして用意してあり、これを使うだけで誰でもそれなりのWEBサイトを構築できる、というものです。
Bootstarapを使う為の準備
実は、先程の教材にはすでにBootstarapが使えるようにしてあります。
CSSとJavaScriptファイルを読み込ませるだけで使えるようになりますので、以下を参考にしてやってみましょう。
Bootstarapをサンプルから使う
サンプルを利用してパーツを組み合わせたデザインを構成しましょう。
サンプル例は以下のページから。
Bootstrap 4 Cheat Sheet
では、よく使いそうなものをいくつか使ってみます。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 | <!-- カード --><div class="card"> <div class="card-header"> Featured </div> <div class="card-body"> <h4 class="card-title">Special title treatment</h4> <p class="card-text">With supporting text below as a natural lead-in to additional content.</p> </div></div><!-- カルーセル --><div id="carouselExampleCaptions" class="carousel slide" data-ride="carousel"><ol class="carousel-indicators"> <li data-target="#carouselExampleCaptions" data-slide-to="0" class="active"></li> <li data-target="#carouselExampleCaptions" data-slide-to="1"></li></ol><div class="carousel-inner" role="listbox"> <div class="carousel-item active"> <img class="d-block w-100" src="./images/img_01.png" alt="First slide"> <div class="carousel-caption d-none d-md-block"> <h3>First slide label</h3> <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p> </div> </div> <div class="carousel-item"> <img class="d-block w-100" src="./images/img_02.png" alt="Second slide"> <div class="carousel-caption d-none d-md-block"> <h3>Second slide label</h3> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> </div> </div></div><a class="carousel-control-prev" href="#carouselExampleCaptions" role="button" data-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="sr-only">Previous</span></a><a class="carousel-control-next" href="#carouselExampleCaptions" role="button" data-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="sr-only">Next</span></a></div><!-- Modal --><div class="modal fade" id="exampleModal3" tabindex="-1" role="dialog" aria-labelledby="exampleModal3Label" aria-hidden="true"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="exampleModal3Label">Modal title</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body"> ... </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> <button type="button" class="btn btn-primary">Save changes</button> </div> </div> </div></div> |
各項目ごとに貼り付けて確認すると、それぞれ違ったデザイン、機能が表示されます。
このようなものがファイルを読み込むだけで使えるというのは、数年前では考えられない進化だと思います。
今までは何十分もかけて使えるようにしていた機能が、コピペだけで使えるわけですから、とても贅沢だとも言えます。
だからこそ、早く使い慣れたうえで特性を理解し、自分の思った通りにカスタマイズする段階まで行くことが重要です。
用意された道具だけでは限界がありますから、使っていくうちにどういうものかを理解するのが、Bootstarapを使う目的です。
まとめ
- レスポンシブデザインとは表示幅に応じた最適なレイアウトを表示する技術である
- ブレイクポイントに対応したCSSを適用するというのがレスポンシブデザインである
- BootstrapとはWEBアプリケーションフレームワークである
- Bootstrapを利用すれば誰でもそれなりのWEBページを作成できる
- Bootstrapは無料で利用できる
個人差はあるとはいえ、少しずつWEBサイトとはどういった仕組みで出来上がっているか理解してきたと思います。
今は、一つでも多くWEBページを作ること、コピペでもいいのでページを組み上げる経験が必要です。
見た、触った、考えた、という体験を1時間でも多く重ねていってください。
次回講義までの自主学習
学習サイトをピックアップしたので、以下のリンクから自分に合ったものを使って自主学習しましょう。
HTML & CSS | プログラミングの入門なら基礎から学べるProgate[プロゲート]
HTML/CSS入門編のレッスン一覧 | プログラミング学習サービス【paizaラーニング】
HTML入門 (全15回) – プログラミングならドットインストール
CSS入門 (全17回) – プログラミングならドットインストール
実践！ウェブサイトを作ろう (全16回) – プログラミングならドットインストール
STEP UP!!
はじめてのJavaScript (全11回) – プログラミングならドットインストール
JavaScript入門編のレッスン一覧 | プログラミング学習サービス【paizaラーニング】
JavaScript | プログラミングの入門なら基礎から学べるProgate[プロゲート]
Bootstrap 4入門 (全22回) – プログラミングならドットインストール
さらにSTEP UP!!
PHP入門編のレッスン一覧 | プログラミング学習サービス【paizaラーニング】
PHP | プログラミングの入門なら基礎から学べるProgate[プロゲート]
PHP入門 (全30回) – プログラミングならドットインストール
理想はすべてのレッスンをやることです。
今は目で見て手で触れる時間を増やすときなので、時間が許す限りやってみましょう。
