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

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

U-NOTE編集部

2013/10/30(最終更新日:2013/10/30)


このエントリーをはてなブックマークに追加

[{"post":"u003Cbr/u003E","type":"text"},{"post":"u003Cdiv class="media image mid dropped content"u003Eu003Cdivu003Eu003Cimg src="http://u-note.me/img/post/2013102415136128.jpg"/u003Eu003C/divu003Eu003Cdiv class="big-button" contenteditable="false" style="display: none;"u003Eu003C/divu003Eu003Cdiv class="mid-button" contenteditable="false" style="display: none;"u003Eu003C/divu003Eu003Cdiv class="sml-button" contenteditable="false" style="display: none;"u003Eu003C/divu003Eu003Cdiv class="remover" style="display: none;"u003Eu003C/divu003Eu003C/divu003E","type":"text"},{"post":"u003Cspan style="font-size: 16px; letter-spacing: 0.1em;"u003E 10月19日(土)株式会社じげん セミナールーム「GALAXY」にて、html5j マークアップ部の主催で、HTMLのマークアップをゲーム感覚で楽しむイベント「u003C/spanu003Eu003Ca href="http://atnd.org/events/43774" style="font-size: 16px; letter-spacing: 0.1em;"u003Eu003Cbu003EMarkupCafe Tokyo Vo.2u003C/bu003Eu003C/au003Eu003Cspan style="font-size: 16px; letter-spacing: 0.1em;"u003E」が行われた。u003C/spanu003Eu003Cbr/u003E","type":"text"},{"post":"u003Cbr/u003E","type":"text"},{"post":" こちらのイベントは、プロのWebデザイナーから初心者まで、みんなで気軽に会話しながらHTMLマークアップについての知識を深めることができるということで20名ほどの参加者が集まった。","type":"text"},{"post":"u003Cbr/u003E","type":"text"},{"post":" 今回は、こちらのイベントにお邪魔して、お題として出された3つの問題をもとに各チームの発表内容をまとめた。仕事でマークアップを行う際の考え方の参考にしていただければと思う。","type":"text"},{"post":"u003Cbr/u003E","type":"text"},{"post":" u003Cbu003Eu003Ca href="https://codeiq.jp/"u003Eまた今回の記事は、株式会社リクルートキャリアが運営する、ITエンジニアのための実務スキル評価サービス「CodeIQ」の提供で公開されている。ぜひ、一度アクセスしてみてはいかがだろうか。u003C/au003Eu003C/bu003E","type":"text"},{"post":"1問目:ページネーションをマークアップせよ!","type":"text_header_1"},{"post":"u003Cdiv class="media image dropped content sml"u003Eu003Cdivu003Eu003Cimg src="http://u-note.me/img/post/2013102415154655.png"/u003Eu003C/divu003Eu003Cdiv class="big-button" contenteditable="false" style="display: none;"u003Eu003C/divu003Eu003Cdiv class="mid-button" contenteditable="false" style="display: none;"u003Eu003C/divu003Eu003Cdiv class="sml-button" contenteditable="false" style="display: none;"u003Eu003C/divu003Eu003Cdiv class="remover" style="display: none;"u003Eu003C/divu003Eu003C/divu003E","type":"text"},{"post":"u003Cspan style="font-size: 16px; letter-spacing: 0.1em;"u003E まず第1問目としてページネーションの問題が出され、各チーム持ち時間30分でどのようにマークアップするかを考えた。u003C/spanu003Eu003Cbr/u003E","type":"text"},{"post":"Aチーム","type":"text_header_2"},{"post":"u003Cdiv class="media image dropped content sml"u003Eu003Cdivu003Eu003Cimg src="http://u-note.me/img/post/2013102415163939.png"/u003Eu003C/divu003Eu003Cdivu003Eu003Cbu003E<HTMLソース>u003C/bu003Eu003C/divu003Eu003C/divu003E","type":"text"},{"post":"u003Cdiv class="media image mid dropped content"u003Eu003Cdivu003Eu003Cimg src="http://u-note.me/img/post/2013102415179725.png"/u003Eu003C/divu003Eu003Cdiv class="big-button" contenteditable="false" style="display: none;"u003Eu003C/divu003Eu003Cdiv class="mid-button" contenteditable="false" style="display: none;"u003Eu003C/divu003Eu003Cdiv class="sml-button" contenteditable="false" style="display: none;"u003Eu003C/divu003Eu003Cdiv class="remover" style="display: none;"u003Eu003C/divu003Eu003C/divu003E","type":"text"},{"post":"u003Cbr/u003E","type":"text"},{"post":"「<nav>をやめて、<div>を使いました。それはページネーションが使われるコンテキストを考えると、検索結果であったり、商品一覧において<div>が主要だろうと思ったからです。個人的にページネーションで数字をクリックせず、『次へ』『前へ』をクリックするので、そちらを前に置くようにした方が良いのかなと感じました。」(Aチーム)","type":"text"},{"post":"Bチーム","type":"text_header_2"},{"post":"u003Cdiv class="media image dropped content sml"u003Eu003Cdivu003Eu003Cimg src="http://u-note.me/img/post/2013102415185836.png"/u003Eu003C/divu003Eu003Cdiv class="big-button" contenteditable="false" style="display: none;"u003Eu003C/divu003Eu003Cdiv class="mid-button" contenteditable="false" style="display: none;"u003Eu003C/divu003Eu003Cdiv class="sml-button" contenteditable="false" style="display: none;"u003Eu003C/divu003Eu003Cdiv class="remover" style="display: none;"u003Eu003C/divu003Eu003C/divu003E","type":"text"},{"post":"u003Cbu003E<HTMLソース>u003C/bu003Eu003Cbr/u003E","type":"text"},{"post":"u003Cdiv class="media image dropped content sml"u003Eu003Cdivu003Eu003Cimg src="http://u-note.me/img/post/2013102415196656.png"/u003Eu003C/divu003Eu003Cdiv class="big-button" contenteditable="false" style="display: none;"u003Eu003C/divu003Eu003Cdiv class="mid-button" contenteditable="false" style="display: none;"u003Eu003C/divu003Eu003Cdiv class="sml-button" contenteditable="false" style="display: none;"u003Eu003C/divu003Eu003Cdiv class="remover" style="display: none;"u003Eu003C/divu003Eu003C/divu003E","type":"text"},{"post":"u003Cspan style="font-size: 16px; letter-spacing: 0.1em;"u003E「ページネーションで<nav>を使うと意味が強すぎるのかなと思ったので、<nav>は使わない方向でマークアップしていきました。あとリストは<ul>か<ol>かで迷ったんですけど、<ol>を使うという方向で進めていきました。ページの位置関係を出すためには、Aタグを単独で使わずPタグで括って使うのが正しいのではないかと思ったので、Pタグを使ったことがAチームとの違いになります。」(Bチーム)u003C/spanu003Eu003Cbr/u003E","type":"text"},{"post":"Cチーム","type":"text_header_2"},{"post":"u003Cdiv class="media image dropped content sml"u003Eu003Cdivu003Eu003Cimg src="http://u-note.me/img/post/2013102415218115.png"/u003Eu003C/divu003Eu003Cdiv class="big-button" contenteditable="false" style="display: none;"u003Eu003C/divu003Eu003Cdiv class="mid-button" contenteditable="false" style="display: none;"u003Eu003C/divu003Eu003Cdiv class="sml-button" contenteditable="false" style="display: none;"u003Eu003C/divu003Eu003Cdiv class="remover" style="display: none;"u003Eu003C/divu003Eu003C/divu003E","type":"text"},{"post":"u003Cbu003E<HTMLソース>u003C/bu003E","type":"text"},{"post":"u003Cdiv class="media image dropped content sml"u003Eu003Cdivu003Eu003Cimg src="http://u-note.me/img/post/2013102415227865.png"/u003Eu003C/divu003Eu003Cdiv class="big-button" contenteditable="false" style="display: none;"u003Eu003C/divu003Eu003Cdiv class="mid-button" contenteditable="false" style="display: none;"u003Eu003C/divu003Eu003Cdiv class="sml-button" contenteditable="false" style="display: none;"u003Eu003C/divu003Eu003Cdiv class="remover" style="display: none;"u003Eu003C/divu003Eu003C/divu003E","type":"text"},{"post":"u003Cspan style="font-size: 16px; letter-spacing: 0.1em;"u003E「まずチームで議論になったのが『リスト』を使うのかどうか。最初に<div>と<a>タグだけで組んでしまって良いのではないかという部分があったのですが、最終的にリストを持たせることになり、シンプルですけどこのようなマークアップになりました。」(Cチーム)u003C/spanu003Eu003Cbr/u003E","type":"text"},{"post":"Dチーム","type":"text_header_2"},{"post":"u003Cdiv class="media image dropped content sml"u003Eu003Cdivu003Eu003Cimg src="http://u-note.me/img/post/2013102415236927.png"/u003Eu003C/divu003Eu003Cdiv class="big-button" contenteditable="false" style="display: none;"u003Eu003C/divu003Eu003Cdiv class="mid-button" contenteditable="false" style="display: none;"u003Eu003C/divu003Eu003Cdiv class="sml-button" contenteditable="false" style="display: none;"u003Eu003C/divu003Eu003Cdiv class="remover" style="display: none;"u003Eu003C/divu003Eu003C/divu003E","type":"text"},{"post":"u003Cb style="font-style: inherit; letter-spacing: 0.1em;"u003E<HTMLソース>u003C/bu003E","type":"text"},{"post":"u003Cdiv class="media image dropped content sml"u003Eu003Cdivu003Eu003Cimg src="http://u-note.me/img/post/2013102415245061.png"/u003Eu003C/divu003Eu003Cdiv class="big-button" contenteditable="false" style="display: none;"u003Eu003C/divu003Eu003Cdiv class="mid-button" contenteditable="false" style="display: none;"u003Eu003C/divu003Eu003Cdiv class="sml-button" contenteditable="false" style="display: none;"u003Eu003C/divu003Eu003Cdiv class="remover" style="display: none;"u003Eu003C/divu003Eu003C/divu003E","type":"text"},{"post":"u003Cspan style="font-size: 16px; letter-spacing: 0.1em;"u003E「私たちは、大きく<nav>タグで囲う形にしました。1〜5までの数字は『1,2,3…7,8』のように、必ずしも連続するものではない可能性があったため、<ol>ではなく<ul>にしました。nn u003C/spanu003Eu003Cbr/u003E","type":"text"},{"post":"u003Cspan style="font-style: inherit; letter-spacing: 0.1em;"u003Eu003Cbr/u003Eu003C/spanu003E","type":"text"},{"post":"u003Cspan style="font-style: inherit; letter-spacing: 0.1em;"u003E『次へ』と『前へ』を<strong>で囲って<ul>を外に出したのは、このページの『次へ』と『前へ』というのはナビゲーション要素として一番重要だと思ったからです。」(Dチーム)u003C/spanu003E","type":"text"},{"post":"u003Cspan style="font-style: inherit; letter-spacing: 0.1em;"u003E投票結果u003C/spanu003E","type":"text_header_2"},{"post":"u003Cspan style="font-size: 16px; letter-spacing: 0.1em;"u003E 発表後、どのチームが一番良かったかを投票して決め合い、Dチームは1票、Cチームは5票、Bチームは5票、Aチームは11票という結果で、ページネーションが使われる背景を考えた上で<div>を使ってまとめたu003C/spanu003Eu003Cspan style="font-size: 16px; letter-spacing: 0.1em;"u003EAチームが最多得票を獲得した。u003C/spanu003E","type":"text"},{"post":"","type":"text"},{"post":"u003Cbr/u003E","type":"text"},{"post":" 全体のページから見たページネーションの位置づけから<nav>・<div>のどちらで括るべきなのか。またページネーションは単なるページのリストか順序のあるリストかであり、<ul>・<ol>のどちらを利用するかなどを考えた上でマークアップをどのように行うのが良いかなどに注目して討論が行われていた。","type":"text"},{"post":"2問目:予約フォームをマークアップせよ!","type":"text_header_1"},{"post":"u003Cdiv class="media image dropped content sml"u003Eu003Cdivu003Eu003Cimg src="http://u-note.me/img/post/2013102415327021.png"/u003Eu003C/divu003Eu003Cdiv class="big-button" contenteditable="false" style="display: none;"u003Eu003C/divu003Eu003Cdiv class="mid-button" contenteditable="false" style="display: none;"u003Eu003C/divu003Eu003Cdiv class="sml-button" contenteditable="false" style="display: none;"u003Eu003C/divu003Eu003Cdiv class="remover" style="display: none;"u003Eu003C/divu003Eu003C/divu003E","type":"text"},{"post":"u003Cspan style="font-size: 16px; letter-spacing: 0.1em;"u003E 第2問目は「予約フォーム」に関して、マークアップをどう行うかという問題が出された。u003C/spanu003E","type":"text"},{"post":"Aチーム","type":"text_header_2"},{"post":"u003Cdiv class="media image dropped content sml"u003Eu003Cdivu003Eu003Cimg src="http://u-note.me/img/post/2013102415335900.png"/u003Eu003C/divu003Eu003Cdiv class="big-button" contenteditable="false" style="display: none;"u003Eu003C/divu003Eu003Cdiv class="mid-button" contenteditable="false" style="display: none;"u003Eu003C/divu003Eu003Cdiv class="sml-button" contenteditable="false" style="display: none;"u003Eu003C/divu003Eu003Cdiv class="remover" style="display: none;"u003Eu003C/divu003Eu003C/divu003E","type":"text"},{"post":"u003Cbu003E<HTMLソース>u003C/bu003E","type":"text"},{"post":"u003Cdiv class="media image mid dropped content"u003Eu003Cdivu003Eu003Cimg src="http://u-note.me/img/post/2013102415354078.png"/u003Eu003C/divu003Eu003C/divu003E","type":"text"},{"post":"u003Cdiv class="media image mid dropped content"u003Eu003Cdivu003Eu003Cimg src="http://u-note.me/img/post/2013102415358866.png"/u003Eu003C/divu003Eu003Cdiv class="big-button" contenteditable="false" style="display: none;"u003Eu003C/divu003Eu003Cdiv class="mid-button" contenteditable="false" style="display: none;"u003Eu003C/divu003Eu003Cdiv class="sml-button" contenteditable="false" style="display: none;"u003Eu003C/divu003Eu003Cdiv class="remover" style="display: none;"u003Eu003C/divu003Eu003C/divu003E","type":"text"},{"post":"u003Cspan style="font-size: 16px; letter-spacing: 0.1em;"u003E「レスポンシブWebデザイン的なところを考えると、<table>ではなく<div>で崩しやすくした方が良いかなと思ったんですけど、面倒くさくて<table>にしました。」(Aチーム)u003C/spanu003Eu003Cbr/u003E","type":"text"},{"post":"Bチーム","type":"text_header_2"},{"post":"u003Cdiv class="media image mid dropped content"u003Eu003Cdivu003Eu003Cimg src="http://u-note.me/img/post/2013102415378083.png"/u003Eu003C/divu003Eu003Cdiv class="big-button" contenteditable="false" style="display: none;"u003Eu003C/divu003Eu003Cdiv class="mid-button" contenteditable="false" style="display: none;"u003Eu003C/divu003Eu003Cdiv class="sml-button" contenteditable="false" style="display: none;"u003Eu003C/divu003Eu003Cdiv class="remover" style="display: none;"u003Eu003C/divu003Eu003C/divu003E","type":"text"},{"post":"u003Cbu003E<HTMLソース>u003C/bu003E","type":"text"},{"post":"u003Cdiv class="media image mid dropped content"u003Eu003Cdivu003Eu003Cimg src="http://u-note.me/img/post/2013102415373400.png"/u003Eu003C/divu003Eu003C/divu003E","type":"text"},{"post":"u003Cdiv class="media image mid dropped content"u003Eu003Cdivu003Eu003Cimg src="http://u-note.me/img/post/2013102415371001.png"/u003Eu003C/divu003Eu003Cdiv class="big-button" contenteditable="false" style="display: none;"u003Eu003C/divu003Eu003Cdiv class="mid-button" contenteditable="false" style="display: none;"u003Eu003C/divu003Eu003Cdiv class="sml-button" contenteditable="false" style="display: none;"u003Eu003C/divu003Eu003Cdiv class="remover" style="display: none;"u003Eu003C/divu003Eu003C/divu003E","type":"text"},{"post":"「『*』自体が重要ではなく全体が重要だと考えると、『Strong』で囲っても良いのではないかと思いました。間に要素が入ってきた時に途切れてしまうことを考えると、項目は一つ一つ分けるべきだなと考えたところ以外は、ほとんど他のチームと一緒です。」(Bチーム)","type":"text"},{"post":"Cチーム ","type":"text_header_2"},{"post":"u003Cdiv class="media image dropped content sml"u003Eu003Cdivu003Eu003Cimg src="http://u-note.me/img/post/2013102415401016.png"/u003Eu003C/divu003Eu003Cdiv class="big-button" contenteditable="false" style="display: none;"u003Eu003C/divu003Eu003Cdiv class="mid-button" contenteditable="false" style="display: none;"u003Eu003C/divu003Eu003Cdiv class="sml-button" contenteditable="false" style="display: none;"u003Eu003C/divu003Eu003Cdiv class="remover" style="display: none;"u003Eu003C/divu003Eu003C/divu003E","type":"text"},{"post":"u003Cbu003E<HTMLソース>u003C/bu003E","type":"text"},{"post":"u003Cdiv class="media image mid dropped content"u003Eu003Cdivu003Eu003Cimg src="http://u-note.me/img/post/2013102415418314.png"/u003Eu003C/divu003Eu003C/divu003E","type":"text"},{"post":"u003Cdiv class="media image mid dropped content"u003Eu003Cdivu003Eu003Cimg src="http://u-note.me/img/post/2013102415421828.png"/u003Eu003C/divu003Eu003Cdiv class="big-button" contenteditable="false" style="display: none;"u003Eu003C/divu003Eu003Cdiv class="mid-button" contenteditable="false" style="display: none;"u003Eu003C/divu003Eu003Cdiv class="sml-button" contenteditable="false" style="display: none;"u003Eu003C/divu003Eu003Cdiv class="remover" style="display: none;"u003Eu003C/divu003Eu003C/divu003E","type":"text"},{"post":"u003Cspan style="font-size: 16px; letter-spacing: 0.1em;"u003E「<dd>タグを使うとラベルを使った時に二重になってしまうので、<div>でシンプルに囲いました。また議論されていた『*』に関しては、『*』のマークが重要なわけではないので<span>で括ったのですが、半角英数に関しては時間がなく、話し合いができずに終わってしまいました。」(Cチーム)u003C/spanu003Eu003Cbr/u003E","type":"text"},{"post":"Dチーム","type":"text_header_2"},{"post":"u003Cdiv class="media image dropped content sml"u003Eu003Cdivu003Eu003Cimg src="http://u-note.me/img/post/2013102415432644.png"/u003Eu003C/divu003Eu003Cdiv class="big-button" contenteditable="false" style="display: none;"u003Eu003C/divu003Eu003Cdiv class="mid-button" contenteditable="false" style="display: none;"u003Eu003C/divu003Eu003Cdiv class="sml-button" contenteditable="false" style="display: none;"u003Eu003C/divu003Eu003Cdiv class="remover" style="display: none;"u003Eu003C/divu003Eu003C/divu003E","type":"text"},{"post":"u003Cbu003E<HTMLソース>u003C/bu003E","type":"text"},{"post":"u003Cdiv class="media image mid dropped content"u003Eu003Cdivu003Eu003Cimg src="http://u-note.me/img/post/2013102415437069.png"/u003Eu003C/divu003Eu003Cdiv class="big-button" contenteditable="false" style="display: none;"u003Eu003C/divu003Eu003Cdiv class="mid-button" contenteditable="false" style="display: none;"u003Eu003C/divu003Eu003Cdiv class="sml-button" contenteditable="false" style="display: none;"u003Eu003C/divu003Eu003Cdiv class="remover" style="display: none;"u003Eu003C/divu003Eu003C/divu003E","type":"text"},{"post":"「今回はフォームで全体を囲うということになったため、基本的に<ul>要素で全て並べて、その中に<label>と<input>を並べていく形になり、もちろんボタンも<input>にしました。自分たちのチームはtype属性をどれにするか、『*』を何のタグで囲うかという部分に時間をかけたのですが、『*』は<small>にするか<i>にするか迷った結果、特に理由なく<i>にしました。」(Dチーム) ","type":"text"},{"post":"投票結果","type":"text_header_2"},{"post":" 発表後、どのチームが一番良かったかを投票して決め合い、Dチームは2票、Cチームは4票、Bチームは5票、Aチームは10票という結果で、<table>を使って一番シンプルにまとめたAチームが最多得票を獲得した。","type":"text"},{"post":" ","type":"text"},{"post":" ここでは、メールアドレス入力に利用する「type="email"」や数字入力に利用する「type="number"」など、様々なタイプを利用したマークアップを行うチームが多かった。また、table要素を利用して綺麗にしたり、labelのみのシンプルなチームもあったりするなど、様々な意見を聞くことができた。","type":"text"},{"post":"3問目:財務諸表をマークアップせよ!","type":"text_header_1"},{"post":"u003Cdiv class="media image dropped content sml"u003Eu003Cdivu003Eu003Cimg src="http://u-note.me/img/post/2013102415506995.png"/u003Eu003C/divu003Eu003Cdiv class="big-button" contenteditable="false" style="display: none;"u003Eu003C/divu003Eu003Cdiv class="mid-button" contenteditable="false" style="display: none;"u003Eu003C/divu003Eu003Cdiv class="sml-button" contenteditable="false" style="display: none;"u003Eu003C/divu003Eu003Cdiv class="remover" style="display: none;"u003Eu003C/divu003Eu003C/divu003E","type":"text"},{"post":" 第3問目は財務諸表のマークアップに関するお題が出され、同じく30分かけてチーム内で議論が交わされた。 ","type":"text"},{"post":"Aチーム","type":"text_header_2"},{"post":"u003Cdiv class="media image mid dropped content"u003Eu003Cdivu003Eu003Cimg src="http://u-note.me/img/post/2013102415513469.png"/u003Eu003C/divu003Eu003Cdiv class="big-button" contenteditable="false" style="display: none;"u003Eu003C/divu003Eu003Cdiv class="mid-button" contenteditable="false" style="display: none;"u003Eu003C/divu003Eu003Cdiv class="sml-button" contenteditable="false" style="display: none;"u003Eu003C/divu003Eu003Cdiv class="remover" style="display: none;"u003Eu003C/divu003Eu003C/divu003E","type":"text"},{"post":"u003Cbu003E<HTMLソース>u003C/bu003E","type":"text"},{"post":"u003Cdiv class="media image mid dropped content"u003Eu003Cdivu003Eu003Cimg src="http://u-note.me/img/post/2013102415529317.png"/u003Eu003C/divu003Eu003C/divu003E","type":"text"},{"post":"u003Cdiv class="media image mid dropped content"u003Eu003Cdivu003Eu003Cimg src="http://u-note.me/img/post/2013102415527852.png"/u003Eu003C/divu003Eu003C/divu003E","type":"text"},{"post":"u003Cdiv class="media image mid dropped content"u003Eu003Cdivu003Eu003Cimg src="http://u-note.me/img/post/2013102415526035.png"/u003Eu003C/divu003Eu003Cdiv class="big-button" contenteditable="false" style="display: none;"u003Eu003C/divu003Eu003Cdiv class="mid-button" contenteditable="false" style="display: none;"u003Eu003C/divu003Eu003Cdiv class="sml-button" contenteditable="false" style="display: none;"u003Eu003C/divu003Eu003Cdiv class="remover" style="display: none;"u003Eu003C/divu003Eu003C/divu003E","type":"text"},{"post":"u003Cspan style="font-size: 16px; letter-spacing: 0.1em;"u003E「見たままコーディングするしかなったですね。<thead><tbody>を使ってマークアップを行っていきました。ただデータの『△』の意味付けがよく分からなかったので、とりあえず<span>で囲ってしまいました。」(Aチーム)u003C/spanu003Eu003Cbr/u003E","type":"text"},{"post":"Bチーム","type":"text_header_2"},{"post":"u003Cdiv class="media image dropped content big"u003Eu003Cdivu003Eu003Cimg src="http://u-note.me/img/post/2013102509393070.png"u003Eu003Cb style="font-style: inherit; letter-spacing: 0.1em;"u003E<HTMLソース>u003C/bu003Eu003C/imgu003Eu003C/divu003Eu003C/divu003E","type":"text"},{"post":"u003Cbr/u003E","type":"text"},{"post":"u003Cdiv class="media image dropped content big"u003Eu003Cdivu003Eu003Cimg src="http://u-note.me/img/post/2013102509317471.png"/u003Eu003C/divu003Eu003C/divu003E","type":"text"},{"post":"u003Cdiv class="media image dropped content big"u003Eu003Cdivu003Eu003Cimg src="http://u-note.me/img/post/2013102509322782.png"/u003Eu003C/divu003Eu003C/divu003E","type":"text"},{"post":"u003Cdiv class="media image dropped content big"u003Eu003Cdivu003Eu003Cimg src="http://u-note.me/img/post/2013102509326333.png"/u003Eu003C/divu003Eu003Cdiv class="big-button" contenteditable="false" style="display: none;"u003Eu003C/divu003Eu003Cdiv class="mid-button" contenteditable="false" style="display: none;"u003Eu003C/divu003Eu003Cdiv class="sml-button" contenteditable="false" style="display: none;"u003Eu003C/divu003Eu003Cdiv class="remover" style="display: none;"u003Eu003C/divu003Eu003C/divu003E","type":"text"},{"post":"u003Cbr/u003E","type":"text"},{"post":"u003Cspan style="font-size: 16px; letter-spacing: 0.1em;"u003E「<table>を3つに分けました。また見た目的に年月日が紐づくように見える形にしました。最終的に見た目で解決するという方向でマークアップを行ったのがBチームです。」(Bチーム)u003C/spanu003Eu003Cbr/u003E","type":"text"},{"post":"Cチーム","type":"text_header_2"},{"post":"u003Cdiv class="media image dropped content big"u003Eu003Cdivu003Eu003Cimg src="http://u-note.me/img/post/2013102509333554.png"/u003Eu003C/divu003Eu003C/divu003E","type":"text"},{"post":"u003Cbu003E<HTMLソース>u003C/bu003E","type":"text"},{"post":"u003Cdiv class="media image dropped content big"u003Eu003Cdivu003Eu003Cimg src="http://u-note.me/img/post/2013102509335674.png"/u003Eu003C/divu003Eu003C/divu003E","type":"text"},{"post":"u003Cdiv class="media image dropped content big"u003Eu003Cdivu003Eu003Cimg src="http://u-note.me/img/post/2013102509338459.png"/u003Eu003C/divu003Eu003C/divu003E","type":"text"},{"post":"u003Cdiv class="media image dropped content big"u003Eu003Cdivu003Eu003Cimg src="http://u-note.me/img/post/2013102509343744.png"/u003Eu003C/divu003Eu003Cdiv class="big-button" contenteditable="false" style="display: none;"u003Eu003C/divu003Eu003Cdiv class="mid-button" contenteditable="false" style="display: none;"u003Eu003C/divu003Eu003Cdiv class="sml-button" contenteditable="false" style="display: none;"u003Eu003C/divu003Eu003Cdiv class="remover" style="display: none;"u003Eu003C/divu003Eu003C/divu003E","type":"text"},{"post":"u003Cspan style="font-size: 16px; letter-spacing: 0.1em;"u003E「3つの<table>を自分でも考えたんですけど、あまりしっくり来なかったので普通に1つでまとめてしまう形になりました。」(Cチーム)u003C/spanu003Eu003Cbr/u003E","type":"text"},{"post":"Dチーム ","type":"text_header_2"},{"post":"u003Cdiv class="media image dropped content sml"u003Eu003Cdivu003Eu003Cimg src="http://u-note.me/img/post/2013102509351856.png"/u003Eu003C/divu003Eu003C/divu003E","type":"text"},{"post":"u003Cdiv class="media image dropped content sml"u003Eu003Cdivu003Eu003Cimg src="http://u-note.me/img/post/2013102509368627.png"/u003Eu003C/divu003Eu003Cdiv class="big-button" contenteditable="false" style="display: none;"u003Eu003C/divu003Eu003Cdiv class="mid-button" contenteditable="false" style="display: none;"u003Eu003C/divu003Eu003Cdiv class="sml-button" contenteditable="false" style="display: none;"u003Eu003C/divu003Eu003Cdiv class="remover" style="display: none;"u003Eu003C/divu003Eu003C/divu003E","type":"text"},{"post":"u003Cb style="font-style: inherit; letter-spacing: 0.1em;"u003E<HTMLソース>u003C/bu003E","type":"text"},{"post":"u003Cdiv class="media image dropped content big"u003Eu003Cdivu003Eu003Cimg src="http://u-note.me/img/post/2013102509376292.png"/u003Eu003C/divu003Eu003C/divu003E","type":"text"},{"post":"u003Cdiv class="media image dropped content big"u003Eu003Cdivu003Eu003Cimg src="http://u-note.me/img/post/2013102509379071.png"/u003Eu003C/divu003Eu003C/divu003E","type":"text"},{"post":"u003Cdiv class="media image dropped content big"u003Eu003Cdivu003Eu003Cimg src="http://u-note.me/img/post/2013102509381569.png"/u003Eu003C/divu003Eu003C/divu003E","type":"text"},{"post":"u003Cdiv class="media image mid dropped content"u003Eu003Cdivu003Eu003Cimg src="http://u-note.me/img/post/2013102416016173.png"/u003Eu003C/divu003Eu003Cdiv class="big-button" contenteditable="false" style="display: none;"u003Eu003C/divu003Eu003Cdiv class="mid-button" contenteditable="false" style="display: none;"u003Eu003C/divu003Eu003Cdiv class="sml-button" contenteditable="false" style="display: none;"u003Eu003C/divu003Eu003Cdiv class="remover" style="display: none;"u003Eu003C/divu003Eu003C/divu003E","type":"text"},{"post":"u003Cspan style="font-size: 16px; letter-spacing: 0.1em;"u003E「最初<table>で囲うか迷ったんですけど、しっかり<table>で囲いこむと縦と横の紐付けをしっかり行ってくれるんだなと思いました。<table>の良さを初めて知りました。<scope="row">を使って、下に紐づいているということを示しています。」(Dチーム)u003C/spanu003Eu003Cbr/u003E","type":"text"},{"post":"投票結果","type":"text_header_2"},{"post":"u003Cspan style="font-size: 16px; letter-spacing: 0.1em;"u003E 発表後、どのチームが一番良かったかを投票して決め合い、Bチームは4票、Dチームは6票、Cチームは6票、Aチームは6票という結果で、甲乙つけがたく3チームが同じ得票結果となった。n u003Cbr/u003Eu003C/spanu003E","type":"text"},{"post":"u003Cspan style="font-size: 16px; letter-spacing: 0.1em;"u003Eu003Cbr/u003Eu003C/spanu003E","type":"text"},{"post":"u003Cspan style="font-size: 16px; letter-spacing: 0.1em;"u003E この問題では、table要素を巧みに利用することはもちろんのこと、音声読み上げをした場合に表の意味が利用者に伝わるかを特に考察されていた。u003C/spanu003E","type":"text"},{"post":"u003Cspan style="font-size: 24px; font-weight: 600; line-height: 31px; letter-spacing: 0.1em;"u003E全体を通してu003C/spanu003E","type":"text_header_1"},{"post":" マークアップエンジニアにとって、普段の業務でここまで時間をかけてマークアップを行うことはまずないだろう。しかしこのようなイベントに参加することで、普段では考えられない範囲までマークアップのことを考えて理解を深めることができる。 普段の実務に十分活かせるレベルにスキルアップしたいのであれば、こういったイベントに参加するべきなのではないかと感じた。","type":"text"},{"post":"問題を解くだけで、あなたのエンジニアスキルが分かる","type":"text_header_1"},{"post":"u003Cdiv class="media image mid dropped content"u003Eu003Cdivu003Eu003Cbr/u003Eu003C/divu003Eu003Cdivu003Eu003Cimg src="http://u-note.me/img/post/2013102418447919.png"/u003Eu003C/divu003Eu003Cdiv class="big-button" contenteditable="false" style="display: none;"u003Eu003C/divu003Eu003Cdiv class="mid-button" contenteditable="false" style="display: none;"u003Eu003C/divu003Eu003Cdiv class="sml-button" contenteditable="false" style="display: none;"u003Eu003C/divu003Eu003Cdiv class="remover" style="display: none;"u003Eu003C/divu003Eu003C/divu003E","type":"text"},{"post":"u003Cspan style="font-size: 16px; letter-spacing: 0.1em;"u003E 今回の記事の提供元である「u003C/spanu003Eu003Ca href="https://codeiq.jp/" style="font-size: 16px; letter-spacing: 0.1em;"u003Eu003Cbu003ECodeIQ(コードアイキュー)u003C/bu003Eu003C/au003Eu003Cspan style="font-size: 16px; letter-spacing: 0.1em;"u003E」は、第一線で活躍するITエンジニアが出題した問題に一般ユーザーが無料で“挑戦”し、そのアンサーに対して出題エンジニアから評価フィードバックをもらえるサービスだ。 u003C/spanu003Eu003Cbr/u003E","type":"text"},{"post":"u003Cbr/u003E","type":"text"},{"post":" これまでに「u003Cbu003E2.1万人u003C/bu003E」以上が問題に挑戦済みである。  u003Cbr/u003E","type":"text"},{"post":"u003Cbr/u003E","type":"text"},{"post":" 社会一般から見たITスキルではなく、その出題エンジニアに自分のスキルがどのように評価されるのかを知ることができるが特徴だ。","type":"text"},{"post":"u003Cbr/u003E","type":"text"},{"post":"u003Cdiv class="media image mid dropped content"u003Eu003Cdivu003Eu003Cimg src="http://u-note.me/img/post/2013102418445741.png"/u003Eu003C/divu003Eu003C/divu003E","type":"text"},{"post":"u003Cdiv class="media source link dropped content"u003Eu003Cdiv class="m-title title"u003Eu003Ca href="https://codeiq.jp//" target="_blank"u003Eu003Ch4u003ECodeIQ|ITu003Cbu003Eエンジニアu003C/bu003Eのための実務u003Cbu003Eスキルu003C/bu003E評価サービスu003C/h4u003Eu003C/au003Eu003C/divu003Eu003Cdiv class="m-description description"u003E自分のITu003Cbu003Eエンジニアu003C/bu003Eとしての能力や市場価値の可視化って難しい。CodeIQで、企業の 第一線で活躍するu003Cbu003Eエンジニアu003C/bu003Eによる実践的な問題に挑戦!その企業におけるリアルな 評価がフィードバックされます。自分のu003Cbu003Eスキルu003C/bu003Eの価値が気になる方は、トライしてみて u003Cbu003E...u003C/bu003Eu003C/divu003Eu003Cdiv class="remover" style="display: none;"u003Eu003C/divu003Eu003C/divu003E","type":"m-google"},{"post":"u003Cspan style="font-size: 24px; font-weight: 600; line-height: 31px; letter-spacing: 0.1em;"u003ECodeIQ運営事務局よりu003C/spanu003E","type":"text_header_1"},{"post":"","type":"text"},{"post":"u003Cspan style="font-size: 16px; letter-spacing: 0.1em;"u003E サイト上で出題希望者受付・IT勉強会のスポンサー受付を行っています。IT勉強会の主催者の方は、u003C/spanu003Eu003Ca href="https://codeiq.jp/inquiry.php" style="font-size: 16px; letter-spacing: 0.1em;"u003Eu003Cbu003Eお問い合わせページu003C/bu003Eu003C/au003Eu003Cspan style="font-size: 16px; letter-spacing: 0.1em;"u003Eからご連絡ください。u003C/spanu003Eu003Cbr/u003E","type":"text"},{"post":"u003Cbr/u003E","type":"text"},{"post":" ※ご希望に添えない場合もございます。あらかじめご了承ください。","type":"text"}]

hatenaはてブ


この記事の関連キーワード