【CSS】ボックス装飾によく使うプロパティ おさらいとサンプル集
どうも！LSSです！！
CSS関連で色々と作ってきましたが、ここでちょっといったん、まとめ記事を書きます！
ちょっと量が多かったので、今回は「ボックス装飾」関連のまとめ記事となります^^
border-radius
ボックス（枠）の角を角丸にする指定です。
サンプル
コード
<div style="border-radius:10px;background-color:lightblue;">サンプル</div>
書式
border-radius:角丸にするサイズ;
border
ボックス（枠）の外周に枠線を表示します。
サンプル
コード
<div style=border:1px solid black;border-radius:10px;background-color:lightblue;">サンプル</div>
書式
border:枠線の太さ 枠線の種類 枠線の色;
枠線の種類
border:8px solid black;
border:8px double black;
border:8px dotted pink;
border:8px dashed blue;
border:10px groove yellowgreen;
border:10px ridge yellowgreen;
border:10px inset yellowgreen;
border:10px outset yellowgreen;
その他アレンジ
きんきらきんのきーん♪
<div style="
padding: 1em;
border: 15px solid;
border-image: linear-gradient(150deg, black,brown,yellow,white,yellow,brown,black);
border-image-slice: 1;
">きんきらきんのきーん♪</div>
こんな組み合わせも
<div style="
margin: 0px auto;
padding: 1em;
border: 10px ridge hsl(300,80%,65%);
border-radius: 37px;
box-shadow: 0px 0px 15px 3px hsl(60,70%,55%),0px 0px 15px 3px hsl(60,70%,55%) inset;
">こんな組み合わせも</div>
画像を使った枠線
<div style="border: 20px solid; border-image: url('画像ファイルのURL'); border-image-slice: 20;">画像を使った枠線</div>
※画像ファイルのURLは画像ファイルのURLに書き換えてください
参考→【CSS】画像を使った枠線（border-imageとborder-image-slice使用）
background-image
ボックス（枠）の背景に画像をつけます。
マインクラフト最高！！
コード
<div style="
background-image: url('画像ファイルのURL');
background-size: cover;
color: white;
height: 300px;
padding:1em;
">マインクラフト最高！！</div>
画像ファイルの他に代替でグラデーションを使用できます。
サンプル
コード
<div style="
background-image: linear-gradient(160deg,lightblue,pink,yellow);
padding: 1em;
border-radius: 8px;
color: white;
font-size: 50px;
">サンプル</div>
参考→直線グラデーションもやってみたら、よく見るCSSマーカーに行きついた話
直線グラデーションの他に、円形グラデーションも使用できます。
サンプル
<div style="
background-image: radial-gradient(circle 250px at 70% 30%,white,pink);
padding: 1em;
border-radius: 8px;
color: white;
font-size: 50px;
">サンプル</div>
複数のグラデーションを重ねる事もできます。
サンプル
<div style="
background-image: radial-gradient(circle 250px at 70% 30%,#ffffffe0,transparent),linear-gradient(160deg,lightblue,pink,yellow);
padding: 1em;
border-radius: 8px;
color: white;
font-size: 50px;
">サンプル</div>
重ねる場合、先に書いたradial-gradientのほうが、後に書いたlinear-gradientの上ののっかるように表示されるようですね。
その他アレンジ
夏だ！
海が呼んでるゼ！
海が呼んでるゼ！
<div style="
background-color: blue;
border-radius: 25px;
box-shadow: 5px 5px 5px #888888;
border: 2px solid #eeeeee;
padding: 1em 1em;
color: white;
font-size: 35px;
font-weight: bold;
text-align: center;
text-shadow: 1px 1px 1px black,10px 10px 10px darkblue;
background-image: linear-gradient(135deg,transparent 30%,lightblue 50%,transparent 70%),linear-gradient(225deg,transparent 30%,lightblue 50%,transparent 70%);
background-size: 30px 15px;
background-position: 0px 60%,15px 60%;
background-repeat: repeat;
">夏だ！<br />海が呼んでるゼ！</div>
小田原城の寄木細工
<div style="
width: 320px;
height: 65px;
font-size: 29px;
color: #ffe9a5;
text-align: center;
text-shadow: 2px 2px 3px gray;
font-weight: bold;
background-image: linear-gradient(90deg,#cd9f0e 50%,#70570e 50%),linear-gradient(90deg,#70570e 50%,#cd9f0e 50%);
background-size: 80px 20px,80px 20px;
background-position: 0% 25px,0% 45px;
background-repeat: repeat-x;
">小田原城の寄木細工</div>
ネタ提供元：さじさん(id:conasaji)「寄木細工、時々CSS波線。」
水玉模様の背景も作れますね^^
<div style="
width: 300px;
height: 200px;
padding: 1em;
border-radius: 25px;
background-size: 30px 30px;
background-color: #ffdddd;
background-image: radial-gradient(circle 20px at 25% 25%,white 25%,transparent 30%),radial-gradient(circle 20px at 75% 75%,white 25%,transparent 30%);
">水玉模様の背景も作れますね^^</div>
参考→【CSS小ネタ】水玉模様（radial-gradientは複数書けます）
box-shadow
ボックスに影をつけます。
サンプル
コード
<div style="border: 1px solid black; box-shadow: 20px 10px 0px 0px black;">サンプル</div>
書式
box-shadow: 右にずらす距離 下にずらす距離 影のぼかし幅 影のぼかし広がり幅 影の色;
その他アレンジ
位置をずらさずに、ぼかしだけ
入れるとこんな感じに。
入れるとこんな感じに。
<div style="border: 1px solid black; box-shadow: 0px 0px 10px 5px gray;">位置をずらさずに、ぼかしだけ<br />入れるとこんな感じに。</div>
末尾にinsetとつけると、内側に影ができます。
<div style="border: 1px solid black; box-shadow: 0px 0px 10px 5px gray inset;">末尾にinsetとつけると、内側に影ができます。</div>
あとがき
先日、当ブログのコメント欄にて
さじ(id:conasaji)
あ。。↓自分も。。熱望します（笑）
421miyako(id:m421miyako)
一つお願いが有ります。気が向いた時で、暇で仕方がない時でいいのですが、アンダーラインとか、袋文字とか、コメントを書くのカスタマイズとか、その辺の一覧が有れば嬉しいです。サンプルが書いてあって、やり方のリンクが貼ってあるとか。タイトルだけだとわかりにくいのもあるので。ほーんとうに、暇で仕方ない時でいいので、ちょっと頭に入れておいていただければ嬉しいです。また、サバの記事を書いていますがグラデーション文字さっそくつかいました。THE HEADのラストシーズン記事にも拝借しています。お楽しみに。
とのコメントをいただきました。
「なるほど、そういうのがあったら便利そう^^」と思い、着手したのですが…膨大な量になりそうだったので
「ジャンルで区切り」ます！ｗ
という事で、今回は「ボックス装飾」篇でした。
今後、「テキスト装飾」「アニメーション」「はてなブログ特化」といった感じの区切りで書いていこうと思います^^
ってなとこで、今回はこのへんで！
次回もまた、よろしくお願いします^^
