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

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

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

no image

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

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

no image

cssで文字を回転させる方法「10秒以内にできます」

どうも、チャーさんです。 あなたはcssで文字を回転させたい、 そう思っていませんか?   この記事では、cssで文字を 回転させる方法を書いています。   なので、あなたがこの記 …

no image

cssの書き方コメントが知りたいならこの記事をどうぞ。

どうも、チャーさんです。   この記事ではcssの書き方の1つ、 コメントについて書いてます。   具体的には、 ・そもそもコメントとは? ・コメントを書く方法 ・実用的なコメント …

no image

cssで追随させる方法、スクロールしてもついてくるよ

  どうも、チャーさんです。   あなたは、cssでサイドバーなどを、 追随させる方法を知りたいと思っていませんか?     この記事では、スクロールしても、 …

no image

cssで中央寄せ(縦に)したい場合にどうぞ

  どうも、チャーさんです。   あなたは縦に中央寄せできるcssを、 探していませんか?   この記事ではお手軽に縦の中央寄せができる、 cssを紹介しています。 &n …

no image

cssの読み込み方法を3つ紹介「どれも簡単です」

どうも、チャーさん(@chaa___san)です。   あなたはcssの読み込み方法がわからず、 困っていますか?   この記事ではcssの読み込み方法を3つ紹介してます。 なので …

no image

cssのborderを初学者でもわかりやすいよう説明します

どうも、チャーさん(@chaa___san)です。   あなたはcssのborderとは何か? と疑問に思っていませんか?   この記事ではcssのborderについて、 初学者で …

no image

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

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

max-widthとmin-widthの違いについてわかりやすく説明します

  あなたはmax-widthとmin-widthの 違いについて疑問を持ってますか?   この記事では、max-widthとmin-width の違いを説明してるので、これを読め …

no image

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

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

no image

cssスマホ時のフォントサイズはこのサイズが良さげ

  どうも、チャーさんです。   あなたはcssのスマホのフォントサイズを、 どれぐらいにすればいいか、 と疑問に思っていませんか?     この記事では、迷っ …

no image

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

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

no image

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

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

no image

cssの書き方カンマについての疑問はこの記事で解消

どうも、チャーさんです。   この記事ではcssの書き方の1つである カンマについて書いてます。   なのでこの記事を読めば、あなたは cssのカンマについての疑問が解消され、 さ …

最新記事

チャーさん

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

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

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