表紙

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

Chapter01 HTML / CSSの基礎 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

004 スタイルなし 0-no-style.html
004 タイプセレクタ 1-type-selector.html
004 classセレクタ 2-class-selector.html
004 idセレクタ 3-id-selector.html
004 複合セレクタ 4-compound-selector.html
004 擬似クラス 5-pseudo-class.html
004 子孫セレクタ 6-descendant.html
004 いろいろなセレクタ selectors.html
005 色を指定する値 color.html
005 ファンクション function.html
005 決められたキーワード keyword.html
005 大きさ(長さ)を設定する単位 length.html
005 値が文字列 string.html
006 ブロックボックスの例:パディング、ボーダー border.html
006 インラインボックスのボックスモデル inline.html
006 ブロックボックスの例:パディング、ボーダー、マージン margin.html
006 ブロックボックスの例:何も適用していないブロックボックス no-style.html
006 ブロックボックスの例:パディング padding.html
006 ブロックボックスの例:パディング、ボーダー、マージン、幅 width.html
007 あとから出てきたルールが前のルールを上書きする cascade.html
007 継承 inheritance.html
007 p.blueのほうが強い specificity.html
007 style属性のほうが強い style-attr.html
007 !importantは最強 style-important.html
008 ネストをしない通常の@mediaの記法 atmedia.html
008 複合セレクタ complex-selector.html
008 子孫セレクタ descendant-selector.html
008 ネスト記法:@media nest-atmedia.html
008 ネスト記法:複合セレクタ nest-complex.html
008 ネスト記法:子孫セレクタの代わりに nest-descendant.html
009 カスタムプロパティ(変数) custom-property.html
009 カスタムプロパティ(変数) initial-value.html
011 すべてのページに共通するHTML index.html
012 ページのタイトルと概要を設定したい index.html
013 CSSファイルを読み込みたい index.html
014 CSSをHTMLに直接書きたい index.html
015 CSSをタグに直接書きたい index.html
016 JavaScriptファイルを読み込みたい index.html
017 JavaScriptをHTMLに直接書きたい index.html
018 HTMLにコメントを残したい index.html
019 CSSにコメントを残したい index.html

Chapter02 テキスト表示・整形の基本テクニック 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

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

Chapter03 リンクとメディアの基本テクニック 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

046 ほかのページにリンクしたい リンク先ページ campaign.html
046 ほかのページにリンクしたい index.html
047 リンク先を別タブで開くようにしたい index.html
048 ページ内リンクを設定したい index.html
049 ページ内リンクの移動先のスタイルを変えたい index.html
050 ページ内リンクの移動先までスクロールさせたい index.html
051 電話番号をリンクにしたい index.html
052 PDFファイルをダウンロード可能にしたい index.html
053 ページ内リンクを設定したい aboutus.html
053 ブロックレベル要素にリンクするときのCSS div-link.html
053 ボックスにリンクを設定したい index.html
054 リンクテキストのスタイルを設定したい index.html
055 リンクのテキスト色を地のテキスト色と同じにしたい index.html
056 ホバー時にテキストを半透明にしたい index.html
057 リンクの下線のスタイルを変更したい index.html
058 画像を表示したい index.html
059 実サイズとは異なるサイズで画像を表示したい index.html
060 画像を伸縮可能にしたい index.html
060 vertical-alignを適用するのはなぜ? vertical-align.html
061 base64のデータで画像を表示したい index.html
062 SVG形式の画像ファイルを表示したい index.html
063 SVG形式の画像ファイルを表示したい index.html
063 サイズが設定されていないSVGのサイズを指定する方法 svg-nosize.html
064 アニメーション画像を表示したい index.html
065 画像にリンクをつけたい index.html
066 画像に遅延読み込みの設定をしたい index.html
067 動画を表示したい index.html
068 動画を自動・ループ再生したい index.html
069 音声を再生したい index.html

Chapter04 ページ全体に適用するデザインのテクニック 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

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

Chapter05 ボックスを整形する基本テクニック 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

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

Chapter06 テーブルのデザインテクニック 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

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

Chapter07 テーブルのデザインテクニック 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

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

Chapter08 複数のボックスを配置するテクニック 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

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

Chapter09 画像とマスクのデザインテクニック 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

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

Chapter10 パーツ作成のテクニック 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

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

Chapter11 ヘッダー / フッター / ナビゲーションのデザインテクニック 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

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

Chapter12 ページレイアウトのテクニック 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

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

Chapter13 レスポンシブWebデザインに対応するテクニック 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

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

Chapter14 アニメーションとエフェクトのテクニック 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

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

Chapter15 仕上げ・微調整・カスタマイズのテクニック 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

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