レシピ集シリーズ改訂新版 HTML&CSSデザインレシピ集

[表紙]改訂新版 HTM

紙版発売

A5判/720ページ

定価3,300円(本体3,000円+税10%)

ISBN 978-4-297-14850-8

電子版

→学校・法人一括購入ご検討の皆様へ

書籍の概要

この本の概要

お待たせしました。あれ,どうやって作るの?がスグわかると評判のHTML & CSSテクニック集,8年ぶりに大幅リニューアルで登場。「フォトギャラリーを作りたい」「ヘッダーを上部に固定したい」といった定番的なネタから,「HTMLだけでアコーディオンを作りたい」「箇条書きのマークを絵文字にしたい」といった"かゆいところ"に手が届くネタまで取りそろえました。他に類を見ない掘り下げかたの解説が好評の理由です。スマホ&PCサイト両対応。オリジナル制作のお伴に,ぜひどうぞ。

こんな方におすすめ

  • Webデザイナー,Webサイト制作者,Webサイト運営者
  • Webプログラマー,Webエンジニア
  • Webサイト,ホームページを作りたい方

本書のサンプル

本書の紙面イメージは次のとおりです。画像をクリックすることで拡大して確認することができます。

サンプル画像1

サンプル画像2

サンプル画像3

サンプル画像4

サンプル画像5

目次

Chapter 1 HTML/CSSの基礎

  • 001 HTMLの基礎知識
  • 002 Webサイトを構成するファイル
  • 003 CSSの基礎知識
  • 004 セレクタについて知りたい
  • 005 プロパティと値の基本を知りたい
  • 006 ボックスモデルについて知りたい
  • 007 CSSが適用される順序を知りたい
  • 008 CSSのネスト記法について知りたい
  • 009 カスタムプロパティ(変数)を利用したい
  • 010 ブラウザの開発ツールを使いたい
  • 011 すべてのページに共通するHTML
  • 012 ページのタイトルと概要を設定したい
  • 013 CSSファイルを読み込みたい
  • 014 CSSをHTMLに直接書きたい
  • 015 CSSをタグに直接書きたい
  • 016 JavaScriptファイルを読み込みたい
  • 017 JavaScriptをHTMLに直接書きたい
  • 018 HTMLにコメントを残したい
  • 019 CSSにコメントを残したい

Chapter 2 テキスト表示・整形の基本テクニック

  • 020 見出しと段落のタグについて知りたい
  • 021 箇条書きタグについて知りたい
  • 022 コンテンツをグループ化するタグを知りたい
  • 023 テキストの一部を囲み,修飾するタグを使いたい
  • 024 「項目」と「関連する値」をまとめたい
  • 025 HTMLで使用できない記号を表示したい
  • 026 テキスト色を変えたい
  • 027 半透明なテキスト色を指定したい
  • 028 要素ごとにフォントサイズを指定したい
  • 029 フォントサイズを相対的に指定したい
  • 030 行間を広くしたい・狭くしたい
  • 031 段落のテキストを太字にしたい
  • 032 イタリックの要素を通常のテキストにしたい
  • 033 テキストの行揃えを変更したい
  • 034 テキストに字消し線を引きたい
  • 035 字消し線のスタイルを設定したい
  • 036 好きな色のマーカーをつけたい
  • 037 段落の前後のスペースをなくしたい
  • 038 段落ごとに字下げ(インデント)したい
  • 039 1文字目だけ大きくしたい
  • 040 1行目だけスタイルを変えたい
  • 041 テキストの前後に記号を挿入したい
  • 042 箇条書きのマークをなくしたい
  • 043 箇条書きのナンバリングを変更したい
  • 044 箇条書きのマークを絵文字にしたい
  • 045 説明リストのレイアウトを変えたい

