1. 「あなたは、これらを美しくマークアップできるかな?」#Markup CafeTokyo【CodeIQ提供】#html5j

「あなたは、これらを美しくマークアップできるかな?」#Markup CafeTokyo【CodeIQ提供】#html5j


 10月19日(土)株式会社じげん セミナールーム「GALAXY」にて、html5j マークアップ部の主催で、HTMLのマークアップをゲーム感覚で楽しむイベント「MarkupCafe Tokyo Vo.2」が行われた。


 こちらのイベントは、プロのWebデザイナーから初心者まで、みんなで気軽に会話しながらHTMLマークアップについての知識を深めることができるということで20名ほどの参加者が集まった。


 今回は、こちらのイベントにお邪魔して、お題として出された3つの問題をもとに各チームの発表内容をまとめた。仕事でマークアップを行う際の考え方の参考にしていただければと思う。


 また今回の記事は、株式会社リクルートキャリアが運営する、ITエンジニアのための実務スキル評価サービス「CodeIQ」の提供で公開されている。ぜひ、一度アクセスしてみてはいかがだろうか。

1問目:ページネーションをマークアップせよ!

 まず第1問目としてページネーションの問題が出され、各チーム持ち時間30分でどのようにマークアップするかを考えた。

Aチーム

<HTMLソース>


「<nav>をやめて、<div>を使いました。それはページネーションが使われるコンテキストを考えると、検索結果であったり、商品一覧において<div>が主要だろうと思ったからです。個人的にページネーションで数字をクリックせず、『次へ』『前へ』をクリックするので、そちらを前に置くようにした方が良いのかなと感じました。」(Aチーム)

Bチーム

<HTMLソース>

「ページネーションで<nav>を使うと意味が強すぎるのかなと思ったので、<nav>は使わない方向でマークアップしていきました。あとリストは<ul>か<ol>かで迷ったんですけど、<ol>を使うという方向で進めていきました。ページの位置関係を出すためには、Aタグを単独で使わずPタグで括って使うのが正しいのではないかと思ったので、Pタグを使ったことがAチームとの違いになります。」(Bチーム)

Cチーム

<HTMLソース>

「まずチームで議論になったのが『リスト』を使うのかどうか。最初に<div>と<a>タグだけで組んでしまって良いのではないかという部分があったのですが、最終的にリストを持たせることになり、シンプルですけどこのようなマークアップになりました。」(Cチーム)

Dチーム

<HTMLソース>

「私たちは、大きく<nav>タグで囲う形にしました。1〜5までの数字は『1,2,3…7,8』のように、必ずしも連続するものではない可能性があったため、<ol>ではなく<ul>にしました。  


『次へ』と『前へ』を<strong>で囲って<ul>を外に出したのは、このページの『次へ』と『前へ』というのはナビゲーション要素として一番重要だと思ったからです。」(Dチーム)

投票結果

 発表後、どのチームが一番良かったかを投票して決め合い、Dチームは1票、Cチームは5票、Bチームは5票、Aチームは11票という結果で、ページネーションが使われる背景を考えた上で<div>を使ってまとめたAチームが最多得票を獲得した。


 全体のページから見たページネーションの位置づけから<nav>・<div>のどちらで括るべきなのか。またページネーションは単なるページのリストか順序のあるリストかであり、<ul>・<ol>のどちらを利用するかなどを考えた上でマークアップをどのように行うのが良いかなどに注目して討論が行われていた。

2問目:予約フォームをマークアップせよ!

 第2問目は「予約フォーム」に関して、マークアップをどう行うかという問題が出された。

Aチーム

<HTMLソース>

「レスポンシブWebデザイン的なところを考えると、<table>ではなく<div>で崩しやすくした方が良いかなと思ったんですけど、面倒くさくて<table>にしました。」(Aチーム)

Bチーム

<HTMLソース>

「『*』自体が重要ではなく全体が重要だと考えると、『Strong』で囲っても良いのではないかと思いました。間に要素が入ってきた時に途切れてしまうことを考えると、項目は一つ一つ分けるべきだなと考えたところ以外は、ほとんど他のチームと一緒です。」(Bチーム)

