わくわくtech

RPAやWEB制作などのテクノロジーにワクワクするサイト☆

WEB制作

WordPressに埋め込んだ要素をレスポンシブにしてみた

投稿日:

閲覧端末毎にデザイン(見せ方)を変えることをレスポンシブデザインといいます。

過去、Wordpressの個別記事に直接HTMLを埋め込んだ記事を投稿したのですが、同記事をスマホで閲覧したときにデザインが崩れていました。

その体験談をもとに、レスポンシブデザインについて簡単に説明しようと思います。

Before・After

今回レスポンシブデザインを適用した記事は以下になります。興味なる方は是非ご覧ください。

 

この記事を投稿した際、PCでは全く問題なかったのに、スマホで確認すると以下のようにデザインが崩れていました。

当たり前ではあるのですが、PCの画面サイズで確認しながらCSSでデザインしてるのでスマホのサイズでは崩れてしまいます。

これを、レスポンシブデザインによって以下のように修正することができました。

 

本記事ではこの修正について説明していきます。

レスポンシブデザインの作成方法

HTMLとCSSでレスポンシブデザインを実現するには2つの設定が必要です。

それが「メディアクエリ」「ビューポート」というものです。

それぞれCSSHTMLに記述して設定します。

CSSの設定(メディアクエリ)

メディアクエリとは、画面サイズごとに異なったCSSを適用する方法です。

具体的には以下のようにCSSを記述します。

“@media”でメディアクエリを記述します。

引数の”max-width“は、このメディアクエリを適用する最大画面サイズを指定します。この場合、640px以下の画面サイズの時、記述したメディアクエリがもとのCSSに上書きされます。

わかりやすいですね。

PC画面では6列で表示していたものをスマホ画面では3列にするため、boxクラスのwidthプロパティを上書きしています。

それ以外の部分には変更がないので、書かなくてもよいです。

 

なんとなくメディアクエリの記述方法はお分かりいただけたでしょうか。

しかし、このままではメディアクエリは適用されません

メディアクエリを有効にするのが次に説明するビューポートになります。

HTMLの設定(ビューポート)

メディアクエリを有効にするため、HTMLのヘッダーで次のように記述します。

詳しく説明しませんが、閲覧デバイスの画面サイズを取得しています。

他にもいろいろなプロパティがあるので興味のある方は調べてみください。

WordPressでは、デフォルトでこのビューポートが設定されています。

このブログは「STINGER8」というテーマを使用しているのですが、「header.php」に次のように記述されています。

ビューポートを設定するとメディアクエリが有効になります。

これで完成です。

終わりに

今回は、レスポンシブデザインについて簡単に説明してみました。

本来はスマホだけでなくタブレットにも対応させたり、ビューポートの設定を細かくするのですが今回はここまで。

HTMLとCSSを使ったウェブデザインを勉強されている方はぜひ試してみてください。

-WEB制作
-, ,

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

【CSS・JQuery】表示・非表示の切替え方法とアニメーション

表示・非表示を可能にするプロパティやメソッドはいくつかあります。 互いに何が違うのか、どのような場面で使うのか、私なりにまとめてみました。   以下が本記事で比較するCSSプロパティおよびj …