枠線の設定

HTML

1. サイトをbracktsで開き、htmlファイルを新規作成しtextフォルダーに「lion.html」として保存します。
2. bodyタグ内に「枠線の設定」のHTMLをコピペします。
3. 上書き保存します。

CSSとHTML

brackts編集画面を左右に分割し、左側に「lion.html」を配置します。右側に新規ファイルを作成し「style」フォルダーに「lion.css」として保存します。

1. 「lion.html」でhead要素内に「lion3.css」を呼び込むlinkを設定します。
   <link rel="stylesheet" href="../style/lion.css" type="text/css">
2. 「lion.html」で3枚のライオン画像にクラス「sol」、「dot」、「das」を設定します。
   

   <img class="sol" src="../images/lion.jpg" alt="ライオン">
   <img class="dot" src="../images/lion.jpg" alt="ライオン">
   <img class="das" src="../images/lion.jpg" alt="ライオン">

3. 「lion.css」で画像の幅を「200px」にmarginを「10」pxに設定します。
   

   p img {
   　width: 200px;
   　margin: 10px;
   }

4. 更に上記2.でクラスを設定した画像に実線（solid）、点線（dotted）、破線（dashed）を指定します。枠線の太さは5pxにします。
   

   .sol {
   　border: 1px solid #000;
   }
   .dot {
   　border: 3px dotted #f00;
   }
   .das {
   　border: 5px dashed #0f0;
   }

5. 最終行にトップページへ戻るリンクを挿入します。
6. 上書き保存し、プレビューで確認してサイトへ転送します。