- Flexboxを使って画像を横並びにしたら画像が縦に伸びた
そんな時の解決方法をサンプルを用いて紹介します。
この記事はお悩み解決系の記事なので、Flexboxに関する理解を深めたい方は下の記事をご覧ください。
Flexboxの使い方をどこよりも詳しく解説!図解やサンプルもあり!👇 メンターやってます 👇
模写修行やこのメディアを作ったエンジニア中心に、メンタリングサービスHello Mentorを運営しています。
- 独学に限界を感じている...
- 何をどこまで勉強すれば良いかわからない...
- 自分の書き方が正しいかわからない...
- 検索しても解決しない問題が多い...
- 転職や副業のアドバイスが欲しい...
このような方は、ぜひ下記のリンクからサービス詳細をご覧ください。個別説明会もお気軽にお申し込みください。
👆 メンターやってます 👆
この記事の目次
起こる問題と理想の形
上の左側が起こってしまう問題の状態で、右が理想の形です。HTMLの書き方によって左側のようになってしまいます。
<div class="hoge">
<img src="img/test.jpg" width="600" height="400" alt="..." class="hoge-img" />
<p class="hoge-text">テキスト...</p>
</div>
/* 画像のスタイルリセット */
img {
width: 100%;
height: auto;
vertical-align: bottom;
}
/* -------- */
.hoge{
display: flex;
width: 400px;
justify-content: space-between;
}
.hoge-img {
width: 180px;
}
.hoge-text {
width: 200px;
}
このような書き方でかつ、hoge-text
の文章が長い場合、画像が縦に伸びる可能性があります。
次のセクションでこの問題の解決方法を解説します。
画像が縦に伸びる(比率がおかしい)理由と対処方法
画像が縦に伸びる(比率がおかしい)理由とその対処方法を3つ紹介します。
コピペで解決できますが、なぜ起こるのかまで理解すると他でも応用が効くので、ぜひ理由も含めて参考にしてみてください。
【解決策1】align-itemsを使う
.hoge{
display: flex;
width: 400px;
justify-content: space-between;
align-items: flex-start; /* 追加 */
}
flexコンテナに対して、align-items: flex-start;
を指定するだけで画像の伸びがなくなります。
align-items
の初期値はstretch
です。
stretch
を指定すると、flexアイテムはflexコンテナの高さを埋めるように配置されます。その結果、画像より文章領域の高さが高いと、その文章領域の高さに合わせて画像が引き伸ばされます。
flex-start
を指定すると、高さが伸びることはないので、思い通りになります。
【解決策2】align-selfを使う
.hoge-img {
width: 180px;
align-self: flex-start; /* 追加 */
}
画像側にalign-self: flex-start;
を指定することでも同じように画像が伸びなくなります。
align-items
はflexコンテナに指定するプロパティ、align-self
はflexアイテムに指定するプロパティです。
【解決策1】も【解決策2】も本質的にやっていることは同じです。
【解決策3】HTMLの構造を変える
<div class="hoge">
<div class="hoge-img">
<img src="img/test.jpg" width="600" height="400" alt="..." />
</div>
<p class="hoge-text">テキスト...</p>
</div>
このようにHTMLの構造を変えるだけでも解決します。CSSは何も変更していません。
<!-- before -->
<img src="img/test.jpg" width="600" height="400" alt="..." class="hoge-img" />
<!-- after -->
<div class="hoge-img">
<img src="img/test.jpg" width="600" height="400" alt="..." />
</div>
変わった箇所だけピックアップしました。
画像をflexアイテムの子要素にしてしまえば伸びることはありません。
好みにもよりますが、個人的に画像は必ずdivで囲って、スタイルと当てたい場合、divに対して当てるのが良いと思います。
<div class="hoge-img">
<img src="img/test.jpg" width="600" height="400" alt="..." />
</div>
img {
width: 100%;
height: auto;
vertical-align: bottom;
}
.hoge-img{
width: 400px;
margin: 0 auto;
}
画像の大きさを400px
で中央配置にしたい場合、上のようにimgタグに対してではなく、imgタグを囲っているdivに対してスタイリングします。
【駆け出しの方へ】独学に限界を感じてませんか?
プログラミングやデザインは独学可能ですが、ほとんんどの方が苦戦します。
↓このように感じていませんか?
- 何をどこまで勉強すれば良いかわからない...
- 自分の書き方が正しいかわからない...
- 検索しても解決しない問題が多い...
- 転職や副業するまでの道が見えない...
そんな問題を解決するために、模写修行やこのメディアを作ったエンジニア/デザイナー中心に、メンタリングサービスHello Mentorを始めました。
スクールのような大金は必要ありません。高額な費用は払いたくないけど、プロのサポートが欲しい方は、ぜひ下記のリンクからサービス詳細をご覧ください。
👆 メンターは全員現役エンジニア 👆
こんな時も使えます(おまけ)
例えばこのようなレイアウトで、サイドバーに背景色を入れたいとします。
<div class="single">
<main class="single-main">...</main>
<aside class="single-menu">...</aside>
</div>
.single {
display: flex;
justify-content: space-between;
align-items: flex-start; /* これが必要! */
}
.single-main {
width: 65%;
}
.side-menu {
width: 30%;
background-color: #eee;
}
これで実装可能です。align-items: flex-start;
がないと、サイドバーの高さがメイン領域に合わせて伸びてしまうので、背景色も伸びてしまいます。
このように理解して使うと応用が効いたり、問題解決のヒントになります。
他にもFlexbox関連の記事を上げています!
レイアウトを作るにはFlexboxの理解が必須です。基礎を学びたい方は下記の記事をご覧ください。
Flexboxの使い方をどこよりも詳しく解説!図解やサンプルもあり!Flexboxでもレイアウトは作れますが、デザインによってはCSS Gridの方が適している場合もあります。CSS Gridの使い方は下記の記事をご覧ください。
【CSS Grid入門】図解も交えて使い方を詳しく解説!この記事のように、知っておくと便利なFlexbox関連の記事も多数あげています。
Flexboxで均等幅(同じサイズ)で横並び配置する方法! Flexboxで最後の1つだけ右寄せや下寄せにする方法! Flexboxで画像や要素が小さくなる(潰れる)時の対処方法!独学に限界を感じていませんか?
模写修行やこのメディアを作ったエンジニア中心に、メンタリングサービスHello Mentorを運営しています。
👇 こんな方のためのサービスです。
- 独学に限界を感じている...
- 何をどこまで勉強すれば良いかわからない...
- 自分の書き方が正しいかわからない...
- 検索しても解決しない問題が多い...
- 転職や副業のアドバイスが欲しい...
メンターを務めるのは、今も現役でコードを書いているエンジニアのみです。駆け出しの方やメンターだけをやっている方はいません。
高額な料金はかかりません。サブスク&入会金・解約料なしなので、リスクなく始められます。
少しでも興味がある方は、ぜひ下記のリンクからサービスサイトをご覧ください。個別説明会もお気軽にお越しください。(無理な営業等一切ございません!)
当メディア運営メンバーでメンターやってます!👉
詳しく見る
0からweb制作やプログラミングの勉強を始める方はもちろん、12ヶ月以上独学している方や既にお仕事をしている方にもご利用いただいています!