IT

CSSで広がる!囲み枠(ボックス)デザイン【コピペ可】

ボックスデザイン
「CSSでおしゃれな装飾!コピペで見出しをデザインしよう!」や「種類いろいろ!CSSのborder(線)の使い方」で紹介している内容と少しかぶりますが、ここでは囲み枠(ボックス)のデザインサンプルをご紹介します。

シンプル


文字を囲むように線がある基本的なものです。

border-radiusで四隅を丸くしました。線と文字の色を変え、文字も太くすることで文字が強調されたようになります。

背景塗りつぶし+文字色を設定してあります。幅を端まで表示したい場合はwidth:60%;を消してください。

上下に太い線を入れました。見出しにも使えそうですね。

上だけに線があるだけでも十分デザイン性があります。

左だけに線があり、影をつけました。

角に丸みをもたせる「border-radius」と、下にborderを指定すると立体感のあるボタン風ができます。

破線と二重線


破線にして背景色を指定してあります。線の太さはborder:2px~の数字で調整します。

内側に線があるだけでかわいらしいデザインになります。

上のものに「border-radius」を追加して四隅を丸くしました。

二重線(double)を使用しました。

左右だけに二重線を使用してます。

周りをぼかす


周りをぼかしてあります。ふわっとした印象になりました。

おしゃれ


斜めの線でおしゃれに

カギ、カッコのようなデザインで、文字は中央にくるようになっています。

四隅がクロスしているデザインです。シンプルに線と文字色が黒なので飾らないデザインになります。

付箋風


右下に影を付けるだけでふわっと角が持ち上がり付箋風のできあがりです。

吹き出し風


吹き出しにもつかえる下向きのボックスです。

下向きのボックスを枠線だけにしてみました。

心の声や考え事の時に使えそうなボックスデザインです。

こちらも心の声や考え事の時に使えそうですね。

タイトル付き


POINTやcheckなど、伝えたい事を強調したいときにお使いください。

上のデザイント反対に内側にラベルがあります。角を丸くしたことでやわらかく強調できます。

ページの内容と内容のちょっとした解説を入れるときに活躍しそうですね。

黒板風


右下にあるチョークが黒板らしさを出してますね。

ホワイトボード風


黒板風の応用でホワイトボード風のものも用意しました。シチュエーションによって使い分けて下さい。

最後に

ボックスはページ内で頻繁に使用するのではなく、ちょっと目立たせたい文言やまとめなどに使うといいかもしれませんね。
文字色と背景色を変えるだけでも印象がかわるのでぜひコピベしてご利用下さい。

ここで紹介したものを自分のサイトに実装する前に、色を変えたりして試してみたい方は下の「jsFiddleは~」も合わせて読んでみてください。
書いたHTMLとCSSを同じ画面内に結果として出してくれるのでとても便利です。

関連記事

  1. GビズIDを取得して行政手続きを電子申請でやってみよう

    IT

    家にいながら行政手続き!GビズIDを取得してみよう!今から始める電子申請

    毎年5・6・7月になると固定資産税や自動車税、住民税に法人税な…

  2. PCビープ音4回はホコリが原因

    IT

    ビープ音4回はホコリが原因?DellデスクトップPCの異常は掃除で復活!

    電子機器は突然故障したり終わりを告げる事が多いですよね・・・。…

  3. 種類いろいろ!CSSのborder(線)の使い方

    IT

    種類いろいろ!CSSのborder(線)の使い方

    CSSのborderにはいろいろな種類があります。見出しに使っ…

  4. 収益1,000円達成でGoogle AdSenseからPINコードが郵送される

    IT

    収益1,000円達成でGoogle AdSenseからPINコードが郵送される!

    Google AdSense(以下、アドセンス)からPINコー…

  5. Altプラスマウスホイールでページが操作できる機能

    IT

    【 Firefox】Alt押しながらマウスホイールでページを送ったり戻したりすることができる?偶然見…

    パソコンでインターネットを何気なく使っていて突然画面が変わりま…

  6. ワードプレスの自動入力候補(履歴)を削除する方法

    IT

    Google Chromeでワードプレスの自動入力候補(履歴)を削除する簡単な方法

    まずみなさんはパソコンのブラウザ何をお使いですか?代表…

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

おすすめ記事

  1. スパイシーチキンマックナゲット
  2. Altプラスマウスホイールでページが操作できる機能
  3. ガンバライジングカード無料配布キャンペーン2020年10月
  4. 横浜防災フェア2019
  5. 長岡花火有料観覧チケット購入方法

最近の記事

  1. 【当選】オリジナルトミカx3台&マイタウン「アサヒ飲料キャン…
  2. 子ども用水筒は専用水筒ではなくカバーがおすすめ!
  3. 虫よけ効果大の製品はどれ?玄関からスプレータイプなど種類別に…
  4. 子連れ長岡花火!暑さ対策&渋滞対策万全で楽しもう!当日無料席…
  5. 目の充血・かゆみ・しこりの原因は「ものもらい(麦粒腫)」でし…
  1. エガちゃんねる EGA-CHANNEL

    その他

    【Youtube】江頭2:50のエガちゃんねる!視聴者の一人として応援してます!…
  2. アサヒ飲料CP2020オリジナルトミカ届く

    子育て

    アサヒ飲料キャンペーン2020のオリジナルトミカx3台&マイタウンが届いた!
  3. ここから始めよう!LaQ ベーシック 201

    子育て

    ここから始めよう!LaQ ベーシック 201 各パーツをバランスよく配合した35…
  4. 送料全国一律のクリックポスト

    お金と仕事

    徐々に値上げ!それでも安いクリックポスト!追跡可能で送料全国一律!
  5. 仮面ライダーゼロワンのまくら

    子育て

    仮面ライダーゼロワンのまくらが気持ちいい!
PAGE TOP