CSSレイアウト 実践講座1

CL company

CSSレイアウトを覚える一番の近道は実践で経験をつむって事が一番だと思うですよね。

なので、実際にありそうなサンプルサイトを作ったのでこのサイトをこれから作っていきたいと思います。

…ここからが続き

はじめに

CSSレイアウトを実際に少しやった人なら分かるかもしれませんが、コーディングの仕方は人それぞれなので、今回組んでいくのは普段自分やっているやり方でやるので、そこはご了承下さい。

デザインがあがってきた状態でコーディングをする時、自分はまずどうスライスするか?
マークアップはどうするか?
を先に考え、頭の中で簡単な構成を作ってからコーディングに入ります。
マークアップについては人によって考え方が違うので、今回は自分の独断でやらせて貰うので、そこは合せて下さい。

自分は実際CSSレイアウトをやる手順として全体のレイアウトを作り、そして、中のコンテンツの調整をしていくので、この順序で解説していきたいと思います。

練習用フォルダ一式

解凍して頂くとマークアップ済みのhtmlファイルと画像やCSSのパスを揃えるって意味でも、imageフォルダ、styleフォルダを作った状態にしています。

これで準備は整ったので次のエントリーから実践に入っていきたいと思います。

留意事項

  • サンプルはテンプレートとしての仕様のみ許可します。配布はしないでください。
  • 対象ブランザはIE6、IE7、Firefox2、Safari3.1で行っています。

Comment Form

※コメントが認証されるまで、コメントは反映されません。ご了承くださいませ。


(公開されません)
 
Captcha

画像の中に見える文字を入力してください。

page top へ

Sponsor

  • heteml
  • Movable Type

Category

Recent Article

2011 04-05
iPhone スマートフォンサイトのデザインのまとめ
2011 04-04
スマートフォン対応にしてみました
2011 04-01
CSS3 要素を透明に出来る Opacity と RGBa の使い方
2011 03-31
サイトリニューアルしました
2010 12-01
CSS3 でボタンを作る為のテクニック、サンプル集
2010 11-24
綺麗でリッチなフッターデザイン集のまとめ 60
2010 11-18
緑と黒色を使った Webデザインのサイト 25
2010 11-10
知っておいた方が便利なエクセルの知識

Recent Comments

Archive

2011年
2010年
2009年
2008年

Related Article