Contenu connexe
Similaire à レスポンシブウェブデザインとアクセシビリティの勉強会
Similaire à レスポンシブウェブデザインとアクセシビリティの勉強会 (20)
Plus de Akinori Kawamitsu
Plus de Akinori Kawamitsu (6)
レスポンシブウェブデザインとアクセシビリティの勉強会
- 11. 【復習】アクセシビリティ規格
●
JIS X 8341-3:2010 (現在の版)
–
–
●
サイトの評価をするための基準を示している。A~AAA
官公庁などはAAレベルを目標にしているところが多
い。
現在の版は評価基準を示していて、実際にどう実
装するかは制作者にゆだねられている。
–
–
教科書のように使えるのは、改定前の版。
JIS X 8341-3:2004
11
- 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
- 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
- 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
- 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
- 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