レスポンシブウェブサイトを作成するための簡単なガイド

公開: 2020-10-13

表示に使用しているデバイスに関係なく、最新のWebサイトがどれだけ完全に「適合」しているように見えるかを常に疑問に思ったことはありますか？レスポンシブWebページのコーディングは一般的な方法であり、今日では多くの新しいWebサイトで広く普及しています。レスポンシブWebページは、Webサイトの表示に使用されているデバイスの画面に合わせてサイズを変更することにより、巧妙なトリックを実行します。つまり、iPhoneやデスクトップコンピュータ、およびその間のすべてで見栄えがするということです。

この「応答性」は非常にシームレスに発生するため、実際には気付かないかもしれません。優れたレスポンシブWebデザインは、最適なブラウジングエクスペリエンスを維持しながら、デバイス間をシームレスに流れる必要があります。レスポンシブWebサイトは、「便利な」機能から、現在ではどのWebサイトにもほぼ必須の機能になっています。なんで？近年、モバイルデバイスを使用してオンラインで閲覧する人の数が急増しており、モバイルデバイス（したがって画面が小さい）へのこの傾向が減速の兆候を示していないからです。

以下のデータをご覧ください（statcounter.comの厚意により提供）。最も一般的な画面サイズは小さい（つまり、モバイル画面）ことがわかります。

これらの数百万人のユーザー全員がこれらのデバイスでレスポンシブでないWebサイトを見る必要があると想像してみてください。それらのそれぞれのウェブサイトのコンテンツを適切に見ることができるようにするために多くの「ピンチアンドズーム」アクションを実行することを伴うので、彼らは非常にイライラするでしょう。これらのユーザーがこれらのWebサイトを放棄して、応答性の高い同等のWebサイトを優先する可能性が高くなります。

潜在的な顧客を失うだけではレスポンシブウェブサイトを持つことの価値についてあなたを納得させるのに十分でないなら、おそらく検索ランキングを失うという考えはそうかもしれません。グーグルはしばらくの間、モバイルユーザーに何らかの形のレスポンシブまたはアダプティブデザインを提供しないウェブサイトにペナルティを課してきました。つまり、ウェブサイトがモバイルでうまく機能しない場合は、ランキングペナルティが発生することを期待してください。モバイルで「うまく機能する」とはどういう意味ですか？さて、コンテンツはユーザーフレンドリーな方法で表示する必要があります。これは、ピンチやズームインなしで読み取り可能でなければならないことを意味します。また、すばやくロードする必要があります（WordPressキャッシングが速度目標にどのように役立つかに興味がある場合は、この記事「WordPressキャッシング-仕組みと使用する理由」を参照してください！'）

レスポンシブWebページとアダプティブWebページ

10年か2年前に戻ると、携帯電話は今ほど普及していませんでした。確かに、Webを閲覧できるようにするのに良い仕事をしたものは、おそらく2005年以降まで実際に到着し始めませんでした（iPhoneが2007年まで登場しなかったように見えるのと同じくらい信じられないほどです）。セルラーネットワークも多くのデータを伝送できなかったため、モバイルWebブラウジングの機会は限られていました。それはすべて過去10年間で急速に変化し、ウェブサイトは、現在私たちが見つけている新しいモバイル主導の世界で顧客により良いサービスを提供するために、追いつくためにスクラブを続けていました。

「デスクトップ」Webサイトをモバイル画面に合わせる必要があるという問題を解決するためにWebデザイナーが取り組んだ方法はいくつかありました。非常に初期の頃、メインの「デスクトップ」バージョンのWebサイトと並行して実行されるスタンドアロンの「モバイル専用」Webサイトが開発されました。これらは通常、デザインがかなり粗雑であり、より大きなデスクトップ兄弟の多くの機能を省略した、ストリップバックブラウジングエクスペリエンスを頻繁に提供していました。

この後、アダプティブデザインが登場しました。これにより、特別に設計されたモバイルWebサイトを提供するモバイル専用バージョンがさらに一歩進んだ。複数の静的レイアウトが作成され、ユーザーにより魅力的なモバイルブラウジング体験を提供します。ウェブサイトを使用しているデバイスの画面サイズが読み込まれ、最適なサイズが提供されます。通常、大きなデスクトップからモバイルまでの画面に対応するために、6つのサイズが作成されます。ただし、アダプティブデザインはやや制限があり、構築された6つのカテゴリに適切に分類されない画面サイズに対応できないため、将来を保証するものではありません。また、6つのバージョンのWebサイトを構築する必要があるため、設計の観点からもリソースを大量に消費します。

アダプティブデザインに関する主な欠点は、レスポンシブデザインで解決されました。レスポンシブデザインは、画面サイズに基づいて事前に作成されたレイアウトを提供する代わりに、デバイスに応じてレンダリング方法を調整します。これは、Webサイトの表示に使用されるデバイス（および対応する画面サイズ）に関係なく、見栄えがよくユーザーフレンドリーなWebサイトを取得する必要があることを意味します。

