【Webコーダー・Webプログラマー向け】HTMLコーディングの４つのコツ（１）
最近、エンジニアを希望する人からお問い合わせを頂くのだが、その内容は、
- 折角、オンライン講座でみっちり学んだのに、少しも案件が取れない！
- エンジニアとして応募しているのに、技術力不足と言われて採用してもらえない！
といった切実な悩みだ。
それもそのはず、TechAcademyやストアカで教えてもらう内容は、あくまでも基礎的な内容であって現場レベルの実践的ノウハウではないからだ。
今回から、現場で使えるノウハウシリーズとして、何回かに分けてHTMLコーディングのコツについてお伝えする。
出来上がりイメージから、大枠だけHTMLで組んでおく
HTMLコーディングするとき、デザインカンプを上から順番にコーディングしていくと非常に効率が悪い。
なぜなら、最近のデザインはレスポンシブデザインがほとんどのため、レイアウト自体を工夫して組まないとスマホに対応できなかったり、PCに対応できなかったりするケースが多い。
CSSフレームワークであるbootstrapを利用できる案件であればそれほど大きな問題にはならないが、１からCSSやHTMLを組む場合は、以下の順番で組んでいくとよい。
- ヘッダー・フッター・本文のレイアウトをスマホ向けにコーディングする。
- ヘッダー・フッター・本文のレイアウトを、PC向けに調整する。
- 各ページをスマホ向けにコーディングする。
- 各ページをPC向けに調整する。
実は、この手順は、マーケティング的な理由もある。
最近のWebサイトは、アクセスユーザーの属性の違いこそあれ、スマホユーザーが増えているのが現状だ。従って、まずスマホでデザイン崩れを起こさないためにも、優先的にスマホのデザインを構成したほうが効率が良い。
特に１～２の手順で、HTMLの大枠だけでも組んでおけば、デザインカンプ通りに上から順番にコーディングするより効率は良いはずだ。
デザイン要素に対して、共通項にクラスを付ける
次に、見出しや、ウィジェット等の共通のデザイン要素がある場合、出来るだけ共通化を図るのが基本だ。
ベタなランディングページであればそこまで意識する必要はないが、Wordpressの様なCMSコーディング案件になってくると、システムで出力されている部分は共通化されていることが多い。
- 見出し（h1～h6）やぱんくず
- ページ番号（ページング処理）
- ウィジェット
- 商品一覧ページ
- 商品詳細ページ
- 買い物かごページ
- 購入・予約フローページ
共通で出力されているデザイン要素（エリアやパーツ）には、クラスを振って出来るだけデザインの共通化を図っておくほうが、後でデザインの調整や修正を余儀なくされた場合でも簡単に修正することができる。
<div class="common">
<h2>見出し1</h2>
<p>...<\p>
</div>
・・・
<div class="common">
<h2>見出し2</h2>
<p>...<\p>
</div>
特定の要素にはIDをつける
ところが、CSSクラスをどんどんふっていくと、ある悩みに直面する。
この悩みに対する解決策はシンプルだ。
特定のデザイン要素を形成するHTMLに対して、共通化されたクラスの付与と同時にIDを振ることだ。
IDはCSSクラスよりもより要素を特定する際には有効だ。
例えば、HTMLとCSSを以下のように組めば、commonと付与された要素に対して、element2というIDが付与された要素のみデザインを変えることができる。
<div class="common">
<h2>見出し1</h2>
<p>...<\p>
</div>
・・・
<div class="common" id="element2">
<h2>見出し2</h2>
<p>...<\p>
</div>
.common {
font-size: 1rem;
}
.common#element2 {
font-size: 1.5rem;
color: #333;
}
おまけ：スマホとPCの最大長をCSSで上手に管理する
最後に、CSSフレームワークを使わずに、簡単にレスポンシブデザインレイアウトを作るコツをお伝えする。
デザインには、PCとスマホデザインが体系化されている。代表的なデザインパターンが以下の図だ。
コーディング自体はそれほど難しくない。
以下のように、固定幅と可変幅でクラスを使い分ければよいだけだ。
<header> </header> <main> <div class="wrapper"> ...固定幅エリア... </div> <div> ...全幅エリア... </div> <div class="wrapper"> ...固定幅エリア... </div> </main> <footer> </footer>
/* PCの場合の固定幅エリア */
body{
...
}
.wrapper {
margin: 0 auto;
padding: 0;
width: 960px;<span class="crayon-sy"> /* 固定で960px */</span>
}
@media screen and(max-width:768px) {
/* スマホ・タブレットの場合の固定幅エリア */
body{
...
}
.wrapper {
position: relative;
padding: 0 20px; /* 余白を左右で20pxずつ取るように */
}
}</span>
このように、PCとスマホの幅の取り方さえ押さえておけば、レイアウトのデザインを簡単に実現することが可能だ。
尚、このデザインパターンは、あらゆるサイトに応用できる。
やり方次第では、LPは1日以内でコーディング可能
最近のHTMLコーディングは、複雑なアクションが伴わなければ、ある程度パターン化された手法で実現できる。
もし、モヤモヤしている人は。ぜひ既存のサイトを模写してHTMLやCSS構造を把握するとよい。
一からコーディングして悩んでいる方は、ぜひこのレイアウトHTMLコーディング手法を身に着けていただくことをおすすめする。