マークアップ部＠仙台オフィス

2016年6月13日著

つい先日、小谷美紗子弾き語りTOUR「MONSTER」仙台公演に参加すべく個人的に仙台に行ってきたわけですが、その直前（6月10日の夕方）には勤務先の仙台オフィスの皆さんと、勉強会的なことを催してもいました。大雑把に言って会の前半がマークアップ部（何）、後半はWebアクセシビリティに関する一問一答という構成。マークアップ部でのお題には、昨年の第5回社内マークアップ部で用いた「インデックス」と同じものを使用しました。仙台オフィスの3チームそれぞれの発表を聞いていたら、新しい発見ができたりして（僕が勝手に「カテゴリー表記」と呼んでいた情報は、前提次第では複数が割り当てられるかもしれない etc.）勉強になったのですけど、自分は昨年の時点では

画像については position プロパティで絶対配置する感じになるはずで（マークアップ上はリンクラベルを画像より先に記述する前提）、レスポンシブな実装とは相性があまり良くなくなるのですけど、ひとまず仕方ないかなぁという感じ。

という、やや中途半端な案を作成するに止まっていました。そのモヤモヤをこの機に払拭しようと、基本的な考え方は継承しつつも、レスポンシブなデザイン実装を実際にスタイルシートも書いて検証しつつ別の案を作成してみました：

<ul class="index">
<li class="technology"><a href="#"><img src="big.png" alt=""><div class="lead">リード文リード文リード文リード文</div><span class="title">メインタイトルリンクラベルリンクラベル</span></a><div class="description">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト......続きを読む</div></li>
<li class="life"><a href="#"><img src="small.png" alt=""><span class="title">メインタイトルリンクラベルリンクラベル</span></a></li>
<li class="study"><a href="#"><img src="small.png" alt=""><span class="title">メインタイトルリンクラベルリンクラベル</span></a></li>
<li class="politics"><a href="#"><img src="small.png" alt=""><span class="title">メインタイトルリンクラベルリンクラベル</span></a></li>
<li class="sport"><a href="#"><img src="small.png" alt=""><span class="title">メインタイトルリンクラベルリンクラベル</span></a></li>
</ul>

昨年作った案との違いは、引き続き画像とリンクラベルのセットは単一のa要素としてマークアップしつつも、ソースオーダー上は画像を先にしている点。そこはFlexboxの使用を是とするならまた別の考え方もできたけれども、引き続きfloatプロパティでレイアウトする（かつレスポンシブな実装にする）想定で、そうしました。またこの案では、先述の「カテゴリー表記」は単なるオマケ、装飾であるとの仮定でもって「敢えて」CSSの擬似要素で表示させています。もちろん、この仮定に対しては「アクセシビリティ的にどうなのか」というツッコミをいただき、それが嬉しかったというか、まぁ普通に考えるとそうですよねという感じだったのですがw

ちなみに3チーム共に全体はul/li要素で構成するという点で一致していたのですけど、li要素内容で見出し要素を使うべきかどうか？　というトピックスが興味深かったです。個人的には以前からli要素の中で見出し要素を使わない派で、理由としては 1) 文書全体のアウトラインを構成する要素であるからしてul/li要素の中で見出し要素を使いたくない、2) li要素の中に限らず、お題にある程度の粒度における「見出し的な何か」のすべてに見出し要素を使い始めると、ページによっては見出しだらけになってアウトラインが理解し難くなりそう、というのがあったのですが、そもそもHTML5というかHTML Standard的に好ましいマークアップとは言えなかったのですね。以下、もんどさんのHTML Standard 日本語訳より引用：

li要素の内側の見出し要素（たとえばh1）を含むことは適合するが、それはおそらく著者が意図したセマンティックスを伝えることはない。見出しは新しいセクションを開始し、リストの見出しが暗黙的に複数のセクションにまたがるようにリストを分割する。