教科書では教えてくれないHTML&CSS

Table of Contents

ページをまるまる1ページ作るなんて、どうやったらいいの？

「HTMLは学んだ。CSSも大丈夫。でもページをまるまる1ページ作るなんて、どうやったらいいの？」

それは、ページを作るための考え方が身についていないからかもしれません。「基本的な文法や知識」と、「実践で役立つコーディング能力」のあいだにある大きなギャップに、この本が橋を架けます。

デザインを見ながらコーディング。実践的な手法を余すところなく紹介

Webデザインの“プロ”を目指すとき、最初の難関になるのは「ゼロからページを作る」こと。一般的なWebデザインでは、デザイナーがデザインを起こし、そのデザインをもとにHTMLコーダーがHTML/CSSをコーディングしてページを完成させるという、デザインからコードへの“翻訳作業”が発生します。しかし、その翻訳作業はこれまで経験に頼ってきた面が多く、初学者がせっかくHTMLやCSSを学んでも、なかなか次のステップに上がれない高い壁として立ちはだかっていました。

本書はその経験の部分を整理・体系化。デザインを見ながらコーディングを進めてページを仕上げる「プロセス」を中心に据え、実践的な能力が身につく、これまでにない、まったく新しい解説書として誕生しました。

考え方を知ることで、応用が利く知識を身につけよう

デザインを見ながらコーディングする流れで進む

本書はデザイン画像（PNG形式、XD形式）を見ながらHTML/CSSコーディングを進め、Webページを作る実践的なストーリーで進行します。まずはデザイン画像を観察して小さなパーツのセットに分割しながら、実現可能なHTML/CSSコードの計画を立てます。

新機能に目が行きがちなCSSですが、ページを作るうえでは基本的なプロパティの使い方も大切になってきます。とくにページ全体のレイアウトに関係するボックス関連のプロパティについては単なる機能説明から一歩踏み込んで、実践的なコーディングで必要となる考え方を詳しく解説しています。

たとえば要素と要素のあいだに空いているスペースをマージンで取るのか、それともパディングで取るのか、論理的に検討します。

ボーダーも同じように。隣接する上の要素の下ボーダーにするのか、下の要素の上ボーダーにするのか、デザインを見ながら考えます。

もちろん背景画像も。どの要素に背景を適用するかはコーディング全体の方針を左右する重要なポイントです。

マージンや背景といったごく標準的なCSSプロパティは、使い方次第でソースコードの品質を左右しますし、コーディングのしやすさも変わってきます。単なる機能説明でなく、どこでどう使うか、そして、なぜそうするのか、実践的なコーディング例で解説。ゼロからHTML/CSSを組めるチカラを養います。

基本的なCSSだけでなく、応用機会の多い小ワザ的CSSも多数紹介。絶対位置指定や要素の上下左右中央揃えなど、最新のコーディングテクニックを紹介しています。

さまざまな局面に対応できる、4ページの作例を用意

ページ作成のベースとなるデザインを4ページ分用意しました。シングルカラムレイアウトからフォームが含まれるページまで、さまざまなレイアウトに触れることができます。すべてレスポンシブデザイン対応でコーディングを進めます。

ゼロからコーディングできる能力は管理しやすい高品質なソースコードへつながる

デザイン画像を見ながらゼロからページ作りをするための考え方は、結果的に管理がしやすく、変更にも強いソースコードを生み出すことにつながります。CMSやフロントエンドフレームワークを使った開発フローにも対応しやすくなるため、WebサイトだけでなくWebアプリケーションの制作にも応用でき、携われるプロジェクトの幅が広がります。古びない、寿命の長いしっかりとした知識を身につけましょう！

教科書では教えてくれないHTML&CSS
狩野祐東著・技術評論社刊
ISBN: 9784297121938
336ページ
発行日：2021年7月30日
32,992円（税込）
amazonで見る（広告）

本書で作成するサンプルデータ

こんな声が届いてます！

HTMLとCSSの実務レベルの作業フローや思考プロセスがていねいに解説された、Web制作に真剣に取り組みたい人にお勧めの本 -教科書では教えてくれないHTML＆CSShttps://t.co/AhnKXJmSQf pic.twitter.com/1YWC7IXlM8

— コリス🍡🍭 (@colisscom) July 30, 2021

https://twitter.com/web_renkon/status/1421295221799751681

#今日の積み上げ【計4h】

✅ CW準備
✅ 教科書では教えてくれない HTML&CSS

コーディングを綺麗にできるようになりたかったので、ずっと気になっていた本を買いました！
今まで曖昧だった部分が丁寧に説明されていてとても勉強になります！買ってよかった😆#駆け出しエンジニアと繋がりたい pic.twitter.com/u8tEI1altx

— やも@デイトラWEB制作 (@tkhrymr) August 18, 2021

💠#今日の積み上げ

◆教科書では教えてくれないHTML&CSS
◆Photoshopトレース

カンプコーディングの手順を学ぶため開始。本日はコンテナ・モジュールの考え方を中心にchapter3まで。先月発売の新刊なので、最新プロパティを使用した解説なのが嬉しい😊👍#Webデザイン勉強中 #プログラミング初心者

— ひろさん (@hirofont) August 23, 2021