Chapter 3 リンクとメディアの基本テクニック

  • 046 ほかのページにリンクしたい
  • 047 リンク先を別タブで開くようにしたい
  • 048 ページ内リンクを設定したい
  • 049 ページ内リンクの移動先のスタイルを変えたい
  • 050 ページ内リンクの移動先までスクロールさせたい
  • 051 電話番号をリンクにしたい
  • 052 PDFファイルをダウンロード可能にしたい
  • 053 ボックスにリンクを設定したい
  • 054 リンクテキストのスタイルを設定したい
  • 055 リンクのテキスト色を地のテキスト色と同じにしたい
  • 056 ホバー時にテキストを半透明にしたい
  • 057 リンクの下線のスタイルを変更したい
  • 058 画像を表示したい
  • 059 実サイズとは異なるサイズで画像を表示したい
  • 060 画像を伸縮可能にしたい
  • 061 base64のデータで画像を表示したい
  • 062 SVG形式の画像ファイルを表示したい
  • 063 SVGのデータを直接埋め込みたい
  • 064 アニメーション画像を表示したい
  • 065 画像にリンクをつけたい
  • 066 画像に遅延読み込みの設定をしたい
  • 067 動画を表示したい
  • 068 動画を自動・ループ再生したい
  • 069 音声を再生したい

Chapter 4 ページ全体に適用するデザインのテクニック

  • 070 ウィンドウ外周のマージンをなくしたい
  • 071 ページ全体のフォントを設定したい
  • 072 よく使うCSSの値を変数で管理したい
  • 073 ページ全体の背景色を設定したい
  • 074 ページ全体を背景画像で塗りつぶしたい
  • 075 最低限のリセットCSSを知りたい
  • 076 リセットCSSを適用したい

Chapter 5 ボックスを整形する基本テクニック

  • 077 基本のボックスを作成したい
  • 078 「記事」「セクション」のボックスを作成したい
  • 079 中心的なコンテンツが含まれるボックスを作成したい
  • 080 図とキャプションを表示したい
  • 081 ページ内にほかのHTMLを表示したい
  • 082 ボックスにボーダー(枠線)を引きたい
  • 083 見出しに下線を引きたい
  • 084 ボーダーとコンテンツの間にスペースを作りたい
  • 085 ボックスとボックスの距離を調整したい
  • 086 ボックスの幅と高さを設定したい
  • 087 ボックスを左右中央に配置したい
  • 088 レイアウトのためのボックスの作り方を知りたい
  • 089 幅を指定し,かつスマートフォンの画面に収めたい
  • 090 ボックスの高さを固定して,スクロール可能にしたい
  • 091 ボックスに収まらないコンテンツを非表示にしたい
  • 092 ボックスの幅をコンテンツの幅に合わせたい
  • 093 縦横比を決めてボックスを作成したい
  • 094 ボックスの背景色を設定したい
  • 095 ボックスの背景に画像を適用したい
  • 096 背景に高精細な画像を使用したい
  • 097 ボックスの背景に線状グラデーションをかけたい
  • 098 ボックスの背景に放射状グラデーションをかけたい
  • 099 背景画像を横方向にだけ繰り返したい
  • 100 背景画像を縦方向にだけ繰り返したい
  • 101 背景画像が繰り返さないようにしたい
  • 102 背景画像をボックスの真ん中に表示したい
  • 103 背景画像の表示位置を数値で指定したい
  • 104 ボックスに合わせて背景画像を伸縮させたい
  • 105 複数の背景画像を使いたい
  • 106 ボックスを角丸四角形にしたい
  • 107 ボックスの上半分だけ角を丸くしたい
  • 108 ボックス全体を半透明にしたい
  • 109 ボックスにドロップシャドウをかけたい
  • 110 ボックスの内側にシャドウをつけたい