Cチーム 

<HTMLソース>

「<dd>タグを使うとラベルを使った時に二重になってしまうので、<div>でシンプルに囲いました。また議論されていた『*』に関しては、『*』のマークが重要なわけではないので<span>で括ったのですが、半角英数に関しては時間がなく、話し合いができずに終わってしまいました。」(Cチーム)

Dチーム

<HTMLソース>

「今回はフォームで全体を囲うということになったため、基本的に<ul>要素で全て並べて、その中に<label>と<input>を並べていく形になり、もちろんボタンも<input>にしました。自分たちのチームはtype属性をどれにするか、『*』を何のタグで囲うかという部分に時間をかけたのですが、『*』は<small>にするか<i>にするか迷った結果、特に理由なく<i>にしました。」(Dチーム) 

投票結果

 発表後、どのチームが一番良かったかを投票して決め合い、Dチームは2票、Cチームは4票、Bチームは5票、Aチームは10票という結果で、<table>を使って一番シンプルにまとめたAチームが最多得票を獲得した。

 

 ここでは、メールアドレス入力に利用する「type="email"」や数字入力に利用する「type="number"」など、様々なタイプを利用したマークアップを行うチームが多かった。また、table要素を利用して綺麗にしたり、labelのみのシンプルなチームもあったりするなど、様々な意見を聞くことができた。

3問目:財務諸表をマークアップせよ!

 第3問目は財務諸表のマークアップに関するお題が出され、同じく30分かけてチーム内で議論が交わされた。 

Aチーム

<HTMLソース>

「見たままコーディングするしかなったですね。<thead><tbody>を使ってマークアップを行っていきました。ただデータの『△』の意味付けがよく分からなかったので、とりあえず<span>で囲ってしまいました。」(Aチーム)

Bチーム

<HTMLソース>



「<table>を3つに分けました。また見た目的に年月日が紐づくように見える形にしました。最終的に見た目で解決するという方向でマークアップを行ったのがBチームです。」(Bチーム)

Cチーム

<HTMLソース>

「3つの<table>を自分でも考えたんですけど、あまりしっくり来なかったので普通に1つでまとめてしまう形になりました。」(Cチーム)

Dチーム 

<HTMLソース>

「最初<table>で囲うか迷ったんですけど、しっかり<table>で囲いこむと縦と横の紐付けをしっかり行ってくれるんだなと思いました。<table>の良さを初めて知りました。<scope="row">を使って、下に紐づいているということを示しています。」(Dチーム)

投票結果

 発表後、どのチームが一番良かったかを投票して決め合い、Bチームは4票、Dチームは6票、Cチームは6票、Aチームは6票という結果で、甲乙つけがたく3チームが同じ得票結果となった。  


 この問題では、table要素を巧みに利用することはもちろんのこと、音声読み上げをした場合に表の意味が利用者に伝わるかを特に考察されていた。

全体を通して

 マークアップエンジニアにとって、普段の業務でここまで時間をかけてマークアップを行うことはまずないだろう。しかしこのようなイベントに参加することで、普段では考えられない範囲までマークアップのことを考えて理解を深めることができる。 普段の実務に十分活かせるレベルにスキルアップしたいのであれば、こういったイベントに参加するべきなのではないかと感じた。

問題を解くだけで、あなたのエンジニアスキルが分かる


 今回の記事の提供元である「CodeIQ(コードアイキュー)」は、第一線で活躍するITエンジニアが出題した問題に一般ユーザーが無料で“挑戦”し、そのアンサーに対して出題エンジニアから評価フィードバックをもらえるサービスだ。 


 これまでに「2.1万人」以上が問題に挑戦済みである。  


 社会一般から見たITスキルではなく、その出題エンジニアに自分のスキルがどのように評価されるのかを知ることができるが特徴だ。


CodeIQ運営事務局より

 サイト上で出題希望者受付・IT勉強会のスポンサー受付を行っています。IT勉強会の主催者の方は、お問い合わせページからご連絡ください。


 ※ご希望に添えない場合もございます。あらかじめご了承ください。

U-NOTEをフォローしておすすめ記事を購読しよう
この記事を報告する