書籍概要

HTML＆CSSとWebデザインが1冊できちんと身につく本
［増補改訂版］

著者
発売日
更新日

概要

＜コンセプト＞PC＆モバイルサイトデザインの基礎力とHTML・CSSコーディングの知識が1冊で同時に身につく！

ウェブ制作を仕事にするならHTMLとCSSを学ぶことから始めますが，本書は体系立てた文法学習よりも，まずは「コーディングとはどのような作業なのか」を理解できる初学者向け入門書です。架空のカフェのショップ紹介＆ネットショップサイトをチュートリアル形式で作成しながら，基本的なHTML要素／CSSの基本構造（セレクタ，プロパティ，値）を学ぶことができ，レイアウトのテクニックやデザイン（Webデザイン＆レスポンシブデザイン）の基本も身につきます。

＜本書のポイント＞
  • チュートリアル学習では，PC版だけでなくウェブ制作の現場でニーズの高いモバイルサイトのデザインがしっかり学べます
  • 定番となったflexbox，displayを使ったレイアウト手法の基礎から実践まで丁寧に解説します
  • 「フルスクリーン」「フレックスボックス」「シングルカラム」「2カラム」「グリッド」の5種類のレイアウトパターンを学習できます
  • 横スクロールするレイアウト，アニメーションで拡大するボタンなど動きのあるサイトづくりも体験できます
  • 「動画コンテンツページ」「ネットショップページ」も制作します
＜綴じ込み特典つき＞

付録①デザインのバリエーションが学べる！「レスポンシブデザインのネタ帖」
付録②インターン，就転職に役立つ！「ポートフォリオ用アレンジのネタ帖」

こんな方におすすめ

  • はじめてHTMLやCSSを学び，これからサイト制作をはじめる方
  • 超初心者ではないが未経験からウェブデザイナーを目指している方
  • モバイル用サイトの制作やデザインについても学びたい方

サンプル

samplesamplesamplesamplesample

目次

Chapter 1　知っておきたいサイトとデザインのきほん知識

  • 1-1　ウェブサイトのしくみについて知ろう
  • 1-2　サイト制作のフローとウェブデザイン
  • 1-3　コーディングについて知っておくべきこと
  • 1-4　ウェブページのパーツやレイアウトについて知ろう
  • 1-5　ウェブデザインで知っておくべきこと

Chapter 2　サイト制作の前に準備しておくこと

  • 2-1　制作環境を整えよう
  • 2-2　Google Chromeのインストールと使い方
  • 2-3　Visual Studio Codeのインストールと使い方
  • 2-4　入力したコードをブラウザで確認する方法
  • 2-5　実習用サンプルサイトを見てみよう

Chapter 3　知っておきたいHTMLのきほんと書き方

  • 3-1　HTMLのきほん知識
  • 3-2　サンプルサイト共通のHTMLを書いてみよう
  • 3-3　見やすいコードとコメントの書き方

Chapter 4　知っておきたいCSSのきほんと書き方

  • 4-1　CSSのきほん知識
  • 4-2　CSSを書いてみよう＜ページの基本設定を記述する＞
  • 4-3　CSSを書いてみよう<レイアウトの詳細を記述する>
  • 4-4　ウェブフォントを指定してみよう

Chapter 5　知っておきたいレスポンシブデザインのきほんと書き方

  • 5-1　レスポンシブデザインのきほん知識
  • 5-2　モバイルサイト用のCSSを書いてみよう
  • 5-3　ハンバーガーメニューを作成しよう
  • 5-4　モバイル用フッターのレイアウトを調整しよう

Chapter 6　フルスクリーンレイアウトを制作する

  • 6-1　フルスクリーンレイアウト制作で学ぶこと
  • 6-2　フルスクリーンレイアウトのHTMLを書いてみよう
  • 6-3　フルスクリーンレイアウトのCSSを書いてみよう
  • 6-4　フルスクリーンレイアウトのモバイル用CSSを書いてみよう

Chapter 7　フレックスボックスレイアウトを制作す

  • 7-1　フレックスボックスレイアウト制作で学ぶこと
  • 7-2　フレックスボックスレイアウトのHTMLを書いてみよう
  • 7-3　フレックスボックスレイアウトのCSSを書いてみよう
  • 7-4　フレックスボックスレイアウトのモバイル用CSSを書いてみよう

Chapter 8　シングルカラムで動画コンテンツページを制作する

  • 8-1　シングルカラムレイアウト制作で学で学ぶこと
  • 8-2　シングルカラムレイアウトのHTMLを書いてみよう
  • 8-3　シングルカラムレイアウトのCSSを書いてみよう
  • 8-4　シングルカラムレイアウトのモバイル用CSSを書いてみよう

Chapter 9　グリッドで格子状レイアウトを制作する

  • 9-1　グリッドレイアウト制作で学ぶこと
  • 9-2　グリッドレイアウトのHTMLを書いてみよう
  • 9-3　グリッドレイアウトのCSSを書いてみよう
  • 9-4　グリッドレイアウトのモバイル用CSSを書いてみよう

Chapter 10　2カラムでショップページを制作する

  • 10-1　2カラムレイアウト制作で学ぶこと
  • 10-2　2カラムレイアウトのHTMLを書いてみよう
  • 10-3　ECサイトへリンクするページのHTMLを書いてみよう
  • 10-4　2カラムレイアウトのCSSを書いてみよう
  • 10-5　2カラムレイアウトのモバイル用CSSを書いてみよう

