デザインからコーディングする1つの方法|みんなはどうやるのかな

2013年6月20日

スクリーンショット 2013-06-20 19.13.38

こんにちは、榊原です。
 
コーディングをする時に、デザイン通りにコードで再現する方法はいくつかあると思うのですが、皆さんはどうしてるのでしょうか。私は独学でですので多数派かどうかわかりませんが、つい先日コーディングしたサイトを例に、手順をご紹介します。
 

1.構造化したindex.phpを用意

まず、スタイルシートは放置して、h1、h2、h3や、ul等で構造化したindex.phpを用意します。ロゴにh1をかけまして、要約にh2をかけております。メニューはulでリスト化しました。もちろんながら、スタイルシートがかかっておりませんので、単に文章が羅列されてるだけです(笑)

スクリーンショット 2013-06-19 12.51.42
私的には、フォントで表せれない部分に画像を使う派なので、この時点ではほとんど画像はありません。完成後に確認したところ、12個しか画像は使っておりませんでした(笑)

スクリーンショット 2013-06-20 19.13.38
 
 

2.CSSリセットとTwitter Bootstrapをかける

スタイルシートや画像を用意する前に、CSSリセットとTwitter Bootstrapをかけました。
CSSリセットは、IEやChrome間で微妙に異なる表示ったりするそれぞれのブラウザの表示の癖を打ち消すものでして、私はhtml5対応のcssリセットを利用しています。利用しないと大変なことに;
 
スクリーンショット 2013-06-19 12.47.53
 
あと、Bootstrapは「超便利!Twitter BootstrapでさくさくWeb開発」が詳しいですが、基本的なcssセットを用意してくれてるもので、使い慣れればコーディング時間の短縮につながります。
これらをかけるだけで、少しだけ画面が変わったのがわかるかと思います。
 
 

3.デザイン画像を背景画像に設定する

1pxのずれ!じゃないですが、目測でこのパーツはここらへんかな・・・等とやってますと後で大変なことになりますので、私はデザインを1枚物のjpgに書き出しまして、背景に用意するようにしています。
 
スクリーンショット 2013-06-19 12.48.25
 
bodyにかけておりますので、コードは普通に

body {
	background-image:url("背景画像を指定");
	background-position: center top;
}

でやっております。今回はこのままやりましたが、パーツが多かったり、画面が黒くなりすぎる場合は、背景画像を半透明にしたりすることもあります。
 
 

4.横幅を設定して、センタリングする

ひとまずは、横幅を設定して、センタリングします。要素ごとの境目を明確にするために、横幅を設定する要素にはborderをかけています。
 
スクリーンショット 2013-06-19 12.49.16
 

header , .width {
	width:1000px;
	margin:auto;
	border:1px solid #c0c0c0;
}

 
 

5.要素を配置していく

ここまできたら、あとは各要素を背景画像にあわせて配置していくだけです。
基本的には、floatやmargin,paddingを使いながら配置しますが、それだけでは難しいものについては position:relative も合わせながら微調整していきます。

スクリーンショット 2013-06-19 12.56.21
 
このの画像では、ロゴと、ロゴ右にあるメニューの位置を合わせたところです。デザイン版とはフォントが違うので、文字はぴったりは一致しませんのでご注意を。
 
それではまた。

slackチームに参加下さい

ng-onsenui2.slack.com

OnsenUI2(Angular2)について知見を共有する場です。Angular2に限ってOnsenUI2を議論できる場がなかったのでつくりました。これから使い始めるという方はぜひご参加ください。
https://ng-onsenui2.herokuapp.com/

Ionic2.slack.com

日本語情報が少ないのでこちらで知見を共有できればと思います。お陰様で参加者100名を超えました。ありがとうございます。
https://ionic2-ja.herokuapp.com