5 HTMLマークアップの進め方

マークアップ準備

実際にデザインを見ながらマークアップするとき、慣れないうちはデザインを印刷するか、白い紙に手書きで「セクションに分ける」枠を書き込みます。

それぞれの要素に対して、どの種類のタグを付与するか、これも書き込みます。

慣れてきたら頭の中で自然と分かってきますが、最初は手書きで絵にまとめておくと、やりやすいです。

まずはページレイアウトをもとに、意味のあるカタマリで分割する

ヘッダー、メイン、フッターに分けましょう。
メインはさらに、各セクションに分けます。

それぞれの要素に、どの種類のタグでマークアップするか考える

セクションに分けたら、各要素がどのタグになるか、考えてみましょう。

メインの最初のセクションでは、「キャッチコピー」がタイトルになりそうならh2、文章になりそうならpを選択します。
h2の場合はセクションにsectionタグを使用できます。pになった場合は、親にdivを選択します。

「トビサワマキ」「FROG-EIGHT」「Web Developer, Designer」の部分は全体をpにしても良いですし、業種は別のpに分けても良いです。文字のスタイルが異なっているので、さらにspanタグで分けます。

PCとスマホのデザインが異なっても、HTMLのタグは共通的に書こう

マークアップの際、PCとスマホでは基本的に同じ構成要素となっています。
たとえ配置やレイアウトが異なっていても、HTMLの構成は変わらずに作ります。

スタイルが異なる場合（レイアウト位置、サイズなど）は、要素にクラス名をつけてCSSで制御します。

共通ではない要素が出てきた場合

理由によっては「PCだけで表示」「スマホだけで表示」の要素が出てくる場合があります。
その場合は、「pc」「sp」などのクラス名を付与し、pcクラスの要素はスマホでは非表示となるよう、CSSで制御します。

そのため、同じ位置に「共通」「PCのみ」「スマホのみ」の要素をマークアップしておきましょう。

ヘッダー・フッターなど、各ページ共通の部分から始めよう

マークアップは、特にこだわりが無ければトップページの共通部分から始めましょう。
各ページに共通するセクション「ヘッダー」「フッター」などは、マークアップ後、他のページでも流用しましょう。

ページ毎にHTMLを保存する際のフォルダ構成を考える

フォルダ構成には、色んな考え方があります。
今回は、極力シンプル・階層構造を増やさないパターンを紹介します。

この例では、worksページのURLは、xxx.com/works.html となります。
こだわりがない場合は、シンプルな例を参考に、フォルダ・ファイル構造を考えてください。

• [公開フォルダ]portfolio
  
  • [トップページ]index.html
  • [worksページ]works.html
  • [作品詳細ページ]work01.html
  • [画像フォルダ]img
    • [ロゴ画像]logo.png
    • [自画像]tobisawa.jpg
    • [作品画像]item01.jpg
    • [作品画像]item02.jpg
  • [CSSフォルダ]css
    • style.css

• [公開フォルダ]portfolio
  
  • [トップページ]index.html
  • [worksフォルダ]works
    • [worksページ]index.html
  • [作品詳細フォルダ]work01
    • [作品詳細ページ]index.html
  • [画像フォルダ]img
    • [ロゴ画像]logo.png
    • [自画像]tobisawa.jpg
    • [作品画像]item01.jpg
    • [作品画像]item02.jpg
  • [CSSフォルダ]css
    • style.css

HTMLのファイル名の例

HTMLやCSS、画像のファイル名は、半角英数字の小文字統一で名前をつけましょう。
サーバーにappした際の文字化け・削除できない、などを避けるため、全角文字は使用しないでください。

OK：
works.html
illustration.html
sakuhin01.html

NG：
作品一覧.html
ｗｏｒｋｓ．ｈｔｍｌ

IDやクラス名の命名規則を考える

要素には、IDやクラス名を付与することができます。
半角英数字の小文字統一はファイル名のつけ方と同じです。

さらに、「数字から始まる名前はNG」というルールがありますので、注意しましょう。

数字をクラス名につけることは、実際には少ないケースです。
理由は、「同じクラス名をつけたものに同じスタイルが適用される」ので、作品の1つ目にはitem01、2つ目にはitem02… というつけ方はしません。
→全てにitemという同じクラス名をつけます

OK：
半角英数小文字使用、アンダーバーとハイフンは使用可
class=”list-works”
class=”list_works”
class=”item-works”
class=”section-works”

NG：
名前の先頭に数字
class=”01-list”

非推奨：
大文字小文字が混ざっている
class=”LIST”
class=”List-works”

プロフィールサイトTOPのHTMLマークアップ用のテンプレート

以下より、ダウンロードして解凍後、利用してください。

上部にヘッダーがあるパターン –> basic
左サイドにヘッダーがあるパターン –> side-header