概要

HTML・CSSの基礎の基礎から1週間でスマホ対応Webページを作れるようになる

想定読者

HTML・CSSの入門書を手に取ったが難しく感じて挫折した経験がある人、またはWebの仕組みから丁寧に順を追って学びたい完全未経験の社会人・学生

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

• すでにHTMLタグやCSSセレクタの基本を把握しており、FlexboxやGridなどモダンCSSを実務で使いこなせる人には内容が平易すぎる
• JavaScriptやReact・Vueなどフロントエンドフレームワークの学習を主目的とする人には本書の射程に含まれない
• Bootstrapを超えたカスタムデザインやレスポンシブデザインの高度な実装を求める人には発展的な内容が不足している

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

• HTMLの文書構造とよく使うタグ(見出し・段落・リンク・画像・リスト・フォーム)を正しく書ける
• CSSセレクタの種類と優先順位を理解し、テキスト・背景・枠線のスタイルを指定できる
• ボックスモデル(margin・padding・border・content)の概念を理解してレイアウトを制御できる
• Flexboxを用いたWebページの基本レイアウトを組むことができる
• Bootstrapを使ってスマートフォン対応のシンプルなWebページを1から作れる
• WebアプリとCMSの違いといったWeb全体の構成概念を説明できる

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

• 第 1 章 最初の一歩 — Webの仕組み・ブラウザとHTMLの関係など前提知識の確認。ここを省略すると後半の概念が宙に浮く
• 第 2 章 HTMLの構造とさまざまなタグ — 見出し・段落・リンク・画像・リスト・テーブルなど頻出タグを網羅する実用度の高い章
• 第 3 章 スタイルシート — CSSセレクタ・プロパティの基礎。指定方法の種類と優先順位を整理する
• 第 4 章 ボックスモデル — margin・padding・borderの相互関係。レイアウト崩れのトラブルシュートに直結する章。ここでつまずく読者が多いため丁寧に読む
• 第 5 章 Webページのレイアウト作成 — Flexboxによるレイアウト設計。実際のページ構成を組み立てる本書の実践パート
• 第 6 章 必須知識とWebサイト制作 — ファイル管理・パス指定・マルチページ構成など、実制作に必要な周辺知識を押さえる
• 第 7 章 WebアプリとCMS・Bootstrapを使ったWebサイト開発 — Bootstrap導入によるスマホ対応ページ完成が本書の最終到達点。CMSの概念紹介も含む

ハイライト

• ＨＴＭＬやＣＳＳの学習書を読んではみたけど、ちょっと難しかった…そんなあなたを「基礎の基礎」から後押しします。本書では１週間で、Ｗｅｂのしくみの理解から、簡単なスマホ対応のＷｅｂページが作れるようになるまでをサポートします。(挫折経験者に向けたポジショニングと到達点が明示されており、本書が誰のための書籍かを端的に示す核心箇所)

編集メモ

Qiita言及記事0件・累計likes 0 / Rakutenランキング情報なし。booklog登録22名・評価3.0/5(4件)のみが確認できた外部指標。入門書カテゴリとして一定の読者層はあるが外部シグナルの蓄積が限定的なため supplementary とする

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

• パソコンの基本操作(ファイルの作成・保存・フォルダ管理)ができること
• Webブラウザ(ChromeやFirefox等)の基本的な使い方を知っていること
• プログラミングや技術的な知識は不要。英数字のタイピングができれば十分

学習のコツ

• 1日1章(Day1〜Day7)のペースで進む設計になっているが、4日目(ボックスモデル)と5日目(レイアウト)はつまずきやすい。この2章はChromeのDevToolsを開きながらコードを実際に確認しつつ進めると理解が格段に定着しやすい
• 7日目のBootstrap章は概念紹介にとどまる部分も多い。スマホ対応の仕組みをより深く理解したい場合はBootstrap公式ドキュメントを同時参照しながら読む
• 本書はWebページを手元で実際に作ることを前提にしている。テキストエディタとブラウザを用意して各章のサンプルを手で打ち込む方が、読むだけより習得が大幅に速い
• 2日目のタグ一覧は辞書的に使えるため、本書を読了した後も実制作時の参照用として手元に置く使い方が実務では有効