今回はカエレバのHTML内にあるclass名の一つ、「kaerebalink-box」に設定されてるCSSに関して解説していこうと思います。
この記事を読むことで、以下が分かります。
- kaerebalink-boxとは?
- borderの簡単な付け方
- 「display:flex;」の役割
- メディアクエリ
- box-sizingの使い方
kaerebalink-boxの紹介
kaerebalink-boxとは?
「kaerebalink-box」というのは、カエレバアフィリエイトリンクのHTMLを構成する<div>に指定されたclass名の一つです。
カエレバHTML内では、class名の「cstmreba」が一番外側を囲っていて、二番目に全体を囲っている<div>タグのclass名にあたります。
- カエレバアフィリエイトリンクのHTMLとは?
- ブログやサイトなどにカエレバアフィリエイトリンクを貼り付ける際に、必要なHTMLコードのことです。
kaerebalink-boxの役割
- 外側から二番目に来る箱。
- リンク全体にCSSデザインを設定しています。
以降から、「Cocoonテーマ」に設定されていた「kaerebalink-box」のCSSについて解説していきますね。
以下のフローから得られた内容を説明しますね。
- 「kaerebalink-box」にCSSを設定
- ブラウザ表示にあった変化をピックアップ
- 変化に影響しているCSSを説明する
ちなみに、下記の画像がCSS設定前とCSS設定後のビフォーアフターです。
画像で元々色付けされている箇所は、検証ツールによるものです。
各色に関しては、以下の意味があります。
青(#8cb6c0)=content
(width×height)
緑(#c3d08b)=padding
黄(#fddd9b)=border
橙(#f9cc9d)=margin
無(#ffffff)=position
【Cocoon版】「kaerebalink-box」のデザインとそのCSSを解説
カエレバ全体にボーダーをつける
ちょっとボーダーが分かりにくいので、以下の画像です。
灰色のボーダーで囲まれました。
以下のプロパティが影響しています。
kaerebalink-box{
border: 3px solid #dfdfdf;
}
上記のプロパティ値の意味を図で示しますね。
画像の下にあった文章達が横に並んだ
以下のプロパティが影響しています。
@media screen and (min-width: 769px){
.kaerebalink-box {
display: flex;
}
}
上記のプロパティ値「flex」が、並べ方を設定します。
これは親要素(kaerebalink-box)にかかっていますね。
つまり「kaerebalink-box」(親要素)はflexを設定したことにより、子要素たちを入れる「フレックスコンテナ≒入れ物」になったわけです。
今回フレックスコンテナ内に入っている子要素たちは、以下の3つです。
- ➂kaerebalink-image
- ➃kaerebalink-info
- ➄booklink-footer
上記3つは、「フレックスアイテム」と言われます。
➂~➄というのは、別記事でカエレバHTMLで使われてるclass名を紹介した時の名残です。気にしなくてOKです。
結果、この子要素たちは今まで縦並びでしたが→「フレックスアイテム化」したことで、横並びになりました。
「flex」の変化がわかりづらい人に向けて、動画にしてみました。
↓

もしかしたら動画では分かりにくいかもなので、「flex」のON・OFFを示した画像も載せておきますね。
※並びの変化が分かりやすいように、各々にborderの色で分けました。
.kaerebalink-info{
border:3px solid tomato;
}
.kaerebalink-image{
border:3px solid violet;
}
.booklink-footer{
border:3px solid yellowgreen;
}
縦並び→横並びになっていますね。
メディアクエリに関して
flexには、メディアクエリが指定されていましたね(下記です)。
@media screen and (min-width: 769px){{}}
これは、「画面幅が769px以上の画面では・・・{{}}←赤波括弧内のstyleを適用」という意味です。
※画面幅769px以上ですと大体、スマホ横にした場合~タブレット~PCでの表示になりますね。
今回、メディアクエリが組み込まれたflexのCSSを見てみると、
画面幅769px以上の時はkaerebalink-boxのflexは適用されるということです。
また768px以下の大きさですと、適用されず通常の縦並び(display:block;)になっていました。

ではでは、「min」ではなくてmax-width:〇〇px;だと?

画面幅〇〇px以下の画面でstyleが適用されます。
メディアクエリのまとめ
書き方の例
@media screen and (min-width:769px){
.xx{}
}
メディアクエリ用の「{}」があることに注意しましょう。
()内に入れる値の「以上・以下」の決め方
- 以上→min-width
- 以下→max-width
幅が狭くなった
少しkaerebalink-boxの幅が狭くなり、うっとうしい感じが軽減されました。
影響しているCSSプロパティは以下ですね。
.kaerebalink-box{
width: 96%;
}
この「96%」というのは、
「親要素である「cstmreba」の幅100%のうち、96%の幅を使用するよ。」という意味です。
※「cstmreba」というのは、「kaerebalink-box」を囲っている親要素です。
ボーダーと内側の内容との間隔が変化した。
borderと内容物との間隔が変化しました。
影響しているCSSプロパティは以下です。
@media screen and (max-width: 834px){
.kaerebalink-box, {
padding: 10px 10px 24px;
}
}
よく使用される「padding」ですね。
border⇔コンテンツ(内容)の端っことの間隔を設定できるCSSプロパティですね。

あれ、3つ数値あるけどどうやってみるんだろう?
上記のような悩みが生まれそうなので内訳を示しました。
↓
- padding-top: 10px;
- padding-right: 10px;
- padding-bottom: 24px;
- padding-left: 10px;
つまり3つの数値の場合の見方は、
「padding: (上)(右左)(下) ;」という感じで見ればよいですね。
borderの無駄な広がりが軽減した。
「キュッ!」とborderやpaddingが収まって、見やすい大きさになりましたね。
影響しているプロパティは以下です。
.kaerebalink-box{
box-sizing: border-box;
}

もしかしたら、「box-sizing」とは何ぞやって思う方もいるかもなので…以下で解説します。
- box-sizingとは?
- box-sizingプロパティは、要素の幅(width)と高さ(height)の算出方法を決めます。
- box-sizingのプロパティ値
- box-sizing:content-box;
- 初期設定(デフォルト値)で、幅と高さをそのまま表示されます。
- box-sizing:border-box;
- 上記のプロパティにすることで、borderとpaddingも含めた幅や高さで表示されます。
- 「border-box」の影響を計算式的に見た場合・・・
- 「width:〇〇;」や「height:△△;」と指定した時に、
- width= 左右のborderの幅 + 左右のpaddingの幅 + widthの幅
- height= 上下のborderの高さ + 上下のpaddingの高さ + heightの高さ
- となるように調整されます。
自分でも「長文しんどい…」って感じですが、今回のCSSで「border-box」がどのように効いているか?という調査もやっちゃいました。
「border-box」が作用した→「width」の数値的な変化を理解したい人は読んでみてください。
「border-box」が作用した時の、要素の数値的変化を調査
条件
- 画面サイズは800px。
- cstmrebaの幅→指定無し(767px)
- kaerebalink-boxの幅→width:96%;(736p)
- ※767px:x=100:96→x=767×96÷100
- 数値は検証ツール(デベロッパーツール)にて確認しています。
調査事項
kaerebalink-boxには、「width:96%;(736px)」と、指定されています。
この時に「box-sizing:border-box;」を「ON」 or 「OFF」させた場合の「Computedの図形の数値」はどうなっているか?を確認します。
- 検証ツール内にある機能の一つ。
- 視覚的に、position、margin、border、padding、width×heightの数値を確認できる。
- 選択されているHTMLの最終的なCSSの値が表示される。
border-boxがOFF(またはcontent-boxの時)
ブラウザが読むkaerebalink-boxのwidthは、
「width:96%;(736px)」=「Computedのwidth(736px)」
になっています。
つまり、既存の幅(736px)で読み込んでいることがわかりますね。
border-boxがON
「width:96%;(736px)」=「Computedの左右のborder(計6px)+左右のpadding(計20px)+既存width(710px)」
というように、帳尻が合うように読み込んでいることが分かります。
つまりbox-sizingの値が「border-box」だと、
ブラウザは「左右border+左右padding+既存width」が、CSSプロパティで設定した「widthの値」とイコールになるように、読み込みます。

なぜbox-sizing:border-box;とするのか?

これは「border」や「padding」の数値を変化させた場合、ボックス自体(今回はkaerebalink-box)が大きくなったりして、形が崩れたりするのを防ぐために使います。
上記の吹き出しの説明だと分かりにくいと思いますので、
先ほど調査したkaerebalink-boxで、
「左右のpadding:10px;」→「左右のpadding:50px;」にしたときの「box-sizing:border-box;」の効力
を見てみましょう。
border-boxがOFF
あらら、アフターだと左右のpadding(緑の部分)が外側に向かって大きくなっているので、ボックスの表示が崩れますね。
border-boxがON
border-boxがONになり、幅(width)の解釈は「左右border+左右padding+幅」になります。
よって左右のpadding(緑の部分)を大きくしても内側に向かって大きくなり、代わりに既存のwidthが小さくなっていますね。
つまり、「3つのプロパティ(border,padding,width)の合計幅」は常に一定のまま(指定したwidth値)、一番内側のwidthで調整しつつ、paddingやborderはサイズを大きくできるようになっています。
まとめ
今回は、「kaerebalink-box」に設定されているCSS(Cocoon仕様)を解説しました。
今回綴ったCSSの知識を簡単にまとめてみました。
- border:3px(線の太さ) solid(線の種類) #dfdfdf(線の色);
- 親要素に「display:flex;」と設定すると、中にある子要素は横に並ぶ。
- メディアクエリは、以上→「min-width」 以下→「max-width」
- paddingの簡略化した書き方→padding:(上) (右左) (下);
- box-sizing:border-box; →width:の値は、「左右のborder計」+「左右のpadding計」 +「width(バランス)」
わりと備忘録みたいに書いたので、分かりずらい所もあったかもしれません。
ですが、役立ててもらえれば幸いです。
今回は以上です。
コメント