【コピペで簡単】CSSで端末によって横並びと縦並びを気持ちよく見えるようにする

2023年9月5日

R.U.I

PCやタブレットでは横並びに。

[画像][テキスト]

スマホでは縦並びに。

[画像]
[テキスト]

コンテンツをより見やすくするために、レスポンシブデザインとして、そういったテクニックも必要ですよね。

ブログのトップページなどの記事の並びでも、そういった表現はよく利用されています。

今回は「flexbox」と「mediascreen」を利用して実装したいと思います。

もちろん コピペで簡単に 実装できるようにサンプルを用意しました。

この記事の著者

ガジェットブロガー

R.U.I ルイ

詳しいプロフィール

プロフィール

ガジェットやモノで生活に刺激を「ルイログ」。当サイトではAppleデバイスやその周辺機器、使えるソフト・アプリ、さまざまなガジェットや生活家電・モノをレビューしています。他にもWEBをデザインのコピペで簡単に使えるコードを紹介したりも。WEBエンジニアの方やPCが趣味・PCを使って仕事をしている方にとって役立つ情報を発信しています。カメラ・写真が好きなのでレビュー商品も写真を多め撮影し掲載することでより商品の魅力や細かいが伝わるよう心がけています。プロフィール詳細やレビューガイドライン

実装した結果のイメージ

PCやタブレットの横並び

rui-log、WEBデザイン。PCやタブレットで見たイメージ — PCやタブレットでのイメージ

スマホの縦並び

こんな感じになります。

HTMLは基本的なもの

<div class="contents">
     <div class="flexbox">
         <div class="box1">
             <img src="画像URL" alt="">
         </div>
         <div class="box2">
             <p class="text-center">テキスト</p>
         </div>
     </div>
 </div>

上記イメージをそのまま実装するように書きました。

contentsの大枠の中に、今回紹介するflexboxを入れ、box1とbox2でコンテンツを並べています。

メインのCSSはこちら

.contents {
     width: 100%;
     max-width: 1200px;
     margin: auto;
 }
 .contents img {
     width: 100%;
 }
 .text-center {
     text-align: center;
 }
 .flexbox {
     display: flex;
 }
 .box1 {
     width: 55%;
     margin: auto;
 }
 .box2 {
     width: 45%;
     margin: auto .5rem;
 }
 @media screen and (max-width: 767px) {
     .flexbox {
         display: block;
     }
     .flexbox .box1 {
         width: 100%;
         margin: 0 auto;
     }
     .flexbox .box2 {
         width: 100%;
         margin: 0 auto;
     }
 }

上記を実装すると先で紹介したイメージ通りのものになります。

テキストはセンタリングしておきました。

「display: flex;」で横並びを実現し（box1・box2で横並びコンテンツのサイズを調整）、画像の方が横並びのとき横幅55%で少し大きくなるようにしてみました。

「@media screen and (max-width: 767px) {}」でスクリーンサイズが767px以下になったとき「display: block;」にして横並びを解除し、画像は100%に指定しています。

細かいところの微調整はお好みで。