css cssでレスポンシブ

cssスマホサイズ時のレイアウトはこれが良いですよ

投稿日:

Pocket

うも、チャーさんです。

 

あなたはcssを書いていて、

スマホサイズの時のレイアウトを、

どうしたらいいか悩んでいませんか?

 

この記事では、スマホサイズ時の

良いレイアウトについて、

書いています。

 

 

なのであなたがこの記事を読めば、

スマホサイズ時のレイアウトについての、

疑問が解消されるでしょう。

 

ということで、css書いていて、

スマホサイズ時のレイアウトに困ってるなら、

このまま下にスクロールして読んでみてください。

 

スポンサードサーチ

スマホサイズ時のレイアウトはコレがみやすい

 

で結論からです。

 

スマホの時のレイアウトですが、

基本1カラムにするのがいいです。

 

(1カラムとは、全部縦に表示して、

横に項目を2つ並んだりしないようにすること)

 

 

というのもスマホサイズの時は、

それが一番画面がみやすく、

コンテンツが見やすいからです。

 

ということで実際に具体例で見てみましょう。

 

 

まずこちら、コンテンツとして、

パソコンサイズで2つ横並べで、

コンテンツを表示させました。

 

パソコンサイズのレイアウト

このように画面サイズが大きいと、

2カラム(画面を縦に割って項目を横に2つ並べる)

でも特に違和感ないですよね。

 

 

ですがこれが、画面サイズが縮まって、

スマホサイズになると、

 

スマホサイズ時のコンテンツ見辛い例

 

こんな風に、えらい縦長になってしまいました。

 

 

このコンテンツのボックスには、

文章は入れてませんが、文字列が入ってると

横幅が狭い上に縦長すぎて読みづらいですね。

 

しかし、1カラムにしてやるとどうか?

 

スマホサイズレイアウト例

 

 

こんな風に元のサイズを保ったまま、

先ほどと比べて見やすくなりました。

 

文章が入ったと想定しても、

横幅がしっかりあるので、

読みやすいですし縦長にもなりません。

 

 

ということで、スマホサイズの時は、

cssをいじって、コンテンツを縦に並べる

1カラムのレイアウトにした方が無難です。

 

そして綺麗に見えやすいです。

 

スポンサードサーチ

レスポンシブでスマホサイズ時に1カラムにする方法

 

で、じゃあどうやって1カラムにするか?

ですが、これはcssのflexを使うと、

やりやすいです。

 

パソコンからスマホになるということは、

レスポンシブなので、2カラムと1カラムで、

切り替わってくれると、非常に楽です。

 

でflexではそれができます。

 

 

やり方としては、パソコンサイズでは、

display:flexにすれば、

flex親要素の中に入ってる子要素が横並びになります。

 

<div class=”flex”>
<div class=”box”>コンテンツ</div>
<div class=”box”>コンテンツ</div>
</div>

 

この場合コンテンツというdivが横並びになる。

 

 

またスマホサイズでは、

メディアクエリを指定して、

flex-direction:column;と記述すると、

 

自動で1カラムに切り替わってくれます。

 

コード例としては、

@media screen and (max-width:500px){
.flex {
flex-direction:column;
}
}

 

ですね。

 

 

上記のように書いとけば、

500px以下になれば、1カラムで要素が

縦に並びます。

 

 

スポンサードサーチ

まとめ

 

それではまとめに入ります。

 

cssスマホサイズの時のレイアウトですが、

1カラムにするのが良いです。

 

見栄えがよく、コンテンツも読みやすいので。

 

 

それでは、あなた自身でも、

早速やってみましょう。

 

実際にあなた自身でやっておくと、

スキルアップできますよ。

 

 

で実践できるように一応今回使ったコードを例として、

載せとくので参考にしてみてください。

 

css

.flex {
display:flex;
}

.box {
width:300px;
height:300px;
border:1px solid black;
margin-right:40px;
text-align:center;
}

@media screen and (max-width:500px){
.flex {
flex-direction:column;
}
.box {
margin-right:0;
margin-bottom:30px;
}
}

html

<div class=”flex”>
<div class=”box”>コンテンツ</div>
<div class=”box”>コンテンツ</div>
</div>

 

それでは、cssスマホ時のレイアウトについてでした。

 

読んでもらってありがとうございました。

 

チャーさん

