CSS スマホでの縦並びをPCでは横並びに切り替える

CSS スマホでの縦並びをPCでは横並びに切り替える

HTMLでマークアップした要素のレイアウトをCSSでスマホの画面では縦並びに、PCの画面では横並びに切り替えるレスポンシブデザインを練習がてら記事にしてみました。

CSSでスマホでの縦並びを基準にレイアウトするなら、PCでの横並びはメディアクエリのブレイクポイントで切り替え。

CSSでPCでの横並びを基準にレイアウトするなら、スマホでの縦並びをメディアクエリのブレイクポイントで切り替えます。

 

CSSで縦並びから横並びに切り替え

 

 

HTMLのulとliのリスト要素をスマホの画面ではCSSで縦並びに。

 

 

PCの大きな画面ではブレイクポイントに到達したら横並びのCSSに切り替わる。という基本的なレスポンシブデザインのテクニックですがやってみたいと思います。

CSSでスマホでの縦並びをPCでは横並びに切り替えるHTMLはシンプルなマークアップにしました。

 

<ul class="SP_Flex_container">
    <li><a href="">Flex-Item-1</a></li>
    <li><a href="">Flex-Item-2</a></li>
    <li><a href="">Flex-Item-3</a></li>
    <li><a href="">Flex-Item-4</a></li>
    <li><a href="">Flex-Item-5</a></li>
</ul>

 

ulタグを親要素にして子要素はliタグでaタグのテキストリンクをマークアップするというシンプルなHTML構造です。このHTMLをもとにCSSでスマホでの縦並びをPCでは横並びに切り替えることにします。

 

<meta name="viewport" content="width=device-width, initial-scale=1.0">

 

HTMLのhead要素にmetaタグでviewportの設定をしておくのもお忘れなく。

 

CSSの書き方はスマホ画面を基準に縦のレイアウトをCSSファイルに記述して、縦から切り替えるPC画面の横並びレイアウトはメディアクエリ内に記述します。

 

.SP_Flex_container{
    スマホ画面用のCSS
}

@media screen and (min-width:900px){
    .SP_Flex_container{
        PC画面用のCSS
    }
}
Advertisement

 

このコーディング方法は「モバイルファースト」というコーディングテクニックです。Webサイトでスマホからのアクセスが多い場合には、スマホ画面でも操作しやすい縦並びのレイアウトを基準にすることが多いのではないでしょうか。

 

CSSでスマホでの縦並びを先にデザイン

 

実際にCSSでスマホ画面を基準にする縦並びのデザインをCSSで記述してみました。

今回のHTMLはulとliのマークアップなのでCSSはリストを縦並びにデザインです。

 

.SP_Flex_container{
    width: 100%;
    margin: 10px auto;
}

.SP_Flex_container a{
    background-color: #444;
    color: #cddc39;
    display: block;
    padding: 20px;
    margin: 10px auto;
    text-align: center;
    border: 3px solid #cddc39;
    width: 50%;
}

 

スマホでの縦並びをCSSで先にデザインしていくときは、メディアクエリでブレイクポイントを設定しないでCSSを記述します。普通にセレクタ、プロパティ、値を使ってCSSを記述します。

親要素のul開始タグにクラス付けしたSP_Flex_containerをCSSのセレクタにして幅と余白の指定をします。

親要素内で子要素の縦並びはaタグにCSSでdisplay:blockを指定します。そして親要素内で子要素の幅が目一杯に広がることがないようにwidth:50%の幅にした子要素をmargin: 10px autoで中央に配置した縦並びのボックスにします。

 

 

縦に並んだボックスにはCSSで背景色やテキストカラー、ボーダーを適用させて、ごにょごにょとデザインして完成させます。

普通にCSSを書くだけですけど、ここまでがスマホ画面を基準にデザインした縦並びのCSSです。次はPCの大きな画面サイズのときは縦から横並びに切り替わるようにするCSSを記述します。

 

PCでは横並びにメディアクエリで切り替える

 

縦並びのレイアウトにしたリスト要素をPCの大きな画面サイズの場合は横並びに切り替えるために、CSSをメディアクエリで記述します。

 

@media screen and (min-width:900px){
    .SP_Flex_container{
        display: flex;
        justify-content: space-around;
    }
    .SP_Flex_container a{
        width: 100%;
    }
}

 

@media screen and ()を記述して、スマホでの縦並びをPCでは横並びに切り替える幅の指定(ブレイクポイント)をカッコの中に記述します。

たとえばmin-width:900pxをブレイクポイントに指定した場合は、画面の最小幅900px以上になったときにメディアクエリ内に記述したCSSが適用されてスタイルが切り替わります。

 

Advertisement

 

今回はPCでは横並びに切り替えるのでリストの親要素ulタグのクラス名をセレクタにしてdisplay:flexを記述します。

