CSSを学ぶ。borderプロパティを使って枠線を学ぶ。

CSSを学ぶ。borderプロパティを使って枠線を学ぶ。

今回のポイント

サイト制作に於いて、枠線を描くことは必要不可欠です。
今回はその枠線を実際に記述しながら解説していきます。

前準備

今回は前回作成したHTMLファイルに、枠線を追加します。
前回作成したサイトはこんな感じでしたね。

そして、作り方は以下の記事を参考にして下さい。

それでは前準備から始めていきましょう。

HTMLファイルを準備する

前回の記事のHTMLファイルをそのまま使用します。

HTMLのソースコードは以下の通りでした。

<!DOCTYPE HTML>
<html lang=”ja”>
 <head>
  <meta charset=”UTF-8″>
  <title>ぱくぱくのCSS講座</title>
  <link rel=”stylesheet” type=”text/css” href=”style.css”>
 </head>
 <body>
   <img src=”pakupaku.png” alt=”ぱくぱくブログ画像1”>
 </body>
</html>

CSSファイルを準備する

これも前回の記事で解説した、CSSのソースコードを使用します。

ソースコードは以下の通りです。

img {
width: 80%; height: 80%;
}

枠線を描いてみる

今回は前回作成した画像の下に枠を作成したいと思っています。
それでは実際に枠線を描いてみましょう。

HTMLファイルへブロック要素を追加する

準備したHTMLファイルへ以下のコードを追記します。

<!DOCTYPE HTML>
<html lang=”ja”>
 <head>
  <meta charset=”UTF-8″>
  <title>ぱくぱくのCSS講座</title>
  <link rel=”stylesheet” type=”text/css” href=”style.css”>
 </head>
 <body>
   <img src=”pakupaku.png” alt=”ぱくぱくブログ画像1”>
   <div class=”test”>
   </div>
 </body>
</html>

今回追記したHTMLの内容を解説しておきますね。

<div class=”test”>・・・div要素にclass名をtestと指定

この『div要素』ですが、単体では意味を持たないタグです。
しかし<div>で囲った部分はブロックレベル要素としてグループ化することのできる便利なタグです。

そして今回はこの『div要素』にclass名として『test』と指定しました。

class属性へborderを指定する

準備したCSSのソースコードへ以下のようにコードを追記します。

img {
width: 80%; height: 80%;
}
.test {
border: solid 1px #008080;
}

今回追記した内容を解説しておきます。

.test {
border: solid 1px #008080;
}

  1. 『ドット+class名』でHTML内の対象のclassへ指定することを宣言します。
  2. 『border』でボックス内に枠線を指定します。
  3. 『:』ここから枠線の装飾について指定することを宣言します。
  4. 『solid』1本線であることを指定します。
  5. 『1px』線の太さは1ピクセルであることを指定します。
  6. 『#008080』で枠線の色を指定します。
  7. 『:』宣言が完了したことを告げます。

それではブラウザで確認してみましょう。

何やら横線が出現しました。
枠線を描きたかったのに、横線が引かれています。

これは枠の高さを指定していないためです。

border(ブロック要素)の高さを指定する

それでは枠の高さを指定しましょう。

先程のCSSへ以下のように、ソースコードを追記します。

img {
width: 80%; height: 80%;
}
.test {
border: solid 1px #008080;
 height: 4em;
}

追記した内容を解説しておきます。

height: 4em;

『height:』高さを4emで指定という意味です。

それではブラウザで確認してみましょう。

いかがですか?
枠線が見事に現れましたね。

このようにブロック要素に囲みを描いて、ブロックの大きさを指定することで枠線を描くことができます。

次の記事

前回の記事

HTMLを学ぶ。シリーズはこちら

CSSカテゴリの最新記事