-css, cssでレスポンシブ


スポンサードサーチ

関連記事

no image

ブートストラップの使い方を初心者向けに紹介

どうも、チャーさんです。   あなたはブートストラップを使ってみたい、 または使わないといけないけど、 使い方がわからない。   導入の仕方も、何したらいいかもわからない。 そんな …

no image

レスポンシブデザインを3秒で確認できる方法「各サイズ」

どうも、チャーさんです。   あなたは、レスポンシブデザインの確認方法を、 探していませんか?   この記事では、レスポンシブデザインを、 スマホサイズ、タブレットサイズ、pcサイ …

cssの効率的な学習方法を知りたいなら読んでください。

  あなたはcssの学習方法を模索していますか? どうしたらもっと効率よく早く学習し上達できるのか、 その方法を探していますか?   この記事では、cssの学習方法について お話し …

no image

cssを最初の要素にのみ適用する方法

どうも、チャーさんです。   あなたはcssを最初の要素にのみ、 適用させたいがどうしたらいいか悩んでませんか?   この記事では、cssを最初の要素にのみ、 適用させれる方法を紹 …

no image

cssでボタンをレスポンシブ対応にする方法(微調整必要なしで楽ですよ)

どうも、チャーさんです。   あなたはcssでボタンをレスポンシブにしたい、 かつブレークポイントごとに微調整する手間ひまの、 必要のないボタンを作る方法はないかと思ってませんか? &nbs …

no image

cssで背景色を二色表示させる方法「コードつき」

どうも、チャーさんです。   あなたはcssで背景色を二色表示するには、 どうしたらいいんだろう? と思っていませんか。   この記事では、cssで背景色を二色 表示させる方法とコ …

no image

cssで背景色を背景画像の上に重ねる方法「コードつき」

どうも、チャーさんです。   cssで背景色を背景画像に重ねる方法が、 知りたい。そう思っていませんか?   この記事では、cssで背景色を 背景画像の上に重ねる方法を書いています …

no image

positionで縦に中央寄せする方法はこちらです。

どうも、チャーさんです。   あなたはpositionで縦に中央寄せをしたいのに、 できずに困っていませんか?     この記事ではpositionで要素を縦に、 中央寄 …

no image

見出しに横線をつける方法「webページ制作に便利」

どうも、チャーさんです。   あなたは見出しの横に、横線を表示させたい。 そう思っていませんか?   この記事では、見出しに横線をつける方法を、 書いています。(以下のようなのがで …

no image

cssで三角形を作る方法、コピペで一発でできますよ。

どうも、チャーさんです。   あなたはcssで三角を作る方法を、 探していますか?   この記事ではcssで三角を作る方法を、 書いています。     そしてこ …

no image

レスポンシブ対応の画像にする方法。1行コードを書くだけでOK

  どうも、チャーさんです。   あなたは画像をレスポンシブ対応にしたい、 そう思っていませんか?   ブレイクポイント毎に、画像の幅を指定するのは、 もう疲れた、何か一 …

no image

liタグのメニューにアイコンを表示させる方法(コード例つき)

どうもチャーさんです。   あなたはliタグで作ったメニューに、 アイコンを表示させたいと思っていませんか?   この記事では、liタグのメニューに アイコンを表示させる方法を書い …

no image

cssでボタンにhoverした時に色を変える方法

どうもチャーさんです。   あなたは、cssでボタンにhoverして、 色を変える方法を探していますか?   この記事では、ボタンホバーで、 ボタンの色を変える方法について、 お話 …

no image

z-indexが効かない時の簡単な解決策。1行あれを足せば解決ですよ

z index 効かない   どうも、チャーさんです。   あなたはz-indexが効かないと、 困っていませんか?   ページ制作をしてて、 z-indexを書いたのに …

no image

cssで背景色をつける方法とコードの書き方

  どうも、チャーさん(@chaa___san)です。   あなたはcssで背景色をつけたいんだけど、 どうすればいいかわからない。   そう思っていませんか? &nbs …

最新記事

チャーさん

プログラミング・筋トレ・unity系の記事などを書いてます。

大学卒業後→開業→個人事業主7年目ぐらいです。webサイト制作したり、unityでゲーム開発しております。

youtubeもやってまして、主にプログラミング動画とかunity系の動画をあげてるので見てください。