「演習で力がつく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:1文字ずつルビをふる
- 表示
- ↓
- コード
- 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プロパティ(1)影
- 表示
- ↓
- コード
- 109p:text-shadowプロパティ(2)グロー効果+影
- 表示
- ↓
- コード
▲ページトップへ
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セレクタの書式 例1
- 表示
- ↓
- コード
- 123p:idセレクタの書式 例2
- 表示
- ↓
- コード
▲ページトップへ
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(1)
- 表示
- ↓
- コード
- 141p:ボーダーの設定:border-width(2)
- 表示
- ↓
- コード
- 141p:ボーダーの設定:border-width(3)
- 表示
- ↓
- コード
- 141p:ボーダーの設定:border-width(4)
- 表示
- ↓
- コード
- 141p:ボーダーの設定:border-style(1)
- 表示
- ↓
- コード
- 141p:ボーダーの設定:border-style(2)
- 表示
- ↓
- コード
- 141p:ボーダーの設定:border-style(3)
- 表示
- ↓
- コード
- 141p:ボーダーの設定:border-style(4)
- 表示
- ↓
- コード
- 141p:ボーダーの設定:border-color(1)
- 表示
- ↓
- コード
- 141p:ボーダーの設定:border-color(2)
- 表示
- ↓
- コード
- 141p:ボーダーの設定:border-color(3)
- 表示
- ↓
- コード
- 141p:ボーダーの設定:border-color(4)
- 表示
- ↓
- コード
- 141p:ボーダーの設定:border-top-width
- 表示
- ↓
- コード
- 141p:ボーダーの設定:border-left-style
- 表示
- ↓
- コード
- 141p:ボーダーの設定:border-bottom-color
- 表示
- ↓
- コード
- 142p:パディングの設定:padding(1)
- 表示
- ↓
- コード
- 142p:パディングの設定:padding(2)
- 表示
- ↓
- コード
- 142p:パディングの設定:padding(3)
- 表示
- ↓
- コード
- 142p:パディングの設定:padding(4)
- 表示
- ↓
- コード
- 142p:パディングの設定:padding-left
- 表示
- ↓
- コード
- 143p:マージンの設定:margin
- 表示
- ↓
- コード
- 144p:マージンの設定:margin(1)
- 表示
- ↓
- コード
- 144p:マージンの設定:margin(2)
- 表示
- ↓
- コード
- 144p:マージンの設定:margin(3)
- 表示
- ↓
- コード
- 144p:マージンの設定:margin(4)
- 表示
- ↓
- コード
- 144p:内容領域の幅と高さの設定
- 表示
- ↓
- コード
- 147p:ブロックボックスの配置:例1
- 表示
- ↓
- コード
- 147p:ブロックボックスの配置:例2
- 表示
- ↓
- コード
- 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:ボックスコーナーの角丸を一括して設定する(1)
- 表示
- ↓
- コード
- 164p:ボックスコーナーの角丸を一括して設定する(2)
- 表示
- ↓
- コード
- 164p:ボックスコーナーの角丸を一括して設定する(3)
- 表示
- ↓
- コード
- 164p:ボックスコーナーの角丸を一括して設定する(4)
- 表示
- ↓
- コード
- 165p:ボックスコーナーの角丸を一括して設定する(5)
- 表示
- ↓
- コード
- 165p:ボックスコーナーの角丸を一括して設定する(6)
- 表示
- ↓
- コード
- 165p:ボックスコーナーの角丸を個別に設定する
- 表示
- ↓
- コード
- 166p:ボックスの透明度を設定する[opacity]
- 表示
- ↓
- コード
- 167p:ボックスの影を設定する[box-shadow](1)
- 表示
- ↓
- コード
- 167p:ボックスの影を設定する[box-shadow](2)
- 表示
- ↓
- コード
- 167p:ボックスの影を設定する[box-shadow](3)
- 表示
- ↓
- コード
- 167p:ボックスの影を設定する[box-shadow](4)
- 表示
- ↓
- コード
- 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章 2段組のページを作る
▲ページトップへ
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 2段組のレイアウトにする
- 201p:リスト4-5[index.html]
- 表示
- ↓
- コード
- 202p:リスト4-6[cosmos_style.css ]
- 表示
- ↓
- コード
- 205p:フレキシブルボックスレイアウト:display: flex
- 表示
- ↓
- コード
- 206p:フレキシブルボックスレイアウト:flexプロパティ
- 表示
- ↓
- コード
- 207p:フレキシブルボックスレイアウト:orderプロパティ
- 表示
- ↓
- コード
- 208p:Holy Grailレイアウト
- 表示
- ↓
- コード
- 211p:幅の固定された2段組
- 表示
- ↓
- コード
- 213p:左が固定幅で右が可変幅の2段組
- 表示
- ↓
- コード
- 214p:左右が固定幅で中が可変幅の3段組
- 表示
- ↓
- コード
- 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:フォームの整列:定義型リストによる方法(1)
- 表示
- ↓
- コード
- 264p:フォームの整列:定義型リストによる方法(2)
- 表示
- ↓
- コード
▲ページトップへ
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]
- 表示
- ↓
- コード
▲ページトップへ