今回のポイント
前回の記事では、枠線を描くためにHTMLとCSSにコード追記していきました。
今回は前回作成したサイトの枠に、装飾を加えていきます。
前回の記事は以下の記事を参考にして下さいね。
前準備
まずは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=”ぱくぱくブログ画像１”>
<div class=”test”>
</div>
</body>
</html>
HTMLファイルの作成方法については過去の記事を参考にして準備して下さい。
CSSファイルとソースコードの準備をする
こちらもHTMLと同様に前回使用したものを使用して追記していきます。
そして、ソースコードはこちらです。
img {
width: 80%; height: 80%;
}
.test {
border: solid 1px #008080;
height: 4em;
}
もしCSSファイルの準備が分からない場合は、以下の記事を参考にしてみて下さいね。
枠線の装飾を行う
それでは今回の本題である、『枠線の装飾』を行なっていきましょう。
枠の角に丸みを与える（border-radius）
border-radiusプロパティを使用することで、枠の４辺に対して丸みを指定することができます。
この『丸み』の指定については以前解説した、単位について理解しておく必要があります。
使用方法については以下の通りです。
border-radius: 10px;
これは４辺すべての角に『10px』の丸みを指定することができます。
それではこのプロパティをCSSファイルに追記していきましょう。
img {
width: 80%; height: 80%;
}
.test {
border: solid 1px #008080;
height: 4em;
border-radius: 10px;
}
追記できたらブラウザで確認してみましょう。
いかがですか？
角に丸みができたことが確認できます。
枠線に丸みもできたので少し可愛く見せるために、枠線の太さを少し太くしておきましょう。
ここで以前のおさらいです。
枠線を太くするにはどうしたら良いか分かりますか？
答えはこうです。
img {
width: 80%; height: 80%;
}
.test {
border: solid 3px #008080;
height: 4em;
border-radius: 10px;
}
それではブラウザで確認してみましょう。
かなり印象が変わりますね。
このように学んだことを活用するだけでも、印象を変えることができます。
上下にだけ線を描く方法（border-top・border-bottom）
これもブログ記事などでよく見かける装飾です。
主に、H1~H3タグなどで使われています。
これには以下のコードを使用します。
border-●●
この●●にはtop（上）・bottom（下）・right（右）・left（左）が入ります。
この●●で指定した場所に線を引くということになります。
それでは先程のCSSを以下のように『修正』してみて下さい。
img {
width: 80%; height: 80%;
}
.test {
height: 4em;
border-top: solid 5px #5989cf;
border-bottom: solid 5px #5989cf;
}
ここで少し『border-●●』の後に続く指定について、解説を加えておきますね。
solid 5px #5989cf;
これはsolid（線）を5ピクセルにして、#5989cfの色に指定という意味です。
それでは記述した内容をブラウザで確認してみましょう。
そして『border-●●』の少し応用編です。
左だけ太線にする方法
『左だけ太線にする方法』なんとなく想像できますか？
先程のCSSを以下のように『修正』してみて下さい。
img {
width: 80%; height: 80%;
}
.test {
height: 4em;
border-left: solid 10px #5989cf;
}
それでは解説していきます。
border-left:
これで左側に線を指定しました。
そして
solid 10px #5989cf;
これで線は10ピクセルで色は #5989cfで指定してみました。
それではブラウザで確認してみましょう。
いかがでしょうか。
何か物足りないので、少し装飾を加えてみましょう。
img {
width: 80%; height: 80%;
}
.test {
height: 4em;
background: #fff8e8;
border-left: solid 10px #ffc06e;
}
background: #fff8e8;
これで、『test』内の背景を#fff8e8の色に指定
ついでにborder-leftの色を#ffc06eに指定しました。
それではブラウザで確認してみましょう。
いかがでしょうか？
少しオシャレな印象になりました。
次の記事
前回の記事
HTMLを学ぶ。シリーズはこちら
