Little Strange Software

スマホアプリの開発を行う LittleStrangeSoftware のブログです。

【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>

参考→【CSS】border(枠線)のグラデーション

 

こんな組み合わせも

 

<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>

 参考→ブログで使える!BOX要素装飾ツールを作りました^^

  

画像を使った枠線

 

<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>

参考→【CSS】円形グラデーションってこうやるのかぁ 

 

複数のグラデーションを重ねる事もできます。

サンプル

 

<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>

 参考→【CSS小ネタ】波線マーカーを背景に応用してみました

 

小田原城の寄木細工

 

<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>

参考→【CSS】CSS模写 再び!【格子模様】

ネタ提供元:さじさん(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のラストシーズン記事にも拝借しています。お楽しみに。

とのコメントをいただきました。

「なるほど、そういうのがあったら便利そう^^」と思い、着手したのですが…膨大な量になりそうだったので
「ジャンルで区切り」ます!w

 

という事で、今回は「ボックス装飾」篇でした。

今後、「テキスト装飾」「アニメーション」「はてなブログ特化」といった感じの区切りで書いていこうと思います^^

 

 

 

ってなとこで、今回はこのへんで!

次回もまた、よろしくお願いします^^