レスポンシブ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%に設定されている場合、画像はレスポンシブになり、拡大縮小されます。
例
< img
src="img_girl.jpg"
style="width:100%;"
>
自分で試してみる »
上記の例では、画像を元のサイズよりも大きくすることができます。多くの場合、より良い解決策は、代わりにmax-widthプロパティを使います。
max-widthプロパティの使用
もしmax-widthプロパティが100%に設定されている場合、画像は必要に応じて縮小されますが、元のサイズよりも大きく拡大されることはありません。
例
< img src="img_girl.jpg" style="max- width:100%; height:auto;" >
自分で試してみる »
ブラウザの幅に応じて異なる画像を表示
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 " > < /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>
自分で試してみる »
レスポンシブ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の詳細については、ブートストラップチュートリアル を参照して下さい。
