MdNCORPORATION

HTML5+CSS3の新しい教科書 改訂新版 基礎から覚える、深く理解できる。

こもり まさあき 監修/赤間 公太郎 著/原 一宣。 著
定価 2,750円
(本体 2,500円+税10%)
※電子書籍の価格は各販売ストアにてご確認ください。
発売日 2018-08-27
仕様 B5判/272P
ISBN 978-4-8443-6783-3
Web制作のプロを目指す方に向けて、HTML5+CSS3を使ったWebサイトの作り方を解説した入門書の改訂版。12章構成で、インターネットとWebサイトの仕組みに始まり、サイト制作現場の基本的な作業フロー、HTMLによるマークアップ方法、CSSによる装飾・レイアウトの技法をていねいに解説しています。最終章では、レスポンシブWebデザインに対応したサンプルサイトを題材に、実際の業務により近い形の制作方法を学ぶことができる実践的な内容です。 本書の一番の特長は、HTMLとCSSの使い方、サイトの作り方を説明するだけではなく、「なぜ、そのように作るのか?」といった「背景」や「理由」にも踏み込んで解説している点です。スマートフォンやタブレットなどの普及により、Web制作の現場はこの数年で新たな転換期を迎えていますが、基本となる知識と技法をきちんと押さえておかなければ、いま・これからの新しい流れに対応することも、それを応用することもできません。本書は、そうした新しい時代にも対応できるような基本知識と応用の効く制作技法を伝えることを目指した本です。

■ページ見本






目次


------------------------------------------------------------
Lesson 1 Webサイトの構造を理解する
------------------------------------------------------------
01 Webサイトが表示される仕組み
02 Webページは何でできている?
03 HTMLの役割とバージョン
04 CSSの機能と役割
05 HTMLを作成するための専用アプリケーション
06 Web制作に利用するアプリケーション
07 Webブラウザの役割と種類
08 Webページの構造を見てみよう

------------------------------------------------------------
Lesson 2 制作に入る前の準備
------------------------------------------------------------
01 Webページができるまでの流れ
02 Webサイトのファイルを整理して格納する
03 ファイルとフォルダのネーミング
04 Webブラウザが持つデフォルトのスタイル
05 Webサイト制作で使う単位

------------------------------------------------------------
Lesson 3 HTMLでページの骨格をつくる
------------------------------------------------------------
01 head要素とbody要素
02 head要素の書き方
03 body要素内に配置される要素の構造と性質
04 HTMLにCSSを組み込む
05 ページの情報を伝えるmeta要素

--------------------------------------------------
Lesson 4 HTML&CSSの基本ルール
--------------------------------------------------
01 HTMLの基本ルール
02 マークアップとはどんなもの?
03 マークアップの実例を見てみよう
04 CSSの基本ルール
05 よく使うセレクタを知る
06 疑似クラスと疑似要素
07 セレクタを使った実例

------------------------------------------------------------
Lesson 5 文字・見出し・段落の設計
------------------------------------------------------------
01 基本になる文字サイズを決める
02 文字の単位はどれを選ぶ?
03 文字の行間を調整する
04 書体を決める
05 文字に色をつける
06 見出しのスタイルとジャンプ率
07 連続した見出しのマージンを効率よく調整する
08 読みやすい段落の設定
09 段落の「字下げ」を表現する
10 文章の両端揃えと字間の調節

------------------------------------------------------------
Lesson 6 リンクと画像の設定
------------------------------------------------------------
01 テキストリンクの色を設定する
02 ブロック別にリンクの色を変える
03 Webサイトで使う画像の形式
04 画像をCSSで装飾する
05 画像にリンクを設定する
06 CSSのみでボタンを作成する

------------------------------------------------------------
Lesson 7 リストとテーブルを組む
------------------------------------------------------------
01 リストはどんな場所で使う?
02 ul 要素とol 要素の使い分け
03 リストマークを変更する
04 複雑なリストを表現する
05 対になる情報をリストで表現
06 テーブルの基本構造
07 表組みにキャプションをつける
08 セルを結合する

------------------------------------------------------------
Lesson 8 ナビゲーションをつくる
------------------------------------------------------------
01 ナビゲーションの役割を考える
02 レスポンシブデザインにおけるナビゲーションの基本
03 Flexboxを使ったナビゲーション
04 リンクエリアを広げる
05 下層ページをメニュー表示するドロップダウンメニュー
06 パンくずナビゲーション

