2019.03.24

【実務から学ぶ】フロントマークアップの進め方


IT業界には「フロントエンドエンジニア」という職種があります。
主にHTML・CSS・JavaScriptを使ったコーディングと、更新や保守も考えた設計を行います。

僕はこれまでサーバーエンジニアとして実務をしてきましたが、フロントのコーディングを  
する事もありました。  
ですが、今回改めてフロントエンドエンジニアとして一からマークアップを行う機会があり、  
学びがとても多かったので記事に書いてみたいと思います。

本記事は、こんな方向けです。

  • フロント・マークアップのコーディングに興味がある方。
  • すでにHTML・CSSの経験はあるが、なんとなくコーディングしていた。
  • 実際どこから手をつければいいの?
  • 早くコーディングをするにはどうしたらいいの?
    etc...

こうすれば効率よくコーディングすることができた!という実務から得た学びを、3つのポイントにまとめました。サクッと読んでいただければ幸いです!

目次

フロントマークアップ3つのポイント

  • 全体のボックス(箱)構成を細部まで作る
  • 各ボックスのタグ要素を決める
  • CSSクラスを考える
  • まとめ

おまけ

  • 実務を通して気づいたこと

フロントマークアップの3つのポイント

①全体のボックス(箱)構成を細部まで作る

例えばサイトのTOPページをコーディングする際、皆さんはどこから手をつけますか?
「header・body・footer」など、構成を分けてから着手するかもしれません。
その際に、より細部まで構成を考えてからコーディングを進める方が、効率が良くオススメです。
僕は当初、大枠の構成だけ考えてからコーディングに着手し、細かい部分は後からでも良いと思っていました。 ですが、項目が多く複雑になるにつれて手がとまってしまいました...

コーディングをする前に、細部まで構成を決めておくというのはとても大切だと感じています。
構成の考え方として、簡単にサンプルを踏まえてご紹介したいと思います。

ボックス(箱)とモジュール(部品)で考える

デザインを元にコーディングを行う際は、デザインの要素1つ1つを「箱」と「部品」で考えると、HTMLやCSSの設計がしやすくなります。
また、ブロック要素とインライン要素、それぞれを適切に入れ子にしていく知識も必要です。

例えば、街中にあった案内板のデザインで構成をイメージしてみたいと思います。

letters

まず外枠のブロックと、「①見出し・②案内画像・③各エリア」と3つのブロックに分けます。

letters

さらに、「③各エリア」のブロックに関しては細部も構成できそうです。

letters

このようにあらかじめ細部まで設計を考えることで、コーディングのスピードが上がり効率よく進めることができます。また、類似の要素がある場合は共通の部品として扱うこともできるので、よりシンプルで保守性の高いコードを書くことができるようになります。

構成を紙に書き出す

構成がイメージできたら、紙に書き出して整理をしてみましょう。
スムーズにコーディングをするための準備が整ってきました。

letters

②各ボックスのタグ要素を決める

構成が固まったら、HTMLタグを考えていきます。
例えば、見出しのタイトルだけでも<h1><h2><h3>……とタグがあり、その全てに「概念」があります。
極端な話、HTMLは全て<div>タグでも作成は可能(例外もあります)ですが、適切なタグを使うことは更新・保守・可読性・SEOなど利点も多いです。
そして何より、綺麗なコードを書くのはプログラミングの楽しさでもあります。タグは100種類以上あるので、ぜひ公式を見ながら良しなにしていただければっ😉

では、先ほどの例を元にタグを簡単に追加してみます。

letters

1つの<section>の中に<header>は1つです。また、見出しはh1としました。

letters

同じ要素を並べているため<ul><li>で指定し、さらに<li>の要素は部品化しています。
これは、同じ構成(名前と画像)を他でも実装する際に流用できるかもしれません。
また、タイトルは<section>の中に2つ目なので<h2>としています。

このように、紙に書き出した構成に対してタグを当てはめていきます。

③CSSクラスを考える

CSSのクラスは、HTML構造がしっかり練られていれば、スムーズに進めることができるのではないでしょうか。 また、CSSにはフレームワーク等があり実装方法も様々です。
今回僕が行った実務では、SCSSとBEMを採用していました。フロントのコーディングでは採用されることも多く必須になってきているので、使用経験がない方は是非チャレンジしてみましょう👍

また、CSSでクラス名やスタイルがうまく当てられないという場合は、そもそもHTML構成の設計が適切でないかもしれません。
もう一度、見直すことも重要です!(僕は何度も見直しました...)
そうすることで、よりコード量も少なくシンプルにすることができました。

簡単ではありますが、下記サンプルで作成したコードになります。

See the Pen sample by hiromichi-yamamoto (@figurinista_) on CodePen.

ポイントとしては<ul>に指定したクラス.listに、BEMのModifier(モディファイア:構成要素の色など見た目や状態を担当)の.list--cellを追加し、分類できるようにしました。
また、クラス.areaのブロックに関しては流用やアレンジも可能です。

まとめ

  • まずは全体のボックス(箱)構成を細部まで考えて紙に書き出す。
  • そこに、各ボックスのタグ要素を決めていく。
  • 最後にクラス名を考えてつけていく。

以上、3つのポイントを踏まえてコーディングを行えば、より効率良く実装できるのではないでしょうか。

おまけ

いざ実装する際は、デザインを元にコーディングを行っていましたが、

「ここってどうすればいいんだろう?」

と迷って作業が止まってしまうことがありました。
デザイナーさんに確認が必要なことは、エンジニアからも事前に気づき確認することが大切です。 実際にあったことを、いくつかピックアップしてみたいと思います。

①並べ方

letters

例えば要素の並び順は、「Z」でしょうか?「N」でしょうか?という問題です。
参考画像では番号が振ってあるため分かりやすいですが、似た構成はいくつもあり分からない場合もあります。システム側で、どう並べるべきか決めておく必要があります。

②文字数が多いパターン

letters

テキストの文字数が増減した時の挙動について、どうするべきか。❌のようにデザインから読み取れない場合は、確認する必要があります。

③ホバーやリンクなど、マウスポインタでの挙動

letters

ボタンやリンクにカーソルを合わせた時やタップをした時に、色の変化や下線、シャドウを付けるなど、挙動が必要です。 デザインに指定がない場合もあるので、 サイト全体の統一感を出すためにも、見落とさないようにしっかり確認したいところです。

以上、簡単ではありますがフロントマークアップについてでした。


<!-- Font Awesome Free 5.0.13 by @fontawesome - https://fontawesome.com --><!-- License - https://fontawesome.com/license (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) -->