Mobile Web Design

Comfortable operability is the best.

Created by Zyco Power

SWIPE

Please swipe down.

SWIPE

指を画面で押して、一定方向へ“すーっと掃くように”動かすのがスワイプ。

ページを進めるとき、決め事を設定しておくと、文脈がスッキリ纏まる。

決め事

  • 右方向へのスワイプは「Next」(右から左へ掃く)
  • 下方向へのスワイプは「Description(説明)」(下から上へ掃く)

What is Responsive Web Design?

Desktop ↔ Laptop ↔ Tablet ↔ Phone

Responsive?

レスポンシブウェブデザインは、閲覧者の画面サイズまたはウェブブラウザに応じてデスクトップウェブページが閲覧できることを目指したウェブデザインの手法。

同様の機能

加えて、1つのウェブサイトで多様なデバイスに対して同様の機能などをサポートすること。

Break point

レスポンシブウェブデザインは二つのブレイクポイント辺りから始めると上手くいく。微調整でいくつかを増やしてあげる。

ふたつ

@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 Queries

各々の「@media only screen…」の中に設定するのは、フォントサイズと、センテンスやイメージが納まる幅の指定で殆どが完成する。

幅の指定

縦長のモバイルの幅の指定は約100%、PC向けの幅は50%辺りが文字の分量としてはPC≒モバイルとなり読み易いセンテンスの幅になる。だが、それは貴方の決定したレイアウト次第である。

What is font?

このサイトでは'Noto Sans JP'というフォントを使っている。

発行元のGoogleで「Noto Sans JP」を選択(select this font)すれば、導入方法がポップアップで表示されるので簡単に使うことができる。無料であり且つ綺麗なフォントだ。

Conflict 1

CSSについて、要素名(例えば「div」)に付ける class や id のネーミングは整理しておく。有り触れたネーミング(例えば「content」など)を使い回していると後々コンフリクトする可能性がある。

Conflict 2

javascriptについて、機能を追加するときにjavascriptを伴うことが多い。更に機能を追加したときにコンフリクトするかもしれない。CSSで機能するモノに代替えするも吉。

Google Chrome Developer Tools

このツールに慣れ親しんでおくと重宝する。CSSを書いていて、反映されないときなどに覿面。

レスポンシブのレイアウトはここでチェックする。

END

Back to top