MdNCORPORATION

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

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

原 一宣。 著/こもり まさあき 監修/赤間 公太郎 著
定価 2,750円
(本体 2,500円+税10%)
※電子書籍の価格は各販売ストアにてご確認ください。
発売日 2013-09-20
仕様 B5判/264P
ISBN 978-4-8443-6365-1
HTML5+CSS3を使ったWebサイト制作の方法を学ぶための入門書です。12章構成で、インターネットとWebサイトの仕組みに始まり、サイト制作の基本知識、HTMLによるマークアップ方法、CSSによる装飾・レイアウトの技法を、ゼロからやさしく解説しています。最終章では、実際の制作業務でよくある構成の企業サイトの作り方を扱った実践的な内容です。また、HTML5を使ったマークアップを中心に解説しながら、従来バージョンでの作り方についても可能な限り盛り込みました。 本書の一番の特長は、HTMLとCSSの使い方、サイトの作り方を説明するだけではなく、「なぜ、そう作るのか?」といった「背景」や「理由」にも踏み込んで解説している点です。インターネットやWebの世界は、新しい技術や手法が次々と登場してきますが、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 リセットCSSとノーマライズCSS
05 Webサイト制作で使う単位

------------------------------------------------------------
Lesson 3 HTMLでページの骨格をつくる
------------------------------------------------------------
01 head要素とbody要素
02 head要素の書き方
03 body要素で使われる2 種類の要素の性質
04 HTMLにCSSを組み込む
05 ページの情報を伝えるmeta要素
06 Webページの背景を指定する

------------------------------------------------------------
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 画像の初期設定を決める
05 画像にリンクを設定する
06 画像リンクをロールオーバーで切り替える

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

------------------------------------------------------------
Lesson 8 ナビゲーションをつくる
------------------------------------------------------------
01 ナビゲーションの役割を考える
02 ナビゲーションの基本形
03 ナビゲーションを横並びにして左右の配置を整える
04 リンクエリアを広げる
05 ナビゲーションに画像を使う
06 ボタン画像をロールオーバーさせる
07 下層ページをメニュー表示するドロップダウンメニュー
08 さまざまなナビゲーション
09 パンくずナビゲーションを考える
10 縦並びのナビゲーションをつくる

------------------------------------------------------------
Lesson 9 フォームをつくる
------------------------------------------------------------
01 フォームの仕組みと構成するパーツ
02 フォームを使いやすく工夫する
03 フォームをマークアップする要素
04 HTML5で強化されたtype属性
05 CSSでリッチなフォームにする

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

------------------------------------------------------------
Lesson 11 HTML5+CSS3への対応
------------------------------------------------------------
01 HTML5で変わったこと
02 HTML5で新しく加わった要素と廃止された要素
03 ページのセクショニングに関連する要素
04 HTML5 を古いブラウザで表示するには?
05 CSS3 で加わったプロパティ
06 角丸やグラデーション、シャドウの指定方法
07 HTML5で追加された疑似要素
08 CSS3を古いブラウザで表示するには?
09 複雑なグラデーションを簡単に表現する

------------------------------------------------------------
Lesson 12 実践編:企業サイトをつくる
------------------------------------------------------------
01 コーディングに入る前の準備
02 トップページをつくる
03 HTMLテンプレートを作成する
04 「最新情報」ページをつくる
05 「業務内容」ページをつくる
06 「会社案内」ページをつくる
07 「お問い合わせ」ページをつくる

用語索引

ダウンロードデータ

HTML5+CSS3の新しい教科書 基礎から覚える、深く理解できる。
サンプルデータダウンロード


このたびは、『HTML5+CSS3の新しい教科書 基礎から覚える、深く理解できる。』をご購入いただきまして、誠にありがとうございます。
以下に、本書のLesson12(239~260ページ)の解説で使用したサンプルデータを用意しましたのでご利用ください。


Lesson12.zip(0.2MB)


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

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

Windows、Macそれぞれの解凍ソフトを使って圧縮ファイルを解凍してください。
解凍したフォルダ内には、Lesson12の解説で使用したサンプルの完成データが収録されています。
フォルダ内に「readme.html」が同梱されていますので、ご使用の前に必ずお読みください。


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

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

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


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

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

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

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

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

お詫びと訂正

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

 お詫びと訂正のお知らせ



この度は『HTML5+CSS3の新しい教科書 基礎から覚える、深く理解できる。』をご購入いただきまして、誠にありがとうございます。

本書の解説内容に誤りがございました。
修正したPDFを用意させていただきましたので、ご利用いただけますようお願い申し上げます。

 修正PDFのダウンロード
teisei_6365.pdf(2.6MB)



修正内容は以下の通りです。

------------------------------

●50ページ:側注POINT

●71ページ:【図1】の上段右【CSS】のソースコード内にある赤字の番号

●139ページ:【図2】のソースコード

以上を2刷で修正いたしました。

------------------------------

●42ページ:【図3】ソースコード 1行目に「」を追加

●45ページ:【図2】ソースコード 下から3行目に「

」を追加

●73ページ:【図2】ソースコードを修正

●215ページ:【図3】キャプション
【誤】XHTML1.0 → 【正】HTML5

以上を3刷で修正いたしました。

------------------------------

●104ページ:本文 最終行
【誤】tex-decorationプロパティ → 【正】text-decorationプロパティ

●127ページ:本文 8行目
【誤】outeline → 【正】outside

●244ページ:本文 最終行
【誤】head要素 → 【正】header要素

●245ページ:【図3】キャプション
【誤】head要素→【正】header要素

以上を4刷で修正いたしました。

------------------------------

●37ページ:【図2】フォルダ階層を修正

●104ページ:「疑似クラスの指定とリンク装飾の注意点」 本文7行目
【誤】「:focus」、「:active」の順で → 【正】「:active」、「:focus」の順で

●104ページ:WHY? 下から2行目
【誤】:focus、:active → 【正】:active、:focus

以上を5刷で修正いたしました。



ご迷惑をおかけいたしまして誠に申し訳ございません。
訂正してお詫びいたします。



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

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