「レスポンシブ・ウェブデザインとは何か？ / SwapSkillsFreeEvnet(5)」に行ってきた

HTML5 Event


無料のセミナーだったけど、内容が濃くてとても勉強になった。

概念的なことが多いのかなと思っていたけど、具体的なコードの解説が多くて、僕にはわかりやすかった。
レスポンシブ・ウェブデザインという言葉を知っている人はぱらぱらと。だいたい60人くらいいて、1-2割くらいだった。思った以上に少なくてちょっとびっくりした。
セミナーのタイトルにも「レスポンシブ・ウェブデザイン」とあるのだから、事前にちょこっと調べておけば、セッション聞いていても理解度が全然違うと思う。もったいない。


Apple Store 銀座のセミナールームははじめて行った。シアターと書いてあったけど、本当に映画館みたいな感じで、すごくかっこよかった。
あと、Webデザイナさん向け(?)のセミナーや勉強会は、女性が4割くらいと男女比がおかしい。いつもの技術系の勉強会だと、多くて1割くらいなのにｗ

レスポンシブウェブデザインの代表的なサイト

  • w3cのWebサイト
  • ブラウザのサイズを変えると、レイアウトや見た目が変わる。

レスポンシブ・ウェブデザイン

3つの原則

  • Fluid Image
  • Fluid Grid
  • Media Queries

Fluid Image

  • imageのサイズを % で指定する
    • max-width:100%
    • ie6/7なら width:100%

Fluid Grid

  • ガーターとコラムでレイアウトを組む

Media Queries

ふたつのやりかた。

  • @media screen and (min-width:480px){}

でも link を使うとリクエストがたくさん飛ぶのでほとんど使わない。

@mediaの場合も、やりかたがふたつある。
大きいサイズから下がっていくもの。

 @media screen and (min-width:1280px){}
 @media screen and (min-width:1024px){}
 @media screen and (min-width:768px){}
 @media screen and (min-width:480px){}
 @media screen and (min-width:320px){}

小さいサイズから上がっていくもの。

 @media screen and (min-width:480px){}
 @media screen and (min-width:768px){}
 @media screen and (min-width:1024px){}
 @media screen and (min-width:1280px){}

CSSでは最後のものがデフォルトになるから、小さいサイズから上がっていくほうでは 320px の設定がいらない。CSSのサイズを少なくできる。

大きいものから書くときは、段組を減らしていくから、floatを解除していく。
小さいものから書くときは、floatを追加していく。こっちはモバイルファーストと呼ばれている。最近はモバイルファーストのほうが主流になってきている
レイアウトを削っていくのはちょっと大変。floatを解除する指定( float: none; )を追記するためファイルサイズも大きくなってしまう。
またIE対応ではrespond.jsを使う。

Responsive Type Setting

小さい画面ではフォントのサイズを落としていく。でも margin もあわせて変えていきたい。
そんなときは rem を利用すると便利。(remも相対的な指定)
# 個人的な感想 : iphone や スマートフォン では高解像度化が進んでいるので、responsiveなサイトであれば、ある程度フォントサイズが大きい方が見やすいような気がしたけどどうなんだろう。

font-size は 16px が基本になっている。だから % で指定するとこんな感じになる。

 @media screen and (min-width:480px){
 	 html{font-size:78.5%} /*12px*/
 }
 @media screen and (min-width:768px){
 	 html{font-size:87.5%} /*14px*/
 }

100%の場合、remはこんな感じ

  • 16px=16px
  • 16px=1em
  • 16px=1rem

これらの指定は全部同じ意味になる。margin-bottom: 0.5em になってしまうことに注目。これ、計算が面倒。

h1{font-size:48px; margin-bottom: 24px}
h1{font-size:3em; margin-bottom: 0.5em}
h1{font-size:3rem; margin-bottom: 1.5rem}

でも 1rem は16pxのままで計算できる。
px だとずっと変わらないけど、font-size を % で指定すると rem は変化してくれる。
あと、rem を使うと margin で指定する値が同じになったりするので、セレクタのグループ化ができる。

remについてはこちらの記事がわかりやすい。

セッションでは Vertical Rhythm はキーワードしかでてこなかったけど、こっちも読んでおくとよさそう。

Vertical Rhythm はテキストを読むときの大事な要素で、font size / line height / margin or padding のサイズをいい感じにしておこう、みたいな感じかな、うまく訳せない。ま、原文はこちら。

