概要

テンプレートを足がかりに HTML と CSS の基礎を実践的に身につける

想定読者

イラスト・小説・同人活動など創作の場として個人サイトを開設したい人、または HTML や CSS をゼロから学び直したい社会人・学生

こんな人には向いていない

• すでに HTML/CSS の基礎知識があり、レスポンシブレイアウトや CSS Grid の応用まで学びたい人には内容が平易すぎる
• WordPress や Next.js などの CMS やフレームワークを前提とした Web 開発を志す人には対象が異なる
• JavaScript の動的処理や Web アプリ開発を主目的とする人には本書は入口として不十分

読了後にできるようになること

• HTML の基本構造とタグの役割を理解し、自分でマークアップできる
• CSS でレイアウトや配色・フォントを調整し、見た目をコントロールできる
• レスポンシブデザインの概念と実装方法を把握し、スマートフォン対応サイトを構築できる
• 提供テンプレートを改変しながら、自分好みのデザインへカスタマイズする手順を習得できる
• サーバーへのアップロード・公開までのワークフローを理解できる
• 創作・同人サイト固有の構成(作品一覧・プロフィール・更新履歴)の設計パターンを知ることができる

本書のキー概念(章解説)

• 第 1 章 まず知っておきたい Web の基礎知識 — ドメイン・サーバー・ブラウザの役割を整理する導入章。知識ゼロの読者はここから読む
• 第 2 章 サイトの構成とデザインを考える — 公開前の設計フェーズ。どんなページを用意するか、全体構成を先に決める意識を養う
• 第 3 章 サイトの骨格を組む — HTML の基礎を理解する — タグの意味・構造・セマンティクスを丁寧に解説。手を動かしながら覚える主軸章
• 第 4 章 デザインを整える — CSS の基礎を学ぶ — レイアウト・配色・フォント指定を順に学ぶ。テンプレート改変の核となる章
• 第 5 章 便利なツールでサイト制作をもっと楽しく — エディタや画像圧縮ツールなど周辺ツールを紹介。作業効率に直結する実用情報
• 第 6 章 サイト公開までの最終ステップ — FTP アップロードから公開確認まで。ここまで終えれば実際にサイトが世界に出る

ハイライト

• HTMLとCSSについてしっかり解説もしているので、昔の知識を今にアップデートしたい、という人にもピッタリな1冊です(かつて個人サイトを運営していた読者層を具体的に想定している点が本書の独自性を示している)
• 創作・同人サイトのためのテンプレート・プログラム配布・ノウハウ発信メディア『do』を運営する著者が、HTMLとCSSについてやさしく丁寧に解説します(著者が現役の個人サイト支援コミュニティ運営者であることが、実践的なノウハウの裏付けになっている)

編集メモ

Qiita での本書 ISBN 直接言及記事は確認できず(0件)、楽天ランキング情報も取得不可。入力シグナルゼロのため supplementary と判定。ただし著者は創作・同人サイト支援メディア『do』の現役運営者であり、対象読者層における実績は別途評価余地あり

読む前に押さえておきたいこと

• PC の基本操作(ファイル管理・ブラウザ利用)ができれば十分で、プログラミング経験は不要
• テキストエディタのインストール(VS Code などの無料ツールで可)を事前に行っておくと学習開始がスムーズ

学習のコツ

• テンプレートを先にブラウザで開いて動作確認してから、対応する章のコード解説を読むと理解が速い
• 3章(HTML)と4章(CSS)は対を成しているため、片方を飛ばさず交互に手を動かすと定着しやすい
• レスポンシブ対応のコードは完成テンプレートと自分の改変版を並べてデベロッパーツールで比較することで、どの設定がどの表示に影響するか確認できる
• まず1つのテンプレートを完全に自分色にカスタマイズすることを目標にすると、全章を通して学ぶ動機が持続する