「正方形を作ることはできるけどレスポンシブ対応ができない」
「pxを使った数値指定の方法でしか正方形を作ることができない」
「ネットにあるコードをコピペしたけど上手く表示されなかった」
本日はそんな方に向けてCSSで縦横比を保ったレスポンシブな正方形の作り方を解説していきます。
Web制作でよく正方形のコーディングが登場しますが、レスポンシブで可変な正方形を作るのは初学者の方には意外と難しいです。
本記事では簡単な方法と最新のトレンドの方法の2パターン紹介しますので、最後まで読んでいってください。
また動画もあるので必要に応じて使ってください。
CSSでレスポンシブ対応した可変な正方形を作る簡単な方法
まずHTMLを用意します。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="./style.css" />
<script src="./script.js" defer></script>
</head>
<body>
<div class="container">
<div class="box"></div>
</div>
</body>
</html>divタグで親子関係を作っていて、「.box」の方が正方形になる予定です。
続いてCSSは以下のように書いていきます。
.container {
width: 30%;
}
.box {
width: 100%;
padding-top: 100%;
background: red;
}
簡単に正方形が作成されましたね、分かりやすくするために背景を赤色にしています。
ブラウザの検証ツールでレスポンシブ対応になっているか確認してみてください。
縦横比を保ったまま可変の正方形になっていますね。
手順としてはHTMLで正方形にしたい要素をdivタグなどで囲って親子関係を作っておくのがポイントです。
～省略～
<!-- 正方形で表示したいものをdivタグなど親要素で囲う -->
<div class="container">
<div class="box"></div>
</div>
～省略～上記のHTMLでは「.container」が親要素で、「.box」が子要素という関係です。
正方形の横幅を親要素の「.container」で指定します、ここでpxではなく%など可変できる単位で指定するのも大事です。
子要素である「.box」の横幅は親要素と同じになる（width : 100%）ようにします。
正方形の本体となるのは子要素の「.box」の方になりますので注意してください。
/* 親要素の方で横幅だけを指定しておく */
.container {
width: 30%;
}
/* 子供の要素は横幅を親の100％（同じ幅）にしておく */
.box {
width: 100%;
/* 横幅と縦幅の比率を揃えるため */
padding-top: 100%;
background: red;
}子要素の「.box」にあるpadding-topについては、よく分からないかもしれませんが「縦横比」と思ってください。
正方形は縦と横の長さが同じなのが条件ですので100％としています。
さらに簡単に作れるレスポンシブで可変な正方形
同じレスポンシブで可変な正方形を作る別パターンを紹介します。
HTMLを以下のように作り直します。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="./style.css" />
<script src="./script.js" defer></script>
</head>
<body>
<div class="box-new"></div>
</body>
</html>親子関係になっていないシンプルなdivタグを1個だけ用意します。
続いてCSSは以下のように書きます。
.box-new {
width: 30%;
background: red;
aspect-ratio: 1;
}先ほどと同じ正方形を作ることができました、レスポンシブにもなっていますね。
こちらの方法はとてもシンプルです、CSSで「aspect-ratio」というプロパティを使うだけです。
「aspect-ratio」も縦横比を設定するプロパティで、0～1の幅で数字を設定します。
先ほどのpadding-topでは%を使っていましたが、aspect-ratioは%にする必要はありません。
2パターンともに縦横比を設定することで正方形が実現できるのを感じてもらえたでしょうか。
「aspect-ratio」については少し前までIEに非対応だったのですが、最近はIEのことは考えなくて良くなったので「aspect-ratio」がトレンドになっています。
もちろん前半で紹介したパターンでも全く問題ありませんが、paddingというプロパティは基本的に親子関係が必要なプロパティなので注意してもらえらば使ってもらって大丈夫です。
また今回参考にした書籍は以下になりますので良ければどうぞ。