Follow #ソシム販売部Twitterアイコン

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

  

フレキシブルボックスで作る 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ページを作る方にも、今どきのページ制作の基礎を学びなおしたいといった方にも、本書を活用していただければ幸いです。

-「はじめに」より

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 画像編集ツール

ダウンロードデータ

本書で解説したサンプルデータをダウンロードできます。
なお、使用方法などに関しては、必ず書籍の該当箇所をご確認の上、ご利用ください。
ダウンロード後、解凍したファイル内に「readme.txt」ファイルなどが含まれる場合は、使用前にこちらもご確認ください。

(zip形式で圧縮してありますので、ダウンロード後展開してください)

正誤情報

お問い合わせ

本書に関するお問い合わせは、下記のボタンをクリックしてお問い合わせフォームよりお問い合わせください。

この書籍を問い合わせる

[ この書籍をシェアする ]

関連する書籍

カテゴリから本を探す

シリーズから本を探す

本を探す