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

2015.9.24 0Comments CSS HTML5
コーディングの注意点-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の基本要素を並べてみる。すごいシンプルに大まかにするとこの3つになります。

header
main
footer

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

さらに要素を追加する

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

nav
section
article
aside

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

ツリー状ではこんな感じ

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

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>