ウェブデザイン演習 第15回 - ウェブデザイン演習 | WordPress・jQuery・HTML・CSSのスニペット集 WEBCRE8TOR.COM

WEBCRE8TOR.COM

ウェブデザイン演習 第15回

いよいよ今回でウェブデザイン演習は最終回になります。みなさんよく頑張りました。

今回が最後なので、スマホ・タブレット対応がどういった流れになるかの解説を行います。
コード記述は行いません。

また第11回講義から「jQueryのプラグイン」が登場しましたが、業界的にも人気が高く龍弥デザインでも使用頻度の高いjQueryのプラグインを紹介していこうと思っています。

最終回ということで、実際のプロジェクトで活用できる、実用的な内容になります。

レスポンシブWebデザイン

さて「ページのスマートフォン・タブレット対応」の流れですが、ひとまず皆さんがウェブデザイン演習の講義でコーディングしたページスマートフォンやタブレットでも最適化された状態で構築されたものを見てみましょう。

https://webcre8tor.com/data/lesson/rwd1/

PCでの表示は何も変わっていませんが、ブラウザを縮めていくと表示が変化します。
これが現在スマートフォンやタブレットへの表示最適化対応を行う手法として主流になっているレスポンシブWebデザインという手法です。

WebサイトはPCだけで閲覧するものではない。

WebサイトはPCだけで閲覧されるわけではありません。
iPhoneなどのスマートフォンや、iPadなどのタブレット、iPodなどの音楽プレイヤーなど、最近ではカーナビなどのデバイスでもWebサイトを閲覧することが可能です。

閲覧機能があるなら閲覧ができるようにサイトを制作しなければいけませんが、それぞれサイズや仕様が違うため、すべてに対応しようとすると、一昔前までは、デバイスごとにデザインの違うHTMLやCSSを制作しなければいけませんでした。

例えば、PC・スマートフォン・タブレットの3種類のデバイスに対応しようとすると、index.htmlを3つ、cssを3つ、その他のJavaScriptファイルや画像も3つずつ制作しなければいけません。言い換えれば、Webサイトを3つ制作するのと同じです。

これでは金銭的・時間的コストがかかりすぎますよね。

多くのデバイスに共通で存在するものは「モニター」

デバイスは様々ありますが、そのすべてに共通するのは「モニターを使う」ということです。
それなら画面サイズごとに最適なサイズの表示に切り替えるようにすればいい、というのがレスポンシブWebデザインの考え方です。

画面サイズで切り替えられるように制作を行うことができれば、デバイスごとのファイルを作らなくていいので、コストを抑えることができます。

切り替えポイント「ブレイクポイント」

レスポンシブWebデザインは画面サイズによって要素の表示・非表示を切り替えたりする手法です。切り替えるためには「◯◯px以上のサイズはPC表示◯◯px未満のサイズはスマートフォン表示」という切り替えポイントの指定が必要になります。

この切り替えポイントが「ブレイクポイント」と呼ばれるものです。

大まかなモニターサイズを知る

ブレイクポイントの指定はpx(ピクセル)で行いますが、指定を行う上でそれぞれのデバイスの画面サイズを知らなければ、ブレイクポイントが決められませんよね。

ここでは、「PC・タブレット・スマートフォン」の3種類のデバイスの大まかな画面サイズを知り、そこからブレイクポイントを決めていきましょう。3種類なので3つのブレイクポイントの設定が必要ですね。

デバイス  代表的なサイズ(横幅×高さ)
PC  1,280px × 800px
※Macbook Pro 13インチなど
タブレット 768px × 1,024px(縦向き:ポートレイト表示)
1,024px × 768px(横向き:ランドスケープ表示)
※iPadなど
スマートフォン 428px × 926px (縦向き:ポートレイト表示)
※iPhone13 Pro MAX など

参考ページ:iPhone/iPad解像度(画面サイズ)早見表 – Qiita

この表を見ると、PCが1,280px以上タブレットが768px〜1,024pxスマートフォンが428px〜926px、ということになりますが、PCやスマートフォンはともかく、タブレットは横向きにすることが多いですよね。上記のように、タブレットを横向きにすると横幅も768pxから1,024pxに変わります。

PCの場合のブレイクポイント

PCは他の端末よりモニターサイズが大きいですよね。だから、タブレットの横向きサイズ(1,024px)より大きい場合のブレイクポイントを設定します。

PCとタブレットのブレイクポイント

タブレットは、PCより小さくスマートフォンより大きいモニターです。

経験上、タブレットの横向きはPCと同じ表示にすればいいので、まずはブレイクポイントの最小値をタブレットの縦向きの時の横幅(768px)に設定し、ブレイクポイントの最大値をPCの画面サイズ未満(1,023px)に設定します。

タブレットとスマートフォンのブレイクポイント

