マークアップ勉強会、はじめました - クイックエンジニアリングブログ

こんにちは、satopiです。

html5j マークアップ部が開催しているMarkupCafeを社内エンジニアに紹介したところ、「楽しそう」「勉強になりそう」「やってみたい！」と声が上がったので、マークアップ勉強会をはじめました！

html5j マークアップ部のMarkupCafeとは

複数のチームに分かれて、お題の最適なマークアップを話し合い、模造紙に回答を書いて発表します。

MarkupCafe

弊社では少人数スタートとなったので、業務時間内で効率的に進められるよう、以下の進め方に変更しました。

日常でよく使う―身近なサイトのUIからお題を選出。
大人数ではないので各自でCodePenへマークアップを投稿する。
CSSやJSを書いても良い。（完全に任意）

勉強会、初回の様子

初回はQiitaのコメント欄をお題に選びました。

Qiitaコメント欄

当日の流れ

各自、当日までに事前にマークアップしておく。
勉強会当日は、一人持ち時間5分で自分のマークアップについて発表する。
意見交換タイム。

マークアップの結果発表

この記事では、自分を含めたフロントエンドエンジニアの2名のマークアップを紹介させていただきます！

Aさんのマークアップ

<div class="comment-box">
    <div class="header">
        <div class="user">
            <a href="#"><div class="avatar"><img src="" alt=""></div></a>
            <div class="meta">
                <a href="#" class="username">userName</a><br>
                <span><b>99999</b>contribution</span>
            </div>
        </div>
        <div class="info">
            <time datetime="YYYY-MM-DDThh:mm+9:00">YYYY−MM−DD hh:mm</time><br>
            <button type="button" class="like-btn"><img src="" alt="👍"> いいね</button>
            <span class="like-count">0</span>
        </div>
    </div>

    <div class="content">
        <p>コメントが入ります。</p>
    </div>
</div>

Aさんの考え

ひとつのコメントを"comment-box"として、リスト要素の中に入れていくイメージでマークアップしました。
クラス名はできるだけセマンティックになるように、CSSもできるだけシンプルにかけるように心がけました。
悩んだところ：ユーザーのアイコン、名前がどちらもユーザーページへのリンクになっていますが、まとめてaタグで囲んだ場合の配置の仕方に悩んだ結果、それぞれaタグで囲むマークアップをしてしまい反省しています…（´・ω・｀）

※勉強会が終わった後にコメントをまとめてもらったので、Aさんの反省が入りました(´・ω・`)

私のマークアップ

<ol class="list-comment">
    <li>
        <article class="comment">
            <header class="comment_header">
                <a href="dummy">
                    <span class="comment_user">
                        <span class="comment_user-name">userName</span>
                        <span class="comment_user-contribution"><b>99999</b> contribution</span>
                    </span>
                    <span class="comment_user-img"><img src="https://dummyimage.com/36x36/888/fff&text=photo" alt=""></span>
                </a>
                <time class="comment_date" datetime="YYYY-MM-DD">YYYY-MM-DD hh:mm</time>
            </header>
            <div class="comment_body">
                <p>コメントが入ります。</p>
            </div>
            <footer class="comment_footer">
                <div class="comment_fav">
                    <button class="comment_fav-btn" type="button">いいね</button>
                    <span class="comment_fav-num">0</span>
                </div>
            </footer>
        </article>
    </li>
</ol>

私の考え

コメントは時系列に並んでいくことを想定し、ol要素を選択。レスがついたら、入れ子でol挿入。
WHATWGのarticle要素の説明に「ユーザーが投稿したコメント」も独立したコンテンツと考えられると書いてある！使ってみよう〜。(´ᴖωᴖ｀)にこにこ
- articleを使うなら、headerとfooterも使っちゃお。
CSSを無効にしたときに、まずはじめに表示されるのはユーザーアイコンではなく、ユーザー名にしたい。
- 今のQiitaで、ユーザーアイコンにユーザーページへのリンクがあるけど、altが指定されておらず、Webアクセシビリティ的に良くない。
  - 現状のQiitaのマークアップだと、アイコンにaltにユーザー名を入れると、重複読み上げになってしまうのでは…。
    - そうだ！ユーザー名＆貢献数＆ユーザーアイコンすべてをa要素で包括しよう！！
FontAwesomeは便利だけど、個人的な思想で空spanを使いたくない…。
- いいねボタンにユニークなclass名をつけておき、CSSでアイコンを背景画像として表示させちゃお。