[CSSコピペ] 重要/警告/注釈/ポイントのテキスト囲み枠のデザインサンプル。

初心者でもコピー&ペーストで実装できるpure cssサンプル。重要/警告/注釈/ポイントに使えるテキスト囲み枠。

サイトやブログで本文とは別に重要・警告・注釈・ワンポイントを書きたいことがあります。そのまま本文に書いてしまうと目立ちませんので、かっこいいデザインで表現したいですね。

本記事では以下のような、囲み枠を使ったデザインサンプルを紹介・解説します。ピュアCSSで実装していますので、通常のhtmlウェブサイト・WordPressなど幅広く利用いただけると思います。

ここにはワンポイントアドバイスを記載しています。

ああああ

ここには重要な事をを記載しています。

ああああ

ここにはメモを記載しています。

ああああ

 

シンプルな囲み枠デザインのCSS/HTMLサンプルソースコード。コピペOK。

早速、ソースコードを掲載します。コピペしてご利用ください。

CSSソースコード ※ダブルクリックでコピペできます

 

HTMLソースコード ※ダブルクリックでコピペできます

 

初心者向け解説。重要/警告/注釈/ポイント以外の囲み枠にしたり、色やラベル文言をカスタマイズできます。

「.box-text-notice {}」囲み枠の全体の余白設定、囲み線の太さ・色などの設定。

position: relative;
border: 3px double #da4033;
border-radius: 5px;
margin: 20px 0;
padding: 20px 20px 5px 20px;

まず、「:before」が付いてないCSSで囲み枠の全体のデザインを設定します。

「border」で囲み線の太さ・スタイル・色を指定します。「border-radius」で囲み線の隅を角丸にしています。

「margin」「padding」で囲み枠の外側との余白や、中の文字との余白を微調整しています。paddingは「20px 20px 5px 20px;」としていますが、WordPress以外の場合は5pxの部分はもう少し大きめに設定した方が良いと思います。

 

「.box-text-notice::before {}」囲み枠のラベル部分のデザイン・スタイルを設定。

content: “重要!”;
position: absolute;
background-color: #f4f4f4;
color: #da4033;
font-weight: bold;
left: 20px;
top: -23px;
padding: 10px;

囲み枠全体のCSSに「::before」を付与した別のCSSを定義します。この内容でラベル部分の文言やデザインが決まります。

「content」の部分がラベルに表示する文言なので、適宜修正ください。「color」は色を指定しますが、囲み枠の枠線の色とあわせた方が見栄えが良いと思います。

「left」「top」「padding」の設定はラベルの位置を微調整していますので、基本的にはそのままの値でOKですが、もしデザインが崩れるようなら調整してみてください。

そして、「background-color」はサイトの背景色と合わせるようにしてください。色が異なると、ラベル背景色が目立ってしまい、デザインが悪くなります。