WEBブラウザは、基本的には画面サイズが可変であると考えてUIデザインをしたり、WEBページを構成するのが一般的です。
スマートフォンでWEBブラウザを見ている人は、基本的に画面サイズは縦横(portrait,landscape)の２パターンぐらいですが、パソコンでWEBブラウザを使う場合は、画面フィットさせずに使っている人の方が圧倒的に多く、そのサイズは、大小含め、非常に多岐にわたります。
縦長も横長も考えられる上、最近のPCモニタの大サイズ化を考えると、もはや無限にサイズが存在するような印象です。
スマートフォンが主流になってきてからレスポンシブデザインというデザイン思考が生まれましたが、パソコンだけであった場合に小さく表示するのはタブーとされていて、画面をスクロールさせる一方的なやり方が、スマートフォンのような小さい画面が前提の場合も許容するデザイン思考が必須になってきたという事です。
このように、WEBブラウザの画面サイズが多岐に渡る事を考えると、その中のコンテンツのサイズも柔軟に可変しなければ、便利なコンテンツページを作ることはできなくなってきました。
今回は、何かしらの一覧表示をするようなコンテンツページや、特定のエレメントを正方形表示して画面サイズに応じて可変に対応したい場合に便利な「CSSだけで正方形表示」を可能にしたいと思います。
でも・・・cssだけでの正方形がこんなに難しい処理だとは思いませんでした。
サンプルHTML
<DOCTYPE html>
<html>
<head>
<title>SQUARE</title>
</head>
<body>
<h1>CSS - Square</h1>
<div class="flex">
<div class="square square-1">
String-Test
</div>
<div class="square square-2">
<img src="toys-1596716_1280.jpg">
</div>
<div class="square square-3">
<img src="binary-2910663_1280.jpg">
</div>
<div class="square square-4">
<div class="square-adjust">
<img src="bluetooth-headset-3443364_1280.jpg">
</div>
</div>
</div>
</body>
</html>
４つのコンテンツを表示してそれぞれ正方形で並べるようにしています。
他サイトで紹介されているやり方
.flex{
width:100%;
display:flex;
flex-wrap: wrap;
justify-content: flex-start;
}
.flex .square{
position:relative;
width:30%;
height:0;
border:1px dotted blue;
padding-top:0%;
padding-bottom:30%;
margin:4px;
text-align:center;
line-height:1;
overflow:hidden;
}
枠を表示するだけであれば、このやり方で問題ないし、その中の表示も枠内でできているんですが、画像をセンタリング表示したい場合にどうすればいいか対応してみましょう。
簡単に説明すると、padding-topとpadding-bottomの２つは、そのエレメントのheight情報が0の場合に、親要素のwidth値に依存するというcssの特性を利用した裏技になります。
コンテンツを３つ横並びにするので、widthを30%にしたので、正方形にしたい場合、padding-botton(またはpadding-top）に同じ値を入れてあげるだけで正方形が実現します。
ただし、注意するべきは、このコンテンツのheightは0であるため、overflow:hiddenなどを書いてしまうと、何も表示されなくなります。
ちなみに、下記のように書くと、基本ラインが中間になります。
padding-top:15%;
paddong-bottom:15%;
画像のセンタリング表示方法
.flex{
width:100%;
display:flex;
flex-wrap: wrap;
justify-content: flex-start;
}
.flex .square{
position:relative;
width:30%;
height:0;
border:1px dotted blue;
padding-top:0%;
padding-bottom:30%;
margin:4px;
text-align:center;
line-height:1;
overflow:hidden;
}
.flex .square img{
max-width:100%;
}
.flex .square .square-adjust{
position:absolute;
top:0;
right:0;
bottom:0;
left:0;
}
.flex .square .square-adjust img{
width:100%;
height:100%;
object-fit:contain;
}
そもそも正方形にするやり方事態が裏技なのですが、それをさらに利用する技です。
一番最後のコンテンツがちゃんとセンタリングされているのが分かります。
ポイントは以下になるので抑えておきましょう。
1. 以下の３階層が必要（1:正方形表示するエレメント , 2:正方形の縦横比を取得するエレメント , 3:表示する画像)
2. 正方形エレメントは、position:relative
3. 縦横比を取得するエレメントはposition:absouteにして、top,right,bottom.leftすべてを0にして、サイズを取得
4. 表示する画像はwidth100%,height100%にしてobject-fit:coverで画像のアスペクト比をキープする。(containにしてもOK）
padding-bottomはどこのページにも書かれていましたが、エレメントのサイズ取得をして、内容コンテンツを表示させるやり方が書かれているサイトが無かったので、ブログに書いておきました。
この記事が参考になれば幸いです。