Chapter 11　Googleマップ付きの問い合わせページを制作する

  • 11-1　問い合わせページ制作で学ぶこと
  • 11-2　問い合わせページのHTMLを書いてみよう
  • 11-3　問い合わせページのCSSを書いてみよう
  • 11-4　問い合わせページのモバイル用CSSを書いてみよう

Appendix　オリジナルのポートフォリオサイトに改変してみよう

<綴じ込み特典>

  • デザインのバリエーションが学べる！「レスポンシブデザインのネタ帖」
  • インターン，就転職に役立つ！「ポートフォリオ用アレンジのネタ帖」

サポート

ダウンロード

サンプルファイルダウンロード

（2024年4月8日更新）

本書のサンプルファイルをダウンロードできます。

サンプルファイルのご利用方法は本書P.7「サンプルファイルのダウンロード」およびP.46「作業フォルダを作成する」をご覧ください。

ダウンロード
ダウンロードサンプルファイル（HTML_CSS_WebDesign2.zip）

「完成サイト」フォルダ内のshop.cssコードの修正に伴い，ダウンロードサンプルファイルも更新しました。コード修正の詳細については，下記の「お詫びと訂正（正誤表）」を参照願います。

【電子版購入者対象】綴じ込み特典ダウンロード

本書（紙版）付属の綴じ込み特典「レスポンシブデザインのネタ帖」「ポートフォリオ用アレンジのネタ帖」は、電子版本体には付属されてません。

電子版ご購入の方は以下から入手できます。ダウンロードには電子版本紙に掲載されているIDとパスワードが必要です。

補足情報

【読者プレゼント】デザインカンプデータの配布

（2024年4月8日更新）

読者の皆様からご要望をいただきましたデザインカンプデータを，著者によるコンテンツサポートサイトにて配布いたします。下記URLよりダウンロードいただけます。

https://web-design.camp/?p=109

初版第1刷および第2刷を購入いただいた読者の皆さまへ

（2022年1月19日更新）

Google Chromeのバージョンアップに伴い，デベロッパーツールの［Responsive］モードの端末もアップデートされました。
本書の該当箇所を，以下に読み替えて学習を進めてください。

  • P.60　STEP.3
    プレビュー表示で選ぶ端末を
    ［iPhone 6/7/8］→［iPhone SE］
  • P.259　STEP.3
    プレビュー表示で選ぶ端末を
    ［iPad］→［iPad Mini］

※端末を変更しても，紙面に掲載した画面表示との差異はありません。

正誤表

本書の以下の部分に誤りがありました。ここに訂正するとともに，ご迷惑をおかけしたことを深くお詫び申し上げます。

（2024年4月8日最終更新）

初版　第5刷までの正誤

P.325　STEP.2の解説と記述するコード

誤 まずは、クラス名「shop-menu」にpositionプロパティで「relative」を指定します。
正 上記文章を削除

上記と併せて，shop.cssの86行目に記述する「position:relative;」も不要となります。

figure1.jpg

執筆時点では，absoluteやfixedと同じように，親要素としてrelativeを指定して基準位置を決める必要があると考えていましたが，これは誤りで，stickyは自動的に直近の親要素が基準となる仕様です。

間違った情報を掲載してしまい大変申し訳ございません。お詫びして訂正いたします。

上記の訂正に伴い，「7.サイドバーをスタイリングする」のSTEPは5までとなります。

また，shop.cssへ記述するコードの入力行も，85行目以降，すべて1行ずつ繰り上がります（P.340「7.フッターの余白を調整する」の入力行まで。shop.cssの総行数は217行から216行となります）。

P.325からP.340までの訂正情報を更新したPDFを用意いたしました。

ご不便をおかけしますが，書籍の当該ページを配布PDFに読み替えていただき，学習を進めてくださいますようお願い申し上げます。

その他，コードの変更により解説を変更する箇所は以下となります。

P.328～P.340に掲載されているVisual Studio Codeの画面

shop.cssの各ステップに対応したエディター画面の行数表示を訂正しました。上記の配布PDFにてご確認ください。

P.330　STEP.6下図の引き出しによる解説

訂正前 コピーしたindex.cssの52～58行を、shop.cssの137～143行にペースト
訂正後 コピーしたindex.cssの52～58行を、shop.cssの136～142行にペースト

P.337　STEP.2本文3～4行目の解説

訂正前 に指定したスタイルと同じなので、168～172行目をコピーしてペーストします。
訂正後 に指定したスタイルと同じなので、167～171行目をコピーしてペーストします。

（以下2023年7月31日更新）

初版　第5刷までの正誤
P.69　「外部ファイルを読み込ませるlink要素」の本文5行目および書式

誤 その際は「rel属性」に「styleseet」と入力し
正 その際は「rel属性」に「stylesheet」と入力し
誤 
<link rel="styleseet" href="./style.css">
正 
<link rel="stylesheet" href="./style.css">

（以下2023年7月25日更新）

P.271　「簡略化した記述で行の高さを設定する」の書式

誤 repeat(［繰り返す回数］, ［列の幅］)
正 repeat(［繰り返す回数］, ［行の高さ］)

初版　第3刷までの正誤
P.327　STEP5のプログラムリスト2行目

誤 
list-style: disc;
正 
list-style-type: disc;

（以下2022年2月25日更新）

初版　第2刷までの正誤
P.75　表「▼sample.htmlへリンクを張る場合の記述方法のパターン」内＞「下の階層のディレクトリ」の「記述方法」

誤 ①<a href=“abc/sample.html”>
②<a href=“abc/def/sample.html”>
正 ①<a href=“./abc/sample.html”>
②<a href=“./abc/def/sample.html”>

商品一覧