![【実装の基礎（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](https://image.slidesharecdn.com/random-140201205634-phpapp01/85/-7-320.jpg)
レスポンシブウェブデザインとアクセシビリティの勉强会
- 2. 本日のメニュー 1.レスポンシブデザインの復習 1. 定義の確認と基本的な実装、IE対策 2.アクセシビリティの基礎 1. 視覚障害対策（高齢者?運動障害対策も含む） 2. 聴覚障害対策 3. てんかん対策 4. その他 3.レスポンシブ＆アクセシブルデザイン 1.HTML5の利用 2. スキップリンクの実装 3.floatによるコンテンツファーストでの実装 4.display:table; 時間があれば??? microdataについて 2
- 4. 【実装の基礎（1）】ページ幅可変 ● 使用するCSSプロパティと値 – width: %指定 ● – width: auto, または指定しない。 ● – margin指定不要。左右の余白がウィンドウ幅によって変わる。 marginの左右を指定。左右の余白を一定に保てる。 max-width, min-width : 必要に応じて。 ↓ pxの計算はブラウザが行うため、ブラウザによって小数点以下 の切り上げ?切り下げなどの処理が変わる。 →1pxのズレは避けられない。 →あるいは固定幅を多数用意して段階的に切り替える。 4
- 6. 【実装の基礎（3）】レイアウト切替 メディアクエリ＝@media で指定する。 CSS デフォルトの記述 ? ? ? @media (max-width: 639px){ 幅639px以下で使うCSS } @media (max-width: 480px){ 幅480px以下で使うCSS } ? ? ? @media print { 印刷時のCSS } 最初にメディアクエリ無指定のも のを記述。 →デフォルトの記述。 @mediaで、ウィンドウ幅、デバイ スなどに最適化されたCSSを記 述する。 デフォルトのものも継承されてい るので、場合によってはデフォル トの指定を解除する指定を書き 込む必要がある。 →モバイルファーストだと楽。 6
- 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. 【実装の基礎（5）】viewport ● ページ幅可変でデザインただけでは、文字が全く 読めないレベルまで縮小表示される。 – ● 閲覧者は毎回拡大操作をしなければならず、不便。 htmlのヘッダーに、 <meta name="viewport" content="width=device-width" /> を指定すれば解決する。 ● 文字サイズを14～16pxにして、スマホの高精細画 面でも読みやすくする。（主流は14px。アクセシブ ルなのは16px。なお、16pxはブラウザの標準サイ ズ） 8
- 11. 【復習】アクセシビリティ規格 ● JIS X 8341-3:2010 （現在の版） – – ● サイトの評価をするための基準を示している。A～AAA 官公庁などはAAレベルを目標にしているところが多 い。 現在の版は評価基準を示していて、実際にどう実 装するかは制作者にゆだねられている。 – – 教科書のように使えるのは、改定前の版。 JIS X 8341-3:2004 11
- 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. 【実装（2）】スキップリンク 使っちゃいけない/使いにくいもの ● display: none; ?スキップリンクが機能しなくなる。 ● Google先生がペナルティかける可能性があるもの – テキストを画像の背後に置く CSS を使用してテキストを画面の外に配置する – フォント サイズを 0 に設定する – 小さな 1 文字（段落中のハイフンなど）のみをリンクにする 白背景白文字 – – ● ● アクセシビリティチェッカーでもエラーとして検出されるはず。 text-indent: -9999px; ?ブラウザの描画処理が遅くなるかも。 – indentは小さい数字にして、overflow: hidden; で隠す。 20
- 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. 【実装（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. 【実装（2）】スキップリンク うち（小三ツ星インターフェイス）の場合 ● ● clip: rect (top, right, bottom, left ); を使って0ピクセ ルにトリミング（WordPressチームのパクｒｙ） スマホ用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. 【実装（３）】レスポンシブのカラム ウィンドウ幅を狭くするとカラムを下に落としたい。 使えそうないくつかの方法。 1. floatプロパティを使う。 ? 入りきれないと勝手に下に落ちてくれる。簡単。 2. positionプロパティを使う。 ? デザインが崩れる。大変。CSSだけでは無理っぽい。 ? いろいろ試してはいるが、javascript必須かも。 3. display: table; display: table-cell; を使う。 ? ? ? CSS3にて登場。簡単。 IE7以下は非対応。 ３カラム、左サイドメニューのレイアウトではコンテンツファーストは不可 能。 24
- 26. 【実装（４）】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. 【実装（４）】floatによる実装 ● CSSの組み立て（１） .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. 【実装（４）】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. 【実装（４）】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. 【実装（４）】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. 【実装（４）】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. 【実装（４）】floatによる実装 いくつかの欠点も… ● clearfixが使えない。 ● 可読性が落ちる。 – – – レイアウトのためのdiv要素 でコードが複雑になる。 閉じタグ忘れとかするとえら いことになる。 ネガティブマージンとかぶっ ちゃけ分かりにくい。 <contents> <div class=”main-area”> <sidebar-right> 右サイドバー <div class=”center-area”> <sidebar-left> 左サイドバー <section class=”main”> <article> コンテンツ </article> 32
- 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. 【実装（5）】display:table;による実装 利点 ● テーブルレイアウトに近いこと ができる。 ● vertical-align が使えて便利。 ● ● table-layout: fixed; で均等 配置が可能。 レイアウト専用のdivが不要。 ● clearfix不要。 ● コードの可読性が高い。 <contents> <sidebar-left> 左サイドバー <section class=”main”> <article> コンテンツ </article> <sidebar-right> 右サイドバー 34
- 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