IT

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

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

シンプル


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

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

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

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

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

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

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

破線と二重線


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

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

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

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

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

周りをぼかす


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

おしゃれ


斜めの線でおしゃれに

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

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

付箋風


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

吹き出し風


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

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

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

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

タイトル付き


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

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

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

黒板風


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

ホワイトボード風


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

最後に

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

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

関連記事

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

    IT

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

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

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

    IT

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

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

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

    IT

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

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

  4. Windows10の標準機能で画面録画

    IT

    無料で使える画面録画!Windows10の標準機能でキャプチャもOK!(スクリーンショット)

    特別なソフトを買うことなくパソコンの画面を簡単に録画できる方法…

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

    IT

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

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

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

    IT

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

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

コメント

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

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

おすすめ記事

  1. CSSでおしゃれな装飾!コピペで見出しをデザインしよう!
  2. 仮面ライダー変身ベルトDXシリーズ
  3. 香川県牟礼の道の駅「源平の里むれ 」
  4. 雪見だいふくイベント
  5. お年玉付き年賀はがきの切手シートが当たりました

最近の記事

  1. 誕生日や母の日・父の日、お礼やお祝いは「Amazonギフト券…
  2. 令和元年(2019年)さいたま市総合防災訓練・防災フェア!最…
  3. アサヒ飲料キャンペーン2020のオリジナルトミカx3台&マイ…
  4. 我が家のクリスマスツリー2020
  5. 運転苦手は徒歩で行こう!香川県・天空の鳥居「高屋神社」までは…
  1. ガンバライジングカード無料配布キャンペーン

    子育て

    【小学生以下限定】2020/9/6(日)~ガンバライジング始めようセット 無料プ…
  2. 横浜防災フェア2019海上保安資料館横浜館にある北朝鮮工作船

    その他

    海上保安資料館横浜館にある北朝鮮工作船の展示が衝撃的すぎ!
  3. 明星チャルメラxトミカ!「くろネコカーおかたづけセット」プレゼントキャンペーン

    グルメ

    明星チャルメラxトミカ!「くろネコカーおかたづけセット」プレゼントキャンペーン …
  4. 餃子の王将創業祭2019「500円分割引券」

    グルメ

    餃子の王将で500円分割引券プレゼント!令和元年の創業祭
  5. 自作パソコン

    IT

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