レスポンシブデザインは現在、モバイルWebサイトの業界標準と見なされています。実際、Google自身がレスポンシブウェブデザインを推奨しています。このチュートリアルでは、レスポンシブデザインと、これをWebサイトのレイアウトに適用する方法を初心者に見てもらいます。

レスポンシブウェブサイトはどのように機能しますか？

レスポンシブWebサイトは、CSSメディアクエリと呼ばれるものを使用して、画面の幅に基づいてWebサイトのレイアウトを変更します。 CSSメディアクエリは、CSSの基本を理解していれば、実際にはかなり簡単に展開できる強力なツールです。応答性の高いWebサイトを構築するプロセスに飛び込む前に開始する場所は、いくつかの実際の例を確認することです。これを行う最良の方法は、デスクトップまたはラップトップの画面を使用することです。 Chromeなどのブラウザを開き、人気のあるWebサイトにアクセスします。 pressidium.comで私たち自身を試してみることをお勧めします。

ブラウザウィンドウのサイズを小さくしてから、ブラウザウィンドウの右端にカーソルを合わせて、ウィンドウをスライドさせて狭くします。小さくなると、Webサイトのレイアウトが変わることがわかります。 Webサイトが事前定義されたサイズ（たとえば、幅1,000ピクセル）に達すると、この画面幅に関連するCSSスタイルを使用するようにブラウザに指示するCSSメディアクエリがトリガーされます。次に、Webサイトはこの新しい画面サイズに適切に流れるか応答し、それに応じて表示されます。かなり賢い！

これで、何が起こっているのかについての基本的な理解ができました。要点を詳しく調べて、レスポンシブWebページを自分で作成する方法を見てみましょう。

レスポンシブWebページの構築

このチュートリアルではバックエンドコードを使用しないため、サーバーにアクセスしてこれを実行する必要はありません。デスクトップにフォルダを作成し、これに作業ファイルを追加するだけです。

ステップ1：HTML

新しいフォルダ内にindex.htmlファイルを作成します。お気に入りのテキスト/コードエディタでこのファイルを開き、次のコードを挿入します。

 <!DOCTYPE html> <html lang="en-US"> <head> <link rel="stylesheet" type = "text/css" href = "style.css" /> </head> <body> <div> <div> <h1>My website</h1> <div> <div class="post"> <h3 class="post-title">Post 1 title</h3> <p><b>post 1 content.</b> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> </div> <div class="post"> <h3 class="post-title">Post 2 title</h3> <p><b>post 2 content.</b> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> </div> <div class="post"> <h3 class="post-title">Post 3 title</h3> <p><b>post 3 content.</b> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> </div> <div class="post"> <h3 class="post-title">Post 4 title</h3> <p><b>post 4 content.</b> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> </div> <div class="post"> <h3 class="post-title">Post 5 title</h3> <p><b>post 5 content.</b> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> </div> </div> <div> <div> <h3>Menu title</h3> <ul> <li>item 1</li> <li>item 2</li> <li>item 3</li> <li>item 4</li> </ul> </div> </div> </div> </div> </body> </html>

ステップ2：外部CSS

外部のstyle.cssファイルを追加する必要があります。これを行うには、style.cssというファイルを作成し、これをindex.htmlファイルと同じフォルダーに配置します。次に、次のコードを追加します。

 h1 { text-align: center; } div#content { margin: 0 auto; display: table; } div#main { width: 900px; float: left; padding: 20px; margin: 20px; border: 1px solid darkgrey; } div#sidebar { width: 300px; float: left; padding: 20px; margin: 20px; border: 1px solid darkgrey; } div.post { width: 31.1%; float: left; padding: 10px; }

この時点で、インターネットブラウザ（この例ではChromeを使用）でindex.htmlファイルを開くと、ページに表示される内容は次のようになります。

次に、ブラウザの開発者ツールを見てみましょう（ここでも、この例ではChromeを使用しています）。 Chromeを開き、F12を押して、右側に表示されるように設定します。

セパレータカーソルを動かしてウィンドウサイズを変更し、画面の解像度がリアルタイムで変化するのを確認します。

ステップ3：CSS相対単位

この例では、幅を1396ピクセルにドラッグすると、メニューの右側のサイドバーがメインコンテンツの下に移動し、収まらなくなることがわかります。

これは、 div#mainに900px、 div#sidebarに300pxの固定幅を設定したために発生しました。これらの値の形式を変更し、代わりにパーセンテージを使用してみましょう。（パディングとマージンも幅にカウントされるため、これらの値もパーセンテージに変換する必要があることに注意してください。）

これらの編集を行うと、style.cssは次のようになります。

 h1 { text-align: center; } div#content { margin: 0 auto; display: table; } div#main { width: 66%; float: left; padding: 1%; margin: 1%; border: 1px solid darkgrey; } div#sidebar { width: 22%; float: left; padding: 1%; margin: 1%; border: 1px solid darkgrey; } div.post { width: 31.1%; float: left; padding: 10px; }

