fein's personal site

個人サイト制作：サイトマップへ戻る

個人サイトをレスポンシブデザインにする方法

個人サイトに限らず、およそ現代のWebサイトであればレスポンシブデザインにしたほうが良いです。
ちょっと気合いを入れて頂ければ思うほど難しいものではありません。
手書きコードを避けるのであれば、レスポンシブデザインに対応したWebサイトビルダーを選ぶようにしましょう。
例えばGoogleサイトやBloggerであれば、こちらが特に意識しなくてもレスポンシブデザインに対応してくれます。
他には次のようなサービスもありますよ。

IT初心者向けのレスポンシブデザイン対応Webサイトビルダー

Wix

インターフェースが直感的で、レスポンシブデザインを簡単に設定できます。

Weebly

レスポンシブデザインが標準でサポートされており、初心者にも使いやすいです。

WordPress

多くのレスポンシブテーマやプラグインがあり、カスタマイズが可能です。

Squarespace

高品質なテンプレートが豊富で、レスポンシブデザインが簡単に設定できます。

Webflow

レスポンシブデザインを考慮したデザインツールが充実しており、初心者でも学びやすいです。

このページに関する注意事項

当Webサイト作成者は、例示を目的としてマークアップ及びプログラミング例を提供しており、明示または黙示にかかわらず、いかなる責任も負わないものとします。
このページは、説明されているマークアップ及びプログラミング言語、手順を作成およびデバッグするために使用される各種ツールに読者が精通していることを前提にしています。
このページは、特定の機能を説明するのに役立つ可能性がありますが、当Webサイト作成者がこれらの例を変更した上で、特定の要件を満たすために追加の機能を提供したり、システムを構築したりすることはできません。
加えて、この例の手順に従う場合は、読者の各種ファイルを事前にバックアップすることを推奨いたします。

レスポンシブデザインの簡単な例

これはやった方が良いです。
強制じゃないけど…と言いたいところですが、事実上の強制事項と言って良いです。
辛うじてスマホでもPC表示にブラウザを変えられるけど、そんな作業を閲覧する一般のお客様にいちいち要求してはいけません。
次に紹介するコードもこれから少しずつ手を加えていきますよ。
無駄が多いと思うから。

/* ●レスポンシブデザイン● */
/* PCスマホ共通のスタイル設定 */
    .feincontainer {
      width: 90%;
      margin: 0 auto;
      box-sizing: border-box;
    }

    /* スマホ表示の調整 */
    @media (max-width: 600px) {
      .feincontainer {
        font-size: 0.875em;
        padding: 10px 0;
      }
    }

    /* パソコン表示の調整 */
    @media (min-width: 601px) {
      .feincontainer {
        width: 100%;
        max-width: 1200px;
        padding: 20px 150px;
      }
    }
        

このコードはwebページのデザインが異なるデバイスで適切に表示されるように設定してます。
共通のスタイル設定をやってからメディアクエリを使ってる流れですね。

.feincontainer

このクラスはウェブページのコンテナ要素に適用されています。
名称は何でも良いですが、「container」とかそこらじゅうでよく見るタイプの名称をそのまま適用すると、後でコードが自分で分からなくなります。
ちょっとオリジナルっぽいスペルを追加すると良いでしょう。

width: 90%;
コンテナの幅を親要素の90%に設定しています。少し余裕を持たせる感じで。

margin: 0 auto;
コンテナを中央に配置しています。上下のマージンは0でいいと思うけど、左右のマージンは自動です。

box-sizing: border-box;
パディングとボーダーを含めて要素の全体の幅と高さを計算させています。

@media (max-width: 600px)

後述しますが、こういうところでメディアクエリを使います。
画面幅が600ピクセル以下のデバイス、すまわちモバイル機器に適用されるスタイルを指定します。
この600という数字も今後検討するけどさ。
あるいはもうちょい狭いほうが良いかも？

font-size: 0.875em;
フォントサイズを通常の87.5%に設定しています。スマホ画面は小さいからね。

padding: 10px 0;
コンテナの上下に10ピクセルのパディングを追加し、左右のパディングは0に設定しています。
ここらへんが冗長と感じてますね…
改善の余地があると思う。
無駄に長いコードは混乱及びミスを招きます。

@media (min-width: 601px)

こちらはパソコン用のスタイル。
画面幅が601ピクセル以上のデバイスに適用されるスタイルを指定します。

width: 100%;
コンテナの幅を親要素の100%に設定しています。

