トップページへ
GoogleService
メニュー
サイト内検索
お問合わせ
[初めてのｗｅｂサイト作成 レッスン20]🌹レッスン20🌹
ボーダーの角を丸くする方法とＢＯＸに影を付ける方法
🌻パソコンのブラウザはGoogle Chromeを使用しています。
今回は、前回までのＨａｐｐｙＮｅｗＹｅａｒＣａｒｄをアレンジして題材として「Ｘ’ｍａｓＣａｒｄ」を作成します。画像を２枚ご用意ください。
私は上手に絵が描けないので、かわいいフリー素材の「いらすとや」の画像を載せています。
リンク貼っておきます。ご利用の際は、注意事項（イメージを壊したりする利用をしないことなどetc）を読んでから行いましょうね！
フリー素材の「いらすとや」 https://www.irasutoya.com/
1. ボーダーの角を丸くする方法
ＣＳＳ３では、ｂｏｒｄｅｒ－ｒａｄｉｕｓプロパティでボーダーの角に丸みを付けることができます。
ボーダーの角の半径を数値で丸くしていきます。
1-1. 上下左右を個別に指定する方法
- 左上コーナーの角を丸くする
ｂｏｒｄｅｒ－ｔｏｐ－ｌｅｆｔ－ｒａｄｉｕｓ：値 - 右上コーナーの角を丸くする
ｂｏｒｄｅｒ－ｔｏｐ－ｒｉｇｈｔ－ｒａｄｉｕｓ：値 - 左下コーナーの角を丸くする
ｂｏｒｄｅｒ－ｂｏｔｔｏｍ－ｌｅｆｔ－ｒａｄｉｕｓ：値 - 右下コーナーの角を丸くする
ｂｏｒｄｅｒ－ｂｏｔｔｍ－ｒｉｇｈｔ－ｒａｄｉｕｓ：値
例えば、破線の色と太さを上下左右別々に変えてみます。
（前回レッスン19で作ったファイルをアレンジしていきます。）
【ＨＴＭＬ】
<body>
<div id="contents">
<h1>メリーＸ’ｍａｓ</h1>
<h3>クリスマスに登場しまーす！</h3>
<p id="radius1">サンタクロース</p>
<div id="photo1">
<img src="img/santa.png"alt="santa" width="250px" />
</div>
</div>
</body>
【ＣＳＳ】別々に指定した場合
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. 角丸めをまとめて指定する方法
まとめて角丸を指定するには
ｂｏｒｄｅｒ－ｒａｄｉｕｓ：値
【ＨＴＭＬ】
（桃色のコードをそれぞれ追加してください）
<p id="radius2">トナカイ</p>
<div id="photo2">
<img src="img/tonakai.png"alt="tonakai" width="250px" />
</div>
【ＣＳＳ】まとめて指定した場合
p#radius2{
border-radius: 25px;
}
🌼ブラウザで確認してみましょう！
1-3. 楕円の角丸を指定する方法
ｂｏｒｄｅｒ－ｒａｄｉｕｓは、角丸の半径をスラッシュで区切って
楕円のコーナー形状にすることができます。
横方向の半径/縦方向の半径
例えば、２枚の画像を楕円の角丸にしてみましょう！
【ＣＳＳ】
img{
text-align: center;
border-radius: 230px / 190px 190px;
max-width: 95%;
}
#photo1,#photo2{
text-align: center;
}
🌼ブラウザで確認してみましょう！
2. ボックスに影を付ける方法
ＣＳＳ３のｂｏｘ－ｓｈａｄｏｗプロパティは、
Ｐｈｏｔｏｓｈｏｐのドロップシャドウのような効果を演出できます。
- ｂｏｘ－ｓｈａｄｏｗ：
- Ｘ方向の距離
- Ｙ方向の距離
- ぼかし幅
- 広がり
- 影の色
で指定します。
例えば、画像に影を付けてみます。
【ＣＳＳ】
img{
text-align: center;
border-radius: 230px / 190px 190px;
box-shadow: 5px 5px 5px 5px #aaa;
max-width: 95%;
}
🌼ブラウザで確認してみましょう！
🌺Ｘ方向とＹ方向を０に指定するとグロー（光彩）表現することができます。
例えば、画像にグローを付けてみます。
【ＣＳＳ】
img{
text-align: center;
border-radius: 230px / 190px 190px;
box-shadow: 0 0 5px 5px #aaa;
max-width: 95%;
}
🌼ブラウザで確認してみまみましょう！
🌺ついで背景を夜にしてみましょう！桃色のコードを追加します。
【ＣＳＳ】
body {
background: -webkit-linear-gradient(top
left,#fff 0%,#33f 75%);
background-position: center;
background-attachment: fixed;
}
🌼ブラウザで確認してみましょう！（パソコン表示）
🌼ブラウザで確認してみましょう！（スマホ表示）（ｉｐａｄ表示）
上記の画像のようになったかな？
スマホやｉｐａｄを横に傾けるとパソコン表示のように背景も映し出されると思います。
★まとめ
いかがでしたか？
ＣＳＳ３では、画像の加工をしたようなデザイン性のある表示をすることができます！
フォトショップのような加工も、段々と出来ることが増えてきて出来上がったとき楽しいです。
皆さんは、もっとセンス良くお好みで色々試してみてね(#^.^#)
ｗｅｂページは縦長なので、途中で読み返したい場合などスクロールで戻る際に大変な時があります。
次回レッスン21は、「ページの途中でもトップへ戻るアイコンを作る方法」をアップロードする予定です！
See you again Take care
(^.^/)))~~~bye!!
TOP