その昔、マークアップをやっていた時に最終的にやっていた方法

note_process_from_design_to_markup.md

その昔、マークアップをやっていた時に最終的にやっていた方法

カンプをもらってそこからマークアップ（コーディング）に入るまでの 工程をまとめてみました。

1. カンプ見ながら大まかな設計をテキストに書き出す
2. 細かなレイアウト構造（divなど)を書き出していく
3. カンプからテキストを抜き出す
4. カンプから画像を切り出す
5. 大まかなレイアウトのCSSを組む
6. レイアウト構造を詳細にしていく

雑ですがそれぞれの工程の開設を書きました。

カンプ見ながら大まかな設計をテキストに書き出す

カンプ見ながら大まかな設計をテキストに書き出していく いきなりhtmlを書くと大変なのでテキストフファイルが良い 以降ではこのテキストファイルを「構造設計txt」とする

構造設計txt

#header
#container
#footer
...etc

細かなレイアウト構造（divなど)を書き出していく

構造設計txtに詳細なレイアウトを分かる限り反映する

構造設計txt

#header
 #header-nav

#container
　#main
　
　#sub
...etc

カンプからテキストを抜き出す

構造設計txtに

• テキストの情報、例えば説明文などはそのまま抜き出す
• 別途、テキストがもらえている場合はそれを使う
• 画像のところはimg要素と分かるようしてその横にAlt(代替えテキスト)を書いておく
• Emmetに慣れているならもうhtmlに展開できる形式で書いても良い

構造設計txt

#header
 #header-nav
  ul
  	li ホーム
  	li カテゴリー1
  	li カテゴリー2
  	li カテゴリー3

#container
　#main
　img AAA株式会社
　
　私たちはAAAAなAAAを提供する....texttexttexttexttexttexttexttext
　
　#sub
　事業紹介
　
  img:AAA
　		h2 AAA
　 		p AAAAな事業です
　 
　img:BBB
　		h2 BBB
　　		p BBBBな事業です
　　
　img:CCC
　		h2 CCC
　　		p CCCな事業です

#footer
　p#copyright
　　©AAA.inc

これである程度設計が出来るのでhtmlでどうなるか イメージをつかめる

カンプから画像を切り出す

構造設計txtを見ながら画像を切り出していく この時に画像のサイズなどを書き出しておく

構造設計txt　一部抜粋

///
  img:AAA w200 h150(width200px height100pxと言う意味とか分かるようにメモ)
　		h2 AAA
　 		p AAAAな事業です
///

大まかなレイアウトのCSSを組む

htmlは書いてないけど、構造は設計出来ているのでどんな要素(htmlの)が必要かは分かっているので この段階で大まかななレイアウトのCSSを書いてしまう

.css

#header{
	position: relative;
	width: 960px;
	margin-right: auto;
	margin-left: auto;
	position: relative;
}

ul#header-nav{
///
省略
///
}


ul#header-nav li{
///
省略
///
}

#sub img{
	width:200px;
	height:150px
}

///
省略
///

レイアウト構造を詳細にしていく

そうすると純粋な構造とは別にデザインやエフェクトで必要なdivなどが分かるので構造設計txtに追加する

構造設計txt

header#header
 nav#header-nav
  ul
  	li ホーム
  	li カテゴリー1
  	li カテゴリー2
  	li カテゴリー3

#container
　#main
　img AAA株式会社
　
　私たちはAAAAなAAAを提供する....texttexttexttexttexttexttexttext
　
　#sub
　	h2 事業紹介
　	div.slider-box
　
　		div.slider
  			img:AAA
　			h3 AAA
　 			p AAAAな事業です
　 
　 		div.slider
　			img:BBB
　			h3 BBB
　　			p BBBBな事業です
　　
　　		div.slider
　			img:CCC
　			h3 CCC
　　			p CCCな事業です
///
省略
///
#footer
　p#copyright
　　©AAA.inc

これをもとにhtml書いていきます。

その後

この後、ある程度ブラウザで表示がされるようになっているはずなので CSSを調整する段階に入ります。

ここでレイアウトが崩れていたらhtmlを見直します。 概ねhtml側に問題があるの経験上の感想です。

そしてここからCSSでレイアウトを調整していくと htmlは出来上がっているのでCSS書くたびにhtmlを書き直さなくても良いので効率的でした。