HTML/CSS

【HTML/CSS】超簡単にレスポンシブでスマホ対応をする方法【コピペOK】

こんにちは、リバティエンジニアのFUNA(フナ)です。

現役でフリーランスのエンジニアとしてアプリケーション開発やWeb制作、SEOやブログ運営をしています。

 

この記事はこんな方におすすめ

  • HTML/CSSで簡単にレスポンシブ対応(スマホ対応)したい
  • コピペでレスポンシブ対応(スマホ対応)したい

 

今回は、HTML/CSSで行うレスポンシブ対応(スマホ対応)について、使い方や種類についてご紹介します。

 



 

レスポンシブ対応(スマホ対応)とは

近年、スマートフォンの普及によってWebページもパソコンだけでなく、スマホやタブレットといった実に幅広いさまざまなデバイスで閲覧されるようになってきています。

そんな時に今までパソコンでの表示を前提としたWebページをそのまま使っていてもいいのか?
答えは、NO!です。

 

今までパソコンでは綺麗にバランスよく表示されていたものが、スマホやタブレットなど画面サイズが異なるデバイスで表示した時に、レイアウトがぐちゃぐちゃになってしまうのです。

 

そこで必要なのが、「レスポンシブ対応(スマホ対応)」と呼ばれるものです。

レスポンシブ(どんな要望にも応える!)と思っていてくれればOKです。

たとえ画面サイズが変わっても、表示を崩さずにきれいに表示してくれます。

 

レスポンシブ対応(スマホ対応)の種類

 

一言で「レスポンシブ対応(スマホ対応)」といってもやり方はいろいろあります。

今回はその中でも代表的な、

  • HTMLのviewport
  • CSSのmedia query
  • Bootstrap

この3つについて紹介しますね。

 

HTMLのヴューポート(viewport)を使った方法

まずはこちら。HTMLのviewportという機能を使ってスマホなどに対応する方法です。

早速サンプルコードを見てみましょう

 

See the Pen viewport by TAKUYA FUNABIKI (@takuya20180216) on CodePen.

 

このように、HTMLのmetaタグに記述するだけで簡単にレスポンシブ対応することができます。

 

ポイント解説

  • width=device-widthこの記述でスクリーンサイズに合わせます
  • initial-scale=1.0は初期表示する際の拡大率を示します

 

他にも「user-scalable=no」でピンチ操作を不可能にする、といったオプションもあります。

 

CSSのメディアクエリ(media query)を使った方法

次に、CSSでレスポンシブ対応をする方法です。

この方法が一番使い勝手が良いので私もよく使っています。

サンプルコードを見ていきましょう。

 

See the Pen Media queries by TAKUYA FUNABIKI (@takuya20180216) on CodePen.

 

このように、画面サイズを定めてそれぞれで好きなようにスタイルを変更できます。

この方法だと、デザインの幅も広がりますね。

 

Bootstrapを使った方法

では最後に、twitter社が生みの親の便利フレームワークである「Bootstrap」の紹介です。

フレームワークでHTMLのclass要素に指定の記述を入れるだけで、レスポンシブ対応出来てしまうかなりの優れモノなんです。

できることは結構あるのですが、代表的なものは「グリッドシステム」というもので、

指定方法適応画面サイズ
col-lg-num1024以上
col-md-num992px以上、1200px未満
col-sm-num768px以上、992px未満
col-xs-num768px以下

 

この表のようなサイズ定義で横幅を12分割して、コンテンツの幅をそれぞれコントロールできます。

<div class="container">
    <div class="row">
        <div class="col-xs-4 col-md-5"></div>
        <div class="col-xs-8 col-md-5"></div>
        <div class="hidden-xs col-md-2"></div>
    </div>
</div>

 

分割だけでなく「class='hidden-xs'」とすることでスマホのサイズでは非表示にできます。

逆に、「class='visible-xs'」で隠していたのを表示することができますよ。

 

パソコンだと長い文章を表示できるけど、スマホだと見にくい。なんてときに切り替えることができますよ。

 

【HTML/CSS】レスポンシブ対応(スマホ対応)まとめ

今回は、HTML/CSSにおけるレスポンシブ対応(スマホ対応)についてまとめました。


スマートフォンやタブレットの普及で、Webページもパソコンだけでなく、スマホやタブレットといった実に幅広いさまざまなデバイスで閲覧されるようになってきました。

そのためデバイスでもきれいにレイアウトされ見やすく表示させるために、必要不可欠なものですので、ぜひ習得してください!

 

HTML/CSSカテゴリの関連記事

