MdNCORPORATION

初心者からちゃんとしたプロになる HTML+CSS標準入門

おの れいこ 著/栗谷 幸助 著/相原 典佳 著/塩谷 正樹 著/中川 隼人 著
定価 2,750円
(本体 2,500円+税10%)
※電子書籍の価格は各販売ストアにてご確認ください。
発売日 2020-02-26
仕様 B5変形判/320P
ISBN 978-4-8443-6971-4
Webサイトをイチから作ることで、HTML+CSSの基本から応用までを習得していく教科書。

本書は「1日30分からはじめる」をテーマに、Web制作にかかわる知識や技術を解説した「ちゃんとしたプロになる」シリーズの2冊目となります。

本書で学べることは、主に次の3つです。

1つめは、「いま」のWebデザインと現場での実制作の流れ。
いま主流のレイアウトや表現手法、制作技術やツールといった、現場でプロとして活躍するためにベースとなる知識を習得できます。

2つめは、HTMLとCSSの基礎。
HTML・CSSのごく初歩的な書き方から解説しており、本格的なソースコードを書くのは初めてという方にもわかりやすい内容になっています。

そして、3つめが実際にWebサイトを作るノウハウ。
1つのHTMLファイルで完結するシンプルなWebページから、モバイルファーストで設計しFlexboxやCSS Gridといった流行りの手法を取り入れたものまで。タイプや難易度の異なる5つのサイトを作りながら、表現の幅を広げていきます。

本書を通じて、プロとして「独り立ち」するために礎となる力が身につくはずです。

■ページ見本






目次


------------------------------------------------------------
■Lesson 1 Webデザインの“いま”
------------------------------------------------------------
01 「Webデザイン」のこれまでと現在
02 Webサイトは何でできている?
03 Webサイトのベースとなる技術
04 Webページの動的表現を担うJavaScript
05 Webページでのフォントの表示とWebフォント
06 レスポンシブWebデザインの制作手法
07 Webページのレイアウトとその表現手法
08 作業を効率化する技術やツール

------------------------------------------------------------
■Lesson 2 Webサイトを制作する準備
------------------------------------------------------------
01 WebブラウザにWebサイトが表示される仕組み
02 HTMLファイルはどうやって作るの?
03 コーディングに欠かせないテキストエディタ
04 デベロッパーツールを使いこなそう
05 Webサイトの公開にはサーバーが必要

------------------------------------------------------------
■Lesson 3 HTMLとCSSの基礎
------------------------------------------------------------
01 HTMLの基本
02 CSSの基本
03 Webページを作成する/セクションを作る
04 コンテンツモデルとボックスモデル
05 画像の配置とさまざまな単位
06 テキストを画像に回り込ませる
07 メディアクエリでスタイルを切り替える
08 リンクを作る
09 リストを作る
10 PC用グローバルナビゲーションをデザインする
11 テーブルをデザインする

------------------------------------------------------------
■Lesson 4 HTMLとCSSの応用
------------------------------------------------------------
01 Flexboxによる3カラムのレイアウト
02 CSS Gridを使ったレイアウト
03 背景に関するプロパティを使いこなそう
04 要素を重ねて雑誌風レイアウトを作る
05 ホバーで開くグローバルナビゲーションを作ろう
06 フッターをデザインする
07 要素を水平方向(横方向)の中央に寄せる
08 要素を垂直方向(縦方向)の中央に寄せる
09 フォームをデザインする─仕組み編
10 フォームをデザインする─HTML編
11 フォームをデザインする─CSS編
12 ハンバーガーメニューを作ろう
13 簡単なアニメーションを取り入れる

------------------------------------------------------------
■Lesson 5 シンプルなWebページを作る
------------------------------------------------------------
01 制作現場のワークフロー
02 事前準備と完成形の確認
03 HTMLでマークアップしよう
04 CSSを書いてみよう
05 完成と制作のポイント

------------------------------------------------------------
■Lesson 6 シングルページのサイトを作る
------------------------------------------------------------
01 完成形と全体構造の確認
02 HTMLでページの大枠をマークアップする
03 HTMLで各セクションを作り込む
04 CSSでモバイル用のスタイルを指定する
05 CSSでPC用のスタイルを指定する

------------------------------------------------------------
■Lesson 7 Flexboxを使ったサイトを作る
------------------------------------------------------------
01 完成形と全体構造を確認しよう
02 HTMLでページの大枠をマークアップする
03 ページの大枠のスタイルを設定する
04 ヘッダーを作り込む
05 メインコンテンツを作り込む①
06 メインコンテンツを作り込む②
07 フッターを作り込む

------------------------------------------------------------
■Lesson 8 CSS Gridを取り入れる
------------------------------------------------------------
01 全体構造を把握して実装方法を検討しよう
02 全ページで共通する部分のHTMLとCSS
03 トップページ固有のHTMLとCSS
04 ProfileページのHTMLとCSS
05 WorksページのHTMLとCSS

------------------------------------------------------------
■Lesson 9 レスポンシブ対応サイトを作る
------------------------------------------------------------
01 全体構造の確認と共通部分のHTML・CSS
02 ヘッダーとフッターのHTML・CSS
03 トップページのメインビジュアル作成
04 「NEWS」ページの固有部分を作成する
05 「よくある質問」ページの固有部分を作成する

用語索引

ダウンロードデータ

『初心者からちゃんとしたプロになる HTML+CSS標準入門』
サンプルのダウンロードデータ
このたびは『初心者からちゃんとしたプロになる HTML+CSS標準入門』を
ご購読いただきまして、誠にありがとうございます。

以下に、本書のLesson3〜9の解説で使用したサンプルデータをご用意しましたので、ご利用ください。
(Lesson1・2のデータは、はじめから含まれておりません。)


▼サンプルデータ
chan_pro02.zip(約20.8MB)
(2023/9/6 update)


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

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

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

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

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

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

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


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

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

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

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

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

お詫びと訂正

『初心者からちゃんとしたプロになる HTML+CSS標準入門』
お詫びと訂正のお知らせ
このたびは、『初心者からちゃんとしたプロになる HTML+CSS標準入門』をご購入いただきまして、誠にありがとうございます。

本書のLesson4-02(109〜113ページ)の解説内容にあるソースコードに誤りがございました。

CSS GridをIE 11に対応させるためには、ベンダープレフィックスの記述が必要になります。

IE11にはアイテム同士の間隔を指定するgrid-gapが効かないため、画像同士の隙間部分もグリッドの箱として配置する必要があります。そのため、IE11用の記述(-ms-gridcolumnsと-ms-grid-rows)の値に、1つおきにgrid-gap」と同じ数値を記述します。

また、偶数行目、偶数列目はIE11用の隙間を作るための箱になるので、奇数行目、奇数列目に要素を配置します。


以下に修正したPDFを用意させていただきましたので、ご利用いただけますようお願い申し上げます。

○訂正箇所:図2、図3、図4のCSS

○修正PDFのダウンロード:
4-02_teisei.pdf(約1.1MB)

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

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

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