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

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

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

  3. 確定申告e-taxの推奨ブラウザはInternet Explorer

    IT

    【確定申告】e-Tax利用時のブラウザはInternet Explorer!Microsoft Ed…

    確定申告をしなければいけない方にとって、この一か月は忙しい期間…

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

    IT

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

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

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

    IT

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

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

  6. マイナポイントは電子マネーWAONがおすすめ

    IT

    マイナポイントは電子マネーWAONがおすすめ!普段よく使うお店を登録しよう

    私はよくイオンへお買い物に行って、電子マネーWAON払いもしく…

コメント

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

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

おすすめ記事

  1. 当選!ToyotaGR SupraGT4Concept仕様
  2. 横浜防災フェア2019
  3. りっくんランド再開館2020
  4. 「食育」保育園で人参堀
  5. 【抽選販売申し込み】Nintendo Switch あつまれ どうぶつの森セット

最近の記事

  1. 平日1日60分まで?ネット・ゲーム依存症対策条例が全国初で可…
  2. 「jsFiddle」は登録なし!コード動作確認が簡単!埋め込…
  3. 【 Firefox】Alt押しながらマウスホイールでページを…
  4. スマホのパターンロックが解除された!子どもにパターンがバレる…
  5. 2019年台風19号による豪雨で長岡花火会場の河川敷が増水!…
  1. 3年ぶりブログ再開2023

    お金と仕事

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

    子育て

    【トミカ博 in YOKOHAMA 2019】初日激混み体験レポ!朝から行く人レ…
  3. コカ・コーラにマクドナルド無料引換券が付いてくる

    お金と仕事

    コカ・コーラにマクドナルド無料引換券が付いてくる!ハンバーガー&ポテトを無料で食…
  4. アマゾンブラックフライデー&サイバーマンデー

    お金と仕事

    アマゾンブラックフライデー&サイバーマンデー 5日間のBig Sale
  5. マウスホイールで画像の拡大縮小をしたい!Windows10のフォト初期設定は次の画像になる件

    IT

    マウスホイールで画像の拡大縮小をしたい!Windows10のフォト初期設定は次の…
PAGE TOP