コーディングの注意点-HTML5のシンプルな基本構造を作成

HTML5のテンプレートを作成しようと思います。Photoshopでデザインする際にレイヤー名をいつも悩んでいたので調べていたところ結局HTMLのタグまで作ってしまいました。

参照記事
テックレポート – TechReport
https://www.cyberagent.co.jp/techinfo/techreport/report/id=7926#section10

Google HTML/CSS Style Guide
http://google-styleguide.googlecode.com/svn/trunk/htmlcssguide.xml

今後のコーディングの注意点

意外にも目からウロコの状態のメモ。
× （_）単語の区切りにはアンダーバーは使わない。
○ （-）単語の区切りにはハイフンを使う。

× （#hogehoge）IDセレクタは使わない
○ （.hogehoge）classセレクタを使う。例え一つしか使わないセレクタでも。

× （.js-hogehoge）js-のプレフィックスは使わない。
× タイプセレクタは使わない。（参考サイト：極力、タイプセレクタを使わない）

HTMLはツリー状にしてみる。

ようするにCSSを外してみるということです。これは基本的なことなので省いておきます。
「html ツリー構造」で検索してみてください。

基本的なHTML5のセレクタ名とclass名

HTML5の基本要素

HTML5の基本要素を並べてみる。すごいシンプルに大まかにするとこの３つになります。

header
main
footer

そう、ヘッダー、コンテンツ、フッター。この３つを基本構造としてさらに要素を追加する。

さらに要素を追加する

もう少し詳しく追加要素を加えて。。。

nav
section
article
aside

以上の４つを追加していきます。

ツリー状ではこんな感じ

それをツリーにするとこんな感じになるはずです。

header
└nav
main
└section
　└article
└aside
footer
└section

ランドマークのrole属性を付加させる

レイアウトを組んだときに、その役割はなんなのか！？ということを指定。bootstrapなどには必ず入っていますよね。なにかなーと調べたら奥が深いようです。詳しくはこちらに書いてあります。
ロール（role）の分類

完成したコード



<!DOCTYPE html>
  <html lang="ja">
  <head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <meta name="description" content="---------">
  <title>Home page</title>
  <link rel="stylesheet" href="style.css" media="screen">
  <link rel="icon" href="favicon.ico">
  </head>
<body>
  <header role="banner" class="wrap">
  <div class="logo">
  <h1 class="">サイト名</h1>
  </div>
  <div  role="search" class="search">
  <form>
  検索
  </form>
  </div>
  <nav>
  <ul class="nav-menu" role="navigation">
  <li><a href="#">Home</a></li>
  <li><a href="#">Info</a></li>
  <li><a href="#">Subpage</a></li>
  <li><a href="#">Subpage</a></li>
  <li><a href="#">Contact</a></li>
  </ul>
  </nav>
  </header>
  <main role="main">
  <section class="wrap">
  <h2>記事のメインタイトル</h2>
  <p>文章</p>
  <div class="content">
  <h3>見出しなど</h3>
  <p>文章</p>
  </div>
  <article class="item">
  <figure><img src="-----" alt=""><span class="overlay"><i class="icon"></i></span></figure>
  <h2>写真の名前など</h2>
  </article>
  </section>
  </main>
  <aside role="complementary">
  <section class="wrap">
  <h2>関連すること</h2>
  <ul>
  <li><a href="/">記事タイトル</a></li>
  <li><a href="/">記事タイトル</a></li>
  <li><a href="/">記事タイトル</a></li>
  </ul>
  </section>
  </aside>
  <footer role="contentinfo">
  <section class="wrap">
  <div class="column three">
  <h4>Menu</h4>
  <ul class="hoge">
  <li><a href="#">Home</a></li>
  <li><a href="#">Info</a></li>
  <li><a href="#">Subpage</a></li>
  <li><a href="#">Subpage</a></li>
  <li><a href="#">Contact</a></li>
  </ul>
  </div>
  <div class="column three">
  <h4>Menu</h4>
  <ul class="hoge">
  <li><a href="#">Home</a></li>
  <li><a href="#">Info</a></li>
  <li><a href="#">Subpage</a></li>
  <li><a href="#">Subpage</a></li>
  <li><a href="#">Contact</a></li>
  </ul>
  </div>
  <div class="column three">
  <h4>Menu</h4>
  <ul class="hoge">
  <li><a href="#">Home</a></li>
  <li><a href="#">Info</a></li>
  <li><a href="#">Subpage</a></li>
  <li><a href="#">Subpage</a></li>
  <li><a href="#">Contact</a></li>
  </ul>
  </div>
  </section>
  </footer>
  <div class="copyright">hogehoge</div>
  <script src="jquery.js"></script>
  </body>
  </html>