デザイナー向けマークアップ

こんにちは！

アメーバ大喜利でフロントエンジニアをしています母良田です。

今回書くテーマは、社内でも「違う技術を学ぶ」傾向になってきているので、
フロントエンジニアと近しい関係の「デザイナー」向けに、マークアップをする際のコツをお届けします。

マークアップする際には、デザインの各要素を構分けをして正しく記述することが重要です。
構造分けをイメージ出来るようになれば、比較的楽にマークアップを簡単に理解出来るようになると思います。
この記事を見てちょっとでも何か得る物があると嬉しいです。

まずはこのタグ

HTMLには様々なタグがあります。正直タグがありあすぎて自分でも知らないタグはありますし、ほとんど使った事の無いものもあります。
HTML５がでてから新しいタグも増えて覚える事が増えてしまいましたが、使い方によってSEOに影響を及ぼします。

ここでは「このタグだけは覚えてほしい！」というものをご紹介します。

<body>　プラウザに表示される要素。この中に表示して行く要素を記述していく。

<div>　divタグ自身に意味はありませんが、<div>～</div>で囲んだ範囲を１つの要素としてもつことができます。

<p>　１つの段落として使ったりします。テキスト文がある時はpタグを使ったりします。

<h>　見出しタグです。h1～h6まであり数字が少ない程、最も重要な見出しになります。ページのロゴに使ったりします。

<ul><li>　リスト構造を表示したい時に使います。が、ナビゲーションメニュー等に使ったりします。

次はこの４つのタグを実際どのように使っているか説明していきたいと思います。
もっと詳しくタグについて知りたい方はこちらへ。

実際に見てみよう

PC版アメーバ大喜利を例に説明をしていきます。

以下はPC版アメーバ大喜利のトップ画面になります。まずはパッと見てどのような構造で分けられているかイメージできるしょうか？

これを要素ごとに大きく分けると・・・。

①に当てはまるのが<body>タグ。一番外側の大きな枠組みの役割をしています。
②ここは<div>タグ。場所としてはナビゲーションメニュー部分。
③ここも<div>で④と⑤を囲う１つの要素です。
④ここも<div>タグ。④は左側の要素。
⑤ここももちろん<div>タグ。右要素。

そしてこれが基本的なHTMLのテンプレートです。

<!doctype html>
<html>
  <head>
    <title></title>
    <meta charset="UTF-8">
  </head>
  <body>ここに記述していく</body>
</html>

bodyタグに先ほどのサンプルの要素を加えて行くと以下のようになります。

<!doctype html>
<html>
  <head>
    <title></title>
    <meta charset="UTF-8">
  </head>
  <body>　①の要素
    <div></div> 　②の要素
    <div>　③の要素
       <div> ④の要素 </div>
       <div> ⑤の要素 </div>
    </div>
  </body>
</html>

少々分かりずらいかもしれませんが、一番外側に①<body>があります。
ナビゲーションメニュー部分に②<div>。
②と同じ階層に③<div>。
③の中に④<div>、⑤<div>があります。

最初はイメージしにくいかもしれませんが、色々なHPを見た時にパッと全体の構造がイメージ出来るようになると、コードをスムーズに書く事が出来ます。

自分なりのイメージですが、<body>という一枚の大きな紙の上に、<div>という名の紙を重ねて、並べて作り上げて行くイメージです。

装飾しよう

続いては要素に色や大きさ等を指定出来るCSSについてです。
今回はナビゲーション部分を例に説明していきます。

まず<div>に名前を付けます。ナビゲーション部分なのでnavと命名します。
class=""と書いて""の間に記入します。コードにすると下記のようになります。

 <div class="nav"> </div>

命名は自由ですが、その要素が何であるのか分かりやすい名前を付けるのがベターです。
例えばロゴの要素だとしたら<h1 class="logo">のような感じです。

そして次にCSSで装飾をしていきます。
先ほど命名したnav要素は一番外枠の部分です。
デザインを見てみると、上下に黒の線が入っているのと、背景の色が緑色になっているので、これをCSSで指定してあげます。

.nav {
　background-color: #548219;
　border-top: 4px solid #111;
　border-bottom: 4px solid #111;
}

CSSで書くと上記のようになります。
background-colorは指定した色を背景色として指定できます。
border-top、border-bottomは指定した要素の上下に
これで.nav要素の上下に幅４pxの黒い線が出来ます。

そしてナビゲーションにはロゴとナビゲーションボタンがあります。
これらは最初に説明させていただいた、タグを使って作っていきましょう。
まずはul,liタグを使って横に並べる要素を作っていきます。

 <div class="nav">
   <ul>
     <li>①ロゴ要素    </li>
     <li>②ナビゲーション要素    </li>
     <li>③ログインボタン要素    </li>
   </ul>
 </div>

また要素として分けると
①ロゴがある要素
②ナビゲーションボタンがある要素
③ログイン・新規登録ボタンがある要素
の３つに分ける事が出来ます。

そして①にはロゴを表示させたいために、<h>タグを指定します。
ページとって一番重要な見出しなのでここは<h1>になります。
コードに書き込んで行くと、以下のようになります。

 <div class="nav">
   <ul>
     <li>①ロゴ要素
       <h1 class="logo">画像が入る       </h1>
    </li>
     <li>②ナビゲーション要素    </li>
     <li>③ログインボタン要素    </li>
   </ul>
 </div>

全部説明すると長くなってしまうので、②・③はどのようになるか是非考えてみて下さい！

最後に

デザイナーからデザインを貰った時は、まず頭の中で要素ごとに構造分けをしてからマークアップをしていきます。従って、まず初めにどのような要素で分けるかをイメージする所から始めることをお勧めします。
それからGoogle Chromeのディベロッパーツールを使って気になったサイトのコードを見て、
どのようにマークアップしているか見ると勉強になります！

上手く説明できなくて申し訳ないですが、ここまで読んで頂いてありがとうございました！