初めてのレスポンシブwebデザイン
お盆ですね。前回の冒頭でお話ししたprogateの道場コースの進捗ですが、なかなか苦戦しております。日々「なんでpadding反応しないの！なんでfloat思い通りに並んでくれないの！」…といったように悩まされ続けていますが、これからもPDCA(plan-do-check-act)を意識しつつ前進していきたいですね。
また先日、TECHACADEMYmagazineさんの記事でprogateと同じようにHTMLとCSSを学習できるサイトのまとめを見つけたので、以下にメモしておきます。
レスポンシブwebデザイン[検索]
さて、今回はレスポンシブwebデザインについて学びます。まずは恒例の言葉の意味：「〜とは」の視点から。
responsive web design:
デスクトップパソコンや携帯電話といった幅広いデバイスのいずれに対しても、外観や操作方法が最適化された (リサイズ、パンニング、スクロールを最小限にし、読みやすく、ナビゲーションしやすい) サイトを制作するためのウェブデザインの手法。
（weblio調べ）
各デバイスにおいて、ブラウザの横幅は違いますよね。ちなみに、progateのスライドで想定されていた値はそれぞれ以下の通りでした。
スマートフォン→ 〜670px
タブレット→ 671px〜1000px
パソコン→ 1001px〜
レスポンシブwebデザインとは、このように様々な画面幅を持つデバイスで同じサイトを開いた時、横幅に応じて適切な表示に対応するwebデザインのことを指すのだそうです。またこのHTMLの仕組みは、それぞれ1から制作するのではなく、同じファイル内で構築されています。
実際のサイトで比較する
では、実際にサイト「canva」の「The ultimate inspirational tool for stunning color combinations(seafoam green)」をそれぞれのデバイスで表示してみましょう。下のピクチャはパソコンの表示です。
大きな違いとして以下のようなものが見て取れます。
⑴メニュー
パソコンのブラウザではヘッダー部分に「Learn/Product/About/Tools/Features/Marketplace/sign in」とメニューボタンが並んでいますが、タブレットのヘッダーには「Menu」のボタンのみが表示されています。この「Menu」をクリックすると、パソコンで見ることのできたそれぞれのメニューが縦に表示される仕組みになっていました。
⑵タイトル
タイトルの「The ultimate inspirational tool for stunning color combinations」は、パソコンでは２行で表示されています。しかしスマートフォンに切り替えると４行に変わります。
⑶ツールの配置
サイト内に４色で１組の配色見本が並んでいます。パソコンで表示すると配置は４列になりますが、タブレットになると２列、さらにスマートフォンになると１列に変わります。
デバイスそれぞれの画面に合ったwebデザインが表示されることで、見た目の美しさだけでなく使いやすさも格段に違いますね。
レスポンシブwebデザインのコーディング方法
サイトにレスポンシブwebデザインを適応させるためには、CSSに「メディアクエリ」というものを書く必要があります。「クエリ」は質問や問い合わせという意味があるそうなので、「メディアクエリ＝メディアを繋げる」というようなイメージで良いのでしょうか。またフォーマットは数種類あるそうなのですが、ここでは見た目でわかりやすい@mediaから始まる様式を取り上げました。では、それぞれの単語の意味を調べていこうと思います。
@media screen (max-width:1000px){
/*内容*/
}
⑴@media: 定型句です。
⑵screen: Webページを見ている人の媒体を取得する記述です。screen（スクリーン）の他にも、「print（プリンタ）/tv（テレビ）/projection（プロジェクター）/all（すべて）」などの表記方法があるそうなので、機会があったら試してみたいと思います。
⑶（max-width:1000px）: 例は「ディスプレイの幅が1000pxの時までに適応する」という意味です。最初の表記は「max-width」の他に「min-width」と書く場合もあります。数字部分を、各デバイスで適応させたい幅に変更して使用します。
ここで、先ほどレスポンシブwebデザインの事例で取り上げた「色見本ツールがパソコンでは４列、タブレットでは２列、スマートフォンでは１列になる配置」のCSSを予想してみます。仮に４色の色見本のブロック１組をHTMLでclass="item"に指定していたとします。（もちろんmax-widthの設定などもあると思うのですが、今回は上のフォーマットの理解を重視するため割愛します。）
/*スマートフォンの場合*/
.item screen(max-width:670px){
.item{
width:100%
}
}
/*タブレットの場合*/
@media screen (max-width:1000px){
.item{
width:50%
}
}
/*パソコンの場合*/
.item{
width:25%
}
果たして合っているのでしょうか…？？？
まとめ
レスポンシブwebデザインは、タブレットによってサイトを読みやすくする上で欠かせないものです。しかし様々なサイトを巡っていると、まだタブレットやスマートフォンに対応していないページも見受けられます。情報を「快適に」、使いやすさに「付加価値を」。そんなwebデザイナーという立場だからこそ、今後さらに普及していく分野において関心を持ち続けたいと考えています。
Related Posts
この記事に関連するエントリーは見つかりませんでした。