ソーテック社 | パソコン・ビジネス書籍出版

Chapter1 基礎をしっかり学ぼう
1-1 WebサイトとWebブラウザの基本
1-2 Webデザインはこうして進めよう
1-3 HTMLの書き方を覚えよう
1-4 CSSの基本を学ぼう
1-5 レイアウトについて
1-6 作業環境を整えよう
1-7 CSS設計とは

Chapter2 HTMLとCSSで簡単アニメーション
2-1 マウスホバーアニメーション
2-2 拡大して動くボタン
2-3 テキストにアイコンを重ねると動くボタン
2-4 スライドインするアニメーション
2-5 自転する惑星のような楕円形アニメーション
2-6 上下に浮遊する吹き出し
2-7 変形しながら回転するアニメーション
2-8 回転する3Dボタン

Chapter3 ヘッダーデザインを作ってみよう
3-1 ヘッダーデザインの共通コード
3-2 ベーシックなヘッダーデザイン
3-3 ロゴを中央に配置したヘッダーデザイン
3-4 ナビゲーションに区切りラインを入れたヘッダーデザイン

Chapter4 カードデザインを作ってみよう
4-1 カードデザインの共通コード
4-2 シンプルなカードデザイン
4-3 ポラロイド風カードデザイン
4-4 シンプルで優しいテイストのカードデザイン
4-5 丸数字カードデザイン
4-6 オーバル型のおしゃれなカードデザイン

Chapter5 フォームデザインを作ってみよう
5-1 フォームデザイン
5-2 シンプルで定番なフォームデザイン
5-3 塗りとボーダーを併用したフォームデザイン
5-4 テーブルを使ったフォームデザイン

Chapter6 フッターデザインを作ってみよう
6-1 フッターデザイン
6-2 ベーシックな2カラムフッターデザイン
6-3 SNSアイコンを配置したグラデーションデザイン
6-4 「お問い合せ」ボタンを追加したフッターデザイン
6-5 店舗画像を掲載したフッターデザイン

Chapter7 テーブルデザインを作ってみよう
7-1 テーブルを見やすくデザイン
7-2 シンプルで最も定番なテーブルデザイン
7-3 グラデーションを使用したフラットなテーブルデザイン
7-4 横一列に並べたテーブルデザイン

Chapter8 タイムラインデザインを作ってみよう
8-1 タイムラインデザインの共通コード
8-2 沿革や手順に使える汎用的なタイムライン
8-3 電車の路線みたいなタイムラインデザイン
8-4 画像を使って、雑誌風タイムラインデザイン
8-5 連番をコンテンツの中に配置したタイムラインデザイン

Chapter9 ボタン&見出しデザインを作ってみよう
9-1 ボタンデザイン
1 シンプル＆フラットなボタンデザイン
2 影をつけてより目立たせたボタンデザイン
3 線だけのシンプルなボタンデザイン
4 太線と丸みがかわいらしいボタンデザイン
5 グラデーションが美しいボタンデザイン
6 角の丸いボタンデザイン
7 あしらいで目立たせたボタンデザイン
8 思わずクリックしたくなる立体的なボタンデザイン
9 スタイリッシュな動きのあるボタンデザイン
10 スタイリッシュな動きのある付箋風ボタンデザイン

9-2 見出しデザイン
1 シンプルかつおしゃれな縁取り見出しデザイン
2 企業サイトやブログで使える万能な見出しデザイン
3 簡単に実装できる付箋風見出しデザイン
4 アイコンをあしらいとして使用した見出しデザイン
5 下線を入れた見出しデザイン
6 英字をメインに、日本語見出しをあしらいに使用したデザイン
7 斜めラインをあしらいに使用した見出しデザイン
8 英字タイトルにバーを重ねたエレガントなデザイン
9 英字タイトルを重ねたポップなデザイン
10 頭文字を装飾した見出しデザイン
≪ 目次を隠す