CSS(スタイルシート)課題（後半）

前回に続き、CSSの練習問題に取り組み、完成させてmoodleにアップロードしてください。

今回は後半の、練習6～12です。

課題の概要（おさらい）

  1. 先週に続き、作業用のフォルダ rensyu の中で作業を続けます。
  2. rensyu フォルダ内に index.html というHTMLページを作成し、rensyu1.html から rensyu12.html にアクセスできるようリンクを設置してください。
  3. 今回は rensyu6.html から rensyu12.html ファイルそれぞれに、下記の練習問題の解答を記入してください。
    ファイルやフォルダは下のように配置されます。
    ファイル配置
    最終的にファイルの数はかなり多くなることでしょう。
    rensyu
    city.jpg
    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
    rensyu6.css
    rensyu6.html
    rensyu7.css
    rensyu7.html
    rensyu8.css
    rensyu8.html
    rensyu9.css
    rensyu9.html
    rensyu10.css
    rensyu10.html
    rensyu10plus.css
    rensyu11.css
    rensyu11.html
    rensyu12.css
    rensyu12.html
    star.gif
    yama01.jpg
    参考：完成後の作業フォルダの様子

    なお各問題は独立した内容なので、もしどうしても分からない場合は飛ばして次の問題に進む作戦もあります。

  4. 作成したら、rensyuフォルダの内容をすべてZIP圧縮し、moodle にアップロードしてください。
    提出ファイル名は 学生番号 氏名 CSS練習2.zip とします。
    「」ボタンを押してrensyuフォルダの外に出てから、
    rensyuフォルダを丸ごと圧縮するのがおすすめ
    「右クリック」→「送る」→「圧縮(ZIP形式)フォルダー」

練習問題

最初に行うべき準備については、下記を参考にしてください（先週掲載したのと同じものです）。
フォルダとindexの作成方法

前回作成した index.html には、今回作成する練習問題の分のリンクを追加しておきましょう。

： 省略
<body>
<h1>CSS練習問題</h1>

学生番号 ○○○○○○○<br>
氏名　□□□□<br>
<br>
<a href="rensyu1.html" target="_blank">練習１</a><br>
<a href="rensyu2.html" target="_blank">練習２</a><br>
<a href="rensyu3.html" target="_blank">練習３</a><br>
<a href="rensyu4.html" target="_blank">練習４</a><br>
<a href="rensyu5.html" target="_blank">練習５</a><br>
<!-- 後半分の練習問題 -->
<a href="rensyu6.html" target="_blank">練習６</a><br>
<a href="rensyu7.html" target="_blank">練習７</a><br>
<a href="rensyu8.html" target="_blank">練習８</a><br>
<a href="rensyu9.html" target="_blank">練習９</a><br>
<a href="rensyu10.html" target="_blank">練習１０</a><br>
<a href="rensyu11.html" target="_blank">練習１１</a><br>
<a href="rensyu12.html" target="_blank">練習１２</a><br>

</body>
： 省略

それでは先週に続いて、以下の練習問題に回答してください。

６ ページ背景に画像を配置２ rensyu6.html

７ 表（TABLE）の罫線を細くする rensyu7.html

８ CSSによるページレイアウト rensyu8.html

９ マウスを重ねると色が変わるリンク rensyu9.html

10 ページデザインの変更 rensyu10.html

11 背景画像と半透明の演出 rensyu11.html

12 背景と文字のグラデーション rensyu12.html

以上

完成例

完成したらどうなるか知りたい場合はここをクリック

まとめ

CSSを使ってイイ感じのデザインを実現しましょう！

代表的なプロパティを簡単に振り返っておきます。

ボックス周りのプロパティ

表の罫線のプロパティ

要素の背景に画像を配置するには以下のように記述します。

背景画像のプロパティ

リンクは特殊なセレクタを使用することでデザインできます。

リンクに関するプロパティ

セレクタ対象
a:link通常時のリンク
a:visited閲覧ずみリンク
a:hoverマウスカーソルがリンクの上に来たときのリンク
a:activeリンクの上でクリックされたときのリンク