Chapter 6 テーブルのデザインテクニック

  • 111 テーブルの基本的なHTMLコードを知りたい
  • 112 テーブルに標準的な罫線をつけたい
  • 113 セルを横方向に結合したい
  • 114 セルを縦方向に結合したい
  • 115 テーブル行をヘッダー,ボディ,フッターに分けたい
  • 116 テーブルにキャプションをつけたい
  • 117 セル内のテキストの行揃えを変更したい
  • 118 セル内のコンテンツと罫線の間にスペースを作りたい
  • 119 テーブルの各行に下線を引きたい
  • 120 特定のセルの罫線を調整したい
  • 121 セル内のコンテンツを整列したい
  • 122 セルの幅を固定したい
  • 123 テーブル全体の幅を指定したい
  • 124 セルの幅を均等にしたい
  • 125 見出し行に背景を設定したい
  • 126 テーブルの背景色を奇数行と偶数行で塗りわけたい
  • 127 マウスが重なった行の背景色を変更したい
  • 128 テキストが折り返さないセルを作りたい

Chapter 7 フォームのデザインテクニック

  • 129 フォームの基本的なHTMLを知りたい
  • 130 テキストフィールドを作りたい
  • 131 スタイル調整しやすいフォーム部品を作りたい
  • 132 フォーム部品にラベルをつけたい①
  • 133 フォーム部品にラベルをつけたい②
  • 134 inputタグで作れるフォーム部品を知りたい
  • 135 inputタグ以外のフォーム部品を知りたい
  • 136 必須入力項目にしたい
  • 137 テキストフィールドに入力のヒントを表示したい
  • 138 ラジオボタンを設置したい
  • 139 チェックボックスを設置したい
  • 140 ドロップダウンメニューを設置したい
  • 141 複数の項目を選択できるリストを表示したい
  • 142 テキストエリアを設置したい
  • 143 ファイルをアップロードできるようにしたい
  • 144 数値やレンジに入力できる範囲を指定したい
  • 145 通常の要素を編集可能にしたい
  • 146 送信ボタンを設置したい
  • 147 汎用的なボタンを作成したい
  • 148 最初のフォーム部品を自動で選択したい
  • 149 コピーできるが入力できないフォーム部品を作りたい
  • 150 ドロップダウンメニューの項目をグループ化したい
  • 151 ドロップダウンメニューの項目に区切り線を入れたい
  • 152 テキストフィールド・テキストエリアのスタイルを調整したい
  • 153 テキストフィールドのなかにアイコンを表示したい
  • 154 選択されたフォーム部品のスタイルを変更したい
  • 155 選択されたフォーム部品のラベルを太字にしたい
  • 156 送信ボタン・汎用ボタンのスタイルを変更したい
  • 157 ボタンにアイコンを表示したい
  • 158 ドロップダウンメニューのスタイルを変更したい
  • 159 テキストフィールドやチェックボックスの選択色を変更したい

Chapter 8 複数のボックスを配置するテクニック

  • 160 画像の上に画像を重ねたい
  • 161 重ねた画像の位置を調整したい
  • 162 重ねた画像を中央に配置したい
  • 163 重ねたテキストを中央に配置したい
  • 164 要素の重なり順を変更したい
  • 165 画像の上にキャプションを重ねたい
  • 166 バッジを重ねて表示したい
  • 167 画面の隅に要素を固定配置したい
  • 168 フレックスボックスの基本的な動作を知りたい
  • 169 フレックスアイテムの行揃えを調整したい
  • 170 フレックスアイテム間にスペースを作りたい
  • 171 フレックスアイテムを縦に並べたい
  • 172 横に並ぶフレックスアイテムの高さを設定したい
  • 173 フレックスアイテムの幅の伸縮設定をしたい
  • 174 見出しとほかのテキストを横一列に並べたい
  • 175 横一列にリンクテキストを並べたい
  • 176 多数のリンクテキストを並べたい
  • 177 画像が含まれる複数のボックスを横一列に並べたい
  • 178 画面サイズに合わせて画像が並ぶ方向を変えたい
  • 179 グリッドレイアウトの基本的な動作を知りたい
  • 180 グリッドアイテム間にスペースを作りたい
  • 181 列テンプレートの効率的な書き方を知りたい
  • 182 行テンプレートの使い方を知りたい
  • 183 フォトギャラリーを作りたい
  • 184 写真の高さを揃えたフォトギャラリーを作りたい
  • 185 画面サイズに合わせて列数を変えたい
  • 186 一部のグリッドアイテムを大きく表示したい
  • 187 グリッドレイアウトでボックスのデザインをしたい
  • 188 グリッドで作ったボックスを横に並べたい
  • 189 横に並んだボックスに含まれる要素の高さを揃えたい

