デザインから再利用可能な範囲を認識するマークアップエンジニアの考え方

Webサイトをコーディングするとき、いかにレイアウトを範囲認識するかで、コーディングの出来栄えが左右する。コンポーネントとする範囲が広大だと、上階層CSSセレクタに依存してしまい使い回せず、再利用性に欠けたものになってしまうためだ。

もちろん一意的なレイアウトならば、それで構わないのだが、CSS設計が謳われる昨今では、コンポーネント単位で捉え、ほかを汚染しない再利用を考慮した作りが是とされている。

このエントリーでは、会津ラボサイトを使ってレイアウトの捉え方を説明していく。参考となれば良いのだが、あくまで一例であることは理解いただきたい。

範囲を考える

まずデザインを見て、再利用可能な範囲を考えよう。考える作業は、意識内で行ってもよいが、紙にプリントして色ペンで囲うとわかりやすい。視覚的に認識することでコーディング高速化に寄与することだろう。とても、おすすめだ。

会津ラボサイトをコンポーネント単位で見た図である。枠線で囲ったところが、再利用可能な範囲というわけだ。枠線の単位でCSSセレクタ名を与えれば、ほかを汚染することもなくなる。

緑線、赤線の関係は、緑線のコンポーネントに赤線のコンポーネントが入り子構造になっていることを示しているが、CSSセレクタまで入り子構造にするわけではなく、それぞれ独立した再利用可能な状態を保たなければならない。

HTML構造を考える

再利用可能な範囲が理解できたところで、それに沿ったHTML構造を考えよう。

枠線は再利用可能な範囲だった。いかなる箇所に配置しても利用できるHTML構造でなければならない。そのことを念頭にHTMLを組み立てるわけだが、前工程を紙に起こしているのであれば一目瞭然だと思う。

それでは会津ラボサイトのコンテンツを構成するソースコードをご覧いただこう。下記①〜⑨は、単独で成り立つもので、⑩〜⑫は、①〜⑨のコンテンツを内包することで成り立つものとなっている。

①

<div class="slogan">
  <h1 class="slogan-title">...</h1>
  <p class="slogan-text">...</p>
</div>

会津ラボが掲げるスローガンを構成していて、h1タグを使っているのがポイントだ。

②

<ul class="menu">
  <li class="menu-item"><a href="#">新たな取り組み</a></li>
  <li class="menu-item"><a href="#">事業紹介</a></li>
  <li class="menu-item"><a href="#">開発実績</a></li>
  <li class="menu-item"><a href="#">会社情報</a></li>
  <li class="menu-item"><a href="#">人材募集</a></li>
</ul>

グローバルメニューを構成している。

③

<ul class="utility">
  <li class="utility-item">...</li>
  <li class="utility-item">...</li>
  <li class="utility-item">...</li>
</ul>

ユーティリティメニューを構成している。

④

<div class="hero">
  <img src="xxx.gif" alt="" class="hero-bg">
  <div class="hero-col">
    <img src="xxx.png" alt="" class="hero-copy">
    <p class="hero-text">...</p>
    <a href="#" class="hero-btn"><img src="xxx.png" alt=""></a>
  </div>
  <a href="#" class="hero-tag-en"><img src="xxx.png" alt=""></a>
  <a href="#" class="hero-tag-er"><img src="xxx.png" alt=""></a>
  <a href="#" class="hero-tag-ka"><img src="xxx.png" alt=""></a>
  <a href="#" class="hero-tag-no"><img src="xxx.png" alt=""></a>
  <a href="#" class="hero-tag-ro"><img src="xxx.png" alt=""></a>
</div>

ヒーローエリアを構成している。

⑤

<div class="feature">
  <img src="xxx.png" alt="" class="feature-thumb">
  <p class="feature-message">...</p>
  <a href="#" class="feature-link">...</a>
</div>

カード型コンテンツを構成している。

⑥

<div class="heading">
  <h2 class="heading-name" data-ruby="...">...</h2>
  <a href="#" class="heading-link">...</a>
</div>

見出しエリアを構成している。

⑦

<div class="archive">
  <time class="archive-date">...</time>
  <div class="archive-col">
    <p>...</p>
    <a href="#">...</a>
  </div>
