【CSS】CSSだけで要素を横並びにし、横スクロールを実装してスマホに対応させる方法！

デスクトップよりもスマホからのアクセスが増す一方の現代。
スマホでの観覧を考えると、多くの情報を表示したくてもユーザビリティへの悪影響を考えて情報を減らすこともありますよね。
そんなときに便利なのがスクロール機能で、表示領域を制限させたうえで必要な情報をスクロールで表示されることができます。
縦スクロールは簡単ですし、スマホの場合は誤操作を招く場合があるので、今回は横スクロールを実装する方法をご紹介します。

キーコードはFlexbox

FlexboxはCSS3から使用できるようになったコードで、簡単に言うとdisplay: flex; と記述するだけで要素が横並びになります。

HTML

<div class="flex_1">
<div class="f_1">テスト1</div>
<div class="f_1">テスト1</div>
<div class="f_1">テスト1</div>
<div class="f_1">テスト1</div>
</div>

CSS

<style>
.flex_1 {display:flex;}
.f_1 {padding:30px;color:#fff;background-color:#1fab89;margin:5px;}
</style>

サンプル

テスト1

テスト1

テスト1

テスト1

HTMLの方を変更して子要素をもう少し増やしてみましょう。

<div class="flex_1">
<div class="f_1">テスト1</div>
<div class="f_1">テスト1</div>
<div class="f_1">テスト1</div>
<div class="f_1">テスト1</div>
<div class="f_1">テスト1</div>
<div class="f_1">テスト1</div>
<div class="f_1">テスト1</div>
<div class="f_1">テスト1</div>
<div class="f_1">テスト1</div>
<div class="f_1">テスト1</div>
<div class="f_1">テスト1</div>
<div class="f_1">テスト1</div>
<div class="f_1">テスト1</div>
<div class="f_1">テスト1</div>
<div class="f_1">テスト1</div>
<div class="f_1">テスト1</div>
</div>

サンプル

テスト1

テスト1

テスト1

テスト1

テスト1

テスト1

テスト1

テスト1

テスト1

テスト1

テスト1

テスト1

デザインが汚くなってしまいましたが、折り返さないで横並びが永遠と続いていますよね。
Flexboxは折り返さないことが初期値となっていて、これが同じ横並びの作用を持つfloatやdisplay: inline-block;と違う所。

flex-wrap:を記述すれば、折り返すこともできますが、横スクロールは折り返さないことで実現するため、簡単な紹介だけしておきます。

flex-wrap:

• nowrap = 折り返さない（何も記述しなければnowrapが初期値）
• wrap = 折り返す
• wrap-reverse = 逆方向へ折り返す

Overflow-xで横スクロールを実装してみよう

Flexboxで中身は完成しました。
では、表示領域を制限して横スクロールを実装してみましょう。

これも簡単です。
表示領域からはみ出した場合の処理を指定するoverflowを記述するだけです。

• visible = ボックスからはみ出て表示（初期値）
• hidden = はみ出た部分は隠す
• scroll = スクロールで表示
• auto = 一般的にはスクロールが適用

もうわかりましたね。
overflow:scroll;で横スクロールの実装は完成です。
overflowには水平方向の表示方法を指定するoverflow-xと、垂直方向のoverflow-yがありますが、横スクロールなのでoverflow-xを使用しましょう。

CSS

<style>
.flex_1 {display:flex;overflow-x: scroll;width:80%;}
.f_1 {padding:30px;color:#fff;background-color:#1fab89;margin:5px;}
</style>

サンプル（HTMLは上記と同様）

テスト1

テスト1

テスト1

テスト1

テスト1

テスト1

テスト1

テスト1

テスト1

テスト1

テスト1

テスト1

今度は子要素の方法をアレンジしてみましょう。
コンテンツ内に表示する一つの子要素のサイズをflexで指定してみましょう。

CSS

<style>
.flex_1 {display:flex;overflow-x: scroll;width:80%;}
.f_1 {padding:30px;color:#fff;background-color:#1fab89;margin:5px;flex:0 0 30%;-webkit-overflow-scrolling: touch;
    overflow-scrolling: touch;}
</style>

・flex:0 0 30%;は左から順番にflex-grow、flex-shrink、flex-basisの3つの値を指定していることになります。
今回はwithのように横幅を指定するflex-basisの値を指定しています。


サンプル（HTMLは上記と同様）

テスト1

テスト1

テスト1

テスト1

テスト1

テスト1

テスト1

テスト1

テスト1

テスト1

テスト1

テスト1

テスト1

-webkit-overflow-scrolling: touch;とoverflow-scrolling: touch;はスマホでのスクロールを滑らかにするプロパティですので、合わせて記述しておきましょう。

以上です。
横スクロールはFlexboxの登場によって簡単に実装できるようになりました。

Flexboxには他にも様々なプロパティがあるので、機会があったら、またご紹介したいと思います。
では、長文にお付き合い下さって、ありがとうございました。

スマホやタブレットなど、任意のデバイスでの表示を確認する方法

スマホやタブレット向けにサイトをカスタマイズしても身近にそれぞれの端末がなければどのように表示されるのか分からず不安になることがあると思います。

仮に端末を持っていてもスマホ・タブレットには多くの種類があって、サイトの表示確認は困難です。

これを解決するには主に以下2つの方法があります。

1・スクリーンサイズをエミュレートしてくれるサイトを利用する

メディア・クエリのmax-with、min-withを用いてサイトをカスタマイズしている場合に反映されるもので、パソコンでサイトを開き、手動でブラウザのサイズを変えることを自動化してくれるサイトのことです。

resizr.coにアクセスしましょう。



Load URL : 確認したサイトのURLを入力
Devices : 確認したいデバイスを選択
Landscape/Portrait : 横向き/縦向き
Show scrollbar : スクロールバーを表示

2・Chromeのデベロッパーツールを利用する

上記の場合、アフィリエイトでnendを利用している方はバナーが表示されなかったと思います。

そんな時はChromeのデベロッパーツールを利用しましょう。任意のデバイスでの表示を完全にエミュレートできます。

1.Google Chromeで確認したいサイトを開き、右クリックをして「要素を検証」を選択。




2.左上部のDeviceの欄で確認したいデバイスを選択



以上で任意のデバイスの表示をエミュレートしてくれますが、上手くいかない方はページをリロードしてみてください。

【Blogger】ブログをスマホ用に最適化する方法 / 表示速度の高速化を計る【その3】

・その1 / 【Blogger】ブログをスマホ用に最適化する方法 / 3つの最適化パターン
・その2 / 【Blogger】ブログをスマホ用に最適化する方法 / メディア・クエリの使い方

ブログをスマホ用に最適化シリーズ最後の記事です（予定）。

スマートフォンは、電話会社の回線で通信した場合、自宅のWi-Fiなどと比べると読み込み速度が遅いので、必要のないものは外すなど、徹底的に節約して表示速度の高速化を計る必要があります。

まず、Googleのウェブパフォーマンスツール「PageSpeed Insights」で自身のサイトを分析してみましょう。

速度の基準としては最低でも60 / 100を目指しましょう。

「JavaScriptを縮小する」、「画像を最適化する」など、主にGoogleから指示された問題点を改善すれば表示速度はアップしますので、１つずつ解決していきましょう。

1・スクロールせずに見えるコンテンツのレンダリングをブロックしているJavaScript/CSSを排除する

個人的に最も効果を確認できたのはこれです。
主にソーシャルメディアボタンなど、JavaScriptをはずすと表示速度の改善を体感できると思います。
どうしてもはずせない場合は、JavaScriptを「非同期」し、JavaScriptを読み込む前でもページのスクロールを可能にしましょう。

<script src='～.js'/>の中に「async」を追加するだけですが、Bloggerの場合テンプレートに入力するとエラーになるので「async='async'」と記述しましょう。

（例）

<script async='async' src='http://bloggergadgets.googlecode.com/files/related_posts_min.js' type='text/javascript'/>

非同期化すると表示されなくなってしまうものもあるので、必ずテンプレートのバックアップを取り、非同期化後は自身で確認しましょう。

Facebookの場合は以下の通り。

<script >(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/ja_JP/sdk.js#xfbml=1&version=v2.4";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

これを非同期化するには「js.async = true;」を追加。

<script >(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;js.async = true;
  js.src = "//connect.facebook.net/ja_JP/sdk.js#xfbml=1&version=v2.4";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

関連記事
【Blogger】Facebookなどの公式SNSボタンの軽量化に挑む

2・JavaScript/CSSを縮小する

これはJavaScript/CSSコードの無駄な改行やスペースをなくすことです。
手動だと手間がかかるので、以下のサービスを使って下さい。

JavaScriptを縮小してくれるサービス
■Javascriptcompressor
「Paste your code: 」に縮小したいJavaScriptコードを入力→「Compress」クリック→「Copy:」に出力されたコードをコピー

CSSを縮小してくれるサービス
■CSS Compressor
「CSS Compressor」に縮小したいCSSコードを入力→「Compression Level:」でレベルを選択→「Compress」クリック→「Compressed JavaScript:」に出力されたコードをコピー

■Compress HTML
「HTML Compression Tool」に縮小したいCSSコードを入力→「Compress HTML」クリック→「New Compressed HTML」に出力されたコードをコピー

3・画像を最適化する

画像の容量を小さくすることです。

これは以下のサイトを使えば簡単にできます。

・Tiny Png
「Drop your .png or .jpg files here!」をクリックして容量を小さくしたい画像を選択。その後画像の軽量化が自動で始まるので、終了したら「Download」をクリック。

以上で「ブログをスマホ用に最適化する方法」シリーズは終了です。

楽しみつつカスタマイズシてみてください。

【Blogger】ブログをスマホ用に最適化する方法 / メディア・クエリの使い方【その2】

・その1 / 【Blogger】ブログをスマホ用に最適化する方法 / 表示速度の高速化を計る
・その3 / 【Blogger】ブログをスマホ用に最適化する方法 / 表示速度の高速化を計る

第二回はその1の記事の「2・スマホ用に自動でサイズを調整してくれるコードの入ったレスポンシブ・テンプレートをダウンロードする。」について解説していきます。

まず、「スマホ用に自動でサイズを調整してくれるコードの入ったレスポンシブ・テンプレート」をダウンロードしましょう。

非公式テンプレートは以下のサイトなどからダウンロードできます。

・Blogger Templates Gallery
・Pro Templates Lab
・ThemeXpose
・Templateism: Professional Blogger Templates

ダウンロードしたファイルを解凍したら、Xmlファイルを「テンプレート→バックアップ復元→ファイルを選択」の順に選びアップロードしましょう。

最後に、モバイルの設定を「いいえ。携帯端末で PC テンプレートを表示する。」にすれば完成です。

スマホ用に自動でサイズを調整してくれるテンプレートであれば、スマートフォンに対応したデザインに自動で切り替わると思います。

しかし、まだ満足できない！といった方はカスタマイズしてみましょう。

Blogger用のモバイルタグ

<b:if cond='data:blog.isMobile'>

は効かないので、メディア・クエリを使用します。

メディア・クエリ一覧

・max-width：表示領域の横幅。指定したサイズより小さい場合に適用
・min-width：表示領域の横幅。指定したサイズより大きい場合に適用

（例）画面の表示領域の横幅が800px以下のときに

class="sample"

で囲った部分の背景を赤色にしたい場合

@media screen and (max-width :800px) {
    .sample {background-color:red;
} 
}

・max-device-width：デバイスサイズの横幅。指定したサイズより小さい場合に適用
・min-device-width：デバイスサイズの横幅。指定したサイズより大きい場合に適用

（例）デバイスサイズの横幅が800px～1280pxのときに

class="sample"

で囲った部分の背景を赤色にしたい場合

@media screen and (min-device-width :800px) and (max-device-width :1280px) {
    .sample {background-color:red;
} 
}

・device-pixel-ratio：デバイス・ピクセル比

・orientation：デバイスの向き
portrait = 縦向きのときに適用 / landscape = 横向きのときに適用 / どちらも記入しない場合は、デバイスの向きに関わらず適用）

（例）画面の表示領域が800px以下で、縦向きのときに

class="sample"

で囲った部分の背景を赤色にしたい場合

@media screen and (max-width :800px) and (orientation : portrait) {
    .sample {background-color:red;
} 
}

これを使って、スマホとPCで見た際にデザインを変えることができます。

max-width、min-widthにすれば、PCでブラウザの横幅を変えるだけで反映されるので、どのようなデザインになるか簡単に確認できます。


また、どちらかのデバイス一方に表示させたくない場合は

{display: none;}

を記述して下さい。

スマホで表示させたくない場合

キーワードは「display: none;」

（例）画面の表示領域の横幅が420px以下のときに

class="sample"

で囲った部分を表示させたくない場合

 <div class="sample">
テスト
テスト
テスト
テスト
</div>

これを画面の表示領域が420px以下のときに表示させたくない場合はメディア・クエリを追加し、以下のようにスタイルシートを書きます。

@media screen and (max-width :420px) {
    .sample {display: none;}
}

スマホの主なサイズについては以下のサイトの「Devices」をクリックして確認してみて下さい。

http://resizr.co/


以上でメディア・クエリの説明は終わりです。

何かデザインを変えるときは、レスポンシブにするために基本的には横幅の指定は%で行いましょう。

・その1 / 【Blogger】ブログをスマホ用に最適化する方法 / 表示速度の高速化を計る
・その3 / 【Blogger】ブログをスマホ用に最適化する方法 / 表示速度の高速化を計る

【Blogger】ブログをスマホ用に最適化する方法 / 3つの最適化パターン【その１】

自分の運営している別のウェブサイトは気づくとスマホからのアクセスがPCに匹敵するほどになり、アドセンスのクリックはスマホからが圧倒し、スマホへの最適化は不可欠となりました。

恐らく、こういう現象が起きているのは自分だけではないはず！
今後、スマートフォンやタブレットの普及が広がることはあっても、落ちることはないと思うので、サイトを運営するうえで、スマホへの最適化を図るのは必須になっていくでしょう。

そんな自分が悪戦苦闘しながらスマホへの最適化を図ったので、その情報を共有していきたいと思います。

スマホ用に最適化するには、大きく別けて以下の3つのパターンがあります。

1・テンプレート→モバイル→設定→「はい。携帯端末でモバイル テンプレートを表示する。」でBloggerデフォルトのスマホ用テンプレートを使用する。

• 難易度：1
• メリット：たったワンクリックでスマホ用に最適化できる手軽さ。
• デメリット：記事本文以外にアドセンスの貼り付けをできないなど、カスタマイズはほぼ不可能。PC用と大きくテンプレートのデザインが変わる可能性大。

2・スマホ用に自動でサイズを調整してくれるコードの入ったレスポンシブ・テンプレートをダウンロードする。

非公式のテンプレートサイトでテンプレートをダウンロードしている方も多いと思います。中には、スマホ用に自動でサイズを調整してくれるコードの入ったレスポンシブ・テンプレートもあります。

• 難易度：3（カスタマイズしない場合は1）
• メリット：PC用とテンプレートが変わることなく、カスタマイズ自由。
• デメリット：カスタマイズするにはHTML/CSSの知識が必要。

※こういったテンプレートをスマホで正しく表示させる場合はモバイルの設定を「いいえ。携帯端末で PC テンプレートを表示する。」にしましょう。

この設定にすると、Blogger用のモバイルタグ

<b:if cond='data:blog.isMobile'>

は効かないので、メディア・クエリを使用します。これについては後日。

・その2 / 【Blogger】ブログをスマホ用に最適化する方法 / メディア・クエリの使い方

3・モバイル設定を「はい。携帯端末でモバイル テンプレートを表示する。 」→「カスタム」を選択し、自分で最適化を図る。

HTML/CSSの知識があれば、そこまで難しくないのですが、結構な知識を必要としますので、オススメはしません。
というか、ここまでテンプレートをいじれる方は、このブログを必要としていないと思うので、当ブログでは以下、簡単なBlogger用のモバイルタグだけの説明に留めておきます。

• 難易度：4
• メリット：全て自分の思い描く通りに再現可能。
• デメリット：豊富なHTML/CSSの知識が必要。

■Blogger用のモバイルタグ

以下は、モバイル設定を「はい。携帯端末でモバイル テンプレートを表示する。 」→「カスタム」を選択した場合に適用されます。

モバイルとPCで表示させたい内容を変えるタグ

<b:if cond='data:blog.isMobile'>

/* モバイルからのアクセスで表示される内容 */

<b:else/>

  /* PCからのアクセスで表示される内容 */

</b:if>

モバイルからのアクセスでもガジェットを表示させたい場合
表示させたいガジェットの

<b:widget id='' locked='false' title='' type=''>

の中に

mobile='yes'

を記述

<b:widget id='' locked='false' title='' mobile='yes' type=''>

最後に、Bloggerに限ったタグではないですが、デバイスの横幅に自動であわせるタグです。

</head>

内に記述しましょう。

<meta name="viewport" content="width=device-width, maximum-scale=1.0, minimum-scale=0.5,user-scalable=yes,initial-scale=1.0" />

以上で、その1は終わりです。
次回は、「2・スマホ用に自動でサイズを調整してくれるコードの入ったレスポンシブ・テンプレートをダウンロードする。」について詳しく解説していきたいと思います。


・その2 / 【Blogger】ブログをスマホ用に最適化する方法 / メディア・クエリの使い方
・その3 / 【Blogger】ブログをスマホ用に最適化する方法 / 表示速度の高速化を計る

【Blogger】スマホでページを開いたときに動画のサイズを自動で最適化する方法

Youtubeの動画をブログに埋め込むときの標準サイズは560x315なので、スマホで観覧するとページからはみ出てしまう場合があると思います。

そんな時は以下のコードを挿入するだけで解決します。

<b:if cond='data:blog.isMobile'>
<style type='text/css'>
object,embed,iframe{height:auto;
width:auto;}
</style>
</b:if>

「いいえ。携帯端末で PC テンプレートを表示する。」を選択している人は以下のコードを使用して下さい。

]]></b:skin>

内に

@media only screen and (max-width: 565px) {
object,embed,iframe{max-width:100%;}

]

@media only screen and (max-width:)とは画面の表示領域の横幅がこの値より小さい場合にのみ適用することを指示するものです。