IT

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

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

シンプル


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

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

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

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

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

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

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

破線と二重線


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

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

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

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

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

周りをぼかす


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

おしゃれ


斜めの線でおしゃれに

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

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

付箋風


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

吹き出し風


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

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

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

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

タイトル付き


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

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

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

黒板風


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

ホワイトボード風


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

最後に

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

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

ピックアップ記事

  1. 不労所得?chatGPTに負けない!2年以上ほったらかしブログが毎日お金を生んで…

関連記事

  1. jsFiddle

    IT

    「jsFiddle」は登録なし!コード動作確認が簡単!埋め込みも可

    自分のサイトを持っていて、いろいろいじっているうちにだんだん既…

  2. 年間ビジターアンケートの落とし穴

    IT

    突然現れる「年間ビジターアンケート」は詐欺!ラッキービジターがきたら要注意!

    みなさんは画像のような画面を見たことはありますか?イン…

  3. CSSで作る!コピペOK<吹き出しデザイン>

    IT

    CSSで作る!コピペOK<吹き出しデザイン>

    CSSだけで作れる「吹き出し」をご紹介します!会話風のものやワ…

  4. カスタムフィールドテンプレートのエラー

    IT

    WordPress Custom Field Templateエラーはtype=radioが原因?P…

    このブログもワードプレスを利用して作られていますが、カスタムフ…

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

    IT

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

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

  6. 自作パソコン

    IT

    初めての自作デスクトップパソコン!画像を使って各パーツの役目と使用パーツ紹介Part1

    大きい買い物をしなければいけない日が来ました!それはデ…

コメント

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

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

おすすめ記事

  1. 新潟名物笹だんごとちまき
  2. 初めての投稿
  3. 仮面ライダーゼロワンクリスマスケーキ
  4. 横浜防災フェア2019
  5. コカ・コーラにマクドナルド無料引換券が付いてくる

最近の記事

  1. 横浜防災フェア2019@赤レンガ倉庫!はしご車搭乗体験や水難…
  2. 子連れ長岡花火!暑さ対策&渋滞対策万全で楽しもう!当日無料席…
  3. 我が家のクリスマスツリー2020
  4. CSSでおしゃれな装飾!コピペで見出しをデザインしよう!
  5. ここから始めよう!LaQ ベーシック 201 各パーツをバラ…
  1. 小学館図鑑NEOシリーズは特典いっぱい

    子育て

    小学館の図鑑NEOシリーズを買ったらいい事たくさんあった
  2. スパイシーチキンマックナゲット

    グルメ

    スパイシーチキンマックナゲット!期間限定ソース「黒麻婆ソース」「ハラペーニョチー…
  3. GビズIDを取得して行政手続きを電子申請でやってみよう

    IT

    家にいながら行政手続き!GビズIDを取得してみよう!今から始める電子申請
  4. 東京モーターショー2019

    子育て

    【東京モーターショー2019】幼児がいるなら目的決めて行こう!全てを見るのはあき…
  5. 【抽選販売申し込み】Nintendo Switch あつまれ どうぶつの森セット!2020年7月2日~3日

    子育て

    【イオンキッズパブリック】Nintendo Switch抽選販売!あつ森セットや…
PAGE TOP