こんにちは。
日々cssの勉強をしていると、
度々奥の深さに驚かされます。
(真の奥の深さを知るほどの知識はないのですが。。。)
とにかく、
新たな知識を得るたびにその学びにハッとさせられるのと、
その先にもまだまだ学びがありそうという希望のようなものが
湧いてきます。
そして今回はこの前学んだCSSの使い方の中で
画像を正方形で入れたい時の話をしたいと思います。
(実際には1年前くらいに学んだものを数日前に実際に使ってみたときに復習しました。)
まずhtmlとcssはこんな感じになります↓↓↓
ちなみに 画像を入れる際にはbackgroud-color:は不要です。html上で<img>タグを入れたり、cssでbackground-image: を入れたりして画像を入れ込んでください。
<img>タグを使う場合は cssでimgタグ自体のwidth:を100%にする必要があります。
また、画像自体の縦横比率は変えたくないと思うので、object-fit: cover;をcssの画像クラスに含めてください。
さらに、当然画像は正方形にトリミングされた形で表示されるので、トリミング位置を指定したいときはobject-position: ○○% 〇〇%;とします。
(それぞれ0%の場合左端、上端となります。初期位置は真ん中で50% 50%です。)
簡単にいうと、cssの::beforeを使います。
::boforeってなんぞや？ということになるかもしれないのですが、
リファレンスサイトでは以下のように説明されています。
"選択した要素の最初の子要素として擬似要素を作成します。
よく content プロパティを使用して、要素に装飾的な内容を追加するために用いられます。"
擬似要素?となりますが、html上のある要素の手前にもう一個要素を作っちゃおうという物です。
なんでhtml上には存在していない要素をもう一個作らないといけないのかというと、上のリファレンスサイトからの引用文2行目にある"装飾的な内容を追加するため"だけに擬似要素を作ります。
今回行いたい装飾は、"要素を正方形にしたい"ということです。
その装飾をするためだけに::beforeで擬似要素を作ります。
でもこう思いませんか？
それだけなら要素のheight:とwidth:を同じ大きさにすれば良いじゃん。
そんな風に思っちゃった皆さん、まさにその通りなんです。
高さと幅を指定すれば正方形は作れちゃいます。
ただ一つだけ問題があるんです。
それは、
"親要素がどんな大きさだろうと正方形は頑固にその大きさを保ち続けてしまう"
と言うことです。
もっと言えばスマホ画面だろうとPC画面だろうと映画のスクリーン(そんなわけありませんが)だろうとこの正方形の大きさは変わりません。
想像したらわかりますが、それでは不便なんです。
(映画のスクリーンは想像しなくていいです笑)
要素の大きさを親要素の大きさによって変えると言えば
width: 〇〇%とかheight: 〇〇%ですよね。
ただheight: と width: の両方を%で指定することができないんです。
できたとしてスクリーン自体の縦横比率が自在に変わってしまうので正方形を保つのは不可能です。
困りましたね。
と言うことで出てくるのが
じゃあheight:を設定する用に要素をもう一つ作ってしまえば良いではないか！
と言う名案です。
じゃあどうやって作るのか、
ここで出てくるのが::beforeです。
今回で言うと.square::before{}とします。
そして::beforeの要素の中で設定するのは
height:ではなく、縦方向のpaddingプロパティです。
padding-top:(またはpadding-bottom:)を100%で設定します。
::beforeで設定したpaddingが本要素の高さになってくれるのです。
そしてこのpaddingの100%ってなんの100%なのかと言うと、
本要素のwidthなんです！(なんで??って思いますがこのためなんですかね？)
本要素のwidthの100%がheightになる=幅と高さが同じ=正方形になる！
と言うことなんです！
ここでもう一度最初にお見せした::beforeが含まれるコードを見てみましょう↓↓↓
ここまでで、ほぇ〜っと思っていただけたら嬉しいです。
また、::beforeなどの擬似要素を使うときは
content: "";
display: block;
を必ず入れましょう。入れないと擬似要素が無効になります。
ちなみにですが、
-""内に文字を入れると擬似要素の中にその文字が含まれます。擬似要素のpaddingと要素の高さが一致しているので文字の位置は正方形の底に位置付けされます
-例えばpadding-top:の値を50%にすると、heightの値がwidthの50%になり2:1の長方形になります。
参考までに、この二つを実際にやってみるとこうなります↓↓↓
さらにさらに、
角を丸めるプロパティborder-radius: 50%;を使って
正方形の4つ角全てを均等に丸めると
正円が作れちゃいます。↓↓↓
See the Pen A flexible circle by shefuyuta (@shefuyuta) on CodePen.
※以下リファレンスサイトの一文の通り、::beforeはimgタグなどには使えないため、
divなどで正方形を作成し、その背景画像を埋め込むか、中に画像を入れてください。
”注: ::before および ::after によって生成される擬似要素は要素の整形ボックスに含まれるため、 <img> 要素や <br> 要素のような置換要素には適用されません。”
いかがでしたでしょうか。
参考になった、またはこれの通りやってもできなかったと言う場合は
是非SNSからコメントいただけたら幸いです！