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. 算定基礎届と賞与支払届をGビズIDを使って電子申請

    IT

    年金機構の社会保険関係手続き「算定基礎届と賞与支払届」をGビズIDを使って電子申請してみよう

    日本年金機構のホームページには詳しく情報が紹介されていると思い…

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

    IT

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

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

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

    IT

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

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

  4. CSSでおしゃれな装飾!コピペで見出しをデザインしよう!

    IT

    CSSでおしゃれな装飾!コピペで見出しをデザインしよう!

    CSSでおしゃれにデザインされた見出しはページ全体を見やすくしてく…

  5. 算定基礎届(総括表)だけは郵送で!

    IT

    算定基礎届(総括表)だけは郵送らしい!GビズIDで電子申請したけどこれって・・・

    行政の提出書類はとても複雑で大変だと思うのは私だけでしょうか。…

  6. jsFiddle

    IT

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

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

コメント

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

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

おすすめ記事

  1. 東京ディズニーランドの鳥が人に慣れすぎてる
  2. 学研ニューブロックの紹介
  3. 年間ビジターアンケートの落とし穴
  4. 天空の鳥居「高屋神社」
  5. マルウェア?突然パソコンがスキャンされる

最近の記事

  1. 小学館の図鑑NEOシリーズのクラフトぶっくは作るだけじゃない…
  2. 子ども用水筒は専用水筒ではなくカバーがおすすめ!
  3. アマゾンブラックフライデー&サイバーマンデー 5日間のBig…
  4. 家にいながら行政手続き!GビズIDを取得してみよう!今から始…
  5. 「アベノマスク」を使用してみた!でも最終的にはアレに使用する…
  1. 一週間の高熱の正体はアデノウイルスでした

    健康

    幼児38度の高熱一週間!インフルでも溶連菌でもない。正体はアデノウィルスだった!…
  2. 仮面ライダー変身ベルトDXシリーズ

    子育て

    仮面ライダー「変身ベルトDXシリーズ」用延長ベルトで大人も変身しよう!プレミアム…
  3. 【抽選販売申し込み】Nintendo Switch あつまれ どうぶつの森セット

    遊び

    【マイニンテンドーストア】Nintendo Switch あつまれ どうぶつの森…
  4. 「食育」保育園で人参堀

    健康

    【食育】保育園で人参掘り!人参チップスは難しい・・・
  5. 収益1,000円達成でGoogle AdSenseからPINコードが郵送される

    IT

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