フレキシブルボックスで作るHTML5&CSS3レッスンブック

  • Amazonで購入

フレキシブルボックスで作る HTML5&CSS3レッスンブック

最新かつスタンダードな手法のHTML5&CSS3によるWeb制作をマスターしたい方に最適

著者
エビスコム
定価
2,860円(本体価格 2,600円)
発売日
2019年3月16日
判型/ページ数
B5変形/320(オール4C)
ISBN
978-4-8026-1210-4
備考
-

本書は、CSSのフレキシブルボックス(Flexbox)を利用してWebページ制作を行うレッスンブックです。

長い間、Webページ制作ではCSSのフロート(Float)が利用され、「ボックスの相互の位置関係でデザインやレイアウトを形にしていく」というノウハウが蓄積されてきました。

フレキシブルボックスはこうしたノウハウをブラウザの互換性や制作手順、考え方も含めて引き継いでいます。
また、フロートで不便だった部分には手が加えられ、いよいよ完成形にたどり着いたと言えるでしょう。

はじめてWebページを作る方にも、今どきのページ制作の基礎を学びなおしたいといった方にも、本書を活用していただければ幸いです。

-「はじめに」より

●P93の「Font Awesome」の挙動について
サービスのバージョンアップに伴って、アカウントの設定が必要になりました。
詳しくは、下記のURLをご参照ください。


Font Awesome 5.9を利用する方法

ジャンル

読者サポート

  • ダウンロード

目次

CHAPTER1 HTMLでマークアップする

1-1 記事ページの作成
1-2 HTMLファイルの作成
1-3 HTMLの基本設定
1-4 ブロックとパーツを追加する

CHAPTER2 CSSでレイアウトをはじめる

2-1 モバイルファーストでレイアウトをはじめる
2-2 ボックスを確認する
2-3 CSSを用意する
2-4 ブロックの背景に色を付ける
2-5 ブロック内に余白を入れる

CHAPTER3 記事の見栄えを整える

3-1 フォントの設定を行う
3-2 記事をカード型のデザインにする
3-3 画像を追加する
3-4 アイコンフォントを利用する

CHAPTER4 ヘッダーとフッターの見栄えを整える

4-1 Webフォントを利用する
4-2 リンクを設定する
4-3 ナビゲーションメニューを追加する
4-4 ナビゲーションメニューのリンクを横に並べる

CHAPTER5 サブメニューの見栄えを整える

5-1 サブメニューを追加する
5-2 サブメニューをカード型のデザインにする
5-3 プロフィールの見栄えを整える
5-4 注目記事メニューの見栄えを整える

CHAPTER6 レスポンシブにする

6-1 レスポンシブにする方法
6-2 PC版のレイアウトを設定する準備
6-3 パーツの横幅を調整する
6-4 記事の見栄えを整える
6-5 サイト名とナビゲーションメニューを両端に並べる
6-6 モバイル版とPC版のレイアウトを切り替える
6-7 より大きい画面での見栄えを整える
6-8 テキストの自動拡大機能を無効化する

CHAPTER7 トップページを作成する

7-1 トップページの作成
7-2 ブロックとパーツを追加する
7-3 ヒーローイメージの画像を表示する
7-4 ヒーローイメージのテキストの見栄えを整える
7-5 リンクをボタンの形にする
7-6 記事一覧の記事を2列に並べたレイアウトにする
7-7 トップページをレスポンシブにする

CHAPTER8 テーブルとフォームを作成する

8-1 テーブルを作成する
8-2 投稿フォームを作成する
8-3 投稿フォームの見栄えを整える

APPENDIX A IE11対応について
APPENDIX B 文法チェック
APPENDIX C HTML5とCSS3の標準規格
APPENDIX D サイトを公開する
APPENDIX E テキストエディタ
APPENDIX F 画像編集ツール

この書籍の購入

  • Amazonで購入する