Chapter 9 画像とマスクのデザインテクニック

  • 190 ボックスに収まるサイズで画像を表示したい
  • 191 ボックス全体を覆うサイズで画像を表示したい
  • 192 切り抜かれた画像の表示位置を調整したい
  • 193 ウィンドウ幅いっぱいにヒーロー画像を表示したい
  • 194 ヒーロー画像の位置を調整したい
  • 195 ヒーロー画像の上にテキストを重ねたい
  • 196 ヒーロー画像を背景として表示したい
  • 197 背景画像の中央にテキストを重ねたい
  • 198 画面いっぱいに背景画像を表示したい
  • 199 横に並ぶ画像の高さを揃えたい
  • 200 SVG画像の大きさを調整したい
  • 201 SVG画像の色を変えたい
  • 202 正方形の画像を円形に切り抜きたい
  • 203 画像を円形に切り抜きたい
  • 204 SVGのパスで画像を切り抜きたい

Chapter 10 パーツ作成のテクニック

  • 205 HTMLだけで作るアコーディオン
  • 206 アコーディオンにスタイルを適用したい
  • 207 ダイアログボックスを表示したい
  • 208 ダイアログボックスにスタイルを適用したい
  • 209 ポップオーバーを表示したい
  • 210 ポップオーバーを閉じるボタンを作りたい
  • 211 ポップオーバーにスタイルを適用したい
  • 212 テキストの横に小さなバッジを表示したい
  • 213 キーボードの字をキーボードらしく見せたい
  • 214 リンク先が別タブで開く場合にアイコンを表示したい
  • 215 PDFなどのファイルへのリンクにアイコンを表示したい
  • 216 テキストをカプセル型に囲みたい
  • 217 引用ブロックに装飾された「“」「”」を表示したい
  • 218 テキストを縦書きにしたい
  • 219 アイコンとテキストを横一列に並べたい
  • 220 アイコンとテキストを縦に並べたい
  • 221 リストグループを作りたい
  • 222 リストグループにマークをつけたい
  • 223 アラートボックスを作成したい
  • 224 ページネーションをデザインしたい
  • 225 画像にテキストを回り込ませたい
  • 226 Webフォントを使いたい
  • 227 アイコンフォントを使いたい
  • 228 縦型カードを作りたい
  • 229 横型カードを作りたい
  • 230 複数のカードを並べたい
  • 231 垂直にスクロールするスライドショーを作りたい
  • 232 水平にスクロールするスライドショーを作りたい
  • 233 ドラッグした画像をスナップさせたい

Chapter 11 ヘッダー/フッター/ナビゲーションのデザインテクニック

  • 234 一般的なナビゲーションのHTMLを知りたい
  • 235 ロゴとメニューで構成されるヘッダーを作りたい(HTML)
  • 236 タップすると見た目が変わるボタンを作りたい
  • 237 スマートフォン向けヘッダーを作りたい
  • 238 メニューを開閉可能にしたい
  • 239 ヘッダーを上部に固定したい
  • 240 レスポンシブなヘッダーにしたい①(ロゴとメニューが2 行)
  • 241 レスポンシブなヘッダーにしたい②(ロゴとメニューが1 行)
  • 242 ヘッダーより上にキャンペーンを表示したい
  • 243 スクロール量に合わせてヘッダーの高さを変えたい
  • 244 スマートフォン・PC 共用のナビゲーションにしたい
  • 245 横スクロールできるメニューを作りたい
  • 246 パンくずリストを作りたい
  • 247 いま開いているページのリンクをハイライトしたい
  • 248 フッターを作りたい

