SAGA SITE

夢をプロトタイピング

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

本日の課題図書

「初心者からちゃんとしたプロになる HTML+CSS標準入門 改訂2版」

狙い

  • Webサイト制作でデザインテンプレートを編集するとき、HTMLとCSSの知識は避けて通れない。
  • 今後、Webデザインで詰まることがないように現時点での最新知識を理解しておきたい。

目次

■Lesson1 Webデザインの“いま”

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

■Lesson2 Webサイトを制作する準備

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

■Lesson3 HTMLとCSSの基礎

  • 01 HTMLの基本
  • 02 CSSの基本
  • 03 コンテンツモデルとボックスモデル
  • 04 Webページのセクションを作る
  • 05 画像の配置とさまざまな単位
  • 06 メディアクエリでスタイルを切り替える
  • 07 リンクを作る
  • 08 リストを作る
  • チャレンジしてみよう! ページをマークアップしてみよう

■Lesson4 HTMLとCSSの応用

  • 01 Flexboxによる3カラムのレイアウト
  • 02 背景に関するプロパティを使いこなそう
  • 03 背景画像を使ってメインビジュアルを表示する
  • 04 PC用グローバルナビゲーションをデザインする
  • 05 ハンバーガーメニューを作ろう
  • 06 フッターをデザインする
  • 07 要素を水平方向(横方向)の中央に配置する
  • 08 要素を垂直方向(縦方向)の中央に配置する
  • 09 テーブルをデザインする
  • 10 CSS Gridを使ったレイアウト
  • 11 フォームをデザインする─仕組み編
  • 12 フォームをデザインする─HTML編
  • 13 フォームをデザインする─CSS
  • 14 簡単なアニメーションを取り入れる
  • チャレンジしてみよう! FlexboxとCSS Gridでレイアウトしてみよう

■Lesson5 シンプルなWebページを作る

  • 01 制作現場のワークフロー
  • 02 事前準備と完成形の確認
  • 03 HTMLでマークアップしよう
  • 04 CSSを書いてみよう
  • 05 完成と制作のポイント

■Lesson6 シングルページのサイトを作る

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

■Lesson7 Flexboxを使ったサイトを作る

  • 01 完成形と全体構造を確認しよう
  • 02 HTMLでページの大枠をマークアップする
  • 03 ページの大枠のスタイルを設定する
  • 04 ヘッダーを作り込む(1)モバイル表示
  • 05 ヘッダーを作り込む(2)PC表示
  • 06 メインコンテンツを作り込む(1)
  • 07 メインコンテンツを作り込む(2)
  • 08 フッターを作り込む

■Lesson8 CSS Gridを取り入れる

  • 01 全体構造をつかんで実装方法を検討しよう
  • 02 全体共通のHTML・CSS(1)ページの大枠とCSS Grid
  • 03 全体共通のHTML・CSS(2)ヘッダーとナビゲーション
  • 04 全体共通のHTML・CSS(3)フッター
  • 05 トップページ固有のHTML・CSS
  • 06 Profileページ固有のHTML・CSS
  • 07 Worksページ固有のHTML・CSS

用語索引

出版社

books.mdn.co.jp

著者

栗谷 幸助(くりや・こうすけ) Lesson1・6執筆

福岡県久留米市生まれ。「人と人とを繋ぐ道具」としてのWebの魅力に触れ、1990年代後半にWeb業界へ。Webデザインユニットを結成し、Webの企画・デザイン・サイト運営などを手掛けながら、各地でWeb関連の講師を担当。その後、デジタルハリウッドに所属し、現在はデジタルハリウッド大学・教授として教育・研究活動を行う。

www.dhw.ac.jp

相原 典佳(あいはら・のりよし) Lesson2・3・4執筆

1984群馬県生まれ。2006年よりDTP、Web制作に携わる。Webアシスタントディレクター業務を経たのち、2010年にフリーランスとして独立。また、デジタルハリウッドなどでWeb制作の講師としても活躍。デザインからフロントエンド構築まで、一貫したWebサイト制作を提供している。

https://x.com/noir44_aihara

塩谷 正樹(しおたに・まさき) Lesson7執筆

福岡県出身。'95年3DCGに憧れてデジタルハリウッド・スクールへ。CGや映像制作を経てWebの世界に。各種Webサイトや広告制作を経験し、現在はWebを中心に活動しながら、大学・専門学校ほか、社会人向けのスクールや地域の教育、人材育成活動にも従事。さいたまIT・WEB専門学校で非常勤講師も務める。

www.dhw.ac.jp

中川 隼人(なかがわ・はやと) Lesson5・8執筆

制作会社で15年コーダー/ディレクターとして勤務し、その後、個人事業主として独立して活動中。大規模サイト設計を得意とし、誰にでも、わかりやすく生産性の高いテンプレート設計を得意とする。教育・マネジメントも得意としており、丸一日かけて行う「ライブコーディング」も行っている。

www.monosus.co.jp

www.lancers.jp

感想

著者がデジタルハリウッドの講師陣なので、デジハリで教科書として使われるような本かな?と思いました。

www.dhw.co.jp

Webデザインの基本を学ぶのに、ちょうど良いボリュームの本ではないかと思います。

本書の知識を土台として、必要に応じ他の本の知識も継ぎ足していきたいです。