ダブルボックスアイコンの作り方

←こちら

CSSだけで出来た自作アイコンの作り方をまとめます。

文字サイズも大きくなるように設定してるし大項目のアイコンなんかにご自由にお使いくださいって感じなのですが、その前にこのアイコンの弱点を挙げますので、それでもイイヨ!という方はお使いください。というか解決策を教えて欲しい…

ダブルボックスアイコンの弱点…

1.画面幅が1,000pxを超えたあたりから右のボックスが少しズレていく

2.逆に860pxを切ると完全に崩れる

3.一応スマホサイズは対応してるけど、端末によってはちょっと変

4.IEで見るとまぁまぁ崩れてる

5.画面を拡げていくと徐々にパラグラフとの隙間が広がっていく

 

ただ上記は個人的には「最初からコレだと思えばそんなに変なアイコンでもないか…」と思えるレベルです。2以外は。でも2もメディアクエリでちまちま指定して行けば解決できます、面倒なのでやりませんが。

というわけで、割とボロボロですが自分の中のおさらいも兼ねてCSSで作り方を解説していきたいと思います。

まずは<div class = “double-box”>自体へのCSSです
.double-box {
  position:relative;
  font-size: 1.6rem;
  line-height: 100%;
  text-align: left;
  margin: 5% auto;
  margin-left :10%;
}
  • position:relative; アイコンは疑似要素2つで作るので本体にrelativeを指定
  • font-size: 1.6rem; h3くらいの扱いで使う予定なので文字も大きくする
  • line-height: 100%; 左ボックスの下辺に文字の下辺を合わせるため
  • text-align: left; ちなみにこのアイコンを使った見出しを画面真ん中に固定する方法は見つかってません(画面の幅変えると文字との距離もどんどん変わっちゃう)
  • margin: 5% auto; margin-left :10%; アイコン表示分10%左にマージンを作る
次に左の青いボックスを作る疑似要素beforeのCSSです。
.double-box::before{
  content: '┌';
  display: flex; justify-content: center;
  line-height: 55%;
  letter-spacing: .65rem;
  color: #fff;
  font-size: 4.5vw;
  position: relative;
  background-color: #309CD0;
  width: 3.5vw;
  height: 3.5vw;
  max-width: 30px;
  max-height: 30px;
  min-width:20px;
  min-height:20px;
  right: 4.5vw;
  top: 20px;
  z-index : 100;
}
  • content: ‘┌’; これがポイント!左のボックスが被ってる部分に上手く重ねる様にこのカギ記号を配置することで、before要素のみで左のボックスを作っています。
  • display: flex; justify-content: center; フレックスにして、位置を真ん中にすることで下記プロパティを使ってカギ記号の位置を調整できる
  • line-height: 55%; カギ記号の縦の配置を調整する
  • letter-spacing: .65rem; カギ記号の横の位置を調整する
  • color: #fff; カギ記号の色
  • font-size: 4.5vw; カギ記号のサイズ。気持ちレスポンシブ対応にするためvwを使っています
  • position: relative; absoluteにすると画面のサイズによる文字との隙間が輪をかけて広くなります
  • background-color: #309CD0; 四角の色
  • width: 3.5vw; height: 3.5vw; 四角のサイズ、気持ちレスポンスの精神でvwです
  • max-width: 30px; max-height: 30px; 画面に従って無限に大きくなっても困るので最大サイズも指定
  • min-width:20px; min-height:20px; 逆にスマホサイズともなるとかなり小さくなるので最小サイズも指定
  • right: 4.5vw; top: 20px; relativeだから左にずらす。上下の位置は固定でOK
  • z-index : 100; 右のボックスより上に来るように指定
最後に右の白抜きボックスを作る疑似要素afterのCSSです
.double-box::after{
  content: '■';
  position: absolute;
  left: -4vw;
  top:32px;
  text-shadow: 2px 2px 0 #309CD0,
    -2px 2px 0 #309CD0,
    2px -2px 0 #309CD0,
    -2px -2px 0 #309CD0;
  text-shadow: 2px 2px 0px #309CD0,
    -2px 2px 0px #309CD0,
    2px -2px 0px #309CD0,
    -2px -2px 0px #309CD0;
  color: #fff;
  font-size: 2.9vw;
  z-index:  10
}
  • content: ‘■’; 右ボックスは記号の四角で作っています。もちろん左ボックスと同じように作れるんですが、WordPressのstyle.cssに書き込んだらよく分からない警告が出たのでこっちに切り替えました。
  • position: absolute; afterの方は文の末尾がデフォルト位置のため、rerativeにすると入力した文字の長さで位置が変わってしまうのでabsoluteを指定します
  • left: -4vw; top:32px; absoluteなので行の左端からの位置指定になります
  • text-shadow: 2px 2px 0 #309CD0,
    -2px 2px 0 #309CD0,
    2px -2px 0 #309CD0,
    -2px -2px 0 #309CD0;
    text-shadow: 2px 2px 0px #309CD0,
    -2px 2px 0px #309CD0,
    2px -2px 0px #309CD0,
    -2px -2px 0px #309CD0; どのブラウザでも文字の囲み線を再現するために、text-shadowを8方向に同じpxずつズラして表示しています。↓参照
    https://chaika.hatenablog.com/entry/2017/03/27/142705
  • color: #fff; 四角の色
  • font-size: 2.9vw; 気持ちレスポンシブなので四角のサイズもvwで指定
  • z-index: 10 : beforeより下に来るように指定

これで大まかに完成ですが、ついでに中途半端に付けたメディアクエリです。
これでスマホにしても画面を拡げてもそこそこ形が崩れにくくなります。

/*スマホ画面用調整*/
@media(max-width: 415px) {
  .double-box::before{
    font-size: 30px;
    right: 7.5vw;
  }
  .double-box::after{
    font-size: 22px;
    left: -6.2vw;
    top: 27px
  }
}
/*画面拡大時の文字に対する最大サイズ指定*/
@media(min-width: 860px) {
  .double-box::before{
    font-size: 40px;
  }
  .double-box::after{
    font-size: 40px;
  }
}

うーんなんとも中途半端な出来ですが、思い付きのデザインを頑張って再現してなんとか形になったので満足してます!

今日はこれでおやすみなさい。。。(-ω-)/

カテゴリーCSS

コメントを残す

メールアドレスが公開されることはありません。