今回のポイント
サイト制作に於いて、枠線を描くことは必要不可欠です。
今回はその枠線を実際に記述しながら解説していきます。
前準備
今回は前回作成した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=”ぱくぱくブログ画像１”>
</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=”ぱくぱくブログ画像１”>
<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;
}
- 『ドット＋class名』でHTML内の対象のclassへ指定することを宣言します。
- 『border』でボックス内に枠線を指定します。
- 『:』ここから枠線の装飾について指定することを宣言します。
- 『solid』１本線であることを指定します。
- 『1px』線の太さは１ピクセルであることを指定します。
- 『#008080』で枠線の色を指定します。
- 『:』宣言が完了したことを告げます。
それではブラウザで確認してみましょう。
何やら横線が出現しました。
枠線を描きたかったのに、横線が引かれています。
これは枠の高さを指定していないためです。
border（ブロック要素）の高さを指定する
それでは枠の高さを指定しましょう。
先程のCSSへ以下のように、ソースコードを追記します。
img {
width: 80%; height: 80%;
}
.test {
border: solid 1px #008080;
height: 4em;
}
追記した内容を解説しておきます。
height: 4em;
『height:』高さを4emで指定という意味です。
それではブラウザで確認してみましょう。
いかがですか？
枠線が見事に現れましたね。
このようにブロック要素に囲みを描いて、ブロックの大きさを指定することで枠線を描くことができます。
次の記事
前回の記事
HTMLを学ぶ。シリーズはこちら
