これからの「標準」を身につける
HTML+CSSデザインレシピ
HEADER
ENTRY
MENU
FOOTER
OTHER
DESIGN
BOOTSTRAP
FOUNDATION
NO FRAMEWORK
RECIPE
CHAPTER 1
ヘッダー
HEADER 01
ヘッダーの基本レイアウト
HEADER 02
中央揃えのレイアウト
HEADER 03
ロゴ画像とサイト名を並べたレイアウト
03-A-A
ロゴ画像とサイト名を上下に並べて中央揃えにするA
03-A-B
ロゴ画像とサイト名を上下に並べて中央揃えにするB
HEADER 04
ロゴ画像と複数行のテキストを並べたレイアウト
04-A
ロゴ画像と複数行のテキストを垂直方向で中央揃えにする
TIPS
clearfix
overflow
HEADER 05
サイト名を画像で表示したレイアウト
05-A
高解像度な閲覧環境で画像がぼけるのを防ぐ
05-B-A
SVGフォーマットの画像を利用するA
05-B-B
SVGフォーマットの画像を利用するB
HEADER 06
ヘッダー画像を表示したレイアウト
HEADER 07
ヘッダー画像にテキストを重ねたレイアウト
HEADER 08
ヘッダーの右端にパーツを追加したレイアウト
（使用例）
CHAPTER 2
記事
ENTRY 01
記事の基本レイアウト
01-A
パーツ内の最後の要素の下マージンを削除する
ENTRY 02
中央揃えのレイアウト
02-A
中央揃えの中で本文だけを左揃えにする場合
02-B-A
画像だけを中央揃えにする場合A
02-B-B
画像だけを中央揃えにする場合B
ENTRY 03
画像にテキストを回り込ませたレイアウト
03-A
画像の下にテキストを回り込ませない場合
ENTRY 04
タイトルの下にパーツを追加したレイアウト
（使用例）
CHAPTER 3
メニュー
MENU 01
リンクを縦に並べたメニューの基本レイアウト
01-A
縦に並べたリンクを罫線で区切る
（複数行になる場合）
MENU 02
階層構造を持つメニュー
MENU 03
リストマークを画像で表示したメニュー
（複数行になる場合）
03-A
リストマークを垂直方向の中央に揃える
03-B
リストマークを文字で表示する
03-C
リストマークをアイコンフォントで表示する
03-D
リンクの右端に右向きの矢印アイコンを表示する
（複数行になる場合）
03-E
リストマークを連番で表示する
MENU 04
サムネイル画像の横にテキストを並べたメニュー
04-A
日付の横にタイトルを並べたメニュー
MENU 05
リンクを横に並べたメニューの基本レイアウト
05-A
メニューをコンパクトに表示する
05-B-A
横に並べたリンクを罫線で区切るA
05-B-B
横に並べたリンクを罫線で区切るB
05-C
リンクの横幅を固定する場合
05-D
等分割した横幅でリンクを表示する場合 その１
05-E
等分割した横幅でリンクを表示する場合 その２
05-F
各リンクに付加情報を追加する
05-G
横に並べたリンクをパンくずリストとして利用する
MENU 06
アイコンを横に並べたメニュー
06-A
アイコンを画像で表示する場合
MENU 07
アイコンにテキストをつけて横に並べたメニュー
07-A
アイコンを画像で表示する場合
TIPS
タブメニュー （Bootstrap）
タブメニュー （Foundation）
CHAPTER 5
その他
OTHER 01
ボタン
01-A
フォームを利用したボタン
01-B
配置した場所の横幅に合わせてボタンを表示する
01-C
ラベルの表示
OTHER 02
フォーム
OTHER 03
テーブル（表組み）
03-A
横方向の罫線のみで区切る
03-B
テーブルの行をストライプにする
03-C
テーブルの列をストライプにする
03-D
列ごとに位置揃えを変更する
03-E
レスポンシブテーブル
OTHER 04
段組み
04-A
段ごとに横幅を変える
04-B-A
段数を変えるA
04-B-B
段数を変えるB
OTHER 05
グループ
CHAPTER 6
デザイン
DESIGN 01
枠で囲むデザイン
01-A-A
枠のデザインのアレンジA
01-A-B
枠のデザインのアレンジB
01-A-C
枠のデザインのアレンジC
01-A-D
枠のデザインのアレンジD
01-A-E
枠のデザインのアレンジE
01-A-F
枠のデザインのアレンジF
01-A-G
枠のデザインのアレンジG
01-A-H
枠のデザインのアレンジH
01-A-I
枠のデザインのアレンジI
01-B-A
枠のデザインで見出しやボタンをアレンジする
01-B-B
枠のデザインで見出しやボタンをアレンジする
DESIGN 02
枠と見出しを一体化したデザイン
02-A-A
枠と見出しを一体化したデザインのアレンジA
02-A-B
枠と見出しを一体化したデザインのアレンジB
02-A-C
枠と見出しを一体化したデザインのアレンジC
02-A-D
枠と見出しを一体化したデザインのアレンジD
02-A-E
枠と見出しを一体化したデザインのアレンジE
02-A-F
枠と見出しを一体化したデザインのアレンジF
02-B-A
枠とメニューを一体化したデザインA
02-B-B
枠とメニューを一体化したデザインB
02-B-C
枠とメニューを一体化したデザインC
DESIGN 03
罫線で区切るデザイン
03-A-A
罫線で区切るデザインのアレンジA
03-A-B
罫線で区切るデザインのアレンジB
03-A-C
罫線で区切るデザインのアレンジC
03-A-D
罫線で区切るデザインのアレンジD
03-A-E
罫線で区切るデザインのアレンジE
03-A-F
罫線で区切るデザインのアレンジF
DESIGN 04
円形の枠で囲むデザイン
04-A-A
円形の枠のデザインのアレンジA
04-A-B
円形の枠のデザインのアレンジB
04-A-C
円形の枠のデザインのアレンジC
04-A-D
円形の枠のデザインのアレンジD
04-A-E
円形の枠のデザインのアレンジE
04-A-F
円形の枠のデザインのアレンジF
04-A-G
円形の枠のデザインのアレンジG
04-A-H
円形の枠のデザインのアレンジH
04-A-I
円形の枠のデザインのアレンジI
04-B
ボタンを円形にする
04-C
画像を円形に切り抜く
04-D
半円形の枠で囲む
DESIGN 05
吹き出し型の枠で囲むデザイン
05-A
罫線で囲んだ枠を吹き出し型にする
05-B
吹き出し型の枠に影をつける
DESIGN 06
背景画像を利用したデザイン
06-A
背景画像に重ねたテキストに影をつけて読みやすくする
06-B
背景画像に重ねたテキストを半透明の枠で囲んで読みやすくする
DESIGN 07
グラデーションを利用したデザイン
07-A
古いブラウザに対応するためのグラデーションの設定
07-B
SVGを利用したグラデーションの設定
DESIGN 08
パーツを重ねて表示するデザイン
CHAPTER 7
Bootstrapを利用したページ作成
BOOTSTRAP 01
Bootstrapを利用してページを作成するための下準備
TIPS
BootstrapをCDNで利用する
BOOTSTRAP 02
グリッドの用意とパーツの配置
02-A
Bootstrapのグリッドシステム
02-B
グリッドのネスト
02-C
小さい画面でメニューを上に表示する
BOOTSTRAP 03
CSSに触れることなくBootstrapの機能だけでページを形にする
03-A-A
ナビゲーションバーのアレンジA
03-A-B
ナビゲーションバーのアレンジB
03-A-C
ナビゲーションバーのアレンジC
BOOTSTRAP 04
Bootstrapで形にしたページをテーマでアレンジする
BOOTSTRAP 05
Bootstrapで形にしたページをCSSでアレンジする
TIPS
ナビゲーションバーにドロップダウンメニューを追加する
CHAPTER 8
Foundationを利用したページ作成
FOUNDATION 01
Foundationを利用してページを作成するための下準備
FOUNDATION 02
グリッドの用意とパーツの配置
02-A
Foundationのグリッドシステム
02-B
グリッドのネスト
02-C
小さい画面でメニューを上に表示する
FOUNDATION 03
CSSに触れることなくFoundationの機能だけでページを形にする
03-A-A
トップバーのアレンジA
03-A-B
トップバーのアレンジB
03-A-C
トップバーのアレンジC
FOUNDATION 04
Foundationで形にしたページをCSSでアレンジする
FOUNDATION 04
Sunny Cafe
FOUNDATION 04
Sunny Cafe アレンジ
TIPS
トップバーにドロップダウンメニューを追加する
CHAPTER 9
フレームワークを利用しないページ作成
NO-FRAMEWORK 01
パーツを配置して１段組みのレイアウトでページを形にする
NO-FRAMEWORK 02
段組みの設定を追加して２段組みのレイアウトにする
NO-FRAMEWORK 03
レスポンシブにして１段組みと２段組みのレイアウトを切り替える
NO-FRAMEWORK 04
コンテンツ全体が横に広がりすぎないようにする
NO-FRAMEWORK 05
パーツのデザインをアレンジする
CHAPTER 10
レシピ
RECIPE 01
プロモーションサイト
RECIPE 02
プロモーションサイトのコンテンツページ
RECIPE 03
ビジネスサイト
RECIPE 04
ショップサイト
© 2014 E BISUCOM TECH LAB / マイナビ