Chapter 12 ページレイアウトのテクニック

  • 249 伸縮するシングルコラムレイアウトを作成したい
  • 250 メインエリアの幅の上限を決めたい
  • 251 2コラムレイアウトを作りたい(flexbox)
  • 252 2コラムレイアウトを作りたい(grid)
  • 253 3コラムレイアウトを作りたい(flexbox)
  • 254 3コラムレイアウトを作りたい(grid)
  • 255 ウィンドウ幅いっぱいの3コラムレイアウトを作りたい(grid)
  • 256 途中でコラム数を切り替えたい
  • 257 ページ下部にキャンペーンブロックを表示したい
  • 258 ウィンドウ下部にフッターを配置したい
  • 259 独立してスクロールするサイドバーを作りたい
  • 260 ダークモードに対応したい

Chapter 13 レスポンシブWebデザインに対応するテクニック

  • 261 レスポンシブデザインに対応するための基本のHTML
  • 262 レスポンシブデザインの基本的な考え方を知りたい
  • 263 ボックスのサイズに合わせてスタイルを切り替えたい
  • 264 電話番号がリンクにならないようにしたい
  • 265 スマホとPCでページ全体のフォントサイズを変更したい
  • 266 画面サイズに合わせてフォントサイズを連続的に変化させたい
  • 267 画像に重ねたテキストを画面サイズに合わせて調整したい
  • 268 親要素のサイズに合わせて画像の大きさを調整したい
  • 269 正確なサイズで画面いっぱいに背景画像を表示したい
  • 270 正確なサイズで画面いっぱいに画像を表示したい
  • 271 ディスプレイに合わせて画質を切り替えたい
  • 272 画面サイズに合わせて表示する画像を変えたい
  • 273 スマートフォンでも入力しやすいフォームを作りたい
  • 274 ラベルとフォーム部品を改行したい
  • 275 PCのときだけ表示するコンテンツを作りたい
  • 276 1 行で収まらないテキストを省略したい
  • 277 テーブルを横スクロールできるようにしたい
  • 278 画面サイズに合わせてテーブル列を非表示にしたい
  • 279 テーブルセルの長いテキストを省略したい
  • 280 モバイル専用サイトを作り,PC表示にも対応する

Chapter 14 アニメーションとエフェクトのテクニック

  • 281 区切り線を引きたい
  • 282 区切り線のスタイルを変更したい
  • 283 テキストにドロップシャドウをかけたい
  • 284 テキストの選択ハイライト色を指定したい
  • 285 動画を全画面に表示したい
  • 286 背景画像をスクロールしないようにしたい
  • 287 テキストを斜めに傾けたい
  • 288 画像にホバーしたときボックスを徐々に拡大させたい
  • 289 画像をぼかしたい
  • 290 ボックス内の画像をアニメーションさせたい
  • 291 キーフレームアニメーションの基本を知りたい
  • 292 ヒーロー画像をフェードインしたい
  • 293 画像の色が変化し続けるアニメーションを作りたい
  • 294 バッジが小刻みに揺れるアニメーションを設定したい
  • 295 アニメーションしながらタイトルを表示したい
  • 296 ポップオーバーをスライドして出したい

Chapter 15 仕上げ・微調整・カスタマイズのテクニック

  • 297 ファビコンを設定したい
  • 298 アイコンとテキストのズレを微調整したい
  • 299 ボックスの最初と最後の段落のマージンをなくしたい
  • 300 角丸四角形のなかにある画像の角も丸めたい①
  • 301 角丸四角形のなかにある画像の角も丸めたい②
  • 302 もとのCSSを編集せずにスタイルを変更したい

著者プロフィール

狩野祐東(かのうすけはる)

アメリカ・サンフランシスコでUIデザイン理論を学ぶ。帰国後会社勤務を経てフリーランス。2016年株式会社Studio947を設立。Webサイトやアプリケーションのインターフェースデザイン・開発を数多く手がける。各種セミナーや研修講師としても活躍中。主な著書に『確かな力が身につくJavaScript「超」入門』『スラスラわかるHTML&CSSのきほん』(SBクリエイティブ)ほか多数。

https://studio947.net