ゆるくはじめるWordPress.

コピペで使える!シンプルなボックスデザインCSS

note-top

ブログ記事中に注釈や一言コメント的なものを入れたい時に使えるような、ちょっとした装飾付きのボックスのデザインをCSS付きでいくつか載せました。
どれも幅の可変に対応できるデザインなので、レスポンシブなサイトでも利用できます。 シンプルな使いやすいものを中心にまとめたので、色を変えたり、アレンジして使ってみてください。

HTML

<div class="note">
  <p>テキスト</p>
</div>

borderで囲む

ボーダーで囲んだデザイン

シンプルにボーダーで囲む。2重線を使うと程よい装飾感で使いやすい。

CSS

.note {
  border: 3px double #ccc;
  padding: 1em;
}

内側に影を付ける

影を付けたデザイン

ボックスの内側にシャドウを入れてレイヤー感を出したもの。box-shadowinsetを外すと影が外側に付いて浮いたような感じになります。

CSS

.note {
  box-shadow: 5px 5px 4px -4px rgba(0,0,0,0.3) inset;
  background-color: #eee;
  padding: 1em;
}

角を折る

角を折り返したデザイン

紙の端を折り返したようなドッグイヤー風の装飾。

CSS

.note {
  background-color: #eee;
  position: relative;
  padding: 1em;
}
.note::after {
  content: '';
  position: absolute;
  bottom: 0;
  right: 0;
  border-width: 0 0 18px 18px;
  border-style: solid;
  border-color: #ccc #fff #fff #ccc;
}

吹き出し型の枠

吹き出し型のデザイン

色々な場面で使える吹き出し型。

CSS

.note {
  position: relative;
  border: 3px solid #ccc;
  border-radius: 8px;
  padding: 1em;
}
.note::before,
.note::after {
  position: absolute;
  bottom: 100%;
  left: 10%;
  content: '';
  height: 0;
  width: 0;
  border: 12px solid transparent;
}
.note::before {
  border-bottom: 16px solid #ccc;
}
.note::after {
  border-bottom: 16px solid #fff;
  margin-bottom: -5px;
}

アイコンを付ける

アイコン付きのデザイン

ボックスの中にアイコンを入れたもの。FontAwesomeを使った場合の例を載せています。好みの記号やアイコンに変更してお使いください~。

CSS

.note {
  background-color: #eee;
  border: 1px solid #ccc;
  position: relative;
  padding: 1em 1em 1em 3.5em;
}
.note::after {
  position: absolute;
  top: 15px;
  left: 10px;
  font-family: FontAwesome;
  content: '\f06a';
  color: #bbb;
  font-size: 230%;
}

関連

600種類のアイコンが無料!Font Awesomeの使い方
メニューやボタン部分に文字だけじゃなくてアイコンがあったら、わかりやすくて便利ですよね。 アイコンがあると直感的に操作できて、見る側のストレスもぐんと減らすことができます。 F

マステ風見出し付き

マステ風の見出し付きデザイン

マスキングテープ風の半透明の見出しを付けたタイプ。HTMLに見出しタグを追加しました。カラーの組み合わせで雰囲気を色々と変えられます。

HTML

<div class="note">
  <h5>Note</h5>
  <p>テキスト</p>
</div>

CSS

.note {
  position: relative;
  background-color: #eee;
  padding: 1em;
}
.note h5 {
  position: absolute;
  top: -1em;
  background-color: rgba(100,100,100,0.4);
  padding: 0.25em 2em;
  color: #fff;
  transform: rotate(-4deg);
}

ライン入り見出し付き

ライン入り見出し付きデザイン

上下をラインで区切ったタイプ。こちらも見出し付き。見出しタグの中に<span>を入れています。

HTML

<div class="note">
  <h5><span>Note</span></h5>
  <p>テキスト</p>
</div>

CSS

.note h5 {
  position: relative;
  text-align: center;
}
.note h5 span {
  position: relative;
  display: inline-block;
  padding: 0 0.5em;
  color: #777;
  background-color: #fff;
}
.note h5::before {
  content: '';
  width: 100%;
  border-top: 2px solid #ccc;
  position: absolute;
  top: 50%;
  left: 0;
}
.note p {
  padding: 0.5em 1em 1em;
  border-bottom: 2px solid #ccc;
}

スポンサーリンク

公開日: