2024/06/22 追記:
レイアウトが崩れてしまう、または要素が画面から消えてしまう可能性のあるミスを訂正しました。
詳細は4.cssで書いたバージョンを参照してください。
はじめましての人も多いと思います、こんにちは。CodeByDeerです！
これが2回目の投稿なので、まだ慣れていない所があります。
なにかフィードバックがあればtwitter - @codebydeerにDMなどをいただければありがたいです!
#目次
1.やりたいことは何か
2.まずは探してみる
3.結論...?
4.cssで書いたバージョン
5.最後に
1.やりたいことは何か
では早速本題に入っていきます。
まずは、具体的にどういうことをしたいかを事前に明確化しておきます。
こういうことです↓
==============================
[高さが変動するボックス] ↑
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ |
↑ viewHeight
[高さを100%で調整したいボックス] |
↓ ↓
==============================
2.まずは探してみる
まずはググってみました。
見つけた記事がこちら↓
この記事を見て、試しに実装してみるんですが、、、
～～～～～～～～～～～～
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>テスト</title>
</head>
<body style="height: 100vh; margin: 0;">
<textarea style="display: block; margin: 10px auto;" placeholder="てきすとあれあ"></textarea>
<hr>
<img style="height: 100%; aspect-ratio: 1/1; border: 1px solid black;" src="https://codebydeer.cloudfree.jp/favicon.ico">
</body>
</html>
bodyにheight: 100vhを、imgにheight: 100%を指定する
(わかりやすいように(?) style属性から直接書きました)
結果がこんな感じ↓
(firefoxの 開発者ツール + レスポンシブデザインモード )
～～～～～～～～～～～～
うーん、、、うまくいきませんね。
さて、これは何がいけないかというと、
...というか言うまでもないですね。
そう、height: 100%は、親要素の高さを固定にしてそれに合わせて変動するわけではなく、親要素と全く同じ高さにするということなのです。
3.結論...?
親要素をflexにしちゃえばよくね...?
ってことで、やってみます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>テスト</title>
</head>
- <body style="height: 100vh; margin: 0;">
+ <body style="height: 100vh; margin: 0; display: flex; flex-flow: column nowrap;">
<textarea style="display: block; margin: 10px auto;" placeholder="てきすとあれあ"></textarea>
<hr>
- <img style="height: 100%; aspect-ratio: 1/1; border: 1px solid black;" src="https://codebydeer.cloudfree.jp/favicon.ico">
+ <img style="height: 100%; aspect-ratio: 1/1; border: 1px solid black; flex-grow: 1;" src="https://codebydeer.cloudfree.jp/favicon.ico">
</body>
</html>
flex-growを使って、うまく引き伸ばしてみます。
結果
目的は果たせたけど...
そうじゃない！！
→img要素にaspect-ratioを指定してるなら、ブロックで囲ってあげればいいのでは！？
ってことで
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>テスト</title>
</head>
<body style="height: 100vh; margin: 0; display: flex; flex-flow: column nowrap;">
<textarea style="display: block; margin: 10px auto;" placeholder="てきすとあれあ"></textarea>
<hr>
+ <div style="flex-grow: 1;">
<img style="height: 100%; aspect-ratio: 1/1; border: 1px solid black;" src="https://codebydeer.cloudfree.jp/favicon.ico">
+ </div>
</body>
</html>
結果
うまくいきました！
・・・
まぁ、うまくは行きましたが。。。
flexを使わないといけないってのと、
かなり注意しないとすぐレイアウトが崩れそうです...
あと、divの中にimgを置いた時のオーバーフローがすっごく気になりました。
そもそもインライン要素になってるときのimg要素って本当にサイズがバグってるんですよね...
aタグと合わせたときとか特に最悪です。
...おっと、話が脱線しましたね、戻しましょう。
4.cssで書いたバージョン
CSSで書いたらもっときれいにできそうです。
ってことで最後に、CSSで書いたバージョンを置いておきます。
というかこれが最終的な結論です！
2024/06/22 追記:
body要素のflex-wrap(flex-flowの第二引数)をnowrapに直しました。
というのは、コンテンツがサイズ的にオーバーフローしていた場合、次の行に移って見えなくなっていました。
以前の記事を見て実装している方はご注意ください。
CSSで書いた最終的なスタイルシート
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>テスト</title>
</head>
<body style="margin: 0;">
<div>
<textarea rows="4" placeholder="てきすとあれあ"></textarea>
<hr>
</div>
<div class="grow">
<img id="icon" src="https://codebydeer.cloudfree.jp/favicon.ico">
</div>
<style>
body {
width: 100%;
height: 100vh;
display: flex;
flex-flow: column nowrap; /* wrap => nowrap (2024/06/22 訂正) */
}
body > .grow {
flex-grow: 1;
overflow: auto;
}
textarea {
display: block;
margin: 10px auto;
}
#icon {
display: block;
height: calc(100% - 2px);
aspect-ratio: 1/1;
border: 1px solid black;
}
</style>
</body>
</html>
ところで、これを使う注意点としては
・flex直下はdivで括る
・勝手に伸びてほしくない(指定した高さにしたい)要素にはflex-growは与えないようにする
→伸びてほしいものにgrowクラスを付ける
・横幅管理はしっかりとする
・他のスタイルシートと併せて使用する場合は、詳細度に注意
ってことです。
5.さいごに
今回の記事は、すごく回りくどい書き方をしたような気がします...
わかりづらかったらごめんなさい🙇
てかそもそもdisplay: grid;を使えって話ですよね、、
また今度しっかりとグリッドを学びなおして、そのときに記事にできたらなと思います!
そして、最後までお読みくださり、ありがとうございました！
それでは、また会いましょう！👋