イラスト図解でよくわかる HTMLCSSの基礎知識

書籍の概要

この本の概要

本書はHTML5&CSS3の入門書です。これからHTML&CSSを学ぶ人/学び直したい人を対象に,Webサイトの基礎から実践的な書き方までトコトンわかりやすく解説します。HTMLとCSSの基本的なしくみはもとより,表現の幅を広げる記述方法やレスポンシブWebデザイン対応したページデザインの実践例にまで踏み込んでいます。さらにWebコンテンツの構造やブラウザの対応状況など,Web制作に必要なトピックスも図解しています。HTML5とCSS3を押さえつつ,基礎的な知識やしくみをしっかり習得できる内容です。

こんな方におすすめ

  • これからWebサイトを制作したい方
  • HTMLとCSSを学びたい方/学び直したい方

この書籍に関連する記事があります!

「わかったつもり」になっていませんか?
毎日,スマホやPCからインターネット経由でいろいろなサイトをご覧になっていると思いますが,Webページを表示するために構成されるファイルをご存じでしょうか。

本書のサンプル

本書の一部ページを,PDFで確認することができます。

目次

Chapter 1 Webサイト制作で知っておきたいキーワード

  • 1-1 Webの基本 ~Webページが表示されるしくみ
  • 1-2 ドメイン・IPアドレス・URL ~インターネット上の「住所」
  • 1-3 Webブラウザ ~Webページを閲覧するためのソフトウェア
  • 1-4 ファイルの種類(HTML/CSS/JavaScript…) ~Webページを構成するもの
  • 1-5 SEO ~検索エンジン対策

Chapter 2 HTMLの基本的な仕組みを理解する

  • 2-1 HTMLとは ~Webページの文書構造を表す
  • 2-2 HTMLのバージョン ~HTML5/XHTML/HTML 4.01
  • 2-3 タグ・属性・要素 ~HTMLの基本的な構成要素
  • 2-4 文書情報 ~ページの情報を伝える
  • 2-5 テキスト・リンク ~テキストの意味を表す
  • 2-6 画像 ~ページ上に画像を表示する
  • 2-7 表 ~表(テーブル)を表示する
  • 2-8 フレーム ~Webページを分割する
  • 2-9 フォーム ~文字やファイルを送信する
  • 2-10 リスト ~箇条書きを表示する
  • 2-11 範囲指定 ~コンテンツの範囲を区切る
  • 2-12 スクリプト・スタイルシート ~外部ファイルを読み込む

Chapter 3 HTML5を理解する

  • 3-1 コンテントモデル ~要素の分類方法
  • 3-2 アウトライン ~要素の階層構造
  • 3-3 テキスト要素 ~テキストの意味付けを明確にする
  • 3-4 テーブル ~表の目的や構造を明確にする
  • 3-5 フォーム ~便利になったフォーム入力機能
  • 3-6 マルチメディア ~動画や音声データをシンプルに扱える
  • 3-7 各種API ~アプリケーション作成に便利な機能群

Chapter 4 CSSの基本的な仕組みを理解する

  • 4-1 CSSとは ~コンテンツの表示スタイルを定義する
  • 4-2 CSSの現状 ~ブラウザごとにサポート状況が異なる
  • 4-3 セレクタ/プロパティ/単位 ~CSSの基本的な書式
  • 4-4 ボックスモデル ~要素の表示領域は4層構造の四角形
  • 4-5 スタイルの優先順位 ~どれを優先するかを決める
  • 4-6 テキスト ~フォント・行間・行揃え・改行・影など
  • 4-7 背景 ~背景の色・背景画像を指定する
  • 4-8 ボックス ~マージン・ボーダー・パディング・影・角など
  • 4-9 レイアウト ~コンテンツの配置方法を指定する
  • 4-10 リスト ~リストの表示方法を指定する
  • 4-11 テーブル ~表の表示方法を指定する
  • 4-12 縦書き ~文字表記の方向を指定する
  • 4-13 そのほかのスタイル ~半透明,疑似要素

Chapter 5 CSSで表現の幅を広げる

  • 5-1 セレクタと疑似クラス ~要素を柔軟に指定する
  • 5-2 レイアウト ~ボックスの柔軟な配置と文章の段組み
  • 5-3 グラデーション ~グラデーションを指定する
  • 5-4 図形の変形 ~要素の変形を指定する
  • 5-5 アニメーション ~CSSで動きのあるコンテンツを表現する

Chapter 6 さまざまな端末に対応する

  • 6-1 レスポンシブWebデザインとは ~デバイスごとに最適化されたデザイン
  • 6-2 モバイルファースト ~モバイルユーザーのことを第一に考える
  • 6-3 リキッド/フレキシブル/可変グリッド ~マルチデバイス対応に適したレイアウト
  • 6-4 メディアクエリー ~画面幅に応じてスタイルを切り替える
  • 6-5 Webアクセシビリティ ~いつでも誰でも利用できるための配慮

Appendix

  • A-1 Webサイトの制作環境構築
  • A-2 今後の学習に役立つ書籍/Webサイト

著者プロフィール

中田亨(なかたとおる)

ソフトウェア開発会社にて10数年,プログラマー・システムエンジニアとして勤務。独立後はフリーランスとして,デザイナーの妻と二人三脚でWebサイトの制作やカスタマイズを行う傍ら,WordPressやプログラミングの個人レッスンを開始。出張(関西圏のみ)や,海外在住のWebデザイナーさんへSkypeなどでオンラインレッスンを提供。リクルート社が運営する「おしえるまなべる」にて2015年PCジャンル人気講師1位に選ばれる。現在,ホームページ制作やプログラミングに関する書籍の執筆を中心に活動している。
レッスンサイト:http://codemy-lesson.office-ing.net/


羽田野太巳(はたのふとみ)

監修者
1993年 日本電信電話(株)(NTT)入社。伝送系エンジニアとして通信系インフラの保守運用を経て,通信系SIとして企業通信系システム設計に従事。1999年 NTTぷららに出向,インターネット接続サービスおよびサーバーのシステム運用,サービス企画に従事し,IPTVサービスの立ち上げに携わる。2004年独立後,㈲futomiを設立し,Webシステム開発の傍ら,Webコンサルティングも手がける。HTML5の気運が高まる以前からHTML5の探求を始め,HTML5の普及啓蒙に関わり,HTML5関連書籍や雑誌記事の執筆も行う。2011年 ㈱ニューフォリア取締役(最高技術責任者)に就任し,HTML5/デジタルサイネージ/IoTなどの研究開発を行う。