justify-content: space-around;の記述はulの親要素のフレックスコンテナ内でliの子要素をフレックスアイテムとして均等に横並びの配置ができる記述です。

.SP_Flex_container aのCSSセレクタはa要素の幅100%だけを記述しています。これはCSSでスマホでの縦並びを先にデザインしたときに記述したa要素の幅50%をPCの横並びでは幅100%に上書きして適用させています。

 

 

このようにCSSでメディアクエリのブレイクポイントをmin-widthで指定した場合には、スマホの画面を基準にデザインした縦並びのレイアウトをPCでは横並びに切り替えるレスポンシブデザインにすることができます。

 

CSSで横並びから縦並びに切り替え

 

CSSでスマホでの縦並びをPCでは横並びに切り替えるパターンとしては、PCの画面を基準にした横並びのレイアウトを、メディアクエリでスマホの画面のときは縦並びにレイアウトを切り替えるというやり方もできます。

 

.PC_Flex_container{
    PC画面用のCSS
}

@media screen and (min-width:900px){
    .PC_Flex_container{
        スマホ画面用のCSS
    }
}

 

横並びから縦並びのCSSに切り替える考え方は、スマホでの縦並びを先にデザインしたやり方とは逆のメディアクエリの使い方です。

ページやコンテンツのレイアウトをPC画面を基準にしてCSSを記述していき、メディアクエリ内にスマホ画面のサイズに合わせたCSSを記述していきます。

 

CSSでPCのときを先に横並びにする

 

実際にCSSでPC画面を基準にする横並びのデザインをCSSで記述してみました。

 

<ul class="PC_Flex_container">
    <li><a href="">Flex-Item-1</a></li>
    <li><a href="">Flex-Item-2</a></li>
    <li><a href="">Flex-Item-3</a></li>
    <li><a href="">Flex-Item-4</a></li>
    <li><a href="">Flex-Item-5</a></li>
</ul>

 

PCでの横並びをスマホでは縦並びに切り替えるHTMLはulとliでマークアップしたリストです。

CSSでulとliの要素を先に横並びにする記述をします。

 

.PC_Flex_container{
    display: flex;
    justify-content: space-around;
}
.PC_Flex_container a{
    background-color: #cddc39;
    color: #444;
    display: block;
    padding: 20px;
    margin: 10px;
    text-align: center;
    border: 3px solid #444;
}

 

PCでの横並びをCSSで先にデザインしていくときは、メディアクエリでブレイクポイントを設定しないでCSSを記述します。普通にセレクタ、プロパティ、値を使ってCSSを記述します。

リストの親要素ulタグのクラスをCSSでセレクタにしてdisplay: flex;で横並びに、justify-content: space-around;も記述して横並びの配置を均等にします。

 

 

横に並んだボックスにはCSSで背景色やテキストカラー、ボーダーを適用させて、ごにょごにょとデザインして完成させます。

普通にCSSを書いて要素を横並びにしただけですけど、ここまでがPC画面を基準にデザインした横並びのCSSです。次はスマホの小さな画面サイズのときは横から縦並びに切り替わるようにするCSSを記述します。

 

スマホでは縦並びにレイアウトを切り替える

 

横並びのレイアウトにしたリスト要素から、スマホの小さい画面サイズのときに縦並びに切り替えるためのCSSをメディアクエリで記述します。

 

@media screen and (max-width:900px){
    .PC_Flex_container{
        display: flex;
        flex-direction column;
    }
    .PC_Flex_container a{
        width: 50%;
        margin: 10px auto;
    }
}

 

@media screen and ()を記述して、PCでの横並びをスマホでは縦並びに切り替える幅の指定(ブレイクポイント)をカッコの中に記述します。

ブレイクポイントに記述する幅の指定にはCSSのmax-widthを使用します。

たとえばmax-width:900pxをブレイクポイントに指定した場合は、画面の最大幅900px以下になったときにメディアクエリ内に記述したCSSが適用されてスタイルが切り替わります。

 

Advertisement

 

今回はスマホでは縦並びに切り替えるのでリストの親要素ulタグのクラス名をセレクタにしてdisplay:flexとflex-direction column;を記述します。

flex-direction column;の記述はulの親要素のフレックスコンテナ内でliの子要素をフレックスアイテムとして縦並びの配置ができる記述です。

 

 

あとは.PC_Flex_container aのCSSセレクタにa要素の幅50%とmargin: 10px auto;を記述することで、縦に並んだボックスの幅をスマホ画面に合わせて親要素の中央に配置しています。

このコーディング方法は「PCファースト」というコーディングテクニックです。WebサイトでPCからのアクセスが多い場合には、PC画面でも見やすい横並びのレイアウトを基準にする場合に役立ちます。

CSSカテゴリの最新記事