なぜこの記事を書くのか

このブログの記事を読み続ければコーダーとしてトゥモローゲートで働けるようになる
これから自分が書いていく記事を一言で表すと、こうなります。

はじめまして。トゥモローゲートでコーダー・フロントエンドエンジニアとして働く西川です。ブログでは「読むだけでトゥモローゲートでコーダーとして働けるようになる」記事を連載形式で書いていきます。

そんなタイトルですからもちろん、トゥモローゲートで働いてみたいと考えている求職者の皆様にむけて書いていきます。

他の企業でも働けるようになれる記事を書きたいところではありますが、自分はトゥモローゲート含めて2社でしか働いた経験がないので、あしからず…。

連載すべてで何本の記事になるかわかりませんが、お付き合いください（苦笑）。

第一回は「HTML編その1」です。

HTMLとは

HyperText Markup Languageの略で、Webサイトを構成する言語の1つです。ナビゲーション、見出し、段落、リンク、画像、動画、音声といった要素に対してタグというものを用いてサイトの構成をしていきます。

webサイトはHTMLだけで機能するわけではありません。「CSS」というスタイルを設定する言語や、「Javascript」という動きや機能を実装する言語を組み合わせることではじめて機能します(他にもありますが、とりあえず)。

その中でもHTMLは、コーディングをする際に最初に記述する言語であり、HTMLをどう書くかによってCSSやJavascriptの記述も変わってくる基本となる言語です。

HTMLには、classとidという識別できる名前をつける事ができます。classは繰り返し使える名前で、idはそのページでは一度しか使えない名前です。

ここからは「HTML」で使用するタグの紹介をしていきます。

タグの一覧

headタグ

ページの情報をまとめるエリアになります。SEOやSNSでシェアするときに非常に重要になるエリアです。弊社はSNSでのブランディングも行っているので、head内の設定はおろそかにできません。

学生にありがちなのですが、選考でポートフォリオを送ってもらったとき、head内のタグがおろそかになっている事が非常に多いです。逆に、この部分をしっかりと設定していると、当たり前ではあるのですが、「おっ！」となります。これは弊社に限りません。逆に設定していない人は論外になってしまいます。

headタグの中には通常、titleタグ、metaタグ、OGPタグ、CSSの設定、Google Analyticsのコードなどを記述します。

headerタグ

headerタグはロゴやナビゲーションが含まれることが多いタグです。このエリアは共通化する事が多いです。弊社では必ず使用するタグです。

navタグ

ナビゲーションをまとめるタグになります。弊社では必ず使用するタグです。

footerタグ

コピーライトやサイトマップや会社情報をまとめておくエリアになります。弊社では必ず使用するタグです。

smallタグ

コピーライトに使用することが多いタグです。文字を小さくするという意味もありますがそういう用途で使用する機会は少ないです。弊社でもcopyrightで使用しています。

mainタグ

各ページの主要なコンテンツに使用します。弊社では現在必ず使うというルールはありません。 IE11対応を希望されるクライアントもいるので、標準ではIEで認識されないとされるmainタグはまだ使いません。

detailタグ、summaryタグ

summaryタグは項目、detailタグはその内容を入れます。そうすると折りたたみ機能が使われます。いわゆるアコーディオンと言われるものです。ただ、アニメーションはつけられないそうなので、弊社では今後も使用しないと思われます。そもそもアコーディオンは逃げのデザインだと思っているので、あまり実装したくないです。（デザイナーにプレッシャーをかけてみる）

dlタグ、dtタグ、ddタグ

detail、summaryを使わない代わりに、項目と内容の関係を持たす場合はdt、ddタグを使う事が多いです。まだ素人同然の頃はこのタグを使うのが面倒だった記憶があります。

tableタグ

数年前、tableレイアウトという言葉が流行った（？）ぐらいによく使われてたタグです。現在も使われていますが、昔に比べると用途は限られた気がします。

