HTML/CSS

(HTML/CSS)レスポンシブの設定方法を紹介

今回はHTML/CSSでホームページを作成している中でレスポンシブ(スマホやタブレットでの画面サイズ、レイアウト調整されたデザインの事)の設定方法を紹介していきます。

 

メディアクエリとは

 

メディアクエリとは、ブラウザの画面サイズに応じてCSSのスタイルを設定できる方法になります。

ブラウザのサイズの分岐点をブレイクポイントと言います。

今回はyousoというクラス名でデザインしていると想定したCSSになります。

 

タブレット向けの設定場合(CSSコード)

ブレイクポイントが1000px以下でタブレット用のレイアウトに変更

 

スマホ向けの設定場合(CSSコード)

ブレイクポイントが670px以下でタブレット用のレイアウトに変更

 

box-sizingでレイアウト崩れを防ぐ

 

要素の幅(width)の合計にpaddingborderが含まれるようになります。その設定をする事でpaddingborderを追加した時に生じるレイアウト崩れを未然に防ぐことができるのでお忘れなく設定してください。(marginは要素に含まれないので)

 

全ての要素にbox-sizing:border-box;を適用する事が最終ベストですので*(アスタリクスで全ての要素)を用いて設定をします。

 

viewportの設定

 

レスポンシブデザインを適用する準備として、<head>タグ内にviewportを設定してください。viewportを設定しないと、スマートフォンやタブレットでの閲覧時にメディアクエリが正しく機能しませんので注意。

 

画面幅widthの設定は100%で設定がベスト

最後にwidthは直接的な数値ではなく全てに対応できる%でデザインするようにしてくださいね。


ビジネスにもブログにも使いやすいWordPressテーマ

「WING(AFFINGER5)」

SEOや収益化に効果的な機能が豊富

記事ごとにAMP化を選択可能

簡単に設置出来るランキング機能をはじめとしたアフィリエイトを始めやすい設計

お得にご購入はコチラ

  • この記事を書いた人
NAO

NAO

NAOです。 DTPデザイナー、ワードプレスを愛するWEBデザイナー// 世の中のお得な情報、DTP、WEB、ブログに関して発信してまいります。 「使用ソフト」Illustrator Photoshop DreamWEAVER「使用プログラミング」HTML/CSS/ワードプレス/Jquery 「企業実績」販売促進に関係するアイテム作成 実績多数 「個人実績」 ココナラ 名刺作成・ロゴ作成 400件以上 広告 50件以上 販売実績

-HTML/CSS

© 2021 TSUTAERU BLOG