Web制作の基本中の基本である「HTML/CSS」。
PHPやRuby、JavaScriptなどもあれど、結局はWebサイトはHTMLとCSSで表示されています。
Web上でコンテンツを公開・開発するなら、一定以上の知識は必須といえるのがこのHTML/CSS。
Web制作でも、Webデザイナーでも、ブロガーでも、すなわちWebに関わる人全てが知っておきたい「HTML/CSS」、そのの参考書を人気/評価とともに紹介していきまっす。
発売したて・発売予定の新書をピックアップ
技術書は情報の鮮度も重要、人気ランキングの前に新しい書籍もチェックしておきましょう。
- 2024/01/07発売 「1. CSSスタイリング入門: 初心者向けガイド: 基本的なCSSプロパティの理解とスタイリングの基本」
- 2024/01/26発売 「Tailwind CSS実践入門」
- 2024/02/22発売 「改訂第3版 例題30＋演習問題70でしっかり学ぶ HTML＋CSS標準テキスト」
- 2024/03/02発売 「1冊ですべて身につくHTML & CSSとWebデザイン入門講座［第2版］ (１冊ですべて身につく)」
- 2024/03/06発売 「基礎から学ぶ Tailwind CSS」
HTML/CSS本「人気ランキング」
HTML/CSSの今売れ筋本を人気ランキングで一覧したのが以下。
ランキングは日々更新されていますので、最新の人気が反映されています。
(2025/01/22 12:04 更新)
| Rank | 製品 | 価格 |
|---|---|---|
1 |  | |
2 |  | |
3 |  | |
4 |  | |
5 |  | |
6 |  | |
7 |  | |
8 |  | |
9 |  できるポケット Web制作必携 HTML&CSS全事典 改訂版 HTML Living Standard & CSS3/4対応 できるポケッ... 発売日 2020/02/14 加藤善規, できるシリーズ編集部 (インプレス) Kindle Unlimited対象 総合評価 | |
10 |  | |
11 |  できるホームページHTML&CSS入門 Windows 10/8.1/7対応 できるシリーズ... 発売日 2017/02/17 佐藤 和人, できるシリーズ編集部 (インプレス) Kindle Unlimited対象 総合評価 | |
12 |  これ1冊でゼロから学べる Webプログラミング超入門 ーHTML,CSS,JavaScript,PHPをまるごとマスター... 発売日 2016/07/29 掌田 津耶乃 (マイナビ出版) Kindle Unlimited対象 総合評価 | |
13 |  HTML教科書 HTML5プロフェッショナル認定試験 レベル1 スピードマスター問題集 Ver2.5対応... 発売日 2022/12/07 株式会社富士通ラーニングメディア, 抜山 雄一, 七條 怜子, 結城 陽平 (翔泳社) 総合評価 | |
14 |  | |
15 |  | |
16 |  | |
17 |  | |
18 |  | |
19 |  | |
20 |  HTML5＋CSS3の新しい教科書 改訂新版 基礎から覚える、深く理解できる。... 発売日 2018/08/27 赤間 公太郎, 原 一宣。 (エムディエヌコーポレーション（MdN）) Kindle Unlimited対象 総合評価 |
以降でおすすめ・注目の本をピックアップしていきまっす。
ちなみに、Kindle版のある本ならサンプル送信で試し読み可能。大概目次まで見れるので、内容の概要もつかめるので、サンプル試読おすすめです。
基礎から学ぶ！「HTML/CSSおすすめの入門書」
Web制作未経験かつプログラム未経験の方は、まずは何よりもとっつきやすさや、わかりやすさを重視して、途中で折れないこと、意外と簡単なんだと自信をつけることが重要。
そのため、以下のような読みやすい入門書から初めて見るのがおすすめです。
ちなみにぼくは 「いちばんよくわかるHTML5&CSS3デザインきちんと入門 (Design&IDEA)」 で最初は勉強しました。
スラスラわかるHTML＆CSSのきほん 第2版
ベストセラーが大改訂！
※この電子書籍は、「固定レイアウト型」で配信されております。説明文の最後の「固定レイアウト型に関する注意事項」を必ずお読みください。
4万人が学んだベストセラーが、5年ぶりの大改訂！
小さなサイト作りを通してHTMLとCSSの基礎が学べる入門書の決定版！
第2版ではPCだけでなくスマホやタブレットにも対応したサイトが完成します。
ソースコードは現在のトレンドに合わせ、解説もいっそう丁寧にわかりやすくなりました。
これからWeb制作を始める人にも、HTML/CSSを学び直したい人にもおすすめの、充実の内容です！
最新HTML5.2準拠。Windows/Mac対応
●目次
chapter01 Webサイト制作を始める前に
01 Webサイトとその構成要素
02 Webブラウザの機能と種類 ほか
chapter02 HTMLの基礎
01 HTMLはWebページを制作するための言語
02 HTMLの基本的な書式 ほか
chapter03 制作の準備と基本のHTML
01 Webサイト制作の準備
02 すべてのHTMLで共通するタグ
chapter04 見出し、段落、リスト
01 見出しテキスト
02 テキストの段落 ほか
chapter05 リンクと画像の挿入
01 サイト内リンクと相対パス
02 外部サイトへのリンクと絶対パス
03 画像の表示 ほか
chapter06 2ページ目以降を効率的に作成する
01 index.html以外のファイルの作成
02 段落にテキストと画像を含める
03 テキストを太字にする・改行する ほか
chapter07 CSSの基礎
01 HTMLの「見た目」を整えるCSS
02 CSSの基本的な書式
03 主なセレクタと書き方 ほか
chapter08 CSSでページのスタイルを調整
01 背景色の設定
02 テキスト色、フォントサイズの設定
03 マージン、ボーダー、パディング ほか
chapter09 フロートとテーブルのスタイル
01 テキストの回り込み
02 テーブルの整形 ほか
chapter10 フォームの作成
01 フォームの基礎知識
02 お問い合わせページの概要
03 フォーム全体の親要素 ほか
chapter11 モバイル端末に対応する
01 レスポンシブデザイン
02 ビューポートの設定
03 画像をレスポンシブデザインに対応させる ほか
chapter12 Webサイトの公開
01 Webサイト公開までの準備
02 Webサーバーに接続 ほか
固定レイアウト型に関する注意事項（必ずお読みください）
この電子書籍は、全ページ画像の「固定レイアウト型」で配信されております。以下の点にご注意し、購入前にプレビュー表示をご確認の上、ご購入ください。
■使用できない機能
・文字拡大（ピンチイン・ピンチアウトは可能ですが、画面におさまらない場合は画面をスワイプ）／文字のコピー／マーク／ハイライト／文字列検索／辞書の参照／Web検索／引用
■推奨環境
・タブレットなど大きいディスプレイを備えた端末
・Wi-Fiネットワーク経由でのダウンロード（Kindle端末の場合）
※この電子書籍は、「固定レイアウト型」で配信されております。説明文の最後の「固定レイアウト型に関する注意事項」を必ずお読みください。
4万人が学んだベストセラーが、5年ぶりの大改訂！
小さなサイト作りを通してHTMLとCSSの基礎が学べる入門書の決定版！
第2版ではPCだけでなくスマホやタブレットにも対応したサイトが完成します。
ソースコードは現在のトレンドに合わせ、解説もいっそう丁寧にわかりやすくなりました。
これからWeb制作を始める人にも、HTML/CSSを学び直したい人にもおすすめの、充実の内容です！
最新HTML5.2準拠。Windows/Mac対応
●目次
chapter01 Webサイト制作を始める前に
01 Webサイトとその構成要素
02 Webブラウザの機能と種類 ほか
chapter02 HTMLの基礎
01 HTMLはWebページを制作するための言語
02 HTMLの基本的な書式 ほか
chapter03 制作の準備と基本のHTML
01 Webサイト制作の準備
02 すべてのHTMLで共通するタグ
chapter04 見出し、段落、リスト
01 見出しテキスト
02 テキストの段落 ほか
chapter05 リンクと画像の挿入
01 サイト内リンクと相対パス
02 外部サイトへのリンクと絶対パス
03 画像の表示 ほか
chapter06 2ページ目以降を効率的に作成する
01 index.html以外のファイルの作成
02 段落にテキストと画像を含める
03 テキストを太字にする・改行する ほか
chapter07 CSSの基礎
01 HTMLの「見た目」を整えるCSS
02 CSSの基本的な書式
03 主なセレクタと書き方 ほか
chapter08 CSSでページのスタイルを調整
01 背景色の設定
02 テキスト色、フォントサイズの設定
03 マージン、ボーダー、パディング ほか
chapter09 フロートとテーブルのスタイル
01 テキストの回り込み
02 テーブルの整形 ほか
chapter10 フォームの作成
01 フォームの基礎知識
02 お問い合わせページの概要
03 フォーム全体の親要素 ほか
chapter11 モバイル端末に対応する
01 レスポンシブデザイン
02 ビューポートの設定
03 画像をレスポンシブデザインに対応させる ほか
chapter12 Webサイトの公開
01 Webサイト公開までの準備
02 Webサーバーに接続 ほか
固定レイアウト型に関する注意事項（必ずお読みください）
この電子書籍は、全ページ画像の「固定レイアウト型」で配信されております。以下の点にご注意し、購入前にプレビュー表示をご確認の上、ご購入ください。
■使用できない機能
・文字拡大（ピンチイン・ピンチアウトは可能ですが、画面におさまらない場合は画面をスワイプ）／文字のコピー／マーク／ハイライト／文字列検索／辞書の参照／Web検索／引用
■推奨環境
・タブレットなど大きいディスプレイを備えた端末
・Wi-Fiネットワーク経由でのダウンロード（Kindle端末の場合）
↓全て表示↑少なく表示
内容サンプル
目次
chapter01 Webサイト制作を始める前に
01 Webサイトとその構成要素
02 Webブラウザの機能と種類
03 Webサイトを公開するまで
04 制作に使うソフトのインストール
chapter02 HTMLの基礎
01 HTMLはWebページを制作するための言語
02 HTMLの基本的な書式
03 親子、子孫、兄弟 ～HTMLの階層関係
chapter03 制作の準備と基本のHTML
01 Webサイト制作の準備
02 すべてのHTMLで共通するタグ
chapter04 見出し、段落、リスト
01 見出しテキスト
02 テキストの段落
03 ナビゲーションの設置
04 番号なしリスト（非序列リスト）
chapter05 リンクと画像の挿入
01 サイト内リンクと相対パス
02 外部サイトへのリンクと絶対パス
03 画像の表示
04 キーボードで入力しにくい文字の表示
05 ページの部分ごとに要素をまとめる
06 class属性
07 コメント文
chapter06 2ページ目以降を効率的に作成する
01 index.html以外のファイルの作成
02 段落にテキストと画像を含める
03 テキストを太字にする・改行する
04 id属性と特定の場所へのリンク
05 テーブル（表）
06 番号付きリスト（序列リスト）
07 CSS適用を考えた要素のグループ化
chapter07 CSSの基礎
01 HTMLの「見た目」を整えるCSS
02 CSSの基本的な書式
03 主なセレクタと書き方
04 CSSを書く場所
05 CSSファイルを作成する
06 HTMLファイルとCSSファイルを関連付ける
chapter08 CSSでページのスタイルを調整
01 背景色の設定
02 テキスト色、フォントサイズの設定
03 マージン、ボーダー、パディング
04 行間の調整
05 リンクテキスト色の変更
06 コンテンツの行揃え
07 ブロック表示／インライン表示の変更
08 背景画像の指定
09 スタイルを上書きする
10 繰り返さない背景画像
11 ページの最大幅の設定
12 ページに固有のスタイルを適用
chapter09 フロートとテーブルのスタイル
01 テキストの回り込み
02 テーブルの整形
03 フレックスボックスで2コラムレイアウト
04 <練習>access.htmlのスタイルを作成しよう
chapter10 フォームの作成
01 フォームの基礎知識
02 お問い合わせページの概要
03 フォーム全体の親要素
04 プルダウンメニュー
05 ラジオボタンとチェックボックス
06 テキストフィールド
07 テキストエリア
08 送信ボタン
09 ラベル
10 フォームのスタイルと属性セレクタ
chapter11 モバイル端末に対応する
01 レスポンシブデザイン
02 ビューポートの設定
03 画像をレスポンシブデザインに対応させる
04 メディアクエリとブレイクポイント
05 ページ全体とナビゲーションのモバイル対応
06 コラムレイアウトの調整
07 フォームの調整
chapter12 Webサイトの公開
01 Webサイト公開までの準備
02 Webサーバーに接続
03 ファイルのアップロード
04 Webサイトの最終確認
01 Webサイトとその構成要素
02 Webブラウザの機能と種類
03 Webサイトを公開するまで
04 制作に使うソフトのインストール
chapter02 HTMLの基礎
01 HTMLはWebページを制作するための言語
02 HTMLの基本的な書式
03 親子、子孫、兄弟 ～HTMLの階層関係
chapter03 制作の準備と基本のHTML
01 Webサイト制作の準備
02 すべてのHTMLで共通するタグ
chapter04 見出し、段落、リスト
01 見出しテキスト
02 テキストの段落
03 ナビゲーションの設置
04 番号なしリスト（非序列リスト）
chapter05 リンクと画像の挿入
01 サイト内リンクと相対パス
02 外部サイトへのリンクと絶対パス
03 画像の表示
04 キーボードで入力しにくい文字の表示
05 ページの部分ごとに要素をまとめる
06 class属性
07 コメント文
chapter06 2ページ目以降を効率的に作成する
01 index.html以外のファイルの作成
02 段落にテキストと画像を含める
03 テキストを太字にする・改行する
04 id属性と特定の場所へのリンク
05 テーブル（表）
06 番号付きリスト（序列リスト）
07 CSS適用を考えた要素のグループ化
chapter07 CSSの基礎
01 HTMLの「見た目」を整えるCSS
02 CSSの基本的な書式
03 主なセレクタと書き方
04 CSSを書く場所
05 CSSファイルを作成する
06 HTMLファイルとCSSファイルを関連付ける
chapter08 CSSでページのスタイルを調整
01 背景色の設定
02 テキスト色、フォントサイズの設定
03 マージン、ボーダー、パディング
04 行間の調整
05 リンクテキスト色の変更
06 コンテンツの行揃え
07 ブロック表示／インライン表示の変更
08 背景画像の指定
09 スタイルを上書きする
10 繰り返さない背景画像
11 ページの最大幅の設定
12 ページに固有のスタイルを適用
chapter09 フロートとテーブルのスタイル
01 テキストの回り込み
02 テーブルの整形
03 フレックスボックスで2コラムレイアウト
04 <練習>access.htmlのスタイルを作成しよう
chapter10 フォームの作成
01 フォームの基礎知識
02 お問い合わせページの概要
03 フォーム全体の親要素
04 プルダウンメニュー
05 ラジオボタンとチェックボックス
06 テキストフィールド
07 テキストエリア
08 送信ボタン
09 ラベル
10 フォームのスタイルと属性セレクタ
chapter11 モバイル端末に対応する
01 レスポンシブデザイン
02 ビューポートの設定
03 画像をレスポンシブデザインに対応させる
04 メディアクエリとブレイクポイント
05 ページ全体とナビゲーションのモバイル対応
06 コラムレイアウトの調整
07 フォームの調整
chapter12 Webサイトの公開
01 Webサイト公開までの準備
02 Webサーバーに接続
03 ファイルのアップロード
04 Webサイトの最終確認
↓全て表示↑少なく表示
Users Voice
内容サンプル
著者略歴
いちばんよくわかるHTML5&CSS3デザインきちんと入門 (Design&IDEA)
これから本気で学びたい人の最高の教科書!
レスポンシブWebデザインが“当たり前"の時代の、新しいHTML・CSSの書き方ガイド
現在のHTML・CSSの書き方は、少し前までのHTML・CSSの書き方とは大きく変わっています。本書ではスマートフォン時代に求められる、HTMLを組むときの考え方からCSSの実践的なテクニックまでをきちんと解説。たくさんのサンプルコードに触れていただくことで、最新の、実践で役立つ力がきちんと身につきます。
<本書の対象読者>
● これからWebサイト制作を学びたい初心者の方
● 最新のHTML・CSSの書き方を知りたい経験者の方
● フレックスボックスを使ったページレイアウトについて知りたい方
レスポンシブWebデザインが“当たり前"の時代の、新しいHTML・CSSの書き方ガイド
現在のHTML・CSSの書き方は、少し前までのHTML・CSSの書き方とは大きく変わっています。本書ではスマートフォン時代に求められる、HTMLを組むときの考え方からCSSの実践的なテクニックまでをきちんと解説。たくさんのサンプルコードに触れていただくことで、最新の、実践で役立つ力がきちんと身につきます。
<本書の対象読者>
● これからWebサイト制作を学びたい初心者の方
● 最新のHTML・CSSの書き方を知りたい経験者の方
● フレックスボックスを使ったページレイアウトについて知りたい方
内容サンプル
目次
CHAPTER 1 Webサイトの仕組みを知ろう
SECTION 1 Webサイトが表示される仕組み
SECTION 2 URL
SECTION 3 Webサイトに使われるファイルの種類
SECTION 4 Webサイトのファイル・フォルダ構造
SECTION 5 Webサイトの制作環境を整えよう
CHAPTER 2 HTMLの基礎知識とマークアップの実践例
SECTION 1 HTMLとは
SECTION 2 HTMLの書式
SECTION 3 HTMLドキュメントの構造
SECTION 4 マークアップの考え方トレーニング
CHAPTER 3 CSSの基礎知識とページデザインの実践例
SECTION 1 CSSの基礎知識
SECTION 2 CSSの書式
SECTION 3 ページにCSSを適用するトレーニング
CHAPTER 4 テキストの装飾
SECTION 1 見出しや本文のフォントサイズを調整する
SECTION 2 読みやすい行間にする
SECTION 3 段落のテキストをリード文だけ太字にする
SECTION 4 表示するフォントを設定する
SECTION 5 テキストの行揃えを変更する
SECTION 6 2行目以降を1文字下げる
SECTION 7 テキスト色を変更する
SECTION 8 見出しにサブタイトルをつける
CHAPTER 5 リンクの設定と画像の表示
SECTION 1 テキストにリンクを追加する
SECTION 2 テキストリンクにCSSを適用する
SECTION 3 画像を表示する
SECTION 4 画像にリンクをつける
SECTION 5 画像にテキストを回り込ませる
CHAPTER 6 ボックスと情報の整理
SECTION 1 インラインボックスとブロックボックス
SECTION 2 箇条書き（リスト）のマークアップ
SECTION 3 リストを情報の整理に使う
SECTION 4 上手な<div>の使い方
SECTION 5 CSSのボックスモデル
SECTION 6 パディング、ボーダー、マージンの設定
SECTION 7 2つ以上のボックスを並べる
SECTION 8 ボックスのデザインを調整する
CHAPTER 7 テーブル
SECTION 1テーブルを作成する
SECTION 2アクセシビリティを考慮したテーブル
SECTION 3 テーブルのデザインバリエーション
CHAPTER 8 フォーム
SECTION 1 フォームとデータを送受信する仕組み
SECTION 2 さまざまなフォーム部品
SECTION 3 標準的なフォームの例
CHAPTER 9 ページ全体のレイアウトとナビゲーション
SECTION 1 実践的なコーディングのために知っておきたいCSSの知識
SECTION 2 シングルコラムレイアウト
SECTION 3 フレックスボックスを使ったコラムレイアウト
SECTION 4 ナビゲーションメニューを作成する
CHAPTER 10 レスポンシブWebデザインのページを作成しよう
SECTION 1 レスポンシブWebデザインとは
SECTION 2 レスポンシブWebデザインのサイトを作る
SECTION 1 Webサイトが表示される仕組み
SECTION 2 URL
SECTION 3 Webサイトに使われるファイルの種類
SECTION 4 Webサイトのファイル・フォルダ構造
SECTION 5 Webサイトの制作環境を整えよう
CHAPTER 2 HTMLの基礎知識とマークアップの実践例
SECTION 1 HTMLとは
SECTION 2 HTMLの書式
SECTION 3 HTMLドキュメントの構造
SECTION 4 マークアップの考え方トレーニング
CHAPTER 3 CSSの基礎知識とページデザインの実践例
SECTION 1 CSSの基礎知識
SECTION 2 CSSの書式
SECTION 3 ページにCSSを適用するトレーニング
CHAPTER 4 テキストの装飾
SECTION 1 見出しや本文のフォントサイズを調整する
SECTION 2 読みやすい行間にする
SECTION 3 段落のテキストをリード文だけ太字にする
SECTION 4 表示するフォントを設定する
SECTION 5 テキストの行揃えを変更する
SECTION 6 2行目以降を1文字下げる
SECTION 7 テキスト色を変更する
SECTION 8 見出しにサブタイトルをつける
CHAPTER 5 リンクの設定と画像の表示
SECTION 1 テキストにリンクを追加する
SECTION 2 テキストリンクにCSSを適用する
SECTION 3 画像を表示する
SECTION 4 画像にリンクをつける
SECTION 5 画像にテキストを回り込ませる
CHAPTER 6 ボックスと情報の整理
SECTION 1 インラインボックスとブロックボックス
SECTION 2 箇条書き（リスト）のマークアップ
SECTION 3 リストを情報の整理に使う
SECTION 4 上手な<div>の使い方
SECTION 5 CSSのボックスモデル
SECTION 6 パディング、ボーダー、マージンの設定
SECTION 7 2つ以上のボックスを並べる
SECTION 8 ボックスのデザインを調整する
CHAPTER 7 テーブル
SECTION 1テーブルを作成する
SECTION 2アクセシビリティを考慮したテーブル
SECTION 3 テーブルのデザインバリエーション
CHAPTER 8 フォーム
SECTION 1 フォームとデータを送受信する仕組み
SECTION 2 さまざまなフォーム部品
SECTION 3 標準的なフォームの例
CHAPTER 9 ページ全体のレイアウトとナビゲーション
SECTION 1 実践的なコーディングのために知っておきたいCSSの知識
SECTION 2 シングルコラムレイアウト
SECTION 3 フレックスボックスを使ったコラムレイアウト
SECTION 4 ナビゲーションメニューを作成する
CHAPTER 10 レスポンシブWebデザインのページを作成しよう
SECTION 1 レスポンシブWebデザインとは
SECTION 2 レスポンシブWebデザインのサイトを作る
↓全て表示↑少なく表示
Users Voice
内容サンプル
著者略歴
↓全て表示↑少なく表示
初心者からちゃんとしたプロになる Webデザイン基礎入門
この商品は固定レイアウトで作成されており、タブレットなど大きいディスプレイを備えた端末で読むことに適しています。また、文字列のハイライトや検索、辞書の参照、引用などの機能が使用できません。
〈電子書籍版に関する注意事項〉
本書は固定レイアウト型の電子書籍です。リフロー型と異なりビューア機能が制限されるほか、端末によって見え方が異なりますので、ご購入前にお使いの端末にて「無料サンプル」をお試しください。
【1日30分からはじめる！ プロを目指す人の新・スタンダード。】
WebデザインやHTML・CSSの学習を「1日30分からはじめる」をテーマに、やさしくしっかり解説した書籍。初学者の方が、プロのWebデザイナーを目指す上で必要となる基本的な知識や技術を体系的に学べます。“ちゃんとしたプロ”のWebデザイナーとしてスタート地点に立つために、最初に選んでいただきたい1冊です。
Webサイトの実制作のフローに沿い、本書の解説では、Webデザインの概論と制作に必要となるツールや素材・配色について学んだあと、HTML・CSSの基礎と実践を習得し、サイトの公開や運用に関する知識を身につけます。HTML・CSSの書き方を初歩から教えるだけにとどまらず、サイトを制作し、公開・運用していくために必要な基本知識をすべて解説しています。
また、各記事ごとに学習時間の目安を記載しており、授業や独習で学習教材として活用しやすい作りを目指しました。HTML・CSSの実践部分でサンプルサイトとして制作するのは、シングルページのシンプルなお店のサイトと、モバイルファーストの手法を取り入れたサイトの2つです。サンプルは学習用データとしてダウンロード提供します。
〈こんな方にオススメ〉
・初学者からプロのWebデザイナーやマークアップエンジニアを目指す方
・Webデザイン制作やHTML・CSSの知識を身につけたい方
・WebデザインやHTML・CSSの基本情報をアップデートしたい方
〈本書の章構成〉
○Lesson1 Webサイトの成り立ち
○Lesson2 Webサイトの枠組みを知る
○Lesson3 Webデザインに必要な素材
○Lesson4 HTMLをマスターする
○Lesson5 CSSをマスターする
○Lesson6 シングルページのサイトを作る
○Lesson7 レスポンシブ対応サイトを作る
○Lesson8 Webサイトを公開してみよう
○Lesson9 SNS連携とWebサイトの運用
〈電子書籍版に関する注意事項〉
本書は固定レイアウト型の電子書籍です。リフロー型と異なりビューア機能が制限されるほか、端末によって見え方が異なりますので、ご購入前にお使いの端末にて「無料サンプル」をお試しください。
【1日30分からはじめる！ プロを目指す人の新・スタンダード。】
WebデザインやHTML・CSSの学習を「1日30分からはじめる」をテーマに、やさしくしっかり解説した書籍。初学者の方が、プロのWebデザイナーを目指す上で必要となる基本的な知識や技術を体系的に学べます。“ちゃんとしたプロ”のWebデザイナーとしてスタート地点に立つために、最初に選んでいただきたい1冊です。
Webサイトの実制作のフローに沿い、本書の解説では、Webデザインの概論と制作に必要となるツールや素材・配色について学んだあと、HTML・CSSの基礎と実践を習得し、サイトの公開や運用に関する知識を身につけます。HTML・CSSの書き方を初歩から教えるだけにとどまらず、サイトを制作し、公開・運用していくために必要な基本知識をすべて解説しています。
また、各記事ごとに学習時間の目安を記載しており、授業や独習で学習教材として活用しやすい作りを目指しました。HTML・CSSの実践部分でサンプルサイトとして制作するのは、シングルページのシンプルなお店のサイトと、モバイルファーストの手法を取り入れたサイトの2つです。サンプルは学習用データとしてダウンロード提供します。
〈こんな方にオススメ〉
・初学者からプロのWebデザイナーやマークアップエンジニアを目指す方
・Webデザイン制作やHTML・CSSの知識を身につけたい方
・WebデザインやHTML・CSSの基本情報をアップデートしたい方
〈本書の章構成〉
○Lesson1 Webサイトの成り立ち
○Lesson2 Webサイトの枠組みを知る
○Lesson3 Webデザインに必要な素材
○Lesson4 HTMLをマスターする
○Lesson5 CSSをマスターする
○Lesson6 シングルページのサイトを作る
○Lesson7 レスポンシブ対応サイトを作る
○Lesson8 Webサイトを公開してみよう
○Lesson9 SNS連携とWebサイトの運用
↓全て表示↑少なく表示
内容サンプル
Users Voice
内容サンプル
脱初心者！「HTML/CSS全体像をしっかり学ぶ書籍」
HTML5&CSS3デザイン 現場の新標準ガイド
HTML5とCSS3をより深く理解し、使いこなしたい人のためのガイドブック
フロントエンドエンジニアの方や、Web制作に関わっていてHTML5/CSS3を使いこなしたい、と思っている人のためのガイドブックです。
思ったようなデザインをどう実現するか、現在の仕様がどのようになっているか、現時点で何に留意して制作を進めていけばよいか、制作の現場で必要不可欠な情報を凝縮しました。
現場でリファレンスとしてぜひ常備しておきたい、「現在」と「これから」の標準をまとめた1冊。
『HTML5スタンダード・デザインガイド』『CSS3 スタンダード・デザインガイド』『これからの「標準」を身につける HTML+CSSデザインレシピ』等でWebの仕様解説に定評のある著者の手による、渾身の最新刊です。
【内容】
Chapter 1 HTML
Chapter 2 Webページの作成とメタデータ
Chapter 3 コンテンツのマークアップ
Chapter 4 CSSの適用
Chapter 5 ボックスのレイアウト
Chapter 6 フレキシブルボックスレイアウト
Chapter 7 グリッドレイアウト
Chapter 8 テーブル
Chapter 9 テキスト
Chapter 10 エンベディッド・コンテンツ
Chapter 11 フォーム
Chapter 12 特殊効果
------------------------
期間限定! 特典PDF付きキャンペーン実施中! !
本書『HTML5&CSS3デザイン 現場の新標準ガイド』をAmazonにて
ご購入いただいた方に、特典PDFをプレゼントします! (Kindle版は対象外)
●特典PDFの申し込み方法や特典の詳細については、
「出版社からのコメント」欄掲載の当該キャンペーン紹介ページにてご確認ください。
当キャンペーンが始まる前に、すでに予約してくださった方もご応募いただけます。
●特典内容紹介
『HTML5&CSS3デザイン 現場の新標準ガイド』要素/プロパティ&ブラウザ対応一覧(PDF)
今回ページ数の都合で入れられなかった「要素/プロパティ&ブラウザ対応一覧」のPDFをプレゼントします。
本文の参照ページも掲載してありますので、書籍と一緒にご活用ください。
この機会をぜひお見逃しなく!
フロントエンドエンジニアの方や、Web制作に関わっていてHTML5/CSS3を使いこなしたい、と思っている人のためのガイドブックです。
思ったようなデザインをどう実現するか、現在の仕様がどのようになっているか、現時点で何に留意して制作を進めていけばよいか、制作の現場で必要不可欠な情報を凝縮しました。
現場でリファレンスとしてぜひ常備しておきたい、「現在」と「これから」の標準をまとめた1冊。
『HTML5スタンダード・デザインガイド』『CSS3 スタンダード・デザインガイド』『これからの「標準」を身につける HTML+CSSデザインレシピ』等でWebの仕様解説に定評のある著者の手による、渾身の最新刊です。
【内容】
Chapter 1 HTML
Chapter 2 Webページの作成とメタデータ
Chapter 3 コンテンツのマークアップ
Chapter 4 CSSの適用
Chapter 5 ボックスのレイアウト
Chapter 6 フレキシブルボックスレイアウト
Chapter 7 グリッドレイアウト
Chapter 8 テーブル
Chapter 9 テキスト
Chapter 10 エンベディッド・コンテンツ
Chapter 11 フォーム
Chapter 12 特殊効果
------------------------
期間限定! 特典PDF付きキャンペーン実施中! !
本書『HTML5&CSS3デザイン 現場の新標準ガイド』をAmazonにて
ご購入いただいた方に、特典PDFをプレゼントします! (Kindle版は対象外)
●特典PDFの申し込み方法や特典の詳細については、
「出版社からのコメント」欄掲載の当該キャンペーン紹介ページにてご確認ください。
当キャンペーンが始まる前に、すでに予約してくださった方もご応募いただけます。
●特典内容紹介
『HTML5&CSS3デザイン 現場の新標準ガイド』要素/プロパティ&ブラウザ対応一覧(PDF)
今回ページ数の都合で入れられなかった「要素/プロパティ&ブラウザ対応一覧」のPDFをプレゼントします。
本文の参照ページも掲載してありますので、書籍と一緒にご活用ください。
この機会をぜひお見逃しなく!
↓全て表示↑少なく表示
内容サンプル
Users Voice
内容サンプル
CSS設計完全ガイド ~詳細解説+実践的モジュール集
CSS設計の考え方と実践法が身につく
CSS設計は多くの現場で導入されていますが、いまだに悩みがつきません。プロジェクトの大小や性質によって最適解も変わってきます。
そこで本書は、CSSのさまざまな設計手法を紹介しつつ、考え方や実践のポイントを明確化します。そのうえでボタン、ラベル、カード、テーブル…といったウェブの定番的なモジュールを網羅的に取り上げ、さらにはそれらの組み合わせ方まで、実践的なコードを紹介します。
代表的な設計手法である「BEM」と、著者が開発した設計手法「PRECSS」によって対比的な解説を加えており、思考をなぞることで最適解が炙り出されることでしょう。
駆け出しのウェブ開発者、フロントエンドエンジニアの方に、ぜひ読んでいただきたい1冊です。
CSS設計は多くの現場で導入されていますが、いまだに悩みがつきません。プロジェクトの大小や性質によって最適解も変わってきます。
そこで本書は、CSSのさまざまな設計手法を紹介しつつ、考え方や実践のポイントを明確化します。そのうえでボタン、ラベル、カード、テーブル…といったウェブの定番的なモジュールを網羅的に取り上げ、さらにはそれらの組み合わせ方まで、実践的なコードを紹介します。
代表的な設計手法である「BEM」と、著者が開発した設計手法「PRECSS」によって対比的な解説を加えており、思考をなぞることで最適解が炙り出されることでしょう。
駆け出しのウェブ開発者、フロントエンドエンジニアの方に、ぜひ読んでいただきたい1冊です。
内容サンプル
目次
------------------------------------------------
Chapter 1 CSSの歴史と問題点
------------------------------------------------
1-1 CSSの始まり
CSSの役割と目的
1-2 CSSの問題点
「カオス」になるCSS
CSSはすべてがグローバルスコープ
1-3 複雑化するWeb開発
変更不可能なHTML/CSSと付き合う
増加するページ数
頻繁に変更される「状態」
1-4 解決策として生まれたCSS設計
1-5 CSS設計とデザインシステムとの連携
------------------------------------------------
Chapter 2 CSS設計の基本と実践
------------------------------------------------
2-1 【CSS設計の前に】CSSの基本 詳細度とセレクター
セレクターの種類と、本書における呼称
カスケーディングの基礎
詳細度の基礎
2-2 【CSS設計の前に】リセットCSS
ブラウザのデフォルトスタイル
ハードリセット系CSS
ノーマライズ系CSS
リセットCSSはCSS設計にどのような影響を及ぼすか？
2-3 【CSS設計の前に】英単語を結合する方式の名前
2-4 よいCSS設計が目指す4つのゴール
予測できる
再利用できる
保守できる
拡張できる
2-5 CSS設計の実践と8つのポイント
1. 特性に応じてCSSを分類する
2. HTMLとスタイリングが疎結合である
3. 影響範囲がみだりに広すぎない
4. 特定のコンテキストにみだりに依存していない
5. 詳細度がみだりに高くない
6. クラス名から影響範囲が想像できる
7. クラス名から見た目・機能・役割が想像できる
8. 拡張しやすい
2-6 モジュールの粒度を考える
改めてモジュールとは
モジュールの粒度のばらつきが引き起こす問題
モジュール粒度の指針
2-7 CSS設計の必要性
------------------------------------------------
Chapter 3 さまざまな設計手法
------------------------------------------------
3-1 本Chapterの前提
3-2 OOCSS
ストラクチャーとスキンの分離
コンテナとコンテンツの分離
OOCSSのまとめ
3-3 SMACSS
ベースルール
レイアウトルール
モジュールルール
ステートルール
テーマルール
SMACSSのまとめ
3-4 BEM
BEMの基本
Blockの基本
Elementの基本
Modifierの基本
Blockのネスト
Mix
Mixでは対処できない場合
Modifier名は省略してはいけない
BEMのその他の命名規則
BEMのまとめ
3-5 PRECSS
基本的な指針
ベースグループ
レイアウトグループ
モジュールグループ
ヘルパーグループ
ユニークグループ
プログラムグループ
オリジナルグループ
PRECSSのまとめ
------------------------------------------------
Chapter 4 レイアウトの設計
------------------------------------------------
4-1 Chapter 4～Chapter 7のコードの前提
使用するリセットCSS
独自に定義したベーススタイル
使用する設計手法
4-2 本Chapterで扱うサンプル
4-3 ヘッダー
①.header__inner / .ly_header_innerに対するスタイリング
4-4 フッター
①ボーダーの実装方法の違い
ヘッダーの内側とフッターの内側のスタイリングは共通化すべきか？
4-5 コンテンツエリア
1カラム設計
2カラム設計
------------------------------------------------
Chapter 5 CSS設計モジュール集① 最小モジュール
------------------------------------------------
5-1 本Chapter以降のモジュール集の進め方
拡張パターンについて
バリエーションについて
BEMとPRECSSの差違について
5-2 最小モジュールの定義
5-3 ボタン
基本形
拡張パターン
バリエーション
5-4 アイコン付き小ボタン
基本形
拡張パターン
5-5 アイコン
基本形
拡張パターン
バリエーション
5-6 ラベル
基本形
拡張パターン
バリエーション
5-7 見出し
基本形
バリエーション
5-8 注釈
基本形
バリエーション
------------------------------------------------
Chapter 6 CSS設計モジュール集② 複合モジュール
------------------------------------------------
6-1 複合モジュールの定義
6-2 メディア
基本形
拡張パターン
バリエーション
6-3 カード
基本形
拡張パターン
6-4 テーブル（水平）
基本形
拡張パターン
6-5 テーブル（垂直）
基本形
6-6 テーブル（交差）
基本形
6-7 ページャー
基本形
6-8 タブナビゲーション
基本形
6-9 CTA
基本形
6-10 料金表
基本形
バリエーション
6-11 FAQ
基本形
6-12 アコーディオン
基本形
6-13 ジャンボトロン
基本形
6-14 ポストリスト
基本形
6-15 順序なしリスト
基本形
拡張パターン
バリエーション
6-16 順序ありリスト
基本形
バリエーション
------------------------------------------------
Chapter 7 CSS設計モジュール集③ モジュールの再利用
------------------------------------------------
7-1 最小モジュールを利用した複合モジュールの作成
水平ボタンリスト
7-2 最小モジュールと複合モジュールの組み合わせ
ボタン + 画像半分サイズメディア
ボタン + CTAエリア
ラベル + ポストリスト
7-3 複合モジュール同士の組み合わせ
FAQ + リスト
アコーディオン + カード + CTAエリア
------------------------------------------------
Chapter 8 CSS設計をより活かすためのスタイルガイド
------------------------------------------------
8-1 スタイルガイドとは
8-2 なぜスタイルガイドが必要か？
8-3 スタイルガイドを作成する
スタイルガイドジェネレーターを使用する
手動で作成する
8-4 スタイルガイドを作成する方針のまとめ
------------------------------------------------
Chapter 9 CSS開発に役立つその他の技術
------------------------------------------------
9-1 CSS開発を効率化する、ミスを減らす
Sass
Browsersync
Autoprefixer
9-2 人による差異をなくす
CSScomb
EditorConfig
Prettier
9-3 リファクタリングのヒントを得る
Stylelint
CSS Stats
9-4 CSSを軽量化する
CSS MQPacker
cssnano
9-5 HTML開発を効率化する
Nunjucks
EJS
Pug
9-6 開発にまつわるタスクを自動処理する
Prepros
Gulp
webpack
Chapter 1 CSSの歴史と問題点
------------------------------------------------
1-1 CSSの始まり
CSSの役割と目的
1-2 CSSの問題点
「カオス」になるCSS
CSSはすべてがグローバルスコープ
1-3 複雑化するWeb開発
変更不可能なHTML/CSSと付き合う
増加するページ数
頻繁に変更される「状態」
1-4 解決策として生まれたCSS設計
1-5 CSS設計とデザインシステムとの連携
------------------------------------------------
Chapter 2 CSS設計の基本と実践
------------------------------------------------
2-1 【CSS設計の前に】CSSの基本 詳細度とセレクター
セレクターの種類と、本書における呼称
カスケーディングの基礎
詳細度の基礎
2-2 【CSS設計の前に】リセットCSS
ブラウザのデフォルトスタイル
ハードリセット系CSS
ノーマライズ系CSS
リセットCSSはCSS設計にどのような影響を及ぼすか？
2-3 【CSS設計の前に】英単語を結合する方式の名前
2-4 よいCSS設計が目指す4つのゴール
予測できる
再利用できる
保守できる
拡張できる
2-5 CSS設計の実践と8つのポイント
1. 特性に応じてCSSを分類する
2. HTMLとスタイリングが疎結合である
3. 影響範囲がみだりに広すぎない
4. 特定のコンテキストにみだりに依存していない
5. 詳細度がみだりに高くない
6. クラス名から影響範囲が想像できる
7. クラス名から見た目・機能・役割が想像できる
8. 拡張しやすい
2-6 モジュールの粒度を考える
改めてモジュールとは
モジュールの粒度のばらつきが引き起こす問題
モジュール粒度の指針
2-7 CSS設計の必要性
------------------------------------------------
Chapter 3 さまざまな設計手法
------------------------------------------------
3-1 本Chapterの前提
3-2 OOCSS
ストラクチャーとスキンの分離
コンテナとコンテンツの分離
OOCSSのまとめ
3-3 SMACSS
ベースルール
レイアウトルール
モジュールルール
ステートルール
テーマルール
SMACSSのまとめ
3-4 BEM
BEMの基本
Blockの基本
Elementの基本
Modifierの基本
Blockのネスト
Mix
Mixでは対処できない場合
Modifier名は省略してはいけない
BEMのその他の命名規則
BEMのまとめ
3-5 PRECSS
基本的な指針
ベースグループ
レイアウトグループ
モジュールグループ
ヘルパーグループ
ユニークグループ
プログラムグループ
オリジナルグループ
PRECSSのまとめ
------------------------------------------------
Chapter 4 レイアウトの設計
------------------------------------------------
4-1 Chapter 4～Chapter 7のコードの前提
使用するリセットCSS
独自に定義したベーススタイル
使用する設計手法
4-2 本Chapterで扱うサンプル
4-3 ヘッダー
①.header__inner / .ly_header_innerに対するスタイリング
4-4 フッター
①ボーダーの実装方法の違い
ヘッダーの内側とフッターの内側のスタイリングは共通化すべきか？
4-5 コンテンツエリア
1カラム設計
2カラム設計
------------------------------------------------
Chapter 5 CSS設計モジュール集① 最小モジュール
------------------------------------------------
5-1 本Chapter以降のモジュール集の進め方
拡張パターンについて
バリエーションについて
BEMとPRECSSの差違について
5-2 最小モジュールの定義
5-3 ボタン
基本形
拡張パターン
バリエーション
5-4 アイコン付き小ボタン
基本形
拡張パターン
5-5 アイコン
基本形
拡張パターン
バリエーション
5-6 ラベル
基本形
拡張パターン
バリエーション
5-7 見出し
基本形
バリエーション
5-8 注釈
基本形
バリエーション
------------------------------------------------
Chapter 6 CSS設計モジュール集② 複合モジュール
------------------------------------------------
6-1 複合モジュールの定義
6-2 メディア
基本形
拡張パターン
バリエーション
6-3 カード
基本形
拡張パターン
6-4 テーブル（水平）
基本形
拡張パターン
6-5 テーブル（垂直）
基本形
6-6 テーブル（交差）
基本形
6-7 ページャー
基本形
6-8 タブナビゲーション
基本形
6-9 CTA
基本形
6-10 料金表
基本形
バリエーション
6-11 FAQ
基本形
6-12 アコーディオン
基本形
6-13 ジャンボトロン
基本形
6-14 ポストリスト
基本形
6-15 順序なしリスト
基本形
拡張パターン
バリエーション
6-16 順序ありリスト
基本形
バリエーション
------------------------------------------------
Chapter 7 CSS設計モジュール集③ モジュールの再利用
------------------------------------------------
7-1 最小モジュールを利用した複合モジュールの作成
水平ボタンリスト
7-2 最小モジュールと複合モジュールの組み合わせ
ボタン + 画像半分サイズメディア
ボタン + CTAエリア
ラベル + ポストリスト
7-3 複合モジュール同士の組み合わせ
FAQ + リスト
アコーディオン + カード + CTAエリア
------------------------------------------------
Chapter 8 CSS設計をより活かすためのスタイルガイド
------------------------------------------------
8-1 スタイルガイドとは
8-2 なぜスタイルガイドが必要か？
8-3 スタイルガイドを作成する
スタイルガイドジェネレーターを使用する
手動で作成する
8-4 スタイルガイドを作成する方針のまとめ
------------------------------------------------
Chapter 9 CSS開発に役立つその他の技術
------------------------------------------------
9-1 CSS開発を効率化する、ミスを減らす
Sass
Browsersync
Autoprefixer
9-2 人による差異をなくす
CSScomb
EditorConfig
Prettier
9-3 リファクタリングのヒントを得る
Stylelint
CSS Stats
9-4 CSSを軽量化する
CSS MQPacker
cssnano
9-5 HTML開発を効率化する
Nunjucks
EJS
Pug
9-6 開発にまつわるタスクを自動処理する
Prepros
Gulp
webpack
↓全て表示↑少なく表示
Users Voice
内容サンプル
著者略歴
↓全て表示↑少なく表示
サイトデザインのお手本に「デザイン参考書・レシピ本」
HTML5 & CSS3 デザインレシピ集
本書は、HTML5とCSS3によるWebサイト制作のための"おいしい"レシピ集です。
制作の現場で使われる定番テクニックから、プロ技まで余すところなく集めました。
テキスト/リスト/リンク/画像/ボックス/
テーブル/フォーム/ナビゲーション/
レイアウト/レスポンシブWebデザイン…
テーマ別にレシピを整理しているので、引きやすくなっています。
「あのデザインはどう作るんだろう?」が、スグにわかります。
デザイナーからWebプログラマーまで、Web制作に携わるすべての方にお届けします。
制作の現場で使われる定番テクニックから、プロ技まで余すところなく集めました。
テキスト/リスト/リンク/画像/ボックス/
テーブル/フォーム/ナビゲーション/
レイアウト/レスポンシブWebデザイン…
テーマ別にレシピを整理しているので、引きやすくなっています。
「あのデザインはどう作るんだろう?」が、スグにわかります。
デザイナーからWebプログラマーまで、Web制作に携わるすべての方にお届けします。
内容サンプル
目次
ＨＴＭＬ
ＣＳＳの基礎
ページの基本となるＨＴＭＬ
テキストの整形とデザインテクニック
リストのデザインテクニック
リンクと画像のテクニック
ページ全体に適用するデザインのテクニック
ボックスの整形とデザインテクニック
テーブルのデザインテクニック
フォームのデザインテクニック
メタデータと外部サイトとの連携テクニック
パーツ作成のテクニック
ナビゲーションのデザインテクニック
レイアウトのテクニック
レスポンシブＷｅｂデザインに対応するテクニック
アニメーションとエフェクトのテクニック
ＣＳＳの基礎
ページの基本となるＨＴＭＬ
テキストの整形とデザインテクニック
リストのデザインテクニック
リンクと画像のテクニック
ページ全体に適用するデザインのテクニック
ボックスの整形とデザインテクニック
テーブルのデザインテクニック
フォームのデザインテクニック
メタデータと外部サイトとの連携テクニック
パーツ作成のテクニック
ナビゲーションのデザインテクニック
レイアウトのテクニック
レスポンシブＷｅｂデザインに対応するテクニック
アニメーションとエフェクトのテクニック
↓全て表示↑少なく表示
Users Voice
内容サンプル
著者略歴
狩野祐東（カノウスケハル）
アメリカ・サンフランシスコでＵＩデザイン理論を学ぶ。帰国後会社勤務を経てフリーランス。２０１６年に株式会社Ｓｔｕｄｉｏ９４７を設立。Ｗｅｂサイトやアプリケーションのインターフェースデザイン、インタラクティブコンテンツの開発を数多く手がける。各種セミナーや研修講師としても活動中（本データはこの書籍が刊行された当時に掲載されていたものです）
アメリカ・サンフランシスコでＵＩデザイン理論を学ぶ。帰国後会社勤務を経てフリーランス。２０１６年に株式会社Ｓｔｕｄｉｏ９４７を設立。Ｗｅｂサイトやアプリケーションのインターフェースデザイン、インタラクティブコンテンツの開発を数多く手がける。各種セミナーや研修講師としても活動中（本データはこの書籍が刊行された当時に掲載されていたものです）
HTML5/CSS3モダンコーディング: フロントエンドエンジニアが教える3つの本格レイアウト スタンダード・グリッド・...
HTML5/CSS3モダンコーディング: フロントエンドエンジニアが教える3つの本格レイアウト スタンダード・グリッド・シ
(著)吉田 真麻
発売日 2015/11/01
(著)吉田 真麻
発売日 2015/11/01
総合評価
（2025/01/11 12:04時点）
フロントエンドエンジニアから学ぶ制作現場の実践的なテクニック!
本書は、HTML5/CSS3を使ってモダンなサイトを制作するためのコーディングテクニックをハンズオン形式で学ぶ書籍です。現在主流なWebページのデザインスタイル、「スタンダードレイアウト」「グリッドレイアウト」「シングルページレイアウト」を適用した3つのサイトを作りながら、各スタイルの特徴や使い分け、コーディングテクニックを学びます。実際のWeb 制作の現場と同様に、サイトのデザインを基にして骨格を見極め、枠組みから中身までひと通りコーディングするというフローをなぞることで、HTML5/CSS3の実用的なコーディングスキルやテクニックを無理なく身につけることができます。3つのサイトを作成することで、「本格的なレイアウトのサイトを作れた」「こういったレイアウトの場合こうコーディングすればいいという具体的なテクニックがわかった」というような手応えを得やすく、学ぶことへのモチベーションが下がらずに高まる構成にしています。駆け出しのフロントエンドエンジニアや、HTML/CSSコーディングに興味はあっても実践の機会がないデザイナー、バックエンドエンジニアなどが、実際にサイトを作ることを通してスキルアップすることを目標とした一冊です。
本書は、HTML5/CSS3を使ってモダンなサイトを制作するためのコーディングテクニックをハンズオン形式で学ぶ書籍です。現在主流なWebページのデザインスタイル、「スタンダードレイアウト」「グリッドレイアウト」「シングルページレイアウト」を適用した3つのサイトを作りながら、各スタイルの特徴や使い分け、コーディングテクニックを学びます。実際のWeb 制作の現場と同様に、サイトのデザインを基にして骨格を見極め、枠組みから中身までひと通りコーディングするというフローをなぞることで、HTML5/CSS3の実用的なコーディングスキルやテクニックを無理なく身につけることができます。3つのサイトを作成することで、「本格的なレイアウトのサイトを作れた」「こういったレイアウトの場合こうコーディングすればいいという具体的なテクニックがわかった」というような手応えを得やすく、学ぶことへのモチベーションが下がらずに高まる構成にしています。駆け出しのフロントエンドエンジニアや、HTML/CSSコーディングに興味はあっても実践の機会がないデザイナー、バックエンドエンジニアなどが、実際にサイトを作ることを通してスキルアップすることを目標とした一冊です。
↓全て表示↑少なく表示
内容サンプル
目次
PART0 イントロダクション
A 本書で作成するサイト
B コーディングの進め方
C デベロッパーツールの使い方
D 本書の読み方
PART1 スタンダードレイアウト
01 このPARTで作るサイト
02 ベースのコーディング
03 ヘッダーのコーディング
04 メイン領域のコーディング
05 サイドメニューのコーディング
06 フッターのコーディング
PART2 グリッドレイアウト
07 このPARTで作るサイト
08 ベースのコーディング
09 ボックスのコーディング
10 中ボックスと大ボックスのコーディング
11 ナビゲーションのコーディング
PART3 シングルページレイアウト
12 このPARTで作るサイト
13 ベースのコーディング
14 ヘッダーのコーディング
15 セクション1（ABOUT ME）のコーディング
16 セクション2（WORKS）のコーディング
17 セクション3（MY SKILLS）のコーディング
18 セクション4（CONTACT）とフッターのコーディング
19 スマートフォン対応の下準備
20 スマートフォン対応のコーディング
A 本書で作成するサイト
B コーディングの進め方
C デベロッパーツールの使い方
D 本書の読み方
PART1 スタンダードレイアウト
01 このPARTで作るサイト
02 ベースのコーディング
03 ヘッダーのコーディング
04 メイン領域のコーディング
05 サイドメニューのコーディング
06 フッターのコーディング
PART2 グリッドレイアウト
07 このPARTで作るサイト
08 ベースのコーディング
09 ボックスのコーディング
10 中ボックスと大ボックスのコーディング
11 ナビゲーションのコーディング
PART3 シングルページレイアウト
12 このPARTで作るサイト
13 ベースのコーディング
14 ヘッダーのコーディング
15 セクション1（ABOUT ME）のコーディング
16 セクション2（WORKS）のコーディング
17 セクション3（MY SKILLS）のコーディング
18 セクション4（CONTACT）とフッターのコーディング
19 スマートフォン対応の下準備
20 スマートフォン対応のコーディング
↓全て表示↑少なく表示
Users Voice
内容サンプル
著者略歴
吉田真麻（ヨシダマアサ）
１９９１年生まれ。中学時代に個人のモバイルサイトを作ったことがきっかけでＨＴＭＬ／ＣＳＳコーディングの面白さを知り、高校・大学と学業のかたわら趣味仕事問わず複数のサイト制作を行なう。１９歳の頃から本格的にＷｅｂ制作業に就き、その後ＰＨＰとＪａｖａＳｃｒｉｐｔに出会ってプログラミングに目覚める。現在の活動は主にフロントエンドエンジニアとして、ＨＴＭＬ／ＣＳＳ／ＪａｖａＳｃｒｉｐｔでのシングルページアプリケーションの開発や個人のプロダクト制作、イベント登壇など（本データはこの書籍が刊行された当時に掲載されていたものです）
１９９１年生まれ。中学時代に個人のモバイルサイトを作ったことがきっかけでＨＴＭＬ／ＣＳＳコーディングの面白さを知り、高校・大学と学業のかたわら趣味仕事問わず複数のサイト制作を行なう。１９歳の頃から本格的にＷｅｂ制作業に就き、その後ＰＨＰとＪａｖａＳｃｒｉｐｔに出会ってプログラミングに目覚める。現在の活動は主にフロントエンドエンジニアとして、ＨＴＭＬ／ＣＳＳ／ＪａｖａＳｃｒｉｐｔでのシングルページアプリケーションの開発や個人のプロダクト制作、イベント登壇など（本データはこの書籍が刊行された当時に掲載されていたものです）
↓全て表示↑少なく表示
HTML/CSSの本「新書一覧(2021年、2022年刊行)」
IT技術・プログラミング言語は、最新情報のキャッチアップも非常に重要、すなわち新書は要チェック。
ということで、2020年以降に発売したHTML/CSSの本の新書一覧(発売日の新しい順)が以下です。
(2025/01/22 12:04 更新)
| 製品 | 価格 |
|---|---|
 | |
