[初めてのwebサイト作成 レッスン20]
ボーダーの角を丸くする方法やボックスに影を付ける方法


🌹レッスン20🌹

ボーダーの角を丸くする方法とBOXに影を付ける方法


 🌻パソコンのブラウザはGoogle Chromeを使用しています。

 今回は、前回までのHappyNewYearCardをアレンジして題材として「X’masCard」を作成します。画像を2枚ご用意ください。

 私は上手に絵が描けないので、かわいいフリー素材の「いらすとや」の画像を載せています。

 リンク貼っておきます。ご利用の際は、注意事項(イメージを壊したりする利用をしないことなどetc)を読んでから行いましょうね!

 フリー素材の「いらすとや」 https://www.irasutoya.com/


1. ボーダーの角を丸くする方法

CSS3では、border-radiusプロパティでボーダーの角に丸みを付けることができます。

ボーダーの角の半径を数値で丸くしていきます。


 1-1. 上下左右を個別に指定する方法

    左上コーナーの角を丸くする
  • border-top-left-radius:値
    右上コーナーの角を丸くする
  • border-top-right-radius:値
    左下コーナーの角を丸くする
  • border-bottom-left-radius:値
    右下コーナーの角を丸くする
  • border-bottm-right-radius:値

例えば、破線の色と太さを上下左右別々に変えてみます。
(前回レッスン19で作ったファイルをアレンジしていきます。)

【HTML】


	<body>
<div id="contents">
<h1>メリーX’mas</h1>
<h3>クリスマスに登場しまーす!</h3>
<p id="radius1">サンタクロース</p>
<div id="photo1">
<img src="img/santa.png"alt="santa" width="250px" />
</div>
</div>

</body>

【CSS】別々に指定した場合


	body {
		color: #000;
		width: auto;
		height: 90%;
		margin: auto;
		padding: 0px;
		}
h1{ color: #080; text-align: center; font-size: 30px; font-family:"Comic Sans MS","Meiryo","Avenir",
"Corbel","Osaka","fantasy"; font-weight: bold; text-shadow: #aaa 10px 5px 5px; padding: 0 10px; }
#contents{ background-color: #fff; border: ridge #0f0 20px; width: 340px; max-width: 95%; height: auto; margin: 0 auto; padding: 0; }
h3{ font-size: 20px; text-align: center; line-height:95%; letter-spacing: 0.2em; }
p{ border: solid 4px #f00; text-align: center; height: auto; padding: 5px; margin: 5px 40px; }
p#radius1{ border-top-left-radius: 10px; border-top-right-radius: 30px; border-bottom-left-radius: 40px; border-bottom-right-radius: 10px; }

🌼ブラウザで確認してみましょう!


 1-2. 角丸めをまとめて指定する方法

まとめて角丸を指定するには

border-radius:値

【HTML】

(桃色のコードをそれぞれ追加してください)


	<p id="radius2">トナカイ</p>
<div id="photo2">
<img src="img/tonakai.png"alt="tonakai" width="250px" />
</div>>

【CSS】まとめて指定した場合


	p#radius2{
		border-radius: 25px;
		}
	

🌼ブラウザで確認してみましょう!



 1-3. 楕円の角丸を指定する方法

border-radiusは、角丸の半径をスラッシュで区切って
楕円のコーナー形状にすることができます。

横方向の半径/縦方向の半径

例えば、2枚の画像を楕円の角丸にしてみましょう!

【CSS】


	img{
		text-align: center;
		border-radius: 230px / 190px 190px;
		max-width: 95%;
		}
#photo1,#photo2{ text-align: center; }

🌼ブラウザで確認してみましょう!



2. ボックスに影を付ける方法

CSS3のbox-shadowプロパティは、

Photoshopのドロップシャドウのような効果を演出できます。

    box-shadow:
  • X方向の距離
  • Y方向の距離
  • ぼかし幅
  • 広がり
  • 影の色

で指定します。

例えば、画像に影を付けてみます。

【CSS】


	img{
		text-align: center;
		border-radius: 230px / 190px 190px;
		box-shadow: 5px 5px 5px 5px #aaa;
		max-width: 95%;
		}
	

🌼ブラウザで確認してみましょう!

🌺X方向とY方向を0に指定するとグロー(光彩)表現することができます。

例えば、画像にグローを付けてみます。

【CSS】


	img{
		text-align: center;
		border-radius: 230px / 190px 190px;
		box-shadow: 0 0 5px 5px #aaa;
		max-width: 95%;
		}
	

🌼ブラウザで確認してみまみましょう!


🌺ついで背景を夜にしてみましょう!桃色のコードを追加します。

【CSS】


	body {
		background: -webkit-linear-gradient(top 
		left,#fff 0%,#33f 75%);
		background-position: center;
		background-attachment: fixed;
		}
	

🌼ブラウザで確認してみましょう!(パソコン表示)

🌼ブラウザで確認してみましょう!(スマホ表示)(ipad表示)

上記の画像のようになったかな?

スマホやipadを横に傾けるとパソコン表示のように背景も映し出されると思います。


★まとめ

いかがでしたか?

CSS3では、画像の加工をしたようなデザイン性のある表示をすることができます!

フォトショップのような加工も、段々と出来ることが増えてきて出来上がったとき楽しいです。

皆さんは、もっとセンス良くお好みで色々試してみてね(#^.^#)

webページは縦長なので、途中で読み返したい場合などスクロールで戻る際に大変な時があります。

次回レッスン21は、「ページの途中でもトップへ戻るアイコンを作る方法」をアップロードする予定です!

See you again Take care
(^.^/)))~~~bye!!



TOP