赤坂の学校へ通い始めて、楽しい仲間たちと真剣にホームページ制作を学んできました。
その中でも、基礎であるHTML,CSSのコーディングを何度も繰り返し練習しました。
参考にした本は、「XHTML+CSSプロが教える”本当の使い方”MdN編集部編」です。
この本で学んだレイアウト、ナビゲーション、デザインパーツをコーディングしたものを紹介します。
画像は、すべて本書より引用したものです。
| 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. レイアウトと組合わせる透過画像を使ったデザイン表現 |
Copyright © 2011. UCHIDA ONLINE All rights reserved.