HTML&CSSデザインレシピ集―最新・定番テクニック302 改訂新版 [単行本]

HTML&CSSデザインレシピ集―最新・定番テクニック302 改訂新版 の 商品概要

• 要旨（「BOOK」データベースより）

  大幅増補！「あのデザイン」の作りかたがスグわかる。最新・定番テクニック３０２。

• 目次

  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 フォーム部品にラベルをつけたい(1)
  133 フォーム部品にラベルをつけたい(2)
  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 レスポンシブなヘッダーにしたい(1)（ロゴとメニューが2 行）
  241 レスポンシブなヘッダーにしたい(2)（ロゴとメニューが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 ボックスのサイズに合わせてスタイルを切り替

• 内容紹介

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

• 著者紹介（「BOOK著者紹介情報」より）（本データはこの書籍が刊行された当時に掲載されていたものです）

  狩野 祐東(カノウ スケハル)
  アメリカ・サンフランシスコでＵＩデザイン理論を学ぶ。帰国後会社勤務を経てフリーランス。２０１６年株式会社Ｓｔｕｄｉｏ９４７を設立。Ｗｅｂサイトやアプリケーションのインターフェースデザイン・開発を数多く手がける。各種セミナーや研修講師としても活躍中

• 著者について

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

HTML&CSSデザインレシピ集―最新・定番テクニック302 改訂新版 の商品スペック