【初心者向け】はじめてで簡単にできるレシポンシブデザイン対応

はじめてで簡単にできるレシポンシブ対応 プログラミング

webサイトはパソコンだけでなく、タブレットやスマートフォンなど、様々なサイズの端末から閲覧されます。どの端末から見てもサイトを見栄えを美しく保つのがレシポンシブデザインです。

この記事では、初めての方でもwebサイトのレシポンシブ対応ができる、基本的な設定方法をご紹介しています。

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

レスポンシブデザインとは、PC、タブレット、スマートフォンなど、様々な端末でWebサイトを閲覧した際に、それぞれの画面サイズに最適化された表示が行われるデザイン手法のことです。

現代のWebサイトは、スマートフォンの利用率が高まっていることから、スマートフォンにも最適化された表示が必要になっています。レスポンシブデザインは、ユーザーにとって使いやすく、SEO対策にも有効なデザイン手法です。

基本的な考え方

CSSによるレスポンシブ対応は、CSSのプロパティを利用して、デザインのレイアウトや要素の表示を調整することで実現されます。

CSSのレスポンシブ対応における基本的な考え方は、「要素のサイズや表示位置を、画面の幅や高さに合わせて自動的に調整する」というものです。

目的は、画面の幅や高さが異なる端末で、同じコンテンツを最適な表示で提供することです。これにより、ユーザーは同じWebサイトでも、異なる端末で快適な閲覧環境を得ることができます。

メディアクエリとビューポート

メディアクエリを使ったレシポンシブ対応

 レスポンシブデザインにおいて、異なる画面サイズに対応するためには、メディアクエリというCSSの機能を利用することが一般的です。メディアクエリとは、指定された条件に一致する場合に適用されるスタイルを指定することができます。

例えば、以下のようなコードで、画面幅が480px以下の場合に、背景色を青色に変更するスタイルを適用することができます。

@media screen and (max-width: 480px) {
 body {
 background-color: blue;
 } 
}

ビューポートの設定と必要性

ビューポートとは、ユーザーがウェブページを閲覧するために使用する領域のことです。スマートフォンやタブレットなど、様々なデバイスでウェブページを閲覧することができるため、それぞれのデバイスに応じたビューポートの設定が必要となります。

ビューポートを設定するには、以下のようなmetaタグをhead要素内に追加します。

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

ここで、width=device-widthは、ビューポートの幅をデバイスの幅に合わせることを指定し、initial-scale=1.0は、初期表示時にビューポートの倍率を1倍にすることを指定します。ビューポートを設定することで、異なるデバイスに対応したウェブページを作成することができます。

フレックスボックスとグリッドシステム

フレックスボックスを使ったレスポンシブ対応

フレックスボックスは、要素を自由に配置し、サイズを自動調整できるレイアウト方式です。レスポンシブデザインにおいては、ウィンドウサイズに合わせて要素のサイズを調整することができます。

以下のようなHTMLを考えます。

<div class="container">
 <div class="box box1">Box 1</div> 
 <div class="box box2">Box 2</div>
 <div class="box box3">Box 3</div>
</div>

CSSでこの要素をフレキシブルボックスとして配置します。

.container {
  display: flex;
  flex-wrap: wrap;
}
.box {
  flex: 1 0 200px;
  height: 200px;
  margin: 10px;
  text-align: center;
}
.box1 {
  background-color: red;
}
.box2 {
  background-color: blue;
}
.box3 {
  background-color: green;
}

上記のコードでは、.containerにdisplay: flex;を指定することでフレックスボックスとして配置します。また、flex-wrap: wrap;を指定することで、要素が画面幅の範囲内で折り返されるようになります。

.boxにはflex: 1 0 200px;を指定し、要素を均等に配置するように設定します。height: 200px;は、要素の高さを200pxに設定し、margin: 10px;は要素間の余白を設定します。

.box1、.box2、.box3にはそれぞれ異なる背景色を設定しています。

このようにすることで、ウィンドウサイズに合わせて要素が自動調整され、均等に配置されます。

グリッドシステムを使ったレスポシブ対応

グリッドシステムとは、ウェブページのデザインにおいて、複数のカラムを等間隔に配置し、コンテンツを配置するためのシステムのことです。グリッドシステムを使うことで、レイアウトをより一貫性のあるものにすることができます。

