2023年 階層に関連した問題集
ダウンロードするもの
階層 zip ファイル と 問題ページ （2023年9月追加）説明の画像フォルダ （2023年11月追加）
使用する画像のフォルダ
階層の問題ページは追加があればその都度ダウンロードしてください。
「階層 zip ファイル」をダウンロードして解凍すると、「階層のイメージ」画像と同じものが入っています。
先頭のフォルダ（ 20230401-kaisou ）の名前は変更して構いませんし、インターネットにアップロードしませんので漢字・ひらがななど使って大丈夫です。
そのフォルダごと、どこかに保存し、ショートカットをデスクトップに保存してください。
以下の問題はその中に回答・保存していきます。
使用する写真と生きものの名前
| 種類 | ファイル名 | 種類・名前 | ファイル名 | 種類・名前 | ファイル名 | 種類・名前 | ファイル名 | 種類・名前 |
| 犬 | inu01 | ハドレー ポメラニアン | inu02 | トイプードル | inu03 | チワワ | inu04 | イタリアン グレーハウンド |
| 虫 | mushi01 | シオカラトンボ | mushi02 | ジャノメチョウ | mushi03 | タマムシ | mushi04 | カラスアゲハ |
| 猫 | neko01 | マンチカン | neko02 | ペルシャ猫 | neko03 | エキゾチックショートヘア | neko04 | シンガプーラ |
| 鳥 | tori01 | 烏骨鶏 | tori02 | オウギバト | tori03 | オウム | tori04 | ジョウビタキ |
階層のイメージ を見ながら以下の問題に答えてください。
また、皆さんも問題を作ってください。皆で回答していきます。
| ① | index.html にどれでもいいので、犬、虫、猫、鳥から各1枚ずつ横幅400pxにして（実際に写真を400pxに加工するわけではありません）写真を載せてください。この横幅指定にはスタイルシート kaisou.css を利用してください。 |
（ index.html に書く）
| ② | ①で作った写真を縦に並べてそれぞれを右寄せしてください。 |
（ index.html に書く）
| ③ | 写真を左右2つ、上下2段に並び替えてください。できれば中央配置してください。写真どうしの隙間は20px～50pxとしてください。 |
（ index.html に書く）
| ④ | index.html に各ページへのリンクを書いてください。リンク先は５つあります。クリックして各ページに行ければ書き方はお任せします。 |
（ index.html に書く）
| ⑤ | inu.html に index.html と同じ写真を③と同じように載せてください。 |
| ⑥ | mushi.html に index.html と同じ写真を③と同じように載せてください。 |
| ⑦ | ikimono.html に index.html と同じ写真を③と同じように載せてください。 |
| ⑧ | ikimono.html に各ページへのリンクを書いてください。リンク先は５つあります。クリックして各ページに行ければ書き方はお任せします。 |
| ⑨ | tori.html に各ページへのリンクを書いてください。リンク先は５つあります。クリックして各ページに行ければ書き方はお任せします。 |
⑩
 | 2023/06/18 追加
tori.html のページの各四隅に、犬・虫・猫・鳥の写真を１枚ずつ表示してください。 画像配置の見本 |
⑪
| 2023/06/18 追加
⑩に追加で、各画像の斜め下、あるいは斜め上に別の画像を（傾けて）追加してください。
inu.html ではありませんが見本を用意しました。 画像配置の見本 |
⑫
| 2023/06/18 追加
⑩の問題で、各画像の右下に、その生き物の名前を書き、背景色を塗った画像を張り付けてください。 |
| ⑬ | 2023/06/18 追加
生き物のページに猫のページへのリンクを書いてください。また、その猫のページに生き物のページへのリンクを載せてください。クリックしてそれぞれのページに行ければ書き方はお任せします。 |
| ⑭ | 2023/06/18 追加
生き物のページに虫のページへのリンクを書いてください。また、その虫のページに index.html へのリンクを載せてください。クリックしてそれぞれのページに行ければ書き方はお任せします。 |
| ⑮ | 2023/06/25 追加
インラインフレームを使って neko.html に inu.html を載せてください。大きさは横幅600px、高さ300px。 |
| ⑯ | 2023/06/25 追加
インラインフレームを使って neko.html に ikimono.html を載せてください。大きさは横幅600px、高さ300px。 |
| ⑰ | 2023/06/25 追加
インラインフレームを使って neko.html に index.html を載せてください。大きさは横幅600px、高さ300px。 |
| ⑱ | 2023/07/07 追加（雑学）
div を使って tori.html の中央に赤い縦線を書いてください。線の横幅は 5px、高さは 100px。（考え方：縦線に見えるように作る） |
| ⑲ | 2023/07/09 追加（雑学）
下記のように文字と枠線の隙間を上下左右とも同じに作ってください。
均等な隙間にする |
| ⑳ | 2023/07/09 追加（雑学）
画像を張りつけたのにうまく表示できない。そんな時はどのような原因が考えられますか。 |
| ㉑ | 2023/07/09 追加（雑学）
画像を並べる際に、画像と画像の間に隙間が空いてしまうことがあります。この隙間をなくすにはどうすればいいでしょうか？ |
Copyright(C) 2023
はびきのうぇぶ All Rights Reserved.