HTML&スタイルシート デザインブック
| 編著者 | エビスコム |
|---|---|
| 出版社 | ソシム株式会社 |
| 出版日 | 2004年1月 |
| 判型 | B5変型版/320頁 |
| 価格 | 2,500 円 |
| ISBN | 4-88337-370-3 |
はじめに - Foreword -
タイトルやメニューはどこにどう入れるとわかりやすい?
全体をどのように配置したらバランスがとれる?
バーやコンテンツはどのぐらいの長さにすれば収まりがいい?
ウィンドウサイズが変わってもきれいに見せる方法は?
ちょうどいい余白サイズはどのぐらい?
どのページへのリンクを用意すれば便利になる? ... etc.
HTMLやスタイルシート(CSS)の使い方を覚えても、実際にWebページのデザインを始めると、次々と疑問が出てきます。ああするべきか、こうするべきか…。Webページのデザインパターンは無限大です。
しかし、あまりに多種多様でどこから手を付けていいかもわからないWebページのデザインも、基本的な構造だけを見れば、いくつかのパターンに限られてくることがわかります。基本的な構造さえおさえてしまえば、デザインを色々とアレンジしても、ページデザインのバランスが崩れたり、構造がわかりにくくなることはなくなります。
そこで本書では、Webページの主なデザインパターンを取り上げ、基本的なレイアウトの構造やバランス、デザインのポイントをまとめました。そして、Webページとして完成させるための制作過程を詳細に網羅しています。
本書の使い方 - How to Use -
本書は、Webページの主なデザインパターンを取り上げ、ページの基本構造やレイアウトのバランスを理解し、HTML、CSS、JavaScriptを駆使してWebページを制作するテクニックを身に付けることを目的としています。
また、さまざまなパターンのページを手軽に作成できるようにすることも目的としています。そのため、サンプルデータを付属CD-ROMに収録し、テンプレートとして利用できるようにしています。
もくじ - Contents -
Chapter 1 TOPBAR STYLE
トップバーを入れたスタイル
トップバーを入れたスタイル
1 基本スタイル
TOPICS ヘッダーやコンテンツを画面の中央に配置する
TOPICS サブタイトルをヘッダーの外に出した場合
2 バーのまわりに余白を入れないスタイル
TOPICS コンテンツ部分の配置
TOPICS 文字を大きくした場合
3 上のバーにメニューを入れたスタイル
TOPICS メニュー部分の色を変えてみる
TOPICS リンクの間隔を均等にする
TOPICS テーブルの横幅を必要以上に短くしないようにする
TOPICS DOCTYPE宣言の記述
Chapter 2 SIDEBAR STYLE
サイドバーを入れたスタイル
サイドバーを入れたスタイル
1 基本スタイル
TOPICS ページの大きさを決める基準
TOPICS サイドバーの高さ
2 バーのまわりに余白を入れないスタイル
TOPICS ページの範囲をはっきりさせる
3 バーの形にデザインしないスタイル
TOPICS ページの右下に背景画像を表示する
Chapter 3 TOP & SIDE BAR STYLE
トップバーとサイドバーを入れたスタイル
トップバーとサイドバーを入れたスタイル
1 基本スタイル
TOPICS 背景色が表示される範囲
TOPICS 余白サイズをまとめて指定する
TOPICS コンテンツ部分の背景に色を付ける
TOPICS サイトの構造とリンク その1
2 バーのまわりに余白を入れないスタイル
TOPICS コンテンツ部分の背景に色を付ける場合
TOPICS サイトの構造とリンク その2
3 ヘッダーバーをコンパクトにまとめたスタイル
TOPICS プルダウンメニューの大きさ
TOPICS プルダウンメニューを使わない場合
Chapter 4 TOPBAR & THREE COLUMNS
トップバーと3段組のスタイル
トップバーと3段組のスタイル
1 基本スタイル
TOPICS 右のサイドバーに色を付ける場合
TOPICS 3段組のスタイルにおけるメニューやコンテンツの配置
TOPICS 3段組のレイアウトと画面サイズ
2 ページのまわりに余白を入れないスタイル
TOPICS 画面サイズが変わったときの表示
TOPICS テーブルのタグとスタイルの設定
Chapter 5 ONE BOX STYLE
ボックススタイル
ボックススタイル
1 基本スタイル
TOPICS ページの背景に色を付ける場合
TOPICS ウィンドウサイズとボックスレイアウト
2 ボックス内にヘッダーやサイドバーを入れたスタイル
3 ボックスのまわりに余白を入れないスタイル
4 縦長のボックスでレイアウトするスタイル
Chapter 6 POWER UP ARRANGE
パワーアップアレンジ
パワーアップアレンジ
1 指定した大きさの別ウィンドウでページを表示する
TOPICS 別ウィンドウのサイズなどを指定しない場合
TOPICS HTMLで別ウィンドウを開く場合
TOPICS スクリプトの記述をまとめる その1
TOPICS スクリプトの記述をまとめる その2
2 JavaScriptを使わないでロールオーバーボタンを作成する
TOPICS ブロック要素とインライン要素
TOPICS ロールオーバーの設定
TOPICS リンク部分の<div>を削除する
3 画像を使ったロールオーバーボタンを作成する
TOPICS 画面上の表示を隠す
4 プルダウンメニューを作成する
TOPICS 選択中の項目を確認する
TOPICS 作成した項目を削除する
TOPICS 作成したメニューを編集したいとき
TOPICS 古いブラウザに対応する場合
TOPICS 改行コードが化ける場合
TOPICS 項目の内容やメニューの構成を変更するには
TOPICS 作業効率をUPする【テキストエディタ】
TOPICS 作業効率をUPする【HTMLエディタ】
© E BISUCOM TECH LAB. All rights reserved.