改訂新版 HTML＆CSSデザインレシピ集（技術評論社） [電子書籍]

改訂新版 HTML＆CSSデザインレシピ集（技術評論社） の 商品概要

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

• 目次

  Chapter 1 HTML/CSSの基礎
  001 HTMLの基礎知識
  002 Webサイトを構成するファイル
  003 CSSの基礎知識
  004 セレクタについて知りたい
  005 プロパティと値の基本を知りたい
  006 ボックスモデルについて知りたい
  007 CSSが適用される順序を知りたい
  008 CSSのネスト記法について知りたい
  009 カスタムプロパティ（変数）を利用したい
  010 ブラウザの開発ツールを使いたい
  ･･･
  Chapter 2 テキスト表示・整形の基本テクニック
  020 見出しと段落のタグについて知りたい
  021 箇条書きタグについて知りたい
  022 コンテンツをグループ化するタグを知りたい
  023 テキストの一部を囲み，修飾するタグを使いたい
  024 「項目」と「関連する値」をまとめたい
  025 HTMLで使用できない記号を表示したい
  026 テキスト色を変えたい
  027 半透明なテキスト色を指定したい
  028 要素ごとにフォントサイズを指定したい
  029 フォントサイズを相対的に指定したい
  030 行間を広くしたい・狭くしたい
  ･･･
  Chapter 3 リンクとメディアの基本テクニック
  046 ほかのページにリンクしたい
  047 リンク先を別タブで開くようにしたい
  048 ページ内リンクを設定したい
  049 ページ内リンクの移動先のスタイルを変えたい
  050 ページ内リンクの移動先までスクロールさせたい
  051 電話番号をリンクにしたい
  052 PDFファイルをダウンロード可能にしたい
  053 ボックスにリンクを設定したい
  054 リンクテキストのスタイルを設定したい
  055 リンクのテキスト色を地のテキスト色と同じにしたい
  056 ホバー時にテキストを半透明にしたい
  ･･･
  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 ボックスを左右中央に配置したい
  ･･･
  Chapter 6 テーブルのデザインテクニック
  111 テーブルの基本的なHTMLコードを知りたい
  112 テーブルに標準的な罫線をつけたい
  113 セルを横方向に結合したい
  114 セルを縦方向に結合したい
  115 テーブル行をヘッダー，ボディ，フッターに分けたい
  116 テーブルにキャプションをつけたい
  117 セル内のテキストの行揃えを変更したい
  118 セル内のコンテンツと罫線の間にスペースを作りたい
  119 テーブルの各行に下線を引きたい
  120 特定のセルの罫線を調整したい
  ･･･
  Chapter 7 フォームのデザインテクニック
  129 フォームの基本的なHTMLを知りたい
  130 テキストフィールドを作りたい
  131 スタイル調整しやすいフォーム部品を作りたい
  132 フォーム部品にラベルをつけたい①
  133 フォーム部品にラベルをつけたい②
  134 inputタグで作れるフォーム部品を知りたい
  135 inputタグ以外のフォーム部品を知りたい
  136 必須入力項目にしたい
  137 テキストフィールドに入力のヒントを表示したい
  138 ラジオボタンを設置したい
  139 チェックボックスを設置したい
  ･･･
  Chapter 8 複数のボックスを配置するテクニック
  160 画像の上に画像を重ねたい
  161 重ねた画像の位置を調整したい
  162 重ねた画像を中央に配置したい
  163 重ねたテキストを中央に配置したい
  164 要素の重なり順を変更したい
  165 画像の上にキャプションを重ねたい
  166 バッジを重ねて表示したい
  167 画面の隅に要素を固定配置したい
  168 フレックスボックスの基本的な動作を知りたい
  169 フレックスアイテムの行揃えを調整したい
  170 フレックスアイテム間にスペースを作りたい
  ･･･
  Chapter 9 画像とマスクのデザインテクニック
  190 ボックスに収まるサイズで画像を表示したい
  191 ボックス全体を覆うサイズで画像を表示したい
  192 切り抜かれた画像の表示位置を調整したい
  193 ウィンドウ幅いっぱいにヒーロー画像を表示したい
  194 ヒーロー画像の位置を調整したい
  195 ヒーロー画像の上にテキストを重ねたい
  196 ヒーロー画像を背景として表示したい
  197 背景画像の中央にテキストを重ねたい
  198 画面いっぱいに背景画像を表示したい
  199 横に並ぶ画像の高さを揃えたい
  200 SVG画像の大きさを調整したい
  ･･･
  Chapter 10 パーツ作成のテクニック
  205 HTMLだけで作るアコーディオン
  206 アコーディオンにスタイルを適用したい
  207 ダイアログボックスを表示したい
  208 ダイアログボックスにスタイルを適用したい
  209 ポップオーバーを表示したい
  210 ポップオーバーを閉じるボタンを作りたい
  211 ポップオーバーにスタイルを適用したい
  212 テキストの横に小さなバッジを表示したい
  213 キーボードの字をキーボードらしく見せたい
  214 リンク先が別タブで開く場合にアイコンを表示したい
  215 PDFなどのファイルへのリンクにアイコンを表示したい
  ･･･
  Chapter 11 ヘッダー／フッター／ナビゲーションのデザインテクニック
  234 一般的なナビゲーションのHTMLを知りたい
  235 ロゴとメニューで構成されるヘッダーを作りたい（HTML）
  236 タップすると見た目が変わるボタンを作りたい
  237 スマートフォン向けヘッダーを作りたい
  238 メニューを開閉可能にしたい
  239 ヘッダーを上部に固定したい
  240 レスポンシブなヘッダーにしたい①（ロゴとメニューが2行）
  241 レスポンシブなヘッダーにしたい②（ロゴとメニューが1行）
  242 ヘッダーより上にキャンペーンを表示したい
  243 スクロール量に合わせてヘッダーの高さを変えたい
  244 スマートフォン・PC共用のナビゲーションにしたい
  ･･･
  Chapter 12 ページレイアウトのテクニック
  249 伸縮するシングルコラムレイアウトを作成したい
  250 メインエリアの幅の上限を決めたい
  251 2コラムレイアウトを作りたい（flexbox）
  252 2コラムレイアウトを作りたい（grid）
  253 3コラムレイアウトを作りたい（flexbox）
  254 3コラムレイアウトを作りたい（grid）
  255 ウィンドウ幅いっぱいの3コラムレイアウトを作りたい（grid）
  256 途中でコラム数を切り替えたい
  257 ページ下部にキャンペーンブロックを表示したい
  258 ウィンドウ下部にフッターを配置したい
  259 独立してスクロールするサイドバーを作りたい
  ･･･
  Chapter 13 レスポンシブWebデザインに対応するテクニック
  261 レスポンシブデザインに対応するための基本のHTML
  262 レスポンシブデザインの基本的な考え方を知りたい
  263 ボックスのサイズに合わせてスタイルを切り替えたい
  264 電話番号がリンクにならないようにしたい
  265 スマホとPCでページ全体のフォントサイズを変更したい
  266 画面サイズに合わせてフォントサイズを連続的に変化させたい
  267 画像に重ねたテキストを画面サイズに合わせて調整したい
  268 親要素のサイズに合わせて画像の大きさを調整したい
  269 正確なサイズで画面いっぱいに背景画像を表示したい
  270 正確なサイズで画面いっぱいに画像を表示したい
  ･･･
  Chapter 14 アニメーションとエフェクトのテクニック
  281 区切り線を引きたい
  282 区切り線のスタイルを変更したい
  283 テキストにドロップシャドウをかけたい
  284 テキストの選択ハイライト色を指定したい
  285 動画を全画面に表示したい
  286 背景画像をスクロールしないようにしたい
  287 テキストを斜めに傾けたい
  288 画像にホバーしたときボックスを徐々に拡大させたい
  289 画像をぼかしたい
  290 ボックス内の画像をアニメーションさせたい
  ･･･
  Chapter 15 仕上げ・微調整・カスタマイズのテクニック
  297 ファビコンを設定したい
  298 アイコンとテキストのズレを微調整したい
  299 ボックスの最初と最後の段落のマージンをなくしたい
  300 角丸四角形のなかにある画像の角も丸めたい①
  301 角丸四角形のなかにある画像の角も丸めたい②
  302 もとのCSSを編集せずにスタイルを変更したい
  

改訂新版 HTML＆CSSデザインレシピ集（技術評論社） の商品スペック