CSS(スタイルシート)課題
ページ下部に CSS スタイルシートを利用した練習問題を用意しています。
各練習問題の解説を参考にサイトを作成し、moodleにアップロードしてください。
課題の概要
- 作業用のフォルダ内に rensyu フォルダを新規作成してください。
「右クリック」→「新規作成」→「フォルダ」など
- rensyu フォルダ内に index.html というHTMLページを作成し、rensyu1.html から rensyu5.html にアクセスできるようリンクを設置してください。
- rensyu1.html から rensyu5.html ファイルそれぞれに、下記の練習問題の解答を記入してください。
ファイルやフォルダは下のように配置されます。
ファイル配置
最終的にファイルの数は、そこそこ多くなることでしょう。
rensyu
exq.gif
index.html
red01.png
rensyu1.css
rensyu1.html
rensyu2.css
rensyu2.html
rensyu3.css
rensyu3.html
rensyu4.css
rensyu4.html
rensyu5.css
rensyu5.html
star.gif
参考：完成後の作業フォルダの様子
なお各問題は独立した内容なので、もしどうしても分からない場合は飛ばして次の問題に進む作戦もあります。
- 作成したら、rensyuフォルダの内容をすべてZIP圧縮し、moodle にアップロードしてください。
提出ファイル名は 学生番号 氏名 CSS練習1.zip とします。
練習問題
フォルダとindexの作成方法
最初にこちらの手順を見ながら回答のための準備を行ってください。
準備ができたら、以下の練習問題に回答してください。
１ 余白の設定 rensyu1.html
２ 余白の設定２ rensyu2.html
３ ボックスの作成 rensyu3.html
４ ボックスの装飾 rensyu4.html
５ ページ背景に画像を配置 rensyu5.html
次週に続きます。
完成例
えっ？ 完成したらどうなるか知りたいですって？
しょうがないですね。😆 こちらを参考にしてください。
完成したらどうなるか知りたい場合はここをクリック
まとめ
今回登場した代表的なプロパティを振り返っておきます。
color 文字の色を設定します。background-color 背景色を設定します。line-height 行間の高さを設定します。margin ボックスの周囲に余白を設けます。
margin-top、margin-bottom、margin-left、margin-right で、それぞれ上下左右の余白を個別に設定することもできます。padding ボックスの内部に余白を設けます。
padding-top、padding-bottom、padding-left、padding-right で、それぞれ上下左右の内部余白を個別に設定することもできます。
list-style-image: url('画像ファイル名'); 箇条書きの行頭に付くマークを画像に置き換えます。ul タグなどに対して設定をします。border ボックスの周囲に罫線を引きます。border-radius ボックスの角を丸くします。background: linear-gradient(to bottom, 色1, 色2 ); ボックスの背景を直線状のグラデーション（linear-gradient）にします。下に向かって（to bottom）、色1 から 色2 へとグラデーションがかかります。box-shadow ボックスに影を付けます。background-image: url('画像ファイル名'); ボックスの背景に画像を表示します。background-repeat: repeat-x; ボックスの背景画像の並び方を設定します。repeat-x は横方向に画像を繰り返し表示させます。
」ボタンを押して