Little Strange Software

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

【CSSサンプル】2つの四角形に囲まれたボックス

こんな風に、2つの色の違う四角い枠線がズレて配置されたようなボックスを作ってみました!
実はこれ、枠線じゃなくて背景だったりします。

でも、枠の内容のサイズに応じて伸縮しても支障なく表示されますよ^^

 

 どうも!LSSです!!

 

実は以前からCSSサンプルのネタとして↑のような枠を思いついていたんですが、

  • border
  • outline
  • box-shadow

のどれを使ってもしっくりこなくて、伸ばし伸ばしになっていました^^;

 

…が、ふっと別の方法を思いついたのでやってみたところ、うまくいったのが今回のサンプルとなります!

 

 

コード

<style><!--
.dblsq{
padding:15px;
background-image:linear-gradient(red,red),linear-gradient(red,red),linear-gradient(red,red),linear-gradient(red,red),linear-gradient(blue,blue),linear-gradient(blue,blue),linear-gradient(blue,blue),linear-gradient(blue,blue);
background-size:3px calc(100% - 10px),3px calc(100% - 10px),calc(100% - 10px) 3px,calc(100% - 10px) 3px,3px calc(100% - 10px),3px calc(100% - 10px),calc(100% - 10px) 3px,calc(100% - 10px) 3px;
background-position:10px 0px,100% 0px,10px 0px,10px calc(100% - 10px),0px 10px,calc(100% - 10px) 10px,0px 10px,0px 100%;
background-repeat:no-repeat;
}
--></style>
<div class="dblsq">ボックスの中身</div>

 

上記内容をHTMLにコピペして、「ボックスの中身」部分を書き換えて使えます。
※ボックスの中身で改行する場合は<br/>タグ(はてなブログの編集画面ではシフトキーを押しながらENTER)を入れてください。

 

CSSクラスとして指定しているので、
class="dblsq"
を入れるだけで他の要素にも当てられます。

 

 

枠線の正体

この赤と青の四角、実は合計8つの「背景画像」だったりします。

 CSSの「background-image」「background-size」「background-position」、いずれも「カンマ区切りで複数指定できる」事を利用し、

 

background-image;赤ベタ,赤ベタ,赤ベタ,赤ベタ,青ベタ,青ベタ,青ベタ,青ベタ;
background-size:縦長サイズ,縦長サイズ,横長サイズ,横長サイズ,縦長サイズ,縦長サイズ,横長サイズ,横長サイズ;
background-position:赤四角の左辺開始位置,赤四角の右辺開始位置,赤四角の上辺開始位置,赤四角の底辺開始位置,青四角の左辺開始位置,青四角の右辺開始位置,青四角の上辺開始位置,青四角の底辺開始位置;

 

という感じで配置しています。

padding:15px;
で中身の文字が線とかぶらないように余白を指定し、

background-repeat:no-repeat;
でそれぞれの四角が繰り返されないようにしています。(繰り返すと全部ベタ塗りになってしまう)

 

 

アニメ―ションもつけてみました

赤い四角と 青い四角が
くるくるくるくる…

れっつ だんすぃん!!

  

コード

<style><!--
@keyframes dblsqa{
0%{background-position:10px 0px,100% 0px,10px 0px,10px calc(100% - 10px),0px 10px,calc(100% - 10px) 10px,0px 10px,0px 100%;}
5%{background-position:0px 0px,calc(100% - 10px) 0px,0px 0px,0px calc(100% - 10px),10px 10px,100% 10px,10px 10px,10px 100%;}
10%{background-position:0px 10px,calc(100% - 10px) 10px,0px 10px,0px 100%,10px 0px,100% 0px,10px 0px,10px calc(100% - 10px);}
50%{background-position:0px 10px,calc(100% - 10px) 10px,0px 10px,0px 100%,10px 0px,100% 0px,10px 0px,10px calc(100% - 10px);}
55%{background-position:10px 10px,100% 10px,10px 10px,10px 100%,0px 0px,calc(100% - 10px) 0px,0px 0px,0px calc(100% - 10px);}
60%{background-position:10px 0px,100% 0px,10px 0px,10px calc(100% - 10px),0px 10px,calc(100% - 10px) 10px,0px 10px,0px 100%;}
}
.dblsq2{
padding:15px;
background-image:linear-gradient(red,red),linear-gradient(red,red),linear-gradient(red,red),linear-gradient(red,red),linear-gradient(blue,blue),linear-gradient(blue,blue),linear-gradient(blue,blue),linear-gradient(blue,blue);
background-size:3px calc(100% - 10px),3px calc(100% - 10px),calc(100% - 10px) 3px,calc(100% - 10px) 3px,3px calc(100% - 10px),3px calc(100% - 10px),calc(100% - 10px) 3px,calc(100% - 10px) 3px;
background-position:10px 0px,100% 0px,10px 0px,10px calc(100% - 10px),0px 10px,calc(100% - 10px) 10px,0px 10px,0px 100%;
background-repeat:no-repeat;
animation:dblsqa 10s linear 0s infinite;
}
--></style>
<div class="dblsq2">ボックスの中身</div>

 

 

他にも改変のやりようはあります

例えば線の太さを変えるなら、

background-size:3px calc(100% - 10px),3px calc(100% - 10px),calc(100% - 10px) 3px,calc(100% - 10px) 3px,3px calc(100% - 10px),3px calc(100% - 10px),calc(100% - 10px) 3px,calc(100% - 10px) 3px;

の「3px」の部分を全て書き換える事でできます。

 

線の色は、

linear-gradient(red,red)

redの部分を書き換える事で出来ますし、これを例えば

linear-gradient(red,pink)

のように前後で色を変えると、グラデーション色になります。
※その場合、「上から下」のグラデ―ションになります。「左から右」のグラデーションにする場合は、

linear-gradient(90deg,red,pink)

とします。

 

 

 

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

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