疑似要素を使用したボックスの作成

見栄えのいいボックスを作りたい

今回は、主に【注意】【追記】【アフィリエイトリンク】などで使用する見栄えがいいボックスを、疑似要素を使って作成することが目標。divで囲んで、borderを設定しただけのシンプルなボックスを使っているんですが、いまいち目立たないんですよね。

疑似要素を使用したボックスの作成は、初夏から夏にかけて1度挫折しています。ただ、以前に挑戦したblockquoteに引用符のアイコン画像の成功もあり、かなり手の内に入りました。今回は夏のリベンジも兼ねての挑戦です。

さっそく作成開始。たしか、サルワカさんに数多くのサンプルがあったはず。

今読めば、大筋で理解ができるんだけど、夏頃までは難しかったんだよなぁ。やっぱり、前に挑戦した引用符アイコンの追加が生きている感じがします。まぁ、relativeを指定した親要素内に、absoluteを指定した子要素を配置するだけですからね。

そして完成

デザインの決定に1～2時間はかかったものの、技術的なつまずきはほとんどないまま完成。とりあえず、参考にした他のサイトのリンクを貼っておきます。

サンプル

やっぱり疑似要素を使うと目立ちますね。サンプルが載っているページを見ながら、いろいろ試したんですけど、これが一番よかったかな。

【注意!】のボックス

HTML

<div class="yellow_caution_box">
    <p>このページは、2020年11月に公開されました。最新の情報ではない可能性があります。</p>
</div>

CSS

.yellow_caution_box {
  position: relative;
  margin: 40px 5px 20px 10px;
  padding: 20px 5px 5px 5px;
  border: 2px solid #c5b500;
  background-color: #fbfaec;
}
          
.yellow_caution_box:before  {
  position: absolute;
  content: "注意!";
  color: #ffffff; 
  font-size: 1.1em;
  font-weight: bold;
  background-color: #c5b500;
  padding: 5px 15px 5px 15px;
  border-radius: 5px;
  left: -5px;
  top: -20px;
}

border-radiusは、角を丸くするためのCSS。

【アフィリエイトリンク】のボックス

HTML

<div class="blue_affiliate_box">
    <ul>
        <li><a href="https://amzn.to/3iO5laO">Amazon | 本, ファッション, 家電から食品まで | アマゾン</a></li>
        <li><a href="https://a.r10.to/hVdTvw">【楽天市場】Shopping is Entertainment! ： インターネット最の信販売通販オンラインショッピングコミュニティ</a></li>
    </ul>
</div>

CSS

.blue_affiliate_box  {
  position: relative;
  border: 2px dotted #0000EE;
  background-color: #f9f9ff;
  margin: 40px 5px 20px 10px;
  padding: 20px 5px 5px 5px;
}

.blue_affiliate_box:before  {
  position: absolute;
  content: "アフィリエイトリンク";
  color: #ffffff; 
  font-size: 1.1em;
  font-weight: bold;
  background-color: #0000ee;
  padding: 5px 15px 5px 15px;
  border-radius: 5px;
  left: -5px;
  top: -20px;
}

.blue_affiliate_box ul  {
  padding-left: 15px;
}

.blue_affiliate_box ul li  {
  list-style-type: none;
}

/* ここから下は、このページの趣旨とは関係ありません */
/* "http"から始まるa要素の終わりに、アイコン画像を追加 */
a[href^="http"]  {
  background: url(image/external-link.png) no-repeat right center;
  padding-right: 25px;
  margin-right: 10px;
}

/* リンクの前に"> "を追加 */
.blue_affiliate_box ul li:before  {
  content: "> ";
  font-size: 0.9em;
}

最後に

無事にリベンジ成功。自分の成長を実感できたのはよかったんですが、予想よりも早く完成してしまったので、コンテンツとしては微妙な感じに…。ただ、参考や反面教師にしてくれる人が1人でもいると嬉しいです。