6ステップでマスターする
最新
標準
HTML+CSSデザイン
SAMPLE DATA
完成サンプル
トップページ
コンテンツページ
アバウトページ
お問い合わせページ
記事一覧Aのページ
記事一覧Bのページ
記事一覧Cのページ
Chapter
1
下準備
1-3
Webページのベースを用意する
1-3-1
HTMLファイルに記述する設定
1-3-2
CSSファイルに記述する設定
Chapter
2
トップページの作成
コンテンツ編
2-1
ヒーローイメージ
2-1-1
画像に重ねるテキストを表示する
2-1-2
Webフォントで表示して字間を調整する
2-1-3
ブラウザ画面いっぱいに画像を表示する
2-1-4
SVGでロゴ画像を表示する
2-1-5
リンクボタンを表示する
2-2
概要(アイコン+テキスト)
2-2-1
概要のテキストを表示する
2-2-2
アイコンを表示する
2-2-3
3つの概要を横に並べる
2-3
概要(画像+テキスト)
2-3-1
画像とテキストを表示する
2-3-2
画像とテキストを横に並べてレイアウトする
2-4
概要(画像+テキスト: 逆配置)
2-4-1
コンテンツCをベースに新しいブロックを作成する
2-4-2
画像の横幅を固定して並び順を変更する
Chapter
3
トップページの作成
ナビゲーション編
3-1
サイト情報
3-1-1
サイト情報を表示する
3-1-2
フッターのデザインを指定する
3-2
フッターメニュー
3-2-1
フッターメニューを作成する
3-2-2
3つのメニューを横に並べる
3-3
コピーライト
3-3-1
コピーライトを表示する
3-3-2
フッター内のパーツのレイアウトを調整する
3-4
SNSメニュー
3-4-1
SNSメニューを表示する
3-4-2
SNSメニューのデザインを指定する
3-5
ヘッダーのサイト名
3-6
ナビゲーションメニュー
3-6-1
ナビゲーションメニューを作成する
3-6-2
大きい画面ではナビゲーションメニューを横に並べる
3-7
トグルボタン
3-7-1
トグルボタンを作成する
3-7-2
トグルボタンでナビゲーションメニューを開閉する
Chapter
4
コンテンツページの作成
コンテンツ/アバウト/お問い合わせ
4-1
コンテンツページ
4-1-1
コンテンツページを作成する
4-1-2
記事のデザインを指定する
4-1-3
パンくずリストを表示する
4-2
アバウトページ
4-2-1
アバウトページを作成する
4-2-2
画像と沿革を表示する
4-3
お問い合わせページ
4-3-1
お問い合わせページを作成する
4-3-2
地図を表示する
Chapter
5
記事一覧ページの作成
カード型/サムネイル型
5-1
記事一覧A: カード型(画像+テキストを上下に配置)
5-1-1
記事一覧Aのページを作成する
5-1-2
記事の概要を表示する
5-1-3
ブラウザ画面の横幅に応じて概要を横に並べて表示する
5-2
記事一覧B: カード型(画像+テキストを左右に配置)
5-3
記事一覧C: サムネイル型(画像+テキストを重ねて配置)
Chapter
6
デザインのアレンジ
6-1
ヘッダーの色をアレンジする
6-2
ヘッダーとヒーローイメージを一体化したデザインにする
6-3
ヘッダーを画面上部に固定する
6-4
関連記事メニューを追加する
6-5
メタデータを記述する
6-6
ページの基本色をアレンジする
COLOR
A
COLOR
B
COLOR
C
COLOR
D
COLOR
E
APPENDIX
古いブラウザ用の設定
© エビスコム / マイナビ出版