書籍概要

HTMLCSSWebデザインが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 オリジナルのポートフォリオサイトに改変してみよう

<綴じ込み特典>

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

サポート

ダウンロード

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

(2021年12月21日更新)

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

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

ダウンロード
ダウンロードサンプルファイル(HTML_CSS_WebDesign2.zip)

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

電子版購入者対象に「[綴じ込み特典]デザインのネタ帖(PDF)」を以下から入手できます。ダウンロードには電子版本紙に掲載されているIDとパスワードが必要です。

商品一覧