「演習で力がつくHTML/CSSコーディングの教科書」 例題一覧
第2章 HTMLの基本を学ぶ
▲ページトップへ
STEP1 最も簡単なWeb ページを作る
- 23p：リスト2-1
- 表示
- ↓
- コード
▲ページトップへ
STEP2 文書をセクションに分けて記述する
- 38p：リスト2-3[moonlight.html]
- 表示
- ↓
- コード
- 44p：section要素の使用例（本の内容）
- 表示
- ↓
- コード
- 45p：article要素の使用例( ブログの記事）
- 表示
- ↓
- コード
- 45p：article要素の使用例(コメントを表示したブログの記事）
- 表示
- ↓
- コード
- 46p：aside要素の使用例( 補足記事）
- 表示
- ↓
- コード
- 48p：見出しによるセクションの暗黙的な記述
- 表示
- ↓
- コード
- 49p：見出しに副題をつけるには（誤った例）
- 表示
- ↓
- コード
- 49p：見出しに副題をつけるには（正しい例）
- 表示
- ↓
- コード
- 51p：リスト2-4[moonlight.html]
- 表示
- ↓
- コード
▲ページトップへ
STEP3 文章の意味づけとグループ化を行う
- 53p：リスト2-5[moonlight.html]
- 表示
- ↓
- コード
- 55p：テキストを強調する［em］
- 表示
- ↓
- コード
- 55p：em要素を入れ子にする
- 表示
- ↓
- コード
- 55p：テキストの重要性を示す［strong］
- 表示
- ↓
- コード
- 55p：strong要素を入れ子にする
- 表示
- ↓
- コード
- 56p：ルビをふる
- 表示
- ↓
- コード
- 56p：１文字ずつルビをふる
- 表示
- ↓
- コード
- 56p：ルビに対応していないブラウザでルビを表現する
- 表示
- ↓
- コード
- 57p：一般的な文章の範囲をあらわす［span］
- 表示
- ↓
- コード
- 58p：番号順リスト［ol］
- 表示
- ↓
- コード
- 58p：ol要素のstart属性
- 表示
- ↓
- コード
- 58p：ol要素のreversed属性
- 表示
- ↓
- コード
- 59p：箇条書きリスト［ul］
- 表示
- ↓
- コード
- 59p：意味上の段落の区切り［hr］
- 表示
- ↓
- コード
- 59p：一般的な要素のグループ化を行う［div］
- 表示
- ↓
- コード
- 60p：Web ページの主要な部分［main］
- 表示
- ↓
- コード
▲ページトップへ
STEP4 HTML文書の木構造を理解す
- 63p：ブロックボックスとインラインボックス
- 表示
- ↓
- コード
- 65p：moonlight.htmlで要素の境界線を表示
- 表示
- ↓
- コード
▲ページトップへ
STEP5 画像を挿入する
- 66p：リスト2-6［moonlight.html］
- 表示
- ↓
- コード
- 67p：画像の幅をpx単位で指定する
- 表示
- ↓
- コード
- 68p：画像の幅を%単位で指定する
- 表示
- ↓
- コード
▲ページトップへ
STEP6 リンクを設定する
- 71p：リスト2-7［moonlight.html］
- 表示
- ↓
- コード
- 74p：リンク先を表示するウィンドウを指定する
- 表示
- ↓
- コード
- 74p：指定した位置に移動する
- 表示
- ↓
- コード
- 74p：他のページの指定した位置に移動する
- 表示
- ↓
- コード
- 74p：milkyway.html
- 表示
- ↓
- コード
- 75p：クリッカブルマップ
- 表示
- ↓
- コード
▲ページトップへ
STEP7 パンくずリスト
- 76p：リスト2-8［moonlight.html］
- 表示
- ↓
- コード
▲ページトップへ
STEP8 動画と音声を挿入する
- 80p：リスト2-9［moonlight.html］
- 表示
- ↓
- コード
- 83p：複数の音声ファイルを指定する
- 表示
- ↓
- コード
- 85p：複数の動画ファイルを指定する
- 表示
- ↓
- コード
第3章 CSSの基本を学ぶ
▲ページトップへ
STEP9 CSSの書き方の基本
- 93p：リスト3-1［moonlight.html］
- 表示
- ↓
- コード
- 98p：background-colorプロパティ
- 表示
- ↓
- コード
- 100p：font-sizeプロパティ
- 表示
- ↓
- コード
- 101p：font-familyプロパティ
- 表示
- ↓
- コード
- 101p：font-styleプロパティ
- 表示
- ↓
- コード
- 102p：font-weightプロパティ
- 表示
- ↓
- コード
- 102p：font-variantプロパティ
- 表示
- ↓
- コード
- 104p：line-heightプロパティ
- 表示
- ↓
- コード
- 104p：fontプロパティ
- 表示
- ↓
- コード
- 105p：colorプロパティ
- 表示
- ↓
- コード
- 105p：text-indentプロパティ
- 表示
- ↓
- コード
- 105p：text-alignプロパティ
- 表示
- ↓
- コード
- 106p：vertical-alignプロパティ
- 表示
- ↓
- コード
- 107p：letter-spacingプロパティ
- 表示
- ↓
- コード
- 107p：text-decorationプロパティ
- 表示
- ↓
- コード
- 109p：text-shadowプロパティ（１）影
- 表示
- ↓
- コード
- 109p：text-shadowプロパティ（２）グロー効果+影
- 表示
- ↓
- コード
▲ページトップへ
STEP10 スタイルの適用方法
- 116p：リスト3-2［moon_style.css］
- 表示
- ↓
- コード
- 116p：リスト3-3［moonlight.html］
- 表示
- ↓
- コード
- 117p：@importで外部スタイルシートを読み込む
- 表示
- ↓
- コード
- 117p：style属性で要素に直接スタイルを設定する
- 表示
- ↓
- コード
▲ページトップへ
STEP11 基本的なセレクタ
- 122p：クラスセレクタの書式 例1
- 表示
- ↓
- コード
- 122p：クラスセレクタの書式 例2
- 表示
- ↓
- コード
- 122p：クラスセレクタの書式 例3
- 表示
- ↓
- コード
- 123p：idセレクタの書式 例１
- 表示
- ↓
- コード
- 123p：idセレクタの書式 例２
- 表示
- ↓
- コード
▲ページトップへ
STEP12 スタイルの継承
- 124p：継承とは：colorプロパティの継承
- 表示
- ↓
- コード
- 124p：継承とは：background-colorプロパティは継承しない
- 表示
- ↓
- コード
- 125p：プロパティの値の計算方法
- 表示
- ↓
- コード
- 126p：inherit値
- 表示
- ↓
- コード
▲ページトップへ
STEP13 ボックス設定の基本
- 127p：リスト3-4［moonlight.html］
- 表示
- ↓
- コード
- 129p：リスト3-5［moon_style.css］
- 表示
- ↓
- コード
- 130p：ボックスの種類：ボックスの表示例
- 表示
- ↓
- コード
- 130p：ボックスの種類：ブロックボックス
- 表示
- ↓
- コード
- 131p：ボックスの種類：インラインボックス
- 表示
- ↓
- コード
- 131p：ボックスの種類：分割不可能なインラインレベルボックス
- 表示
- ↓
- コード
- 132p：ボックスの種類：リストボックス
- 表示
- ↓
- コード
- 132p：ボックスの種類：ボックスを生成しない
- 表示
- ↓
- コード
- 135p：ブロックボックスのモデル：ブロックボックスの表示例
- 表示
- ↓
- コード
- 136p：インラインボックスのモデル
- 表示
- ↓
- コード
- 137p：リストボックスのモデル
- 表示
- ↓
- コード
- 140p：ボーダーの設定：border
- 表示
- ↓
- コード
- 140p：ボーダーの設定：border-left
- 表示
- ↓
- コード
- 141p：ボーダーの設定：border-width（１）
- 表示
- ↓
- コード
- 141p：ボーダーの設定：border-width（２）
- 表示
- ↓
- コード
- 141p：ボーダーの設定：border-width（３）
- 表示
- ↓
- コード
- 141p：ボーダーの設定：border-width（４）
- 表示
- ↓
- コード
- 141p：ボーダーの設定：border-style（１）
- 表示
- ↓
- コード
- 141p：ボーダーの設定：border-style（２）
- 表示
- ↓
- コード
- 141p：ボーダーの設定：border-style（３）
- 表示
- ↓
- コード
- 141p：ボーダーの設定：border-style（４）
- 表示
- ↓
- コード
- 141p：ボーダーの設定：border-color（１）
- 表示
- ↓
- コード
- 141p：ボーダーの設定：border-color（２）
- 表示
- ↓
- コード
- 141p：ボーダーの設定：border-color（３）
- 表示
- ↓
- コード
- 141p：ボーダーの設定：border-color（４）
- 表示
- ↓
- コード
- 141p：ボーダーの設定：border-top-width
- 表示
- ↓
- コード
- 141p：ボーダーの設定：border-left-style
- 表示
- ↓
- コード
- 141p：ボーダーの設定：border-bottom-color
- 表示
- ↓
- コード
- 142p：パディングの設定：padding（１）
- 表示
- ↓
- コード
- 142p：パディングの設定：padding（２）
- 表示
- ↓
- コード
- 142p：パディングの設定：padding（３）
- 表示
- ↓
- コード
- 142p：パディングの設定：padding（４）
- 表示
- ↓
- コード
- 142p：パディングの設定：padding-left
- 表示
- ↓
- コード
- 143p：マージンの設定：margin
- 表示
- ↓
- コード
- 144p：マージンの設定：margin（１）
- 表示
- ↓
- コード
- 144p：マージンの設定：margin（２）
- 表示
- ↓
- コード
- 144p：マージンの設定：margin（３）
- 表示
- ↓
- コード
- 144p：マージンの設定：margin（４）
- 表示
- ↓
- コード
- 144p：内容領域の幅と高さの設定
- 表示
- ↓
- コード
- 147p：ブロックボックスの配置：例１
- 表示
- ↓
- コード
- 147p：ブロックボックスの配置：例２
- 表示
- ↓
- コード
- 148p：ブロックボックスの配置
- 表示
- ↓
- コード
- 149p：垂直マージンの相殺
- 表示
- ↓
- コード
- 149p：親子要素間のマージンの相殺
- 表示
- ↓
- コード
- 150p：ボックス幅の決定：widthがautoの場合
- 表示
- ↓
- コード
- 151p：ボックス幅の決定：widthが指定されている場合
- 表示
- ↓
- コード
- 152p：ボックスの高さの決定
- 表示
- ↓
- コード
- 153p：オーバーフローした場合の表示設定：overflow:visible
- 表示
- ↓
- コード
- 153p：オーバーフローした場合の表示設定：overflow:auto
- 表示
- ↓
- コード
- 154p：オーバーフローした場合の表示設定：overflow:hidden
- 表示
- ↓
- コード
▲ページトップへ
STEP14 ボックスをさまざまに設定する
- 159p：リスト3-6［moon_style.css］
- 表示
- ↓
- コード
- 159p：moonlight.html
- 表示
- ↓
- コード
- 161p：背景色を設定する［background-color］
- 表示
- ↓
- コード
- 161p：背景画像を設定する［background-image］
- 表示
- ↓
- コード
- 162p：background-repeat: repeat
- 表示
- ↓
- コード
- 162p：background-repeat: repeat-x
- 表示
- ↓
- コード
- 162p：background-repeat: repeat-y
- 表示
- ↓
- コード
- 162p：background-repeat: no-repeat
- 表示
- ↓
- コード
- 162p：background-repeat: space
- 表示
- ↓
- コード
- 162p：background-repeat: round
- 表示
- ↓
- コード
- 162p：background-repeat: repeat no-repeat
- 表示
- ↓
- コード
- 163p：背景に線形グラデーションを設定する
- 表示
- ↓
- コード
- 164p：ボックスコーナーの角丸を一括して設定する（１）
- 表示
- ↓
- コード
- 164p：ボックスコーナーの角丸を一括して設定する（２）
- 表示
- ↓
- コード
- 164p：ボックスコーナーの角丸を一括して設定する（３）
- 表示
- ↓
- コード
- 164p：ボックスコーナーの角丸を一括して設定する（４）
- 表示
- ↓
- コード
- 165p：ボックスコーナーの角丸を一括して設定する（５）
- 表示
- ↓
- コード
- 165p：ボックスコーナーの角丸を一括して設定する（６）
- 表示
- ↓
- コード
- 165p：ボックスコーナーの角丸を個別に設定する
- 表示
- ↓
- コード
- 166p：ボックスの透明度を設定する［opacity］
- 表示
- ↓
- コード
- 167p：ボックスの影を設定する［box-shadow］（１）
- 表示
- ↓
- コード
- 167p：ボックスの影を設定する［box-shadow］（２）
- 表示
- ↓
- コード
- 167p：ボックスの影を設定する［box-shadow］（３）
- 表示
- ↓
- コード
- 167p：ボックスの影を設定する［box-shadow］（４）
- 表示
- ↓
- コード
- 168p：リストマークの種類を設定する［list-style-type］
- 表示
- ↓
- コード
- 169p：リストマークに用いる画像を設定する
- 表示
- ↓
- コード
- 169p：リストマークの表示位置を設定する
- 表示
- ↓
- コード
▲ページトップへ
STEP15 floatによる回り込みの設定
- 177p：moonlight.html
- 表示
- ↓
- コード
- 177p：リスト3-7［moon_style.css］
- 表示
- ↓
- コード
- 179p：float: right
- 表示
- ↓
- コード
- 180p：clear: none
- 表示
- ↓
- コード
▲ページトップへ
STEP16 より高度なCSSの文法
第4章 ２段組のページを作る
▲ページトップへ
STEP17 トップページを作る
- 193p：リスト4-1［index.html］
- 表示
- ↓
- コード
- 194p：リスト4-2［top_specialstyle.css］
- 表示
- ↓
- コード
▲ページトップへ
STEP18 メニューを作る
- 196p：リスト4-3［index.html］
- 表示
- ↓
- コード
- 196p：リスト4-4［top_specialstyle.css ］
- 表示
- ↓
- コード
▲ページトップへ
STEP19 ２段組のレイアウトにする
- 201p：リスト4-5［index.html］
- 表示
- ↓
- コード
- 202p：リスト4-6［cosmos_style.css ］
- 表示
- ↓
- コード
- 205p：フレキシブルボックスレイアウト：display: flex
- 表示
- ↓
- コード
- 206p：フレキシブルボックスレイアウト：flexプロパティ
- 表示
- ↓
- コード
- 207p：フレキシブルボックスレイアウト：orderプロパティ
- 表示
- ↓
- コード
- 208p：Holy Grailレイアウト
- 表示
- ↓
- コード
- 211p：幅の固定された２段組
- 表示
- ↓
- コード
- 213p：左が固定幅で右が可変幅の２段組
- 表示
- ↓
- コード
- 214p：左右が固定幅で中が可変幅の３段組
- 表示
- ↓
- コード
- 216p：float による段組みの不具合を解決する
- 表示
- ↓
- コード
- 217p：overflowプロパティを用いる方法
- 表示
- ↓
- コード
- 217p：clearfix
- 表示
- ↓
- コード
▲ページトップへ
STEP20 iframeを使って内容を切り替える
- 218p：リスト4-7［index.html］
- 表示
- ↓
- コード
- 219p：リスト4-8［toppage.html］
- 表示
- ↓
- コード
- 220p：リスト4-9［planets.html］
- 表示
- ↓
- コード
- 221p：リスト4-10［cosmos_style.css ］
- 表示
- ↓
- コード
- 227p：iframeを使ってGooleマップを表示
- 表示
- ↓
- コード
第5章 テーブルを作る
▲ページトップへ
STEP21 テーブルを作るHTML要素
- 231p：リスト5-1［solar_system.html］
- 表示
- ↓
- コード
- 232p：リスト5-2［table_style.css ］
- 表示
- ↓
- コード
- 233p：テーブルを構成する基本要素
- 表示
- ↓
- コード
- 234p：ヘッダー・セル
- 表示
- ↓
- コード
- 234p：行のグループ化
- 表示
- ↓
- コード
- 235p：テーブルのタイトル
- 表示
- ↓
- コード
- 236p：列をグループ化する：colgroup
- 表示
- ↓
- コード
- 237p：列をグループ化する：span="2"
- 表示
- ↓
- コード
- 237p：列をグループ化する：nth-child(2n)
- 表示
- ↓
- コード
- 237p：列をグループ化する：col
- 表示
- ↓
- コード
- 238p：列をグループ化する：nth-child(2n)
- 表示
- ↓
- コード
- 238p：セルを複数列・複数行にまたがるように拡張する
- 表示
- ↓
- コード
▲ページトップへ
STEP22 テーブルのスタイルを設定する
- 239p：リスト5-4［table_style.css ］
- 表示
- ↓
- コード
- 239p：solar_system.html
- 表示
- ↓
- コード
- 244p：セル内の文字の水平方向の配置を設定する
- 表示
- ↓
- コード
- 245p：セル内の文字の垂直方向の配置を設定す
- 表示
- ↓
- コード
- 246p：テーブルのレイヤー構造
- 表示
- ↓
- コード
第6章 フォームを作る
▲ページトップへ
STEP23 フォームの基本
- 251p：リスト6-1［question.html］
- 表示
- ↓
- コード
- 257p：はじめから選択肢を選んだ状態にする［checked属性］
- 表示
- ↓
- コード
- 258p：初期値を指定する［value属性］
- 表示
- ↓
- コード
- 258p：テキスト・フィールドの長さを指定する［size属 ］
- 表示
- ↓
- コード
- 258p：テキスト・フィールドの長さを指定する［width属性］
- 表示
- ↓
- コード
- 258p：入力できる最大文字数を指定する［maxlength属性］
- 表示
- ↓
- コード
- 258p：入力できる最小文字数を指定する［minlength属性］
- 表示
- ↓
- コード
- 259p：正規表現で入力のパターンを指定する［pattern属性］
- 表示
- ↓
- コード
- 259p：入力のヒントを表示する［placeholder属性］
- 表示
- ↓
- コード
- 259p：必須項目とする［required属性］
- 表示
- ↓
- コード
- 259p：オートコンプリートを行う［autocomplete属性］
- 表示
- ↓
- コード
- 259p：読み取り専用にする［readonly属性］
- 表示
- ↓
- コード
- 261p：ラベル要素による関連づけ：明示的な方法
- 表示
- ↓
- コード
- 262p：ラベル要素による関連づけ：暗黙的な方法
- 表示
- ↓
- コード
- 262p：コントロールのグループ化
- 表示
- ↓
- コード
- 263p：フォームの整列：p要素で構造化
- 表示
- ↓
- コード
- 264p：フォームの整列：定義型リストによる方法（１）
- 表示
- ↓
- コード
- 264p：フォームの整列：定義型リストによる方法（２）
- 表示
- ↓
- コード
▲ページトップへ
STEP24 いろいろなコントロール
- 265p：リスト6-2［spacetourism.html］
- 表示
- ↓
- コード
- 267p：リスト6-3［form_style.css］
- 表示
- ↓
- コード
- 270p：メニューの表示行数を指定する［size属性］
- 表示
- ↓
- コード
- 270p：複数の選択を可能にする［multiple 属性］
- 表示
- ↓
- コード
- 277p：ボタンを作る［button］
- 表示
- ↓
- コード
- 278p：入力候補を表示する［datalist］
- 表示
- ↓
- コード
- 278p：タスクの進捗を示す［progress］
- 表示
- ↓
- コード
- 279p：ゲージを表示する［meter］
- 表示
- ↓
- コード
- 279p：フォームの計算結果を表示する［output］
- 表示
- ↓
- コード
▲ページトップへ