| |
 | |
 | |
 | 980円 |
 | 980円 |
 | 980円 |
 | 980円 |
 | 980円 |
 | 980円 |
 | 980円 |
 | 980円 |
 | 980円 |
 | 980円 |
 | 980円 |
 | 250円 |
 フロントエンドの知識地図—— 一冊でHTML/CSS/JavaScriptの開発技術が学べる本... 発売日 2023/11/24 株式会社ICS 池田 泰延, 西原 翼, 松本 ゆき (技術評論社) 総合評価 | |
 | |
 | 290円 |
 | 1,650円 |
HTML/CSSの本「Kindle Unlimited 読み放題 人気本ランキング」
「Kindle Unlimited」は、Amazonの定額本読み放題サービス。
最近はKindle Unlimitedで読める本もどんどん増えており、雑誌、ビジネス書、実用書などは充実のラインナップ。
以下がKindle Unlimitedで読み放題となるHTML/CSSの本の一覧です。
30日無料体験も可能なので、読みたい本があれば体験期間で無料で読むことも可能です。
(2024/12/28 12:31 更新)
| Rank | 製品 | 価格 |
|---|---|---|
1 |  | 625円 |
2 | できるポケット Web制作必携 HTML&CSS全事典 改訂版 HTML Living Standard & CSS3/4対応 できるポケッ... 発売日 2020/02/14 加藤善規, できるシリーズ編集部 (インプレス) Kindle Unlimited対象 総合評価 | |
3 | できるホームページHTML&CSS入門 Windows 10/8.1/7対応 できるシリーズ... 発売日 2017/02/17 佐藤 和人, できるシリーズ編集部 (インプレス) Kindle Unlimited対象 総合評価 | |
4 | これ1冊でゼロから学べる Webプログラミング超入門 ーHTML,CSS,JavaScript,PHPをまるごとマスター... 発売日 2016/07/29 掌田 津耶乃 (マイナビ出版) Kindle Unlimited対象 総合評価 | |
5 |  | 800円 |
6 |  | 1,100円 |
7 |  RPA=業務自動化ツールの本命 Power Automate Desktop WEB徹底活用: スクレイピング、CSSセレクターなどていねい... 発売日 2021/04/21 技比良 豪 Kindle Unlimited対象 総合評価 | 780円 |
8 | HTML5＋CSS3の新しい教科書 改訂新版 基礎から覚える、深く理解できる。... 発売日 2018/08/27 赤間 公太郎, 原 一宣。 (エムディエヌコーポレーション（MdN）) Kindle Unlimited対象 総合評価 | |
9 |  | |
10 |  |
おまけ：本より高コスパ？「UdemyのHTML/CSS動画講座」
UdemyではHTML/CSSを基礎から応用までトータルで学べる学習講座があります。
こちらが、セール時には2千円程度で購入可能で、講座によっては本よりコスパよく学習が可能です。
講座は、買い切り型ながら更新あり、質問可能、30日間返金も可能、という本以上の手厚いサポートがあるのが魅力。
以下の表が、HTML/CSSの学習講座例。セールの場合、かなりおすすめなのでぜひトライしてみください。
Udemyについては、以下のページでも詳しく紹介しているので覗いてみてください。
| 人気 Rank | 学習コース | 評価 |
|---|---|---|
1 |  | 総評価数 13146件 |
2 |  ウェブ開発入門完全攻略コース - HTML/CSS/JavaScript. プログラミングをはじめて学び創れる人へ！... 発売日 2017/11/25 受講者 38,919人 通常 27,800円 現在 27,800円 | 総評価数 6608件 |
3 |  【HTML,CSS,JS,PHP,Git,Docker】プログラミング初心者OK！ ゼロからわかるWebシステム開発... 発売日 2021/07/26 受講者 11,827人 通常 27,800円 現在 27,800円 | 総評価数 1519件 |
4 |  WEBデザイン講座 Level0《対象：ゼロから始める超初心者の方》HTML と CSS に必要な基礎知識を学習します。... 発売日 2020/01/15 受講者 5,011人 通常 8,800円 現在 1,800円 | 総評価数 863件 |
5 |  【2023年最新】【JavaScript＆CSS】ガチで学びたい人のためのWEB開発実践入門（フロントエンド編）... 発売日 2019/12/16 受講者 51,714人 通常 10,000円 現在 1,500円 | 総評価数 7664件 |
関連：Web開発(PHP,JavaScript)系の他の書籍
Web開発のベースであるHTML/CSSの基礎が身についたら、よりリッチな表現が可能になるJavaScript、サーバーバックエンド操作も可能になるPHPを学ぶのがおすすめ。
それによって、表現や扱えるデータなどの幅が広がり、リッチなコンテンツ作りが可能です。合わせて覗いてみてください。
いじょうでっす。
コメント