応答性が向上しているページがあるので、これは今エキサイティングになっています！

物事は形作られつつありますが、投稿領域にはさらにCSS編集が必要です。幅が小さいほど、ポストボックスは「醜い」ものになります。これを回避するには、投稿CSSを編集して、より美しく、より応答性の高いレイアウトを実現する必要があります。

視覚的な問題は、画面が狭くなったときにのみ発生することに注意してください。この問題を解決するには、CSSメディアクエリを使用して、特定のポイントを超えると、見栄えの良いレイアウトを生成する代替CSSが開始されるようにする必要があります。

私たちがやろうとしていることは、「ワイドスクリーン」の3列の投稿領域を、より狭い画面によりよくフィットする2列の領域に変換することです。これを実現するために、CSSメディアクエリを使用します。

ステップ4：CSSメディアクエリ

「ワイドスクリーン」モードでは、次のようなCSSメディアクエリを導入します：この@media screen and (min-width: 1396px)ように。このクエリはCSSスタイルシートの上部にあり、画面の幅が1396px以上のときに実行するCSSのセット全体を囲みます。

これで、このコードをすべてコピーして、CSSスタイルシートに複製できます（1つのファイルに2つの同じバージョンがあるように、現在のCSSの下にコピーして貼り付けます）。次に、CSSの2番目のバッチの上部にあるCSSメディアクエリを編集して、 @media screen and (max-width: 1395px)を読み取ります。これは、ブラウザが1395pxより小さい場合、このCSSを実行する必要があることを示しています。これで、この「小さい」セクションのCSSを微調整して、小さい画面に収まるようにWebページのレイアウトを変更できます。この例では、を微調整します。そこで、 div.postのパーセンテージを31.1％から45％に微調整する必要があります。

これで、次のようなCSSファイルが作成されます。

 @media screen and (min-width: 1396px) { h1 { text-align: center; } div#content { margin: 0 auto; display: table; } div#main { width: 66%; float: left; padding: 1%; margin: 1%; border: 1px solid darkgrey; } div#sidebar { width: 22%; float: left; padding: 1%; margin: 1%; border: 1px solid darkgrey; } div.post { width: 31.1%; float: left; padding: 10px; } } @media screen and (max-width: 1395px) { h1 { text-align: center; } div#content { margin: 0 auto; display: table; } div#main { width: 66%; float: left; padding: 1%; margin: 1%; border: 1px solid darkgrey; } div#sidebar { width: 22%; float: left; padding: 1%; margin: 1%; border: 1px solid darkgrey; } div.post { width: 45%; float: left; padding: 2%; } }

投稿ボックスの幅が1395px未満の画面ではスタイルが異なるので、これが実際にどのように反映されるかを見てみましょう。

良い！

スケールダウン中や幅760pxを超えた後も、物事がまだ奇妙になっていることに気付くでしょう。

これを並べ替えるには、3列から2列に移動するのに使用したのと同じトリックを使用できます。ただし、今回は760pxの「ブレークポイント」を使用し、CSS div.postを94％に変更します。これを行うと、次のような3つのCSSメディアクエリが作成されます。

 @media screen and (min-width: 1396px) { } @media screen and (min-width: 761px) and (max-width: 1395px) { } @media screen and (max-width: 760px) { }

@media screen and (max-width: 760px) CSSには、次のように編集されたdiv.postが含まれます。

 div.post { width: 94%; float: left; padding: 2%; }

ブラウザの幅を760px未満に減らすと、次のように表示されます。

以上です！大画面、タブレット、モバイルで機能するレスポンシブWebページを作成しました。

このテンプレートを使用すると、他のCSSスタイルを試してみることができます。この例を試して、後で美しくレスポンシブなWebサイトを構築するために使用できるさまざまなCSSルールを適用することで、学ぶべきことがたくさんあります。

結論

WordPressのようなCMSを使用している場合、レスポンシブWebページを強化するための基盤となるCSSおよびメディアクエリを掘り下げる必要があるのはなぜか疑問に思われるかもしれません。結局のところ、きちんとコーディングされたWordPressテーマには、レスポンシブデザインが組み込まれているはずです。これは事実ですが、特定のブラウザー幅に基づいてWebサイトがそのように動作する理由を理解することは非常に役立ちます。何らかの理由で、テーマの作成者が追加した最初のレスポンシブデザインが、必要に応じて機能しない場合があります。メディアクエリを適用して特定のブレークポイントに表示されるCSSを変更する方法を知っていると、自由に先に進んで、必要な外観と機能をもたらす変更を適用できます。

また、独自のWordPressテーマを作成する予定がある場合は、メディアクエリをしっかりと理解する必要があります。この記事で、今日のレスポンシブWebサイトの舞台裏で何が起こっているのかを垣間見ることができれば幸いです。ハッピーレスポンシブコーディング！