【カエレバ-Cocoon仕様】「kaerebalink-box」のCSSを解説

カエレバ クラス名(kaerebalink-box)に設定されたCSSの解説(アイキャッチ) CSS
この記事は約12分で読めます。

今回はカエレバの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名にあたります。

vscode kaerebalink-box強調

解説
カエレバアフィリエイトリンクのHTMLとは?
ブログやサイトなどにカエレバアフィリエイトリンクを貼り付ける際に、必要なHTMLコードのことです。

kaerebalink-boxの役割

  • 外側から二番目に来る箱。
  • リンク全体にCSSデザインを設定しています。

以降から、「Cocoonテーマ」に設定されていた「kaerebalink-box」のCSSについて解説していきますね。

以下のフローから得られた内容を説明しますね。

  • 「kaerebalink-box」にCSSを設定
  • ブラウザ表示にあった変化をピックアップ
  • 変化に影響しているCSSを説明する

ちなみに、下記の画像がCSS設定前とCSS設定後のビフォーアフターです。

 ➁kaerebalink-box-変化前(pc)

➁kaerebalink-box 変化後(pc)

画像の青・緑・黄・橙の部分

画像で元々色付けされている箇所は、検証ツールによるものです。

各色に関しては、以下の意味があります。

検証ツール widht×height
青(#8cb6c0)=content
(width×height)

検証ツール padding
緑(#c3d08b)=padding

検証ツール border
黄(#fddd9b)=border

検証ツール margin
橙(#f9cc9d)=margin

検証ツール position
無(#ffffff)=position

【Cocoon版】「kaerebalink-box」のデザインとそのCSSを解説

カエレバ全体にボーダーをつける

ちょっとボーダーが分かりにくいので、以下の画像です。

ボーダーを強調してます。

灰色のボーダーで囲まれました。

以下のプロパティが影響しています。


kaerebalink-box{
    border: 3px solid #dfdfdf;
}

上記のプロパティ値の意味を図で示しますね。

borderの説明

画像の下にあった文章達が横に並んだ

➁kaerebalink-box 変化後(pc) flexでinfoが移動した。

以下のプロパティが影響しています。


@media screen and (min-width: 769px){
.kaerebalink-box {
    display: flex;
}
}

上記のプロパティ値「flex」が、並べ方を設定します。

これは親要素(kaerebalink-box)にかかっていますね。

つまり「kaerebalink-box」(親要素)はflexを設定したことにより、子要素たちを入れる「フレックスコンテナ≒入れ物」になったわけです。

kaerebalink-boxのコンテナ

今回フレックスコンテナ内に入っている子要素たちは、以下の3つです。

  • ➂kaerebalink-image
  • ➃kaerebalink-info
  • ➄booklink-footer

上記3つは、「フレックスアイテム」と言われます。

➂~➄というのは、別記事でカエレバHTMLで使われてるclass名を紹介した時の名残です。気にしなくてOKです。

結果、この子要素たちは今まで縦並びでしたが→「フレックスアイテム化」したことで、横並びになりました

「flex」の変化がわかりづらい人に向けて、動画にしてみました。

ズボラ🐡

もしかしたら動画では分かりにくいかもなので、「flex」のON・OFFを示した画像も載せておきますね。

➁kaerebalink-boxのflexOFF時

➁kaerebalink-boxのflexON時

※並びの変化が分かりやすいように、各々に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;)になっていました。

768px時でflexの作用無し(ビフォー)

769px時でflexの作用有(アフター)

CSS初学者

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

ズボラ🐡

画面幅〇〇px以下の画面でstyleが適用されます。

メディアクエリのまとめ

書き方の例


@media screen and (min-width:769px){
.xx{}
}

メディアクエリ用の「{}」があることに注意しましょう。

()内に入れる値の「以上・以下」の決め方

  • 以上→min-width
  • 以下→max-width

幅が狭くなった

➁widthの96%効いていない状態

➁widthの96%効いている状態

少しkaerebalink-boxの幅が狭くなり、うっとうしい感じが軽減されました。

影響しているCSSプロパティは以下ですね。


.kaerebalink-box{
    width: 96%;
}

この「96%」というのは、
「親要素である「cstmreba」の幅100%のうち、96%の幅を使用するよ。」という意味です。

※「cstmreba」というのは、「kaerebalink-box」を囲っている親要素です。

ボーダーと内側の内容との間隔が変化した。

➁paddingの設定なし改

➁paddingの設定あり改

borderと内容物との間隔が変化しました。

影響しているCSSプロパティは以下です。


@media screen and (max-width: 834px){
.kaerebalink-box, {
    padding: 10px 10px 24px;
}
}

よく使用される「padding」ですね。

border⇔コンテンツ(内容)の端っことの間隔を設定できるCSSプロパティですね。

吹き出し 困った人・悩み系
CSS初学者

あれ、3つ数値あるけどどうやってみるんだろう?

上記のような悩みが生まれそうなので内訳を示しました。

  1. padding-top: 10px;
  2. padding-right: 10px;
  3. padding-bottom: 24px;
  4. padding-left: 10px;

つまり3つの数値の場合の見方は、
「padding: (上)(右左)(下) ;」という感じで見ればよいですね。

borderの無駄な広がりが軽減した。

➁border-boxのビフォー

➁border-boxのアフター

「キュッ!」とborderやpaddingが収まって、見やすい大きさになりましたね。

影響しているプロパティは以下です。


.kaerebalink-box{
    box-sizing: border-box;
}

ズボラ🐡

もしかしたら、「box-sizing」とは何ぞやって思う方もいるかもなので…以下で解説します。

解説
box-sizingとは?
box-sizingプロパティは、要素の幅(width)と高さ(height)の算出方法を決めます。
box-sizingのプロパティ値
box-sizing:content-box;
初期設定(デフォルト値)で、幅と高さをそのまま表示されます。

➁box-sizing→content-box

box-sizing:border-box;
上記のプロパティにすることで、borderとpaddingも含めた幅や高さで表示されます。

➁box-sizing→border-box

「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の図形の数値」はどうなっているか?を確認します。

※Computedとは?
  • 検証ツール内にある機能の一つ。
  • 視覚的に、position、margin、border、padding、width×heightの数値を確認できる。
  • 検証ツールのmargin、border、padding、widthとheightがパット見でわかる
  • 選択されているHTMLの最終的なCSSの値が表示される。
  • ➁Filterと書かれた下の数値たちComputedの最終的なCSSの数値

border-boxがOFF(またはcontent-boxの時)

ブラウザが読むkaerebalink-boxのwidthは、

「width:96%;(736px)」=「Computedのwidth(736px)」
になっています。

つまり、既存の幅(736px)で読み込んでいることがわかりますね。

➁border-boxがOFF

border-boxがON

➁border-boxがON

「width:96%;(736px)」=「Computedの左右のborder(計6px)+左右のpadding(計20px)+既存width(710px)」
というように、帳尻が合うように読み込んでいることが分かります。

つまりbox-sizingの値が「border-box」だと、
ブラウザは「左右border+左右padding+既存width」が、CSSプロパティで設定した「widthの値」とイコールになるように、読み込みます

CSS初学者

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

ズボラ🐡

これは「border」や「padding」の数値を変化させた場合、ボックス自体(今回はkaerebalink-box)が大きくなったりして、形が崩れたりするのを防ぐために使います。

上記の吹き出しの説明だと分かりにくいと思いますので、

先ほど調査したkaerebalink-boxで、
「左右のpadding:10px;」→「左右のpadding:50px;」にしたときの「box-sizing:border-box;」の効力
を見てみましょう。

border-boxがOFF

➁border-boxがOFF時のpadding10pxの表示トリミング済み

➁border-boxがOFF時のpadding50pxの表示トリミング済み

あらら、アフターだと左右のpadding(緑の部分)が外側に向かって大きくなっているので、ボックスの表示が崩れますね。

border-boxがON

➁border-boxがON時のpadding10pxの表示トリミング済み

➁border-boxがON時のpadding50pxの表示トリミング済み

border-boxがONになり、幅(width)の解釈は「左右border+左右padding+幅」になります。

よって左右のpadding(緑の部分)を大きくしても内側に向かって大きくなり、代わりに既存のwidthが小さくなっていますね。

つまり、「3つのプロパティ(border,padding,width)の合計幅」は常に一定のまま(指定したwidth値)、一番内側のwidthで調整しつつ、paddingやborderはサイズを大きくできるようになっています

まとめ

今回は、「kaerebalink-box」に設定されているCSS(Cocoon仕様)を解説しました。

今回綴ったCSSの知識を簡単にまとめてみました。

  1. border:3px(線の太さ) solid(線の種類) #dfdfdf(線の色);
  2. 親要素に「display:flex;」と設定すると、中にある子要素は横に並ぶ。
  3. メディアクエリは、以上→「min-width」 以下→「max-width」
  4. paddingの簡略化した書き方→padding:(上) (右左) (下);
  5. box-sizing:border-box; →width:の値は、「左右のborder計」+「左右のpadding計」 +「width(バランス)」

わりと備忘録みたいに書いたので、分かりずらい所もあったかもしれません。

ですが、役立ててもらえれば幸いです。

今回は以上です。

コメント