Author
R.U.I(ルイ)
ガジェットブロガー
ECサイト運営会社でWEBエンジニア&マーケター・WEBコーダーとして日々従事しており、会社ではWindows、お家ではMacの両刀遣い。iPad Proは毎日持ち歩いています。PCデスク周りを快適にすることやWEBデザインが好き。ガジェットやモノで生活に刺激を与えたいという想いで人におすすめしたいモノの紹介記事を軸にブログ運営をしているガジェットブロガーです。写真撮影が趣味になりました。
ルイログをGoogleニュースで読む
この記事の目次
CATEGORY

2次元のルイ

ブログやるなら SWELL × ConoHa WING がおすすめ!ルイログはこの構成で運営しています

ルイログ愛用ブログテーマSWELL

今選ぶBESTサーバー ConoHa WING

ルイログも愛用中!

YouTubeチャンネル開設しました!
ステマ規制への対応と記事内広告について

本サイト内のコンテンツはルイログが独自に制作しています。 メーカー等から商品提供を受けることもありますが、その場合は記事内にPR表記と提供を受けている旨を明記しています。 また、コンテンツの内容や評価に関する決定にも一切関与されていません。 アフィリエイトプログラムにより記事内で紹介する商品を購入することで当サイトに売り上げの一部が還元されることがあります。 詳しくはサイト運営ポリシーをご覧ください。

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

【コピペで簡単】CSSで端末によって横並びと縦並びを気持ちよく見えるようにする
PCやタブレットでは横並びに。

[画像][テキスト]

スマホでは縦並びに。

[画像]
[テキスト]

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

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

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

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

もくじ
この記事の著者
R.U.I

ガジェットブロガー

R.U.I ルイ

詳しいプロフィール

プロフィール

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

実装した結果のイメージ

PCやタブレットの横並び

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

スマホの縦並び

rui-log、WEBデザイン。スマホで見たイメージ
スマホでのイメージ

こんな感じになります。

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%に指定しています。

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

CSSで端末によって横並びと縦並びを気持ちよく見えるようにする方法についてのまとめ

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

今回はかなり基本的なテクニックだけれど、だいたい皆 1度は使うであろう定番のCSSを紹介しました。

@media screen」はすべてのページに入れると思うし、

flexbox も便利なので使う人が多そう。

今はgrid もよく使われるようにもなったけれど、まだまだ flex も元気です。

 

良きWEBデザインをっ!

 

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

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
もくじ