著者の狩野祐東さん @deinonychus947 からご恵投いただきました。
「教科書では教えてくれないHTML&CSS」
HTMLのタグを解説する教科書というよりは、「こういうときはこうする」という実践的な逆引きのような解説書です。
プロによる綺麗なデザインを見たい人にオススメ。https://t.co/fnKNMrDHjQ pic.twitter.com/27TYw8oQ7H

— 増井敏克 (@masuipeo) July 16, 2021

1-1 ゼロからWebページを作る「第一歩」
1-2 HTMLの書式と用語
1-3 CSSの書式と用語
1-4 セレクタと優先順位
1-5 ボックスモデル
1-6 すべてのページに共通するテンプレートを作る
1-7 共通テンプレートをレスポンシブデザイン対応にする
1-8 フォントサイズを調整する
1-9 レスポンシブデザインに対応した画像のスタイル

Chapter2 レイアウトの大枠を組み立てる

この章ではデザインを大きなグループに分割してHTMLを書き、大まかなレイアウトを作成します。

2-1 「ゼロ」からWebページを組み立てるには
2-2 コンテナに分割する
2-3 コンテナのHTMLを書く
2-4 コンテナの幅を設定する
2-5 コンテナの幅を設定する〜ヘッダー、パンくずリスト編〜
2-6 上下の空きスペースを調整する
2-7 コンテナに設定する背景、ボーダーライン

Chapter3 メインコンテナを組み立てる

デザインの大まかなレイアウトができあがったら、次は細かい部分をコーディングしていきます。ここではページの主要な部分を対象に、さらに細かいグループに分割して、そのグループごとにコーディングします。ごく基本的なHTMLとCSSからフレックスボックス、displayプロパティの積極的な利用などを取り上げます。

3-1 モジュール
3-2 メインコンテナをモジュールに分割する
3-3 グループ化モジュールの特徴と組み込み
3-4 記事タイトル
3-5 見出しと本文
3-6 Webフォントの使用
3-7 テキストを強調するマーカー
3-8 リスト
3-9 画像
3-10 画像＋キャプション
3-11 画像にテキストを回り込ませる
3-12 タグとカテゴリー
3-13 テキストの先頭にアイコン
3-14 ボックスに背景画像を適用
3-15 ボックスを囲む
3-16 チャット型のデザイン① 〜ボックスを2つ並べる〜
3-17 チャット型のデザイン② 〜ボックスの大きさ調整・並び順の変更〜
3-18 チャット型のデザイン③ 〜要素を円形に切り抜く〜
3-19 タブ付きボックス

Chapter4 ヘッダーを組み立てる

ヘッダー部分を組み立てます。ヘッダーは構造が複雑で、しかもPC向けとモバイル向けとで大きくデザインやレイアウトが異なるケースが多く、コーディングにはある程度高度なテクニックが要求されます。

4-1 ヘッダーは画面サイズでレイアウトが変わる
4-2 ヘッダーをモジュールに分割する
4-3 ロゴとボタンのフレックスボックス構造
4-4 ロゴ
4-5 モバイル向けボタン
4-6 ナビゲーション
4-7 JavaScriptを読み込む
4-8 パンくずリスト

Chapter5 フッターを組み立てる

フッターはヘッダーほど複雑ではありません。フレックスボックスなどを利用しながら、シンプルで効率的なソースコードを書く方法を紹介します。

5-1 フッターはカラムや行揃えの制御がポイント
5-2 フッターをモジュールに分割する
5-3 複数のバナーを並べる
5-4 ボタンを横に並べる
5-5 ページトップへ戻るボタン
5-6 フッターのロゴとコピーライト
5-7 フッターのナビゲーション①
5-8 フッターのナビゲーション②

Chapter6 ホームのページを組み立てる

Webサイトのホームを作成します。複雑なデザイン、レイアウトが多くなるのが特徴で、ポジション配置やグリッドレイアウトなど、さまざまなテクニックを駆使します。

6-1 ホームをコンテナに分割する
6-2 ホームをモジュールに分割する
6-3 ヒーロー画像
6-4 画像に画像を重ねて表示
6-5 キャッチフレーズ
6-6 スタンプ状のテキスト
6-7 カード型レイアウト①〜全体のレイアウト〜
6-8 カード型レイアウト②〜それぞれのカードの中身〜
6-9 メディアオブジェクト
6-10 テーブル形のリスト

Chapter7 カラムレイアウトとサイドバー

2カラムレイアウトのページを作成します。最新機能を使ったカラムレイアウトの作成方法を紹介するほか、サイドバーでよく使われるコーディングテクニックも見ていきます。グリッドレイアウトの高度な使用例も取り上げます。

7-1 2カラムレイアウトのコンテナ
7-2 サイドバーをモジュールに分割する
7-3 カードとバッジ
7-4 記事一覧のリスト
7-5 複数の要素で構成されるボックス

Chapter8 フォームが含まれるページ

フォームを作成します。フォームのHTMLはパターン化できるので、マスターすれば効率的で素早いコーディングができるようになります。

8-1 フォームのページのコンテナ
8-2 フォームをモジュールに分割する
8-3 テキストフィールドとメールアドレスフィールド
8-4 メニューリスト
8-5 テキストエリア
8-6 チェックボックス
8-7 送信ボタン

教科書では教えてくれないHTML&CSS

ページをまるまる1ページ作るなんて、どうやったらいいの？

デザインを見ながらコーディング。実践的な手法を余すところなく紹介