max-width: 1200px;
コンテナの最大幅を1200ピクセルに制限します。
一般家庭を想定していますね。
大きなサブモニターまで使っている家庭のほうが、少ないでしょう。

padding: 20px 150px;
コンテナの上下に20ピクセル、左右に150ピクセルのパディングを追加しています。
上述したように、ここらへんは改善の余地あり。

メディアクエリ「@media」

@mediaはCSSのメディアクエリと呼ばれます。
メディアクエリは、異なるデバイスや画面サイズに応じてスタイルを適用するための方法で、それの実例が上述したコードです。
レスポンシブデザインを実現し、ウェブサイトがさまざまなデバイスで適切に表示されるようになります。

メディアクエリの基本的な構文を書いてみましょう。

@media (条件) {
  /* 条件が満たされた場合に適用されるスタイル */
}
        

この構文を覚えれば、さまざまな条件を組み合わせて使用することができます。
例えば、画面幅が600ピクセル以上かつ800ピクセル以下の場合にスタイルを適用するには、次のように書きますね。

@media (min-width: 600px) and (max-width: 800px) {
  .feincontainer {
    background-color: lightblue;
  }
}
       

このように、メディアクエリを使うことで、異なるデバイスや画面サイズに応じた柔軟なデザインを実現できます。
このサイトの場合、body {}はGoogle fontsを指定する役割となっています。
画面の表示制御はメディアクエリでやるから、body {}側にいろいろ書いちゃうとトラブルの元になるからね。

次は、もう少し手を加えてみましょう。どの画面もちゃんとレスポンシブデザインでなければ意味がないからね。

ちょっと工夫したレスポンシブデザイン

/* responsive design ●start●*/
.abcdcontainer { /* コンテナの幅を90%に設定し、中央揃えにします */
  width: 90%;
  margin: 0 auto;
  box-sizing: border-box; /* パディングとボーダーを含めたボックスサイズを設定します */
}

/* Mobile adjustments */
@media (max-width: 600px) { /* 画面幅が600px以下の場合のスタイルを設定します */
  .abcdcontainer { /* フォントサイズを0.875emに設定し、上下のパディングを10pxにします */
    font-size: 0.875em;
    padding: 10px 0;
  }

  .responsive-iframe { /* iframeの幅を100%、高さを画面の高さから20px引いた値に設定します */
    width: 100%;
    height: calc(100vh - 20px);
  }
}

/* Computer adjustments */
@media (min-width: 601px) { /* 画面幅が601px以上の場合のスタイルを設定します */
  .abcdcontainer { /* コンテナの最大幅を1200pxに設定し、左右のパディングを150pxにします */
    width: 100%;
    max-width: 1200px;
    padding: 20px 150px;
  }

  .responsive-iframe { /* iframeの幅を80%、高さを画面の高さの80%に設定します */
    width: 80%;
    height: 80vh;
  }
}
/* responsive design ●end●*/
    

CSSにおける「コンテナ」とは何か

CSSで「コンテナ」という言葉は、一般的に要素を囲むためのボックスのことです。
このボックスは、他の要素をまとめて整理し、レイアウトを整えるために使用されます。
具体的な役割を書いていきますね。

レイアウトの管理

コンテナは、ページ内の要素をグループ化し、配置を制御します。

例えば、ヘッダー、メインコンテンツ、フッターなどをそれぞれのコンテナに入れることで、ページ全体のレイアウトを整えやすくなります。

スタイルの適用

コンテナに対してスタイルを適用することで、その中に含まれるすべての要素に一貫したデザインを適用できます。

例えば、背景色やパディング、マージンなどを設定します。

レスポンシブデザイン

コンテナを使って、異なる画面サイズに応じたレイアウトを作成することができます。

メディアクエリを使用して、コンテナのスタイルを変更することで、モバイルデバイスやデスクトップなど、さまざまなデバイスに対応したデザインを実現します。

簡単なコードの例をお見せします。
次のようなコードでコンテナを定義します。

<div class="container">
    <!-- コンテナ内のコンテンツ -->
</div>
    

そして、次のようにCSSでスタイルを設定します。

.container {
  width: 80%;
  margin: 0 auto;
  padding: 20px;
  background-color: #f0f0f0;
}
    

コンテナはウェブページの構造を整理し、スタイルを適用するための重要な要素です。
何も「.container」という名称でなければならないというわけではなく、そういう要素であるという意味ですね。