最後にスマートフォンですが、3つのデバイスの中で最も小さいモニターですね。
この場合タブレットの縦向きの横幅未満(767px)※1に設定します。

※1・・・横向きスマホが926pxとなっているが、縦向きタブレット(768px × 1,024px)の方が横のpxサイズが小さいため構築上は767pxまででよい。

ブレイクポイントまとめ

以上のことから、各ブレイクポイントは以下の数値に設定しましょう。

デバイス ブレイクポイント
PC  1,024px〜
タブレット 768px 〜 1,023px
スマートフォン 〜767px 

実際のプロジェクトの制作時でも、ほとんど上記の数値の通りのブレイクポイントでレスポンシブWebデザイン対応を行っています。

CSS3 Media Queries(メディアクエリ)

レスポンシブWebデザインによってスマートフォンなどへの対応をするには、CSS3 Media Queriesという記述方法を用いて記述を行っていきます。

CSS3 Media Queriesの基本的な記述方法

たとえば<p></p>の文字色を、PC表示では黒、タブレット表示では赤、スマートフォン表示では青にしたい場合のCSS3 Media Queriesの記述方法は以下のようになります。

CSS

/* -- PC表示の場合(1,024px〜) -- */
p {
  color: black;
}

/* -- タブレット表示の場合(768px 〜 1,023px) -- */
@media screen and (min-width: 768px) and (max-width: 1023px) {
  p {
    color: red;
  }
}

/* -- スマートフォン表示の場合(〜767px) -- */
@media screen and (max-width: 767px) {
  p {
    color: blue;
  }
}

先ほど設定したブレイクポイントがここで使われ画面サイズが◯◯px以上、◯◯px〜△△pxの範囲内
◯◯px以下の場合の、それぞれの条件分岐を行っています。

PC表示の場合のブレイクポイントは「1,024px〜」、
タブレット表示の場合のブレイクポイントは「768px 〜 1,023px」、
スマートフォン表示の場合のブレイクポイントは「〜767px」でしたよね?

「@media screen and (max-width: 767px) {〜}」などの条件分岐の中に、<p></p>や<div></div>などの各セレクタを囲うように記述します。

CSS

@media screen and (ブレイクポイント) and (ブレイクポイント) {

  セレクタ1 {
    プロパティ: 値;
  }

  セレクタ2 {
    プロパティ: 値;
  }

  セレクタ3 {
    プロパティ: 値;
  }

}

この記述により、ページを表示したりブラウザをリサイズしたりすると、それぞれのブレイクポイントに応じた表示に切り替えられるわけです。

CSS3 Media Queriesで何をして、どう変わる?

ここまでで、画面サイズによってブレイクポイントを決めそれを元にCSS3 Media Queriesによって表示の切り替えを行うというのはわかりましたが、実際にどういった記述で、どのような表示に変わるのでしょうか?

対応をせず、そのままPCサイトを見た場合は以下の画像のような表示になります。

対して、対応を行った場合は以下の画像のような表示になります。

ぴったりと収まっていますよね。

レスポンシブWebデザインの表示最適化対応ですることは、PC表示で指定したCSSの指定を、タブレット表示やスマートフォン表示のCSSの指定によって上書きするという作業の連続になります。

jQueryとは?

jQueryに関しては度重なる説明になりますが・・・

動きや仕様を実現するためにJavaScriptで記述を行うと、難易度が非常に高い上に冗長になりがちで初心者にはとても扱えるものではありません。

また記述に慣れている中級者以上でも、例えばいくつかのプロジェクトでスライドショーを実装予定で、プロジェクト毎に多少の違いがあると独自記述の必要性が生じるため再現性が高くなく使い回しがしづらくなります。

それらの問題を解決するのがjQueryなどのライブラリでしたよね。

ライブラリとは、使用頻度の高い複数のプログラムを再利用しやすい形でひとまとまりにしたもので、用途に応じたプログラムを単体で使用できる状態で取り出すことができます。

さらにカスタマイズを容易にするために、本来のJavaScriptのコードと同じ動きをより短いコードで実現できるように作られており、非常に難解なプログラムを初心者でも簡単に動作させることができます。

イメージとしては「初心者に優しくて超頭のいい博士兼通訳さん」といった感じ。

ウェブデザイン演習第11回 | jQueryとは

jQueryプラグイン | スライドショー編

第11回の講義でも使用しましたが、Webサイトにスライドショーを埋め込む場合によく使用するjQueryプラグインの紹介です。

Webサイトにはかなりの確率でアイキャッチのブロックにスライドショーや動画が表示されていますよね。有名なWebサイトでも、メンテナンス性や表現の豊かさなどの理由から多くの場合jQueryプラグインを用いてスライドショーを実装しています。

bxSlider

