レスポンシブ Web デザイン - フレームワーク
レスポンシブ デザインを提供する無料の CSS フレームワークが多数あります。
W3.CSS の使用
レスポンシブ デザインを作成する優れた方法は、次のようなレスポンシブ スタイル シートを使用することです。p.x
W3.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.w3schools.com/w3css/4/w3.css">
<body>
<div class="w3-container w3-blue">
<h1>W3Schools Demo</h1>
<p>Resize this responsive page!</p>
</div>
<div class="w3-row-padding">
<div class="w3-third">
<h2>London</h2>
<p>London is the capital city of England.</p>
<p>It is the most populous city in the United Kingdom,
with a metropolitan area of over 13 million inhabitants.</p>
</div>
<div class="w3-third">
<h2>Paris</h2>
<p>Paris is the capital of France.</p>
<p>The Paris area is one of the largest population centers in Europe,
with more than 12 million inhabitants.</p>
</div>
<div class="w3-third">
<h2>Tokyo</h2>
<p>Tokyo is the capital of Japan.</p>
<p>It is the center of the Greater Tokyo Area,
and the most populous metropolitan area in the world.</p>
</div>
</div>
</body>
</html>
テックアイエスガイド.CSS の詳細については、こちらをお読みください。テックアイエスガイド チュートリアル.
ブートストラップ
もう 1 つの一般的なフレームワークは Bootstrap です。 HTML と CSS を使用してレスポンシブ Web ページを作成します。
例
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap 5 Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container-fluid p-5 bg-primary text-white text-center">
<h1>My First Bootstrap Page</h1>
<p>Resize this responsive page to see the effect!</p>
</div>
<div class="container mt-5">
<div class="row">
<div class="col-sm-4">
<h3>Column 1</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
</div>
<div class="col-sm-4">
<h3>Column 2</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
</div>
<div class="col-sm-4">
<h3>Column 3</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
</div>
</div>
</div>
</body>
</html>
Bootstrap の詳細については、ブートストラップ チュートリアル.
プログラミング学習を加速させる
プログラミングをプロの講師に教えてもらいませんか。