XHTML+CSS CHAPTER_01 レイアウト

赤坂の学校へ通い始めて、楽しい仲間たちと真剣にホームページ制作を学んできました。
その中でも、基礎であるHTML,CSSのコーディングを何度も繰り返し練習しました。
参考にした本は、「XHTML+CSSプロが教える”本当の使い方”MdN編集部編」です。
この本で学んだレイアウト、ナビゲーション、デザインパーツをコーディングしたものを紹介します。

画像は、すべて本書より引用したものです。

CHAPTER 01 レイアウト

chapter1-01-01-01. CSSでレイアウトする。2カラムデザインをつくる。
floatプロパティを使ったレイアウト
chapter1-01-01-02. CSSでレイアウトする。2カラムデザインをつくる。
floatプロパティを使ったレイアウト
chapter1-01-02. CSSでレイアウトする。2カラムデザインをつくる。
positionプロパティを使ったレイアウト
chapter1-01-03. CSSでレイアウトする。2カラムデザインをつくる。
リキッドレイアウト
chapter1-01-04. CSSでレイアウトする。2カラムデザインをつくる。
リキッドレイアウト
chapter1-02-01. 3カラムデザインをCSSでレイアウトする
float:leftだけでレイアウトする
chapter1-02-02. 3カラムデザインをCSSでレイアウトする
関連のあるボックスをまとめてレイアウト
chapter1-02-03. 3カラムデザインをCSSでレイアウトする
ブラウザ可変のリキッドレイアウト
chapter1-03. シンプルで柔軟性の高い4カラムレイアウト
chapter1-04. 基本カラムの整数倍で構成する、グリッドレイアウト
chapter1-05. グリッドを活用した、フリーレイアウトのページを作る
chapter1-06. 行幅を抑える工夫をしたリキッドレイアウト
chapter1-07. リキッドレイアウトで内容表示領域の処理
chapter1-08. CSSを使ったグリッドフリーなリキッドレイアウト
chapter1-09. 効果的な横スライドでユーザーの目線を釘付けに
chapter1-10-sp1. デザインの要となるページレイアウトを工夫する
並んだボックスの背景底辺を揃える
chapter1-10-sp2. デザインの要となるページレイアウトを工夫する
固定背景とPNG画像の背景
chapter1-11. ヘッター、フッターをウィンドウ横いっぱいに広げる
chapter1-12. 文章をしっかり読ませる文字組みをつくる
chapter1-13. ベースとなる要素のスタイルをつくり込む
chapter1-14. floatを使用しないサムネイル写真とテキストのレイアウト
chapter1-15. レイアウトと組合わせる透過画像を使ったデザイン表現

このページの上部へ