BOXを作る

センス関係なし!とっても簡単なCSSを使ってBOX(囲み)を作ってみよう♪

投稿日: カテゴリー: デザイン

CSSってとっても難しいもの…と、考えていませんか?

実はこのBOXを理解すれば実はとーーーっても簡単なんですよ!フォトショップを覚えて画像を弄るよりも遥かにHPのビジュアルが良くなり簡単なので是非覚えておきたい

『CSSの基本』BOX作成を是非覚えてくださいね♪

 

センス関係なしでHPをよくする魔法のCSSでBOXを簡単に作ろう♪

ではまずはCSSの基本の基本ですが、BOXとは何か?から始めましょう♪

BOXとは、文章や画像を囲む線の事です

PCからなら右、スマホなら下にあるBOXがそれですね もちろん当HPにも随分使っています。

このBOXを覚えてしまえばCSSは覚えたも同然ですよ!

これが基本のBOX!!

 

コチラはHTMLとなります。

<div class="yt-box">コチラに文字を入れてください</div>

 

基本のHTMLはコレです、後はCSSを入れる場所ですが下でも紹介したプラグイン Simple Custom CSS を予め読み込んでおきます。

【CSS】WPのテンプレートに影響されない見出しを作る

.yt-box {
  border: solid 1px #ccc;
  }

1px の部分の数字を変更すると周りの線が太くなります。 #ccc は線の色になります。

これだけでは端によっていて見た目が悪い…

こうする事で少し見やすくなります

.yt-box {
  border: solid 1px #ccc;
 padding: 10px;
  }

中の空白部分を決めますこうする事で見やすくなる、これも数字を変更すれば中の空白を大きく出来ます

もっとセンス良く!CSSのBOXを極めてカッコイイHPへ!

ブログ用BOX

次に入れるものは、BOXの幅と高さになります。

2分割などにしたい場合は、リンクを読んで見てください。

便利『Shortcodes Ultimate』のプラグインで横に2分割する!

BOXの幅×高さを入れよう!

.yt-box {
  border: solid 1px #ccc;
 padding: 10px;
 width: 100%;
  height: 200px;
  }

width が幅 heightが縦になります。widthは%指定 px指定するとスマホの時にでかくなりすぎ、heightは%指定するとでかくなりすぎます。

ここまで理解できれば後は何とかなりますので、解説とBOXを連続で見せていきます

背景を黒くするBOX

.yt-box {
  border: solid 1px #ccc;
 padding: 10px;
 width: 100%;
  height: 200px;
 background-color: #000;
 color: #fff;
  }

background-colorが背景色で color: #fff;が文字色になります。

背景画像を入れる

.yt-box {
  border: solid 1px #ccc;
 padding: 10px;
 width: 100%;
  height: 200px;
 background: url(http://terre-surge.net/wp-content/uploads/2017/03/フッター用背景2.jpg) repeat;
  background-size: cover;
 color: #fff;
  }

backgroundは背景画像を入れます、画像URLは全部出していますので、お試しで使ってください。

角丸にする

.yt-box {
  border: solid 1px #ccc;
 padding: 10px;
 width: 100%;
  height: 200px;
 background-color: #333;
 border-radius: 10px;		/* CSS3草案 */
 -webkit-border-radius: 10px;	/* Safari,Google Chrome用 */
 -moz-border-radius: 10px;	/* Firefox用 */
 color: #fff;
  }

もっと角丸にする場合は数字を大きくしてください。

影を付ける

.yt-box {
  border: solid 1px #ccc;
 padding: 10px;
 width: 100%;
  height: 200px;
 box-shadow:5px 5px 10px;
  }

片側にだけ影を乗せる方法