「演習で力がつく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]
表示
コード

▲ページトップへ