Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
レスポンシブウェブデザインと
アクセシビリティの勉強会
@カデナデザインヴィレッジ

2014年2月1日
小三ツ星インターフェイス 川満

1
本日のメニュー
1.レスポンシブデザインの復習
1. 定義の確認と基本的な実装、IE対策

2.アクセシビリティの基礎
1. 視覚障害対策(高齢者・運動障害対策も含む)
2. 聴覚障害対策
3. てんかん対策
4. その他

3.レスポンシブ&...
【復習】レスポンシブデザインとは
1. 幅可変(画面・ウィンドウサイズに追従)
2. 画像サイズ可変
3. レイアウト切り替え(メディアクエリ)
 利点
•

横スクロールを排除する事で、どんなデバイス・ウィンドウ幅でも使いやす
い。

 欠点...
【実装の基礎(1)】ページ幅可変
●

使用するCSSプロパティと値
–

width: %指定
●

–

width: auto, または指定しない。
●

–

margin指定不要。左右の余白がウィンドウ幅によって変わる。
margin...
【実装の基礎(2)】画像サイズ可変
●

imgのwidthを%指定、あるいは指定しない。

●

height:auto;か、指定しない。

●

ブログサービスなどの場合、htmlコード内にstyleタグで直
接指定している事があるので対処...
【実装の基礎(3)】レイアウト切替
メディアクエリ=@media で指定する。
CSS
デフォルトの記述
・
・
・
@media (max-width: 639px){
幅639px以下で使うCSS
}
@media (max-width: ...
【実装の基礎(4)】IE対策
●

IE用のCSSのみ別に記述して、ヘッダーの最後に
専用CSSファイルを指定する。
<!--[if lt IE 10]>
<link rel="stylesheet" type="text/css" media...
【実装の基礎(5)】viewport
●

ページ幅可変でデザインただけでは、文字が全く
読めないレベルまで縮小表示される。
–

●

閲覧者は毎回拡大操作をしなければならず、不便。

htmlのヘッダーに、
<meta name="view...
【実装の応用】に行く前に
アクセシビリティ(高齢・障害者対応)の話。
●

何で?
–
–
–
–
–

別に博愛精神で言っているわけではないのです。
セマンティックウェブとかSEOとかマルチデバイスとかと
不可分だし、そういうのに応用が利く。...
【復習】アクセシビリティとは
●
●
●

●

●

●

「誰でも使えるウェブサイト」
JIS X 8341-3「高齢者・障害者等配慮設計指針」
視覚障害、聴覚障害、運動障害(マウスでの繊細な
操作ができない)、てんかん
初心者、高齢者、学...
【復習】アクセシビリティ規格
●

JIS X 8341-3:2010 (現在の版)
–
–

●

サイトの評価をするための基準を示している。A~AAA
官公庁などはAAレベルを目標にしているところが多
い。

現在の版は評価基準を示していて...
視覚障害の種類と対策(1)
●

全盲
–

音声読み上げソフト・ブラウザ、点字ブラウザに対応す
る。
●

●

–

音声読み上げは、OSに標準で付いている場合もある(iOS、
Android,Windows8.xなど)。無料ソフトにNVD...
視覚障害の種類と対策(2)
●

弱視
–
–

メガネなどで矯正しても十分な視力が出ない。
高コントラスト、大サイズの文字。
●

OSの「ユーザー補助」「簡単操作」「アクセシビリティ」などのコントロールパネル
の項目で体験できる。
–

●...
視覚障害の種類と対策(3)
●

老眼・近視など
–

標準の文字サイズを16pxにする。
●
●

–

普通は14pxだがそこを何とかするのがデザイナーの腕の見せ所。
明朝体を使うとか。

スマホやタブレットでは16ピクセルが読みやすい。(...
聴覚障害対策
●

主に動画コンテンツで注意が必要。
–

●

動画には字幕をつける。あるいは字幕つきを選べるよう
にする。

インタラクティブコンテンツで、クリックなどの反応を
音で出す場合に対策が必要。
–

音だけではなく、画面でも反応...
てんかん対策
●

光過敏性てんかん
–
–

●

アニメ番組の閃光で大規模な被害が発生し、注目され
た。(ポケモンショック)
1秒間に3回以上の点滅を避ける事。

幾何学模様で発作が起きるものもある。
–
–

一定の幾何学模様に反応して発...
アクセシビリティ、最初の一歩
●
●

セマンティックにマークアップする。
画像にalt属性を付けて丁寧な解説を行う。
–
–

●

文字サイズは16px。
–

●

イベントに関するニュースのVTRのナレーションのような
感じ。
さほど重...
レスポンシブデザインと
アクセシビリティ
●

HTML5の採用。
–
–

●

スキップリンクの設置。なお、非表示には一定のテクニック
が必要。(実例は後述)
–
–

●

適切なタグ、id名、role属性を付ける。
セマンティックなサイ...
【実装(1)】HTML5&セマンティック
●

タグ:<header>,<nav>,<main>
–
–

●

今後、ブラウザにはこれらのコンテンツにスキップする機能が付く可能性が高い。
(障害者支援ツールは既に対応しているものも)
IE8は...
【実装(2)】スキップリンク
使っちゃいけない/使いにくいもの
●

display: none; ⇒スキップリンクが機能しなくなる。

●

Google先生がペナルティかける可能性があるもの
–

テキストを画像の背後に置く
CSS を使用...
【実装(2)】スキップリンク
沖縄県のホームページの場合
●

文字サイズや行の高さを極端に小さくした上で、position
で左に飛ばしている。
–

●

text-indent: -9999px;と同じ発想。

active, focus...
【実装(2)】スキップリンク
WordPress(Twenty-Thirteen)の場合
●

●

clip: rect (top, right, bottom, left ); を使って0ピクセル
にトリミング
clipプロパティはCSS2...
【実装(2)】スキップリンク
うち(小三ツ星インターフェイス)の場合
●

●

clip: rect (top, right, bottom, left ); を使って0ピクセ
ルにトリミング(WordPressチームのパクry)
スマホ用m...
【実装(3)】レスポンシブのカラム
ウィンドウ幅を狭くするとカラムを下に落としたい。
使えそうないくつかの方法。 
1. floatプロパティを使う。
•

入りきれないと勝手に下に落ちてくれる。簡単。

2. positionプロパティを使う...
【実装(4)】floatによる実装
問題がいくつか。
●
普通にやると、固定幅カラムが先になる。
–
–
–

コンテンツが一番下になる。←大問題。
スマホサイトではかなり使いにくくなる。
可変幅を先に持ってくると、最小幅で描画されレスポンシブ...
【実装(4)】floatによる実装
●

サイトの構造

<div id="contents" class="contents post">
<div class="main-area">
<div class="center-area">
<...
【実装(4)】floatによる実装
●

CSSの組み立て(1)

.contents {
width: 100%;
}
.main-area{
width: 100%;
float: left;
margin-right: -200px;
}...
【実装(4)】floatによる実装
●

CSSの組み立て(2)
<contents>

.rightside {
background-color: #FC0;
width: 170px;
float: right;
}

●

<secti...
【実装(4)】floatによる実装
●

CSSの組み立て(3)

.center-area{
width: 100%;
margin-left: -190px;
}

<contents>
<div class=”main-area”> <s...
【実装(4)】floatによる実装
●

CSSの組み立て(4)

.center-area{
width: 100%;
margin-left: -190px;
float: right;
}

●

さらに、center-areaにfloa...
【実装(4)】floatによる実装
●

CSSの組み立て(5)

.main {
margin: 0 200px;
}
.leftside {
width: 170px;
float: left;
}

●

<contents>
<div ...
【実装(4)】floatによる実装
いくつかの欠点も…
● clearfixが使えない。
●

可読性が落ちる。
–
–
–

レイアウトのためのdiv要素
でコードが複雑になる。
閉じタグ忘れとかするとえら
いことになる。
ネガティブマージン...
【実装(5)】display:table;による実装
HTML

CSS

<div class=”contents”>
<aside class=”sidebar-left”>
</aside>
<section class=”main” r...
【実装(5)】display:table;による実装
利点
●
テーブルレイアウトに近いこと
ができる。
● vertical-align が使えて便利。
●

●

table-layout: fixed; で均等
配置が可能。
レイアウト専...
【実装(5)】display:table;による実装
欠点
●
左メニューではコンテンツファーストが不可能。
–
–
●

●

table-cellは、HTMLの記載順に左から埋めていく。
スキップリンク必須。

display:table-...
まとめ
●
●
●

●

●

最初はdisplay:table;とスキップリンクが簡単。
細かいやり方はぐぐればたくさん出てくる。
気を使うところはたくさんあるけど、デザインってそ
ういうものだよね。
「使いやすさ」を追求すると、レスポンシ...
【その他】microdataについて
●

検索結果を適切に表示するために
Yahoo,Microsoft,Googleが共同で策定した構造化
マークアップの規格。
–

●

●

Schema.org

「文脈」を示すことができる。(人名、...
microdataの実装
<div itemscope itemtype="http://schema.org/Organization">

定義のURL:
(企業・団体)

<span itemprop="name">団体名称</span>...
参考文献など
●

スクリーンリーダーNVDA
–

●

CUD カラーユニバーサルデザイン
–

●

https://w3g.jp/blog/studies/lets_role_fit

floatプロパティによるコンテンツファーストデザ...
Upcoming SlideShare
Loading in …5
×

レスポンシブウェブデザインとアクセシビリティの勉強会

2,419 views

Published on

Published in: Technology
  • Be the first to comment

レスポンシブウェブデザインとアクセシビリティの勉強会

  1. 1. レスポンシブウェブデザインと アクセシビリティの勉強会 @カデナデザインヴィレッジ 2014年2月1日 小三ツ星インターフェイス 川満 1
  2. 2. 本日のメニュー 1.レスポンシブデザインの復習 1. 定義の確認と基本的な実装、IE対策 2.アクセシビリティの基礎 1. 視覚障害対策(高齢者・運動障害対策も含む) 2. 聴覚障害対策 3. てんかん対策 4. その他 3.レスポンシブ&アクセシブルデザイン 1.HTML5の利用 2. スキップリンクの実装 3.floatによるコンテンツファーストでの実装 4.display:table; 時間があれば・・・ microdataについて 2
  3. 3. 【復習】レスポンシブデザインとは 1. 幅可変(画面・ウィンドウサイズに追従) 2. 画像サイズ可変 3. レイアウト切り替え(メディアクエリ)  利点 • 横スクロールを排除する事で、どんなデバイス・ウィンドウ幅でも使いやす い。  欠点 • • 「1ピクセルのズレも許しません!」は、ほぼ不可能。 美しさよりも、「情報をストレスなく届ける」という機能性重視 のデザイン手法。 ➢ 「誰でも情報にアクセスできる」というウェブアクセシビリティに通じるコンセ プト。 3
  4. 4. 【実装の基礎(1)】ページ幅可変 ● 使用するCSSプロパティと値 – width: %指定 ● – width: auto, または指定しない。 ● – margin指定不要。左右の余白がウィンドウ幅によって変わる。 marginの左右を指定。左右の余白を一定に保てる。 max-width, min-width : 必要に応じて。 ↓ pxの計算はブラウザが行うため、ブラウザによって小数点以下 の切り上げ・切り下げなどの処理が変わる。  →1pxのズレは避けられない。  →あるいは固定幅を多数用意して段階的に切り替える。 4
  5. 5. 【実装の基礎(2)】画像サイズ可変 ● imgのwidthを%指定、あるいは指定しない。 ● height:auto;か、指定しない。 ● ブログサービスなどの場合、htmlコード内にstyleタグで直 接指定している事があるので対処不能に陥る事もある。 – – ● WordPress→functions.phpで指定させないようにする。 その他→javascriptを使って書き換える。 background-image: cover; を使うと、勝手に拡大縮小・ト リミングしてくれる。ブラウザによって見え方が変わるかも しれない。 – IE8は対応していません。 5
  6. 6. 【実装の基礎(3)】レイアウト切替 メディアクエリ=@media で指定する。 CSS デフォルトの記述 ・ ・ ・ @media (max-width: 639px){ 幅639px以下で使うCSS } @media (max-width: 480px){ 幅480px以下で使うCSS } ・ ・ ・ @media print { 印刷時のCSS } 最初にメディアクエリ無指定のも のを記述。  →デフォルトの記述。 @mediaで、ウィンドウ幅、デバイ スなどに最適化されたCSSを記 述する。 デフォルトのものも継承されてい るので、場合によってはデフォル トの指定を解除する指定を書き 込む必要がある。 →モバイルファーストだと楽。 6
  7. 7. 【実装の基礎(4)】IE対策 ● IE用のCSSのみ別に記述して、ヘッダーの最後に 専用CSSファイルを指定する。 <!--[if lt IE 10]> <link rel="stylesheet" type="text/css" media="all" href="ie.css" /> <![endif]--> ● 多分これが一番楽。 – – – – CSSでIEハックしなくていい。 バリデーションエラーの心配がない。 メインのコードが見やすくなる。 IE用もメンテナンスしやすい。 7
  8. 8. 【実装の基礎(5)】viewport ● ページ幅可変でデザインただけでは、文字が全く 読めないレベルまで縮小表示される。 – ● 閲覧者は毎回拡大操作をしなければならず、不便。 htmlのヘッダーに、 <meta name="viewport" content="width=device-width" />   を指定すれば解決する。 ● 文字サイズを14~16pxにして、スマホの高精細画 面でも読みやすくする。(主流は14px。アクセシブ ルなのは16px。なお、16pxはブラウザの標準サイ ズ) 8
  9. 9. 【実装の応用】に行く前に アクセシビリティ(高齢・障害者対応)の話。 ● 何で? – – – – – 別に博愛精神で言っているわけではないのです。 セマンティックウェブとかSEOとかマルチデバイスとかと 不可分だし、そういうのに応用が利く。 ISO9000シリーズや14000シリーズと同様、官公庁や 企業サイトには必須となるのでどうせ避けられない。 ぶっちゃけ、ただのレスポンシブデザインでは簡単すぎ て面白くない。(floatを重ねて終わりとかつまらない) 普通の人にも使いやすくなる。(ここ重要) 9
  10. 10. 【復習】アクセシビリティとは ● ● ● ● ● ● 「誰でも使えるウェブサイト」 JIS X 8341-3「高齢者・障害者等配慮設計指針」 視覚障害、聴覚障害、運動障害(マウスでの繊細な 操作ができない)、てんかん 初心者、高齢者、学習障害者でも簡単に扱えるよう にする。 いかに気配り上手なウェブサイトを作れるか 「愛だろ、愛。」(チムグクルってのが一番しっくりくる) 10
  11. 11. 【復習】アクセシビリティ規格 ● JIS X 8341-3:2010 (現在の版) – – ● サイトの評価をするための基準を示している。A~AAA 官公庁などはAAレベルを目標にしているところが多 い。 現在の版は評価基準を示していて、実際にどう実 装するかは制作者にゆだねられている。 – – 教科書のように使えるのは、改定前の版。 JIS X 8341-3:2004 11
  12. 12. 視覚障害の種類と対策(1) ● 全盲 – 音声読み上げソフト・ブラウザ、点字ブラウザに対応す る。 ● ● – 音声読み上げは、OSに標準で付いている場合もある(iOS、 Android,Windows8.xなど)。無料ソフトにNVDAがある。 → http://sourceforge.jp/projects/nvdajp/ ちなみに、NVDAは打ち込んだ文字を読み上げてくれるの で、データの入力作業がやりやすい。また、入力終了後にタ イプミスが無いか確認するときにも便利。 キーボードのみの操作で扱いやすくする。 ● 運動障害にも対応可能になる。 12
  13. 13. 視覚障害の種類と対策(2) ● 弱視 – – メガネなどで矯正しても十分な視力が出ない。 高コントラスト、大サイズの文字。 ● OSの「ユーザー補助」「簡単操作」「アクセシビリティ」などのコントロールパネル の項目で体験できる。 – ● ● Win7の場合、スタートメニュー>コントロールパネル>コンピュータの簡単操作センター サイト側でやる事はあまり無い。 色盲・色弱 – – 3原色を判別する錐体(センサー)の一部が無い、あるいは働きが弱い。 色の選択に注意するか、コントラストを高くする。 ● ● ● 無料ソフトのカラーコントラストアナライザーで簡単に検証できる。 ちなみに純色(#FF0000, #00FF00, #0000FF)だと十分なコントラストが出ない ので要注意。 これに配慮すると、モノクロ印刷でも判別できるようになる。 13
  14. 14. 視覚障害の種類と対策(3) ● 老眼・近視など – 標準の文字サイズを16pxにする。 ● ● – 普通は14pxだがそこを何とかするのがデザイナーの腕の見せ所。 明朝体を使うとか。 スマホやタブレットでは16ピクセルが読みやすい。(画面が 高精細化しすぎて、通常のサイズだと小さくなる) → http://web-tan.forum.impressrd.jp/e/2013/06/04/15385 なお、印刷用CSSの標準の文字サイズは10.5pt以上に する。(pxではなく、pt。10.5ptはWordの標準サイズなの で違和感が出ない。高齢者向けには11~12pt) 14
  15. 15. 聴覚障害対策 ● 主に動画コンテンツで注意が必要。 – ● 動画には字幕をつける。あるいは字幕つきを選べるよう にする。 インタラクティブコンテンツで、クリックなどの反応を 音で出す場合に対策が必要。 – 音だけではなく、画面でも反応している事が分かるよう にする。 15
  16. 16. てんかん対策 ● 光過敏性てんかん – – ● アニメ番組の閃光で大規模な被害が発生し、注目され た。(ポケモンショック) 1秒間に3回以上の点滅を避ける事。 幾何学模様で発作が起きるものもある。 – – 一定の幾何学模様に反応して発作が起きるタイプ。 画面いっぱいに縞模様とか、同心円、渦巻きとかは避 けるべき。 16
  17. 17. アクセシビリティ、最初の一歩 ● ● セマンティックにマークアップする。 画像にalt属性を付けて丁寧な解説を行う。 – – ● 文字サイズは16px。 – ● イベントに関するニュースのVTRのナレーションのような 感じ。 さほど重要ではない場合、alt=””で音声読み上げに無視 させる。 小さくても14px。12pxとか言語道断。 文字と背景の間には十分なコントラストをつける。 – 少なくとも3:1以上。望ましくは4.5 :1以上。 17
  18. 18. レスポンシブデザインと アクセシビリティ ● HTML5の採用。 – – ● スキップリンクの設置。なお、非表示には一定のテクニック が必要。(実例は後述) – – ● 適切なタグ、id名、role属性を付ける。 セマンティックなサイトの構築。(←ご利益いっぱい) display: none; は読み上げられない事が多いため使用不可。 なお、スマホ向けサイトで表示させると使いやすくなる。 メインコンテンツをサイドバーのコンテンツよりも先に配置 する。 – – これをレスポンシブデザインでやるのは大変。 モバイル&コンテンツファースト 18
  19. 19. 【実装(1)】HTML5&セマンティック ● タグ:<header>,<nav>,<main> – – ● 今後、ブラウザにはこれらのコンテンツにスキップする機能が付く可能性が高い。 (障害者支援ツールは既に対応しているものも) IE8は非対応。html5shiv.jsを使うか、<div id=”main” role=”main”>等 マークアップ:<h1>~<h6> – – 見出し要素を手がかりに情報を探す人が多い。 マークアップのみならず、適切な見出しも重要になる。 ● id名:スキップリンク(ブロックスキップ)のアンカーとして。 ● role属性:WAI-ARIAで規定されている。タグより詳細な機能を明示する。 – – https://w3g.jp/blog/studies/lets_role_fit ユーザー側で情報の整理ができるようになる。 ※WAI-ARIA : Web Accessibility Initiative-Accessible Rich Internet Applications 19
  20. 20. 【実装(2)】スキップリンク 使っちゃいけない/使いにくいもの ● display: none; ⇒スキップリンクが機能しなくなる。 ● Google先生がペナルティかける可能性があるもの – テキストを画像の背後に置く CSS を使用してテキストを画面の外に配置する – フォント サイズを 0 に設定する – 小さな 1 文字(段落中のハイフンなど)のみをリンクにする 白背景白文字 – – ● ● アクセシビリティチェッカーでもエラーとして検出されるはず。 text-indent: -9999px; ⇒ブラウザの描画処理が遅くなるかも。 – indentは小さい数字にして、overflow: hidden; で隠す。 20
  21. 21. 【実装(2)】スキップリンク 沖縄県のホームページの場合 ● 文字サイズや行の高さを極端に小さくした上で、position で左に飛ばしている。 – ● text-indent: -9999px;と同じ発想。 active, focusでページの上端に表示。 .skip { font-size: 0.1%; line-height: 0.1; position: absolute; left: -3000px; width: 1px; z-index: 9999; } a.skip:active, a.skip:focus { display: block; font-size: 100%; line-height: 1.6; top: 0; left: 0; width: 99.99%; } 21
  22. 22. 【実装(2)】スキップリンク WordPress(Twenty-Thirteen)の場合 ● ● clip: rect (top, right, bottom, left ); を使って0ピクセル にトリミング clipプロパティはCSS2.1に規定されている。 .screen-reader-text { clip: rect(1px, 1px, 1px, 1px); position: absolute !important; } 22
  23. 23. 【実装(2)】スキップリンク うち(小三ツ星インターフェイス)の場合 ● ● clip: rect (top, right, bottom, left ); を使って0ピクセ ルにトリミング(WordPressチームのパクry) スマホ用media queryではボタンとして表示させる @media (min-width: 640px) { .skiplink { position: absolute; clip: rect(1px, 1px, 1px, 1px); } } @media (max-width:639px){ .skiplink { display: table; width: 60px; height: 60px; position: absolute; top: 0px; right: 2px; } .skiplink a { display: table-cell; width: 100%; height: 100%; text-indent: 0; border-radius: 4px; font-sixe: 14px; } } ←他にもいろいろ設定して、スマホでは ページ右上に半透明のボタンが表示される。 23
  24. 24. 【実装(3)】レスポンシブのカラム ウィンドウ幅を狭くするとカラムを下に落としたい。 使えそうないくつかの方法。  1. floatプロパティを使う。 • 入りきれないと勝手に下に落ちてくれる。簡単。 2. positionプロパティを使う。 • デザインが崩れる。大変。CSSだけでは無理っぽい。 • いろいろ試してはいるが、javascript必須かも。 3. display: table; display: table-cell; を使う。 • • • CSS3にて登場。簡単。 IE7以下は非対応。 3カラム、左サイドメニューのレイアウトではコンテンツファーストは不可 能。 24
  25. 25. 【実装(4)】floatによる実装 問題がいくつか。 ● 普通にやると、固定幅カラムが先になる。 – – – コンテンツが一番下になる。←大問題。 スマホサイトではかなり使いにくくなる。 可変幅を先に持ってくると、最小幅で描画されレスポンシブ にならない。 解決法 ● レイアウトを行うためのdivタグでカラムをグループ化 し、ネガティブマージンを組み合わせて回り込ませる。 ● 元ネタ↓ http://www.css-designsample.com/csslayout/float-3column-w.html 25
  26. 26. 【実装(4)】floatによる実装 ● サイトの構造 <div id="contents" class="contents post"> <div class="main-area"> <div class="center-area"> <section id="main" class="main"> <article> コンテンツ </article> </section> <!-- main end --> </div><!-- center area end --> 左サイドバー </div><!-- main-area end --> 右サイドバー </div><!-- contents end --> デザイン専用のdiv要素が増えるもの の、コンテンツファーストで実装できる。 <contents> <div class=”main-area”> <div class=”center-area”> <section class=”main”> <article> コンテンツ </article> <sidebar-left> 左サイドバー <sidebar-right> 右サイドバー 26
  27. 27. 【実装(4)】floatによる実装 ● CSSの組み立て(1) .contents { width: 100%; } .main-area{ width: 100%; float: left; margin-right: -200px; } ● ● 土台のdiv(contents)は、幅を%で指定。(リ キッドレイアウト) ネガティブマージン(右)により、最下層の右サ イドバーが回りこむ領域を確保。(divは重複 する形になる。) <contents> <div class=”main-area”> <div class=”center-area”> <section class=”main”> <article> コンテンツ </article> <sidebar-left> 左サイドバー <sidebar-right> 右サイドバー 27
  28. 28. 【実装(4)】floatによる実装 ● CSSの組み立て(2) <contents> .rightside { background-color: #FC0; width: 170px; float: right; } ● <section class=”main”> <article> コンテンツ </article> sidebar-rightにfloat:right;  を指定すると、右に回り込む。 ● <div class=”main-area”> <sidebar-right> 右サイドバー <div class=”center-area”> mainと重複している状態。 <sidebar-left> 左サイドバー <sidebar-right> 右サイドバー 28
  29. 29. 【実装(4)】floatによる実装 ● CSSの組み立て(3) .center-area{ width: 100%; margin-left: -190px; } <contents> <div class=”main-area”> <sidebar-right> 右サイドバー <div class=”center-area”> <section class=”main”> <article> コンテンツ </article> ● center-areaにmargin-left: -190px; を指定すると、要素全体が左に引きずら れ、右サイドバーとの重複が一時的に解 消される。 <sidebar-left> 左サイドバー 29
  30. 30. 【実装(4)】floatによる実装 ● CSSの組み立て(4) .center-area{ width: 100%; margin-left: -190px; float: right; } ● さらに、center-areaにfloat: right; を指定すると、親要素にある右サイドバー に重複。 ● 同時に、左サイドバーも回りこむ。どういう わけか、はみ出しているエリアにではなく、 <contents> <div class=”main-area”> <sidebar-right> 右サイドバー <div class=”center-area”> <sidebar-left> 左サイドバー <section class=”main”> <article> コンテンツ </article> <sidebar-left> 左サイドバー main-area内に入るように描画される。 30
  31. 31. 【実装(4)】floatによる実装 ● CSSの組み立て(5) .main { margin: 0 200px; } .leftside { width: 170px; float: left; } ● <contents> <div class=”main-area”> <sidebar-right> 右サイドバー <div class=”center-area”> <sidebar-left> 左サイドバー <section class=”main”> <article> コンテンツ </article> サイドバーとコンテンツの重複を解消する ため、mainの左右マージンを調整。 ● 左サイドがcenter-areaの下に隠れるが、 float: left;で表に出てくる。 31
  32. 32. 【実装(4)】floatによる実装 いくつかの欠点も… ● clearfixが使えない。 ● 可読性が落ちる。 – – – レイアウトのためのdiv要素 でコードが複雑になる。 閉じタグ忘れとかするとえら いことになる。 ネガティブマージンとかぶっ ちゃけ分かりにくい。 <contents> <div class=”main-area”> <sidebar-right> 右サイドバー <div class=”center-area”> <sidebar-left> 左サイドバー <section class=”main”> <article> コンテンツ </article> 32
  33. 33. 【実装(5)】display:table;による実装 HTML CSS <div class=”contents”> <aside class=”sidebar-left”> </aside> <section class=”main” role=”main”> </section> <aside class=”sidebar-right”> </aside> </div> <contents> <sidebar-left> 左サイドバー <section class=”main”> <article> コンテンツ </article> <sidebar-right> 右サイドバー .contents { display: table; table-layout: fixed; } .sidebar-left { display:table-cell; vartical-align: top; width: 180px; } .main { display:table-cell; vartical-align: top; } .sidebar-right { display:table-cell; vartical-align: top; width: 180px; } 33
  34. 34. 【実装(5)】display:table;による実装 利点 ● テーブルレイアウトに近いこと ができる。 ● vertical-align が使えて便利。 ● ● table-layout: fixed; で均等 配置が可能。 レイアウト専用のdivが不要。 ● clearfix不要。 ● コードの可読性が高い。 <contents> <sidebar-left> 左サイドバー <section class=”main”> <article> コンテンツ </article> <sidebar-right> 右サイドバー 34
  35. 35. 【実装(5)】display:table;による実装 欠点 ● 左メニューではコンテンツファーストが不可能。 – – ● ● table-cellは、HTMLの記載順に左から埋めていく。 スキップリンク必須。 display:table-cell;に指定されたボックス内では横 のmarginが機能しない。 デフォルトでは隣のcellと行を揃えようとする。 – ボックスの先頭部分は、vertical-align:top; で揃える。 35
  36. 36. まとめ ● ● ● ● ● 最初はdisplay:table;とスキップリンクが簡単。 細かいやり方はぐぐればたくさん出てくる。 気を使うところはたくさんあるけど、デザインってそ ういうものだよね。 「使いやすさ」を追求すると、レスポンシブデザイン とかモバイルファーストとかアクセシビリティファー ストとかになる。 アクセシビリティに配慮することがそのままスマホ などのユーザビリティに直結する。 36
  37. 37. 【その他】microdataについて ● 検索結果を適切に表示するために Yahoo,Microsoft,Googleが共同で策定した構造化 マークアップの規格。 – ● ● Schema.org 「文脈」を示すことができる。(人名、地名、商品名、 金額など。) Googleなどの検索結果に金額や評価などの情報 が出るようになる。 – (参考:microdata について Googleウェブマスターツールヘルプ) 37
  38. 38. microdataの実装 <div itemscope itemtype="http://schema.org/Organization"> 定義のURL: (企業・団体) <span itemprop="name">団体名称</span> 語彙 <div itemprop="address" itemscope itemtype="http://schema.org/PostalAddress"> 住所:〒<span itemprop="postalCode">90*-****</span> <span itemprop="addressLocality">都道府県</span> <span itemprop="streetAddress">市町村*丁目</span> </div> Tel:<span itemprop="telephone">0*-****-****</span>, Fax:<span itemprop="faxNumber">0**-***-****</span>, E-mail: <span itemprop="email">hage@hogehoge.example</span> </div> 参考:http://schema.org/Organization 38
  39. 39. 参考文献など ● スクリーンリーダーNVDA – ● CUD カラーユニバーサルデザイン – ● https://w3g.jp/blog/studies/lets_role_fit floatプロパティによるコンテンツファーストデザイン – ● http://weba11y.jp/tools/cca/index.html role属性について – ● NPO法人カラーユニバーサルデザイン機構著 ハート出版 ISBN978-89295565-5 カラーコントラストアナライザー – ● http://sourceforge.jp/projects/nvdajp/ http://www.css-designsample.com/csslayout/float-3column-w.html microdata – http://schema-ja.appspot.com/ 39

×