------------------------------------------------------------
Lesson 9 フォームをつくる
------------------------------------------------------------
01 フォームの仕組みと構成するパーツ
02 フォームを使いやすく工夫する
03 フォームをマークアップする要素
04 HTML5で強化されたtype属性
05 フレームワークを利用してフォームを装飾する

------------------------------------------------------------
Lesson 10 Webページをレイアウトする
------------------------------------------------------------
01 ボックスモデルを理解する
02 レイアウトの考え方と設計
03 要素をグループ化する
04 コメントアウトを活用する
05 floatプロパティの性質とclearfixを使うポイント
06 境界線と余白を調整する
07 positionを使ったレイアウト
08 Flexboxを使ったレイアウト

------------------------------------------------------------
Lesson 11 HTML5+CSS3の新機能
------------------------------------------------------------
01 HTML5で新しく加わった機能や要素
02 ページのセクショニングに関連する要素
03 CSS3で加わったプロパティ
04 CSS3で加わった疑似クラス
05 複雑なグラデーションを簡単に表現する
06 フレームワークを利用してWeb制作の効率を上げる

------------------------------------------------------------
Lesson 12 実践編:レスポンシブサイトをつくる
------------------------------------------------------------
01 コーディングに入る前の準備
02 共通化できるHTMLを作成する
03 レスポンシブWebデザインのCSSを記述する
04 トップページをつくる
05 「About」ページをつくる
06 「News」ページをつくる
07 「Contact」ページをつくる


巻末:用語索引

ダウンロードデータ

『HTML5+CSS3の新しい教科書 改訂新版 基礎から覚える、深く理解できる。』
サンプルデータダウンロード
このたびは、『HTML5+CSS3の新しい教科書 改訂新版 基礎から覚える、深く理解できる。』をご購入いただきまして、誠にありがとうございます。
以下に、本書のLesson2〜12の解説で使用したサンプルデータをご用意しましたので、ご利用ください。
(Lesson1のサンプルデータははじめから含まれておりません)

▼サンプルデータ
NewText2_Kaitei.zip(約17MB)


【ダウンロードにあたってのご注意】

ダウンロードファイルは、ZIP形式で圧縮されています。

Windows、Macそれぞれの解凍ソフトを使って圧縮ファイルを解凍してください。
解凍したフォルダ内には、Lesson2〜12の解説で使用しているサンプルのデータが、各記事番号のフォルダに分かれて収録されています。
(Lesson12のデータは、サンプルサイトの完成データと素材データのフォルダに分かれいます。)

フォルダ内に「readme.txt」が同梱されていますので、ご使用の前に必ずお読みください。

【ダウンロードファイル解凍時のご注意】

Windowsをご利用の場合は、ダブルクリックしてもダウンロードファイルを正しく解凍できない場合があります。
リンク画像が表示されないなど、サンプルファイルの閲覧に問題がある場合は、次の手順でファイルの解凍をお試しください。

[1]ダウンロードしたファイルを右クリック
[2]表示されたメニューから[すべてを展開...]を選択
[3]ファイルを解凍するダイアログが表示されるので、保存場所を選択して実行
[4]指定した場所にファイルが解凍される


※弊社Webサイトからダウンロードできるサンプルデータは、本書の解説内容をご理解いただくために、ご自身で試される場合にのみ使用できる参照用データです。その他の用途での使用や配布などは一切できませんので、あらかじめご了承ください。ただしサンプルデータ中に含まれるJavaScriptのプラグインなどの一般に公開されているライブラリ類については、各ライブラリのライセンス条件に従います。

※弊社Webサイトからダウンロードできるサンプルデータの著作権は、それぞれの制作者に帰属します。

※弊社Webサイトからダウンロードできるサンプルデータを実行した結果につきましては、著者および株式会社エムディエヌコーポレーションは一切の責任を負いかねます。お客様の責任においてご利用ください。

※本書に掲載されているHTML、CSS、JavaScriptなどのコメントや改行位置などは、紙面掲載用として加工していることがあります。ダウンロードしたサンプルデータとは異なる場合がありますので、あらかじめご了承ください。

※サンプルのなかには、Webサーバーの機能を利用しているなどの理由から、ローカル環境上では正しく動作しないものがあります。このようなサンプルの場合は、Webサーバ上に設置したうえで機能をお試しください。

制作の基本からデザイン業界の最新状況まで! MdNのデザイン・グラフィック書8選

デザイン・制作・マーケティング Webでもう困らない! わかりやすくて知識が身につく8冊