レシピ集シリーズ改訂新版 HTML&CSSデザインレシピ集
2025年4月14日紙版発売
狩野祐東 著
A5判/720ページ
定価3,300円(本体3,000円+税10%)
ISBN 978-4-297-14850-8
書籍の概要
この本の概要
お待たせしました。あれ,どうやって作るの?がスグわかると評判のHTML & CSSテクニック集,8年ぶりに大幅リニューアルで登場。「フォトギャラリーを作りたい」「ヘッダーを上部に固定したい」といった定番的なネタから,「HTMLだけでアコーディオンを作りたい」「箇条書きのマークを絵文字にしたい」といった"かゆいところ"に手が届くネタまで取りそろえました。他に類を見ない掘り下げかたの解説が好評の理由です。スマホ&PCサイト両対応。オリジナル制作のお伴に,ぜひどうぞ。
こんな方におすすめ
- Webデザイナー,Webサイト制作者,Webサイト運営者
- Webプログラマー,Webエンジニア
- Webサイト,ホームページを作りたい方
本書のサンプル
本書の紙面イメージは次のとおりです。画像をクリックすることで拡大して確認することができます。
目次
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を編集せずにスタイルを変更したい
この本に関連する書籍
-
HTML&CSS Webデザイン 現場レベルのコーディング・スキルが身につく実践入門
HTML&CSSの基本を学んだだけでは,Webサイトは作れません! 就活,転職,副業,開業など,仕事としてのWebデザインが人気を集めています。Webデザイナーを目指す...
-
世界一わかりやすい HTML&CSSコーディングとサイト制作の教科書[改訂2版]
言語の基本学習からサイト作成と管理までを1冊にまとめた入門書! webサイト制作者を目指す人が必ず習得しなければならない言語「HTMLとCSS」の記述と,サイト制作の基...
-
HTML&CSSとWebデザインが1冊できちんと身につく本[増補改訂版]
<コンセプト>PC&モバイルサイトデザインの基礎力とHTML・CSSコーディングの知識が1冊で同時に身につく! ウェブ制作を仕事にするならHTMLとCSSを学ぶことから始めま...