CSSアニメーションを簡単に実装!コピペOKのサンプルコード付き【HTML/CSS】

CSSのみで実装することのできるアニメーションの方法を解説します。サンプルコード付きでわかりやすく、コピペでも簡単に実装できるようになっていますので、実際に動かして試してみてください。

【HTML/CSS】z-indexで重なり順を指定。効かない時の対処法はコレ!

今回はHTML/CSSで要素の重なり順を指定する方法として、CSSプロパティz-indexについて初心者の方でも分かりやすく解説します。設定しても上手く効かない時の対処法も紹介しています。

【コピペOK】HTMLにCSSを埋め込み適用させるサンプルをご紹介

HTMLにCSSを埋め込み、適用させる方法についてサンプルコードを元にご紹介します。初心者の方でもわかりやすいようにコピペでも簡単に実装できるようにまとめていますので、どんどん使ってください。

【HTML/CSS】コピペでOK!チェックマークを作る簡単な方法

こんにちは、リバティエンジニア[?]のFUNA(フナ)です。 現役エンジニアとしてアプリケーション開発やWeb制作、SEOやブログ運営をしています。   この記事はこんな方におすすめ HTM ...

【2021年最新】HTML/CSSの学習で初心者におすすめしたい本【ベスト5!】

2021年最新版のHTML/CSSの勉強でおすすめの本を紹介します。「HTML/CSS」はとてもメジャーな言語であり、多くの入門書や参考書があります。その中でもおすすめな本を現役エンジニアの私が解説も入れてご紹介しています。

【HTML/CSS】 縦・横方向で中央揃え(中央寄せ)してみよう!【コピペOK】

今回はHTML/CSSで要素を縦と横方向で中央揃え(中央寄せ)する方法について、簡単にコピペで実装できるようにいくつかのパターンを紹介していこうと思います。上手く中央寄せできない場合などにぜひ参考にしてください。

HTML5のタグを全部まとめて一覧でご紹介!【詳細リンク付き】

今回は、HTML5のHTMLタグをすべて公開し、解説していこうと思います。各タグを詳しく解説するページも順次作っていきますので、できたものからリンクで飛べるようまとめておきます!

 

 

Kindle Unlimitedで無料で本が読める

 

Kindle Unlimitedを無料で試す

 

なら最初の30日間は無料でコーディング・デザイン・ブログ・英語・Youtubeの参考書・キャリア・副業・マーケティング・漫画・美容知識・雑誌などが読み放題です。

人気の本もあるので是非お試ししてみてください!30日以内に解約すればお金は全くかかりません。

 


最近の投稿

【今すぐ行動しよう】フリーランスエンジニアとブログの相性は抜群!

フリーランスエンジニアがスキルや経験から得たビジネスノウハウを共有する手段として「ブログ」は非常におすすめです。自身のスキルや知識のアウトプットや、実際に自分が経験したことを共有して同じような境遇の人の手助けになるような情報を公開することで自分に帰ってくるメリットは非常に多いです。今回はそのあたりについて紹介していきます。

【経験談】フリーランスのエンジニアは本当に大変なの?安定のコツやポイント

フリーランスのエンジニアは「大変だからやめとけ」という話をよく聞くので、そのことについて現役でフリーランスエンジニアとして生活している私が、その話の実態を解説しようと思います。フリーランスエンジニアの大変なところはもちろんありますが、それ以上にメリットが多いので私個人的には非常におすすめしています。

【幸福度UP】フリーランスエンジニアの「田舎暮らし」実現できます

フリーランスエンジニアとして田舎で暮らす人が増えてるって聞くけど、本当なのかな?どうやったら実現できるのか?今回はフリーランスエンジニアとして田舎で生活をしたいという方向けに、実現可能なのか、実現するにはどうすれば良いのかをご紹介します。

【単価交渉で収入アップ】フリーランスが単価交渉を成功させる4つのポイント

フリーランスが収入をアップさせるための重要な手段のひとつに「単価交渉」があります。今回は、現役でフリーランスとしてエンジニアをしている私が実践して効果のあった単価交渉の方法やコツをご紹介します。

【 今なら無料!】タスク管理ツール「Backlog」を無料で使う方法と手順

今回は、普段のタスク管理からプロジェクトの管理まで幅広く使えるツール「Backlog」を無料で使うための方法とその手段を画像つきで紹介しました。もし気に入らなければ、期間内に解約してしまえば費用はかかりません。また、以外と知られていない「フリープラン」も紹介しているので、是非参考にしてみてください。

Copyright© FUNA BLOG , 2021 All Rights Reserved.