BootstrapなどのCSSフレームワークでは、グリッドシステムが標準で提供されています。Bootstrapを利用することで、細かいCSSを自分で書かなくて良くなりますので、利用をおすすめします。詳しくはBootstrapの公式サイトを確認してみてください。

自分でグリッドシステムを実装する場合は、CSSのflexboxを利用して実装することが一般的です。

以下では、HTMLとCSSのflex-boxで、グリッドシステムを実装の仕方を記述しています。

<div class="container">
  <div class="row">
    <div class="col-md-4">1</div>
    <div class="col-md-4">2</div>
    <div class="col-md-4">3</div>
    <div class="col-md-4">4</div>
    <div class="col-md-4">5</div>
    <div class="col-md-4">6</div>
  </div>
</div>
.container {
  max-width: 1140px;
  margin: 0 auto;
}
.row {
  display: flex;
  flex-wrap: wrap;
  margin: -10px;
}
.col-md-4 {
  width: calc(33.33% - 20px);
  margin: 10px;
}
@media screen and (max-width: 767px) {
  .col-md-4 {
    width: calc(50% - 20px);
  }
}

上記のコードでは、containerクラスにより、ページ幅を最大1140pxに制限し、中央に寄せています。rowクラスにより、要素をflexboxにより等間隔に配置します。col-md-4クラスは、デバイスの幅が768px以上の場合に、1/3の幅のカラムを表します。

また、@mediaルールを使って、デバイス幅が767px以下の場合には、カラムの幅を50%に変更しています。

@media screen and (max-width: 767px)　max-widthのサイズにブレークポイント（CSSが切り替わる）値を設定し、適用されるCSSを{}内に記述します。

このように、Bootstrapやグリッドシステムを使うことで、画面サイズに応じたレスポンシブデザインをより簡単に実装することができます。

画像とフォントの設定

画像の設定

レスポンシブデザインでは、画像のサイズを適切に最適化することが重要です。サイズが大きすぎる画像はページの読み込みに時間がかかり、ユーザーエクスペリエンスを損なうことになります。一方、サイズが小さすぎる画像は画質が低下し、ページ全体の品質を下げることになります。

画像を最適化するには、以下の方法があります。

  1. リサイズ

画像をリサイズして、サイズを適切な大きさにすることができます。レスポンシブデザインでは、画像の幅を親要素に合わせることが多いため、幅が指定されている場合はその幅に合わせてリサイズすることが望ましいです。

例えば、以下のように CSS で画像の幅を親要素に合わせる場合、画像の幅は100%に指定しています。

img {
  width: 100%;
  height: auto;
}
  1. 画像形式の最適化

JPEG、PNG、GIF などの画像形式にはそれぞれ特徴があり、適切な形式を選択することでファイルサイズを削減することができます。

  • JPEG: 写真などのカラフルな画像に適しており、ファイルサイズを小さくできます。
  • PNG: ロゴなどの図形に適しており、透過性を持たせることができます。
  • GIF: アニメーションに適しており、256色までのカラーパレットに対応しています。

フォントの設定

また、フォントを使用する際には、適切なサイズとラインハイトを設定することも重要です。適切なサイズとラインハイトを設定することで、テキストの読みやすさが向上し、ユーザー体験が向上します。

例えば、以下のCSSコードは、font-sizeとline-heightを設定しています。

body {
  font-size: 16px;
  line-height: 1.5;
}

この例では、本文のフォントサイズを16pxに設定し、行の高さをフォントサイズの1.5倍に設定しています。

line-height：行の高さをフォントサイズの○倍に指定します

フォントを使用する際には、できるだけWebフォントを使用することが推奨されます。Webフォントを使用することで、レスポンシブデザインに対応したフォントを選ぶことができます。また、Google FontsやTypekitなどのWebフォントサービスを使用することで、多くの種類のフォントから選択することができます。

以上が、レスポンシブデザインにおける画像とフォントの最適化方法と注意点についての説明です。

まとめ

今回は、初心者向けにCSSを使ったレシポンシブデザインの基礎を紹介しました。一般的に使用されるフレックスボックスやBootstrapをご紹介しましたが、様々な設定の仕方がありますので、公式サイトなどで調べてみて、画面サイズに合わせたWebサイトの作成にぜひ挑戦してみてください。

タイトルとURLをコピーしました