少し癖があり、IE7、8あたりでかなり苦戦をさせられました。使う際は元々空いている隙間をリセットしましょう。あとtbodyは書かなくても問題ありませんが、とあるフレームワークでは書かないとエラーが出てしまうこともあるのでご注意を。

sectionタグ

ページ内の各コンテンツを区切るタグになります。sectionタグ内には見出しが含まれるようにマークアップします。厳密に使うルールはないですが、今後は統一して使っていこうとしています。

articleタグ

articleタグ内はそれだけで独立した内容、記事になる場合に使用します。コラムやブログに使用することが多いと思います。sectionタグと混同されますが、明確に違いを言うならairticleはページの全体、sectionはページの章ごとに区切るのではないかと思っています。

ul、olタグ

リストを表すタグ。ulは順番が関係ない場合、olは順番が関係する場合に使用します。

videoタグ

動画を設置するタグです。属性でよく使うのはautoplay、muted、loop、playsinline辺りで、これらを設定しないと動画の自動再生がされません。結構引っかかる部分なので、覚えておいてください！

Javascriptを併用して再生、停止などの操作を実装する場面も多いです。背景動画として設置する場合に使う事が多いので、このタグのスペシャリストになれば弊社で重宝されるかも？

audioタグ

音声を設置するタグです。普通に使う分には問題ありませんが、ページ遷移を挟むと大変です。特にSafariで苦戦しました。セキュリティ上の問題なのか、ページを遷移した段階で音声をoffにする仕様があり何度もサイトの仕様が変わってしまいました。今となってはいい思い出です。

imgタグ

画像を設置するタグです。altには画像の説明を入れるようにしましょう。webアクセシビリティが向上します。また、レスポンシブ対応用にsrcset属性を利用して下記のような記述もできます。

figureタグ

あんまり使った事ないけど、図やグラフの時に使うみたいです。

pictureタグ

上級者向けのレスポンシブのサイトで画像を設定するタグです。

pタグ

段落を表すタグです。当たり前ですが、よく使います。brタグという改行するタグがあるのですが、ただ改行するのか、段落として区切るのか、意識して使うようにと注意を受けた事があります。ライターやデザイナーにもこのタグをどう使うか意識して欲しい。そんなタグになります。

この記事を書いた感想

HTMLの文書構造にもルールが必要

ぶっちゃけ今までsectionタグとか使ってなかったです。divでいいやんと思っていたので。ただ、自分自身HTML5に移行して数年経ちますが、色んなタグを使って文書構造を構築した方がユーザーにどう届けるかがより明確になるのかなと感じています。タグの使い方は人それぞれですし、会社やチームのルールがあるのでそこに従えばいいかと思います。

弊社としては、「伝える」ではなく「伝わる」ということを意識しているので、HTMLタグに関しても目には見えにくい部分ですがこだわって使っていきます。その為には基準となるルールが必要です。更新業務のことも考えると文書構造を統一できるルールがあると効率よく案件をチームで回せるようにもなるので、作るべきだと感じています。

新しいことを学ぶ時間を作らないといけない

もちろん全く勉強していないわけではないです。ただ、少ないなと感じてます。特にHTMLやCSSに関してはどこかで「今の感じでいいか」と思っていた部分があります。ただ、IE11のサポートが終わって足かせが取れれば、当然の如く表現の幅が広がります。

その時に、知識不足だと勿体無いし残念な気持ちになってしまいます。その為にもチームで新しいことを勉強する習慣をつけて表現の幅を広げていきたいです。

今後このブログでは、HTMLとCSSとJavascript(jQuery)といった言語と、WordPressに関しての記事を更新していきます。上記であげたタグに関しても、「画像編」や「動画編」としてもっと詳しく書いていきます。

その合間でHTTP通信やSSLなどの技術や言語以外のことも書いていく予定です。どうか末長くよろしくお願いします。