On the Web, vertical rhythm – the spacing and arrangement of text as the reader descends the page – is contributed to by three factors: font size, line height and margin or padding.

24 ways: Compose to a Vertical Rhythm

<追記>Vertical Rhythm については こちら もどうぞ。

実際の案件では

画面サイズを大きく、インパクトを与えたい
  • The Boston Globe を参考に
    • responsive web designを使っている
    • 横幅が広い
    • すでにユーザは広い画面を利用している
  • 1200px Grid System
    • 幅の広い grid system
    • vertical grid
    • css fixed と css fluid がダウンロードできる
    • 可変グリッド(css flud)のCSSを出力してくれる
あらゆるデバイスに対応したい
  • テレビ
    • HDMI変換ケーブルでMacをテレビに繋げて確認
    • LEDだから明るすぎて微妙なグラデーションはわからない
    • ボタンは大きめにする。遠くからみるし、リモコンでは細かい操作できない
    • The Opera TV Emulator(Opera business solutions | Opera TV Emulator)
    • いろんなTVにブラウザは載っている
    • スペックは低いのでパフォーマンスをあげたい
    • ボタンはCSSで作る
      • サイズを可変にできる
    • 日本語向け禁則処理をいれる
スマートフォン向けに一部のコンテンツを消したい
  • iphone向けなどで長い画面を作りたくない
    • display:noneだと読み上げされなくなる
  • 消し方は5つある
    • visibility: hidden;
    • display: none;
    • height: 0; width: 0; overflow: hidden;
    • text-indent: -999em;
    • position: absolute; left: -999em;

最初の3つは screen reader で無視される。読み上げされない。4つ目インデントがおかしくなったりする。最後のやつは screen reader もちゃんと読んでくれる。
こっちに詳しく書いてある。

画像を最適なサイズで、各デバイスに配信したい。

まとめ

デザイン的にベストなのは振り分けで全部することかもしれない。
でもコストも時間もかかるだからシンプルに対応しよう。
→レスポンシブ・ウェブデザインが、現在ではベストではないか

感想

最初に書いたとおり、具体的な内容がコードで示されていてわかりやすかった。こうやって指定するのか、といったことがわかった。だからかなり楽しかった。
SwapSkillsのイベントにははじめて参加したけど、レベルが高くて面白かった。有料のセミナーの内容が電子書籍になっていたので買ってみた。電子書籍が出ているのは知っていたけど、どんな感じかさっぱりわからなかったので迷っていた。無料のセミナーでこのレベルなら、お金を払っても電子書籍版を読んでみたいなと。あとで読む。


それにしてもCSSは難しい。これからどんどんプログラマティックになるんじゃないかな。セレクタのグループ化なんて、因数分解みたいだし。

h1{font-size:48px; margin-bottom: 24px}
h2{font-size:36px; margin-bottom: 24px}
h3{font-size:24px; margin-bottom: 24px}

は

h1{font-size:48px;}
h2{font-size:36px;}
h3{font-size:24px;}
h1, h2, h3{margin-bottom: 24px;}

でしょう。

x^2+3x+2 = (x+1)(x+2)

みたいじゃない。これは簡単だけど、CSS3では便利(?)なセレクタはたくさんあるし。

まだまだ先だとは思うけど(もしかしたら消えていくかもしれないけど)、 CSS Variables, Mixins, Nested, Hierarchy が入ってきたら、それこそCSSがプログラミング言語みたいになりそう。
Sass や less を使っていれば、そんなに気にすることなく、便利になるだけかもしれない。もう少しCSSも勉強したいけど、そんなにがりごりCSSを書くことがないから、なかなかモチベーションが…。ちょっとだけなら変数なんていらないし、直接書いていけちゃうし。
たぶん僕の場合は必要になる日はあまり来ないと思うので、気分が乗ったら書いてみたいと思う。


レスポンシブ・ウェブデザインをちゃんと勉強するなら、英語だけどこの本を読んだほうがいいと思う。もちろん僕は読んでいない。そもそも積ん読が棚1つ分になりそうな状況で、英語の本を電子書籍で買って読むと全く思えないので…。ずっと読んでみたいと思ってはいるのだけど。

他の本も興味深いタイトルなので読んでみたいけど、いつになることやら…。


僕がレスポンシブなサイトを作るとは思えないけど、なんか楽しそうな感じがしてしまう。特に理由もなく、純粋に技術として気に入ったのだと思う。これからもちょこちょこ勉強していきたい。