第12回 授業ページ

今回の授業の内容
Step1. 枠線を作成する。
Step2. 枠線を装飾する。

●Step1. 枠線を作成する。

CSSを使えば文字や画像を枠線で囲むことが出来ます。
<head>～</head>の中に枠の設定を記述して、
<body>～</body>の中の枠で囲みたい文字を<div>～</div>で囲みましょう。

１．「CSS教育_202○」フォルダーの中で右クリックする
２．「新規作成（X)」→「テキスト ドキュメント」をクリック
３．テキストのファイル名（新しいテキスト ドキュメント.txt）をクリック
４．「lesson12.html」を入力して「Enter」キーを押す。
５．作成したテキストを右クリックして、「プログラムから開く(H)」→「メモ帳」をクリックする
６．下の内容をテキストにコピーして貼り付ける。
７．テキストを閉じる。
８．「保存する(S)」をクリック
９．作成したテキストをダブルクリックしてブラウザで表示する。
<html lang="ja">
<head>
<meta http-equiv="content-type" charset="UTF-8">
<style type="text/css">

.waku1 {
 border: 1px solid black;
 width: 250px;
 height: 60px;
}

</style>
</head>
<body>

<div class="waku1">この文章が枠で囲まれます。</div>

</body>
</html>


●Step2. 枠線を装飾する。

枠線のパラメータを変更することで枠線の形を変えることが出来ます。

１．「lesson12.html」を右クリックして、「プログラムから開く(H)」→「メモ帳」をクリックする
２．下の赤い文字の部分をコピーして貼り付ける。
３．テキストを閉じる。
４．「保存する(S)」をクリック
５．作成したテキストをダブルクリックしてブラウザで表示する。
<html lang="ja">
<head>
<meta http-equiv="content-type" charset="UTF-8">
<style type="text/css">

.waku1 {
 border: 1px solid red;
 width: 250px;
 height: 60px;
}

.waku2 {
 border: 5px dotted blue;
 width: 300px;
 height: 70px;
}

.waku3 {
 border: 5px dashed black;
 width: 400px;
 height: 80px;
}

.waku4 {
 border: 10px double #228b22;
 width: 500px;
 height: 90px;
}

</style>
</head>
<body>

<div class="waku1">この文章が枠で囲まれます。</div>
<br>
<div class="waku2">２つ目の文章も枠で囲まれます。</div>
<br>
<div class="waku3">３つ目の文章も枠で囲まれます。</div>
<br>
<div class="waku4">４つ目の文章も枠で囲まれます。</div>
<br>

</body>
</html>


「.waku1」で設定したパラメータは「class="waku1"」のボタンの形を変更します。
「.waku2」で設定したパラメータは「class="waku2"」のボタンの形を変更します。

それぞれのパラメータを変更してオリジナルの枠線を作成してみましょう。
border: 1px solid red;　←枠線の太さ、形、色を指定します。
width: 250px;　　　　　←枠線の横幅を指定します。
height: 60px;　　　　　←枠線の縦幅を指定します。

※枠線の形は以下を指定できます。実際に試してみましょう。
solid
dotted
dashed
double
groove
ridge
inset
outset


前のページに戻る