講義で使用したbxSliderですね。かなりの数のWebサイトで使用されていますが、導入が簡単で手軽な上に、さまざまな設定項目があって、柔軟に対応ができることが人気の理由のようです。

龍弥デザインではあまり使わないけどね。

slick

slickは一度に複数枚をスライドしてくれたり、同一ページ内に複数実装できたり、非常に柔軟であり、しかもスマホなどの閲覧環境でも問題なく動作してくれる非常に有効なスライドショープラグインです。

龍弥デザインがスライドショーを実装する場合は自作しますが、どうしてもプラグインを使用する場合はほぼslickを使用しています。

Swiper

SwiperはjQuery本体を必要としないスライドショープラグインです。
jQuery本体を使用しないため読み込みが早く動作が軽くなります。

jQuery本体を使わないなら記述が難しいのでは??と思うかもしれませんが、そんなこともありません。記述はJavaScriptのものですが比較的簡単な記述で実装することができます。

ちょっと慣れてきたら・・・で使ってみるのがいいかもしれませんね。

参考記事
面白いjQueryプラグイン50選!フロントエンド開発に役立つjQueryプラグインをジャンル別に多数紹介 – SeleQt【セレキュト】|SeleQt【セレキュト】
jQueryスライダープラグイン9選!スライドショーを手軽に作成|ferret
【jQuery】手軽に使えるスライダープラグイン3選 – mogaBlog

jQueryプラグイン | モーダルウィンドウ編

モーダルウィンドウとは、画像をクリックしたら拡大表示される機能のことです。
こちらはブログの記事などで使用しますし、導入しないことの方が珍しいです。

Lightbox2

かつてモーダルウィンドウ機能のプラグインで覇権を握っていた「Lightbox」の後継がこの「Lightbox2」です。導入が簡単で、時間がなくサクッと制作してしまいたい場合や費用的に難しいことができない場合は、このプラグインが一番です。

Magnific Popup

龍弥デザインの新規制作の時に使うHTMLテンプレートにはMagnific Popupが入っています。
「ちゃんと作りたい」時にはこのプラグインが一番いいですね。

参考記事
無料で使えるモーダルウィンドウプラグイン18選。オープンソースの最新モーダルを取り入れよう – Workship MAGAZINE(ワークシップマガジン)

jQueryプラグイン | スクロールバー編

地味に面倒なのが縦や横のスクロールバーを装飾する作業です。実はブラウザ対応がけっこうバラバラで何度も泣かされました・・・。面倒なクロスブラウザ対応もプラグインで解決できます。

jscrollpane

スクロールバーを装飾するので真っ先に浮かぶのはこのjscrollPaneです。
大昔から使っていますが他のプラグインを選ぶ気にならないほどの簡単さです。
龍弥デザインのWebサイトでも全然使っています。

jQueryプラグイン | アニメーション編

基本的にアニメーションは細かい動きなどを実現しなければいけないことが多いので、前々回の講義のスクロールアニメーションの記述のようにプラグインを使わずに実装をしていますが、プラグインを使った方が滑らかな動きをすることもあります。

jqFloat

jqFloatはふわふわとした動きを実装したい時に導入しています。
龍弥デザインのトップページの風船なんかはこのプラグインを使用しています。

fullPage

かつて流行った、WebページがまるでPowerPointのスライドのような動きを実装できるのがこのfullPageです。iPhoneの製品紹介ページはこういった動きをしていました。

プラグインを使いこなすコツは「トライ&エラー」

以上が使用頻度の高いjQueryプラグインの紹介になります。

これはjQueryプラグインの話だけに限ったことではありませんが、ツールや機能をうまく使いこなすコツは、結局トライ&エラーを繰り返すことです。

大して使ってもいないのに難しいかどうかなんてわからないし、50%のところまで頑張ってできなくても、51%で急に「そういうことか!」と理解できてしまうことがあるのもウェブの面白いところ。

触りまくって試しまくって使いこなせるようになりましょう。
私なんてスクロールアニメーションを実装したいってだけで3ヶ月ずっと同じことをしていましたよ・・・

皆さんの活躍を願っています。

普段聞き慣れないワードや使うことのないツールがたくさん出てきたと思います。
戸惑うこと、難しいと思うこともたくさんあったと思います。

けれど、「こういう仕事もあるんだ」という事を知るきっかけの一つとしてもらえればいいなと思います。そしてこれから先、皆さんがそれぞれの人生で活躍してくれることを願っています。

改めまして・・・

本講義は、「ウェブデザイン実務士」の資格取得のための必修科目になります。ただそれより、前期のウェブデザインBと合わせて、この講義が将来のWebデザイナーを生み出すきっかけ作りになればいいなと本気で思っています。

一年間、お疲れ様でした。

WEBCRE8TOR.COM

SEARCH

PAGES

CATEGORY

ARCHIVE

LINK

CLOSE