HTMLレスポンシブWebデザイン

レスポンシブWebデザインとは、すべてのデバイスで見栄えのするWebページを作成することです。

レスポンシブWebデザインは、さまざまな画面サイズとviewportに合わせて自動的に調整されます。

レスポンシブWebデザインとは

レスポンシブWebデザインとは、HTMLとCSSを使用してWebサイトのサイズを自動的に変更、非表示、縮小、または拡大し、すべてのデバイス(デスクトップ、タブレット、携帯電話)で適切に表示されるようにすることです。

ビューポートの設定

レスポンシブのWebサイトを作成するには、すべてのWebページに<meta>タグを追加します。

例

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

これにより、ページのviewportが設定され、ページのサイズとスケーリングを制御する方法がブラウザーに指示されます。

これはviewportとmeta tag無しのページと、viewportとmeta tagがある同じwebページの例です。

viewport meta tagを使用しない場合

viewportとmeta tagを使用

ヒント：このページを携帯電話またはタブレットで閲覧している場合は、上の2つのリンクをクリックして違いを確認できます。

レスポンシブ画像

レスポンシブ画像は、ブラウザのサイズに合わせて適切にスケーリングされる画像です。

widthプロパティの使用

CSSの場合widthプロパティが100%に設定されている場合、画像はレスポンシブになり、拡大縮小されます。

例

上記の例では、画像を元のサイズよりも大きくすることができます。多くの場合、より良い解決策は、代わりにmax-widthプロパティを使います。

max-widthプロパティの使用

もしmax-widthプロパティが100%に設定されている場合、画像は必要に応じて縮小されますが、元のサイズよりも大きく拡大されることはありません。

例

ブラウザの幅に応じて異なる画像を表示

HTML<picture>要素を使用すると、ブラウザウィンドウのサイズごとに異なる画像を定義できます。

ブラウザーウィンドウのサイズを変更して、幅に応じて下の画像がどのように変化するかを確認します。

例

<picture>
  <source srcset="img_smallflower.jpg" media="(max-width:   600px)">
  <source srcset="img_flowers.jpg" media="(max-width:   1500px)">
  <source srcset="flowers.jpg">
  <img src="img_smallflower.jpg"   alt="花">
</picture>

レスポンシブテキストサイズ

テキストサイズは、「viewport width」を意味する「vw」単位で設定できます。

そうすれば、テキストのサイズはブラウザウィンドウのサイズに従います。

こんにちは世界

ブラウザウィンドウのサイズを変更して、テキストサイズがどのように拡大縮小されるかを確認します。

例

<h1 style="font- size:10vw"> Hello World</h1>

viewportはブラウザウィンドウのサイズです。1vw=viewport幅の1%。viewportの幅が50cmの場合、1vwは0.5cmです。

メディアクエリ

テキストや画像のサイズ変更に加えて、レスポンシブWebページでメディアクエリを使用することも一般的です。

メディアクエリを使用すると、ブラウザのサイズごとにまったく異なるスタイルを定義できます。

例: ブラウザーウィンドウのサイズを変更して、以下の3つのdiv要素が大きな画面では水平方向に表示され、小さな画面では垂直方向に積み重ねられることを確認します。

メインコンテンツ

権利内容

例

<style>
.left, .right {
  float: left;
    width: 20%; /* The width is 20%, by default */
}
    
.main {
  float: left;
  width: 60%; /* The width is 60%, by default */
}
    
/* Use a media query to   add a breakpoint at 800px: */
@media screen and (max-width: 800px) {
  .left,   .main, .right {
      width: 100%; /* The width is 100%, when the viewport is 800px or smaller */
    }
}
</style>

ヒント：メディアクエリとレスポンシブウェブデザインの詳細については、RWD チュートリアルを参照して下さい。

レスポンシブWebページ-完全な例

レスポンシブWebページは、大きなデスクトップ画面や小さな携帯電話でも見栄えがよくなければなりません。

レスポンシブWebデザイン-フレームワーク

一般的なCSSフレームワークはすべてレスポンシブデザインを提供します。

それらは無料で、使いやすいです。

テックアイエスのデモンストレーション

ページのサイズを変更して、応答性を確認してください。

ロンドン

ロンドンはイングランドの首都です。

イギリスで最も人口の多い都市であり、人口は1,300万人を超える大都市圏にあります。

パリ

パリはフランスの首都です。

パリ地域はヨーロッパ最大の人口密集地の1つで、1,200万人以上の住民がいます。

東京

東京は日本の首都です。

東京圏の中心であり、世界で最も人口の多い大都市圏です。

例

<!DOCTYPE html>
<html>
<meta name="viewport"  content="width=device-width, initial-scale=1">
<link rel="stylesheet"  href="https://www.techis.jp/w3css/4/w3.css">
<body>
    
<div  class="w3-container w3-green">
  <h1>テックアイエスデモンストレーション</h1> 
   <p>ページのサイズを変更して、応答性を確認してください。</p> 
</div>
    
<div  class="w3-row-padding">
  <div class="w3-third">
    <h2>ロンドン</h2>
    <p>ロンドンはイングランドの首都です。</p>
    <p>イギリスで最も人口の多い都市であり、人口は1,300万人を超える大都市圏にあります。</p>
  </div>
    
  <div  class="w3-third">
    <h2>パリ</h2>
    <p>パリはフランスの首都です。</p> 
    <p>パリ地域はヨーロッパ最大の人口密集地の1つで、1,200万人以上の住民がいます。</p>
  </div>
    
  <div class="w3-third">
     <h2>東京</h2>
    <p>東京は日本の首都です。</p>
    <p>東京圏の中心であり、世界で最も人口の多い大都市圏です。</p>
  </div>
</div>
    
</body>
 </html>

CSSの詳細については、こちらのCSSチュートリアルをお読みください。

Bootstrap

もう1つの一般的なCSSフレームワークはBootstrapです。Bootstrapは、HTML、CSS、およびjQueryを使用してレスポンシブWebページを作成します。

例

<!DOCTYPE html>
<html lang="en">
<head>
<title>ブートストラップチュートリアル</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
    
<div class="container">
  <div class="jumbotron">
    <h1>ここは私のブーストラップページです</h1>
  </div>
  <div class="row">
    <div class="col-sm-4">
      ...
    </div>
    <div class="col-sm-4">
      ...
    </div>
    <div class="col-sm-4">
    ...
    </div>
  </div>
</div>
    
</body>
</html>

Bootstrapの詳細については、ブートストラップチュートリアルを参照して下さい。

おすすめのプログラミングスクールを確認する！

プログラミング学習を加速させる

プログラミングをプロの講師に教えてもらいませんか。

テックアイエスのプログラミングスクールは初心者も大歓迎です。年齢制限もありません。転職・副業に強く、挫折させない手厚いサポートで稼ぐ力を身につけましょう！

スクールの詳細

HTML and CSS

Javascript

Backend

プロンプトエンジニアリング