【囲み枠CSS】背景を色付けしたい！おしゃれな枠で飾りたい！

2024-12-30 2024-09-14 8分35秒

ワ.ードプレスのテーマで装飾が簡単にできるようになっているけど、物足りなくなることってありませんか。ブログで実用的な囲み枠のCSSをまとめました。（ほぼ備忘録(笑)）ご参考までに。

1 枠を点線にしたい
2 色付けした枠を作る
3 立体的な枠
4 最後に

枠を点線にしたい

ポイントは、「class属性」をつけてdivで囲んであげる。

≪文章～。≫こんにちは。文章を点線の枠で囲んでオシャレにしたい時のHTMLとCSSとは。

HTML

 <div class="background-dashed">文章～。</div>

CSS

.background-dashed{
    border: 3px dashed #a5e0f0;
    padding: 20px;
    margin: 5px;
}

＊解決＊
・background-dashed：背景-破線
・専門用語「class属性」とは、同じスタイルを適用する要素をグループ化するためのもの
・classをCSSで指定するときは「.」（ドット）
・padding：要素内の余白（枠内における文字と枠との間の間隔）
・margin：要素外の余白（枠外における枠とそれ以外の間の間隔）
・border：線の太さ、線の種類、線の色を指定することができる。
⇒　border: 3px（線の太さ）dashed（線の太さ）#a5e0f0（線の色）；
これは、次の3つをまとめて書いている（≒ショートハンド）

border-color：線の色
border-style：線の種類…dashed（破線）、solid（線）
border-width：線の幅

もう少しオシャレにしたいという時は4線の色を変えてみてもありかも！

≪文章～。≫上下左右の線の色を変えてみるよ。

HTML

 <div class="background-dashed2">≪文章～。≫上下左右の線の色を変えてみるよ。</div>

CSS

.background-dashed2{
padding: 20px;
margin: 5px;
border: 3px dashed;
border-top-color: greenyellow;
border-right-color: pink;
border-bottom-color: cornflowerblue;
border-left-color: lightgreen;
}

色付けした枠を作る

文章

ポイントは、background-blueは、background-grayでもいい。ただし、ＣＳＳで.background-blueとして、CSSでどのbackgroundを指しているのか分かるようにする。background-○○の○○はサブタイトルのような意味。

HTML

 <div class="background-blue">文章</div>

CSS

.background-blue{
    background: #eaf6fd;
    padding: 30px;
    margin: 5px;
    border-radius: 5px;
}

＊解決＊
・border-radiusはCSSのプロパティで、-radius：要素の境界の外側の角を丸めます。1 つの半径を下げるときは値（5px）と一つだけ数値を指定します。

立体的な枠

色付けした枠を作っていくとワンステップおしゃれな枠に仕上げたい時ってありませんか。そんな時は立体的な枠を作ってみると枠に動きがでてきますよ。初めはコードが難しいかもしれませんが、少しずつ慣れてきますよ。

こんにちは。
「かごんまのこにようこそ。」ワードプレス初心者でもカスタマイズを楽しみたい！そんな時に、是非、コードを使ってみてね。

HTML

<div class="sample_box2">こんにちは。
「かごんまのこにようこそ。」ワードプレス初心者でもカスタマイズを楽しみたい！そんな時に、是非、コードを使ってみてね。</div>

CSS

.sample_box2 {
 position: relative;
 padding: 1em 1em;
 margin: 2em 0;
 background-color: #ffffff;/*背景色：白*/
 color: #000000;/*文字色：黒*/
 z-index: 0;
}/*⇒文字を書いていある枠‥‥①とする*/

.sample_box2::before {
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    border-radius: 4px;/*枠の角を丸める*/
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);/*影の色：黒*/
    background-color: rgba(255, 255, 255, 0.2);/*白色*/
    left: 0;
    top: 0;
    z-index: -1;
}/*⇒①の一つ下層に作っている白色の枠‥‥②とする。*/

.sample_box2::after {
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    border-radius: 4px;/*枠の角を丸める*/
  　box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);/*影の色：黒*/
    background-color: #ffffc6;/*ズレている方の背景色黄色*/
    top: 5px;
    left: 5px;
    z-index: -2;
}/*⇒②の一つ下層に作っている黄色の枠‥‥③とする。*/

＊解説＊
・要素の透明度を指定するプロパティには、「Opacity」「RGBa」がありますが、CSSで指定した背景色のみを透過させたい場合などは「RGBa」プロパティを使って、背景色を指定します。
・z-index：要素の重なり順を指定するCSSプロパティ。何も指定していないときはz-index：0。。数値が大きいほど上に配置され、数値が小さいほど下に配置されます。CSSコメント書き/*‥‥*/より、①番目⇒②番目⇒③番目と順に下になるようにCSSで指定しています。
・CSS3では、::after ::before のようにコロン（疑似要素と呼ばれるコード）を2つ付けます。
・content： プロパティーは、要素の前後に、:before または :after という擬似要素を使ったテキストや画像等のコンテンツを挿入する時に必要です。

勉強になった内容を載せておきます。

rgba()は、カラーと不透明度の指定ができる値
rgba()は、カラーの指定ができるプロパティの値で使用できる
rgba()は、カラーコードではなく0〜255の10進数で指定する
rgb()という不透明度の指定がない値もある
transparentは、透明の指定ができる値
テキストを意図的に透明にして隠す行為は、検索サイトからペナルティを受ける。

応用55. カラーの不透明度の値（rgba, transparent）

カラーコードを変換できる便利なサイトはこちらが便利でした。

便利に使おう！

カラーコード変換ツール「https://tech-unlimited.com/color.html」