赤坂の学校へ通い始めて、楽しい仲間たちと真剣にホームページ制作を学んできました。
その中でも、基礎であるHTML,CSSのコーディングを何度も繰り返し練習しました。
参考にした本は、「XHTML+CSSプロが教える”本当の使い方”MdN編集部編」です。
この本で学んだレイアウト、ナビゲーション、デザインパーツをコーディングしたものを紹介します。
画像は、すべて本書より引用したものです。
| chapter3-01. フリーレイアウトのフローチャート | |
| chapter3-02. 親子関係がわかるツリー表示のサイトマップ | |
| chapter3-03. フッターをコンテンツ下部のブラウザウィンドウに固定する | |
| chapter3-04. スペースを取ってつくる見やすいテーブル | |
| chapter3-05. アイコンが自動的に付くユニークなリンクをつくる | |
| chapter3-06. 表示が崩れない可能性の高い見出しをつくる | |
| chapter3-07-01. テキストの有無によるヘッダーの組み方の違い 画像のみのヘッダー |
|
| chapter3-07-02. テキストの有無によるヘッダーの組み方の違い テキストがあるヘッダー |
|
| chapter3-08. アナログ感のある画像を使ったサイトデザイン | |
| chapter3-09. 画像を使わない装飾記号付きキャプション | |
| chapter3-10. コンテンツ量の変化に適応しやすい罫線をつくる | |
| chapter3-11. Flashをアクセントにして商品を強く印象づけるショップサイト | |
| chapter3-12. 共用要素の派生型を使ってページ設計を効率的に行う | |
| chapter3-13. 背景画像に凝ったツールチップを使う | |
| chapter3-14-01. リストのマーカーを画像でアレンジする リストのマーカー画像を置換する |
|
| chapter3-14-02. リストのマーカーを画像でアレンジする 訪問住リンクのマーカー画像を置換する |
|
| chapter3-15. 透過GIFや半透明PNGを利用した画像へのマスク効果 |
Copyright © 2011. UCHIDA ONLINE All rights reserved.