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

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

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

no image

cssでテーブルをレスポンシブの縦並びにする方法

どうも、チャーさんです。   あなたはcssでテーブルをレスポンシブにし、 かつ縦並びにしたい、と思っていませんか?   この記事では、テーブルを縦並びにする方法を、 紹介していま …

no image

liタグを横並びにする方法。この方法なら15秒でできますよ。

どうも、チャーさんです。   あなたがliタグを横並びにしたい、 そう思っていませんか?     この記事では、liタグを横並びにする方法を、 書いています。 &nbsp …

no image

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

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

no image

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

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

no image

cssの書き方で大なりと書くとどうなるか知りたいならこの記事。

どうも、チャーさんです。   あなたはcssの書き方で大なり (例 .class > p )のように書くと、 どう動くのか疑問に思ってませんか?   この記事では、大なりで書 …

no image

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

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

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

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

no image

cssのレスポンシブの書き方「初心者向け記事」

どうも、チャーさんです。   あなたはcssのレスポンシブの書き方を、 知りたいと思っていませんか?   この記事では、cssのレスポンシブの書き方、 メディアクエリ、コードの具体 …

no image

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

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

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

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

no image

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

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

no image

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

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

no image

cssの書き方cssはまとめて書いて楽をしましょう。

どうも、チャーさんです。   この記事ではcssの書き方の1つ まとめて書くについてお話ししてます。   なのであなたがこの記事を読めば、 今までより、「より早く、より効率的に、よ …

no image

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

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

最新記事

チャーさん

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

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

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