デザインテンプレートに流し込みをしていくとほぼコーディングの作業は発生しませんがどうしてもこの部分の色を変えたいとか文字サイズを変えたいとか並びを変えたいとか若干の変更をしたくなる時があります。
その際に重要なのがレスポンシブWebデザインは接続端末の解像度に合わせてブレイクポイントを幾つか持っていると言う事です。
一般的には以下の様に5つ設定している場合が多いです。
@media screen and (max-width: 1680px) {
…
}
@media screen and (max-width: 1280px) {
…
}
@media screen and (max-width: 980px) {
…
}
@media screen and (max-width: 736px) {
…
}
@media screen and (max-width: 480px) {
…
}
そして更にはグリッドシステムを採用していると言う事です。
グリッドシステムとは画面に縦に12本の帯を並べた仕組みの事です。
bootstrapでは以下の様な記述で動作する様になっています。
<div class="row"> <div class="col-lg-4 col-md-6">郵便番号</div> <div class="col-lg-4 col-md-6">都道府県</div> <div class="col-lg-4 col-md-12">市区町村</div> <div class="col-lg-12 col-md-12">住所</div> </div>
デザインテンプレートは様々な環境で作成されているので全てのソースがこの限りではありません。
注意すべきはそのデザインテンプレートがどの様に記述されてどこを変更すれば色やサイズを変えられるかを理解する事です。
☐ブレイクポイントは幾つか？
☐グリッドシステムの記述方法はどうか？
つまりパソコンで文字のサイズを変更してもスマホでは全く変わっていないと言うような事も良く起こりますので注意しながら変更しなければなりません。
「jQueryについて」に進む
「URLについて」に戻る