</div>

最新情報などのアーカイブコンテンツを構成している。

⑧

<ul class="banner">
  <li class="banner-item"><a href="#"><img src="xxx.png" alt=""></a></li>
  <li class="banner-item"><a href="#"><img src="xxx.png" alt=""></a></li>
  <li class="banner-item"><a href="#"><img src="xxx.png" alt=""></a></li>
  <li class="banner-item"><a href="#"><img src="xxx.png" alt=""></a></li>
  <li class="banner-item"><a href="#"><img src="xxx.png" alt=""></a></li>
  <li class="banner-item"><a href="#"><img src="xxx.png" alt=""></a></li>
</ul>

バナーコンテンツを構成している。

⑨

<footer class="footer">
  <ul class="footer-menu">
    <li><a href="#">...</a></li>
  </ul>
  <p class="footer-copyright">...</p>
</footer>

フッターコンテンツを構成している。

⑩

<header class="header">
  <div class="header-logo"><img src="xxx.png" alt=""></div>
  <div class="header-inner">
    <!-- ① -->
    <div class="header-slogan slogan">
      ...
    </div>  
    <!-- ② -->
    <ul class="header-menu menu">
      ...
    </ul>
  </div>
  <!-- ③ -->
  <ul class="header-link utility">
    ...
  </ul>
</header>

ヘッダーコンテンツを構成しているわけだが、そのなかに①②③を内包している。

上述からの変更点は、①②③のトップレベル要素にheader-xxxの要領でclassを付与したことだ。①②③のコンポーネントは、再利用性を担保するため位置に関わることは記述していない。配置された先で余白や幅の指定が邪魔になるからだ。もし余白や幅の指定が不要ならば、class付与しなければよい。

このケースだと、headerコンポーネント内の余白調整は、headerコンポーネントに任せることとなり、それぞれheader-xxxが追記されたというわけだ。

⑪

<div class="grid">
  <div class="grid-item">
    <!-- ⑤ -->
    <div class="feature">
      ...
    </div>
  </div>
  <div class="grid-item">
    <!-- ⑤ -->
    <div class="feature">
      ...
    </div>
  </div>
</div>

カード型コンテンツを並べたエリアを構成していて、⑤を内包している。

⑤も同様に余白や幅のスタイルは持たず、gridコンポーネントの中で良しなにしてもらう魂胆だ。ところが新たにclass付与はしていない。

もしもfeatureコンポーネントをgridコンポーネントの小要素として余白を与えてしまうと、境界ボーダー1px分だけ片一方のコンテンツ幅が短くなってしまう。そんな理由からgridコンポーネント直下の配置は避けて、横並びした要素に内包するようにしたわけだ。

⑫

<article class="article">
  <!-- ⑥ -->
  <div class="heading">
    <h2 class="heading-name" data-ruby="...">...</h2>
    <a href="#" class="heading-link">...</a>
  </div>
  <!-- ⑦ -->
  <div class="archive">
    <time class="archive-date">...</time>
    <div class="archive-col">
      <p>...</p>
      <a href="#">...</a>
    </div>
  </div>
  <!-- ⑦ -->
  <div class="archive">
    <time class="archive-date">...</time>
    <div class="archive-col">
      <p>...</p>
      <a href="#">...</a>
    </div>
  </div>
  <!-- ⑦ -->
  <div class="archive">
    <time class="archive-date">...</time>
    <div class="archive-col">
      <p>...</p>
      <a href="#">...</a>
    </div>
  </div>
</article>

ここは新着情報エリアを構成していて、⑥⑦を内包している。⑥⑦にあたっては、配置先で余白や幅の必要がないため、article-xxxのようなclassは付与していない。

まとめ

デザインのレイアウトから再利用可能な範囲を認識して、それをHTML構造にする一連の工程を説明してきた。これは私自身いまでも難しく思うし、やり甲斐を感じる工程である。以前、電車通勤していたころ、中吊り広告を見て範囲を考えるなんてことをしていた。メモ帳に書いてみたりもした。もし暇なときは挑戦してみてはどうだろう。レイアウト認識を習慣付けておけば、仕事でも役立つはずだ。

このエントリーが、あなたのクリエイティビティを刺激するものであると期待したい。