Created by Zyco Power
指を画面で押して、一定方向へ“すーっと掃くように”動かすのがスワイプ。
ページを進めるとき、決め事を設定しておくと、文脈がスッキリ纏まる。
レスポンシブウェブデザインは、閲覧者の画面サイズまたはウェブブラウザに応じてデスクトップウェブページが閲覧できることを目指したウェブデザインの手法。
加えて、1つのウェブサイトで多様なデバイスに対して同様の機能などをサポートすること。
レスポンシブウェブデザインは二つのブレイクポイント辺りから始めると上手くいく。微調整でいくつかを増やしてあげる。
@media only screen and (min-device-width:320px) and (max-device-width:568px) {
} /* for mobile */
@media only screen and (min-device-width:569px) {
} /* for Tablet and Laptop and PC */
@media only screen and (min-device-width:569px) and (max-device-width:960px) {
} /* for wide mobile */
三番目のブレイクポイントが必要なときは、上で記したふたつの中間に挿入されるだろう。
各々の「@media only screen…」の中に設定するのは、フォントサイズと、センテンスやイメージが納まる幅の指定で殆どが完成する。
縦長のモバイルの幅の指定は約100%、PC向けの幅は50%辺りが文字の分量としてはPC≒モバイルとなり読み易いセンテンスの幅になる。だが、それは貴方の決定したレイアウト次第である。
このサイトでは'Noto Sans JP'というフォントを使っている。
発行元のGoogleで「Noto Sans JP」を選択(select this font)すれば、導入方法がポップアップで表示されるので簡単に使うことができる。無料であり且つ綺麗なフォントだ。
CSSについて、要素名(例えば「div」)に付ける class や id のネーミングは整理しておく。有り触れたネーミング(例えば「content」など)を使い回していると後々コンフリクトする可能性がある。
javascriptについて、機能を追加するときにjavascriptを伴うことが多い。更に機能を追加したときにコンフリクトするかもしれない。CSSで機能するモノに代替えするも吉。
このツールに慣れ親しんでおくと重宝する。CSSを書いていて、反映されないときなどに覿面。
レスポンシブのレイアウトはここでチェックする。