書籍概要

HTMLCSSWebデザインが 1冊できちんと身につく本

著者
発売日
更新日

概要

「4つのレイアウトパターン」と「レスポンシブデザイン」を実際に手を動かして作りながらサイト制作の基本が学べる

本書はWeb制作の基礎言語であるHTMLやCSSの書き方だけでなく,多くのWebサイトが採用している4つのレイアウト手法を学ぶことで,1冊を読み終えると各言語の知識とWebデザインの基礎が身につく作りとなっています。Webデザインの新しい手法を積極的に紹介しつつ,実際の制作現場で使われている堅実な手法もバランスよく取り入れ,学習用ではない「現場で役に立つ」実践的なテクニックを数多く盛り込みました。また,Webサイト制作を楽しく学ぶため,サンプルサイトの見映えにもこだわりました(完成後は手を加えて読者のプロフィールサイトとして利用可能)。ライブ感のあるチュートリアル学習により,まるでWebデザイン会社でOJT(オン・ザ・ジョブ・トレーニング)を受けているような体験型の独習書です。サンプルデータのダウンロードサービス付き。

こんな方におすすめ

  • はじめてHTMLやCSSを学び,これからサイト制作をはじめる方
  • 超初心者ではないが未経験からWebデザイナーを目指している方

サンプル

samplesamplesample

目次

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

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

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

  • 2-1 制作環境を整えよう
  • 2-2 Bracketsのインストールと使い方
  • 2-3 Google Chromeのインストールと使い方
  • 2-4 実習用サンプルサイトを見てみよう

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

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

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

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

Chapter5 フルスクリーンページを制作する

  • 5-1 フルスクリーンページ制作で学ぶこと
  • 5-2 フルスクリーンページのHTMLを書いてみよう
  • 5-3 フルスクリーンページのCSSを書いてみよう

Chapter6 シングルカラムページを制作する

  • 6-1 シングルカラムページ制作で学ぶこと
  • 6-2 シングルカラムページのHTMLを書いてみよう
  • 6-3 シングルカラムページのCSSを書いてみよう
  • 6-4 スタイルシートを見なおそう

Chapter7 2カラムページを制作する

  • 7-1 2カラムページ制作で学ぶこと
  • 7-2 2カラムページのHTMLを書いてみよう
  • 7-3 2カラムページのCSSを書いてみよう

Chapter8 グリッドレイアウトページの制作と動画の埋め込み

  • 8-1 グリッドレイアウトページ制作で学ぶこと
  • 8-2 グリッドレイアウトページのHTMLを書いてみよう
  • 8-3 グリッドレイアウトページのCSSを書いてみよう
  • 8-4 YouTube動画を埋め込んでみよう

Chapter9 問い合わせページを制作する

  • 9-1 問い合わせページ制作で学ぶこと
  • 9-2 問い合わせページのHTMLを書いてみよう
  • 9-3 問い合わせページのCSSを書いてみよう

Chapter10 マルチデバイス対応ページを制作する

  • 10-1 マルチデバイスに対応させよう
  • 10-2 レスポンシブデザインの準備をしよう
  • 10-3 レスポンシブデザインのCSSを書いてみよう
  • Appendix ポートフォリオサイトをオリジナルに改変してみよう
  • HTMLタグ/ CSSプロパティ一覧

サポート

ダウンロード

(2017年9月11日更新)

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

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

コード改訂版をアップロードしました。2017年9月10日以前にダウンロードされた方は,再度ダウンロードしていただけますよう,お願いいたします。

ダウンロード
サンプルファイル(HTML_CSS_WebDesign.zip)15,416KB

※収録している画像ファイル(写真)のライセンスは,CC0(Creative Common 0)に基づいています。

正誤表

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

(2017年9月11日最終更新)

P.180 STEP5の本文

この値は、全体の幅である940pxから見出しセルの200pxと、データセルの左右の余白を引いた値です。
この値は、全体の幅である940pxから見出しセルの240pxと、データセルの左の余白40pxを引いた値です。

P.180 STEP6のエディタ(Brackets)の図

誤

正

次の訂正内容と合わせてご確認ください。

P.181 STEP6のソースコード(3行目)訂正


padding: 12px 40px;


padding: 12px 0 12px 40px;

上記訂正箇所を修正した最新版のダウンロードファイルを,2017年9月11日にアップロードいたしました。9月10日以前にダウンロードされた方は再度ダウンロードしてください。


(以下,2017年7月13日更新)

P.243 STEP1のエディタ(Brackets)キャプチャ図

誤


図版の合成時に行番号とコードが1行ずれています。

正


<dd>~</dd>は66行目から72行目の記述となります。

商品一覧