Oops! It appears that you have disabled your Javascript. In order for you to see this page as it is meant to appear, we ask that you please re-enable your Javascript!

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

プログラミングのdivをわかりやすく説明します。divにcssを適用する方法も

  どうも、チャーさん(@chaa___san) です。   あなたはdivとはなんだ? と思っていませんか。   この記事ではdivとは何か、 そしてどういう風に使えば …

ワードプレスでCSSを使い丸を表示する方法

どうもチャーさんです。 あなたはワードプレスで丸を表示したいと 思ったことはありませんか。   この記事では丸の作りかたを解説してるので ワードプレスなどで丸を表示したい人はどうぞ。 &nb …

no image

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

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

no image

cssで画像を中央寄せできないを一瞬で解決する方法「コピペOK」

どうもチャーさん(@chaa___san)です。   あなたはcssで画像の中央寄せができないと、 悩んでいませんか?   この記事ではそんな悩みを解決し、 一発で画像を中央寄せで …

no image

デベロッパーツールの使い方を紹介します。「コーダーは知るの推奨です」

どうも、チャーさんです。   あなたはデベロッパーツールって、 どう使ったらいいのか?と思っていませんか。   そもそもどんな使い道があるん? と疑問に思っていませんか。 &nbs …

no image

cssを動画で学習したいならこの記事をどうぞ

どうも、チャーさんです。 あなたは、cssを始めたい、 で、わかりやすく動画で学習したい、   そう思っていませんか?   この記事では、cssを動画で学習できるよう、 僕がとった …

no image

ブートストラップを使う利点をわかりやすく説明します。習得方法も紹介。

  どうもチャーさんです。   あなたはブートストラップを使う利点は、 何だろうと思っていませんか?   css使えばデザインなんてできる、 何でわざわざブートストラップ …

no image

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

どうも、チャーさんです。 あなたはmax-widthとmin-widthの 違いについて疑問を持ってますか?   この記事では、max-widthとmin-width の違いを説明してるので …

no image

cssの背景画像が繰り返しになるのを解決する方法

どうも、チャーさんです。   あなたはcssで背景画像を設置すると、 繰り返しになっていて困っていませんか?   この記事では、cssで表示した背景画像が、 繰り返しにならない方法 …

no image

コーダーの仕事内容をわかりやすく紹介します。

どうもチャーさんです。   あなたはコーダーの仕事内容って、 どんなだろう? と思っていませんか。   またコーダーって具体的にどんなことをやってるんだろう? と疑問に思っていませ …

no image

インライン要素にmarginの上下が効かない時の解決方法「簡単です」

  どうもチャーさんです。   あなたはインライン要素にmarginの上下を、 効かせたいのに効かなくて困ってませんか?   この記事では、そんな状態の解決方法を、 書い …

no image

cssで画像を丸くする方法「15秒以内にできます」

どうも、チャーさんです。   あなたはcssで画像を丸くしたい、 そう思っていませんか?   この記事では、cssで画像を丸くする方法を、 書いています。   &nbsp …

no image

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

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

no image

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

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

no image

レスポンシブで要素を消す方法「簡単にできます」

どうも、チャーさんです。 あなたは、レスポンシブで要素を消すには、 どうしたらいいのだろう、と思っていませんか?   この記事では、レスポンシブで要素を消す方法を、 コード例付きで書いてます …

最新記事

チャーさん

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

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

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