PC画面のレスポンシブも考えよう。会社概要お問合せプライバシーポリシーレスポンシブデザインHOMEホームページ制作レスポンシブデザインPC画面のレスポンシブも考えよう。PC画面のレスポンシブも考えよう。2021年5月25日netbwave今のホームページはレスポンシブデザインを使って、様々なキャリア(PC・タブレット・スマートフォン)に対応する様に制作されています。PCだけを考えても10インチの小型ノートPCから、30インチ近い大型ワイド液晶まで様々なサイズがあり、ホームページの横幅の設定数値によっては、横スクロールバーが表示されてしまう場合があります。今回は大きい画面から小さい画面まで対応できるPC用ホームページの作り方です。簡単なCSSの指定で、一般的な2カラムのデザインであれば最小値が横幅800px程度の大きさまでの対応が可能です。サンプルコードは以下の通りです。外郭のプロパティをmax-widthで指定する。これだけのサイズ指定方法で小さい画面から大きな画面までの対応ができます。サンプルコードでは、wrapperセレクタで一番外側(外郭)を最大幅1200pxで指定。この時のwidthのプロパティをmax-widthとする事で、モニタサイズが横幅1200px以上ある場合は、横幅1200pxで表示されるように設定されます。1200px以下の小さい画面になった時にどの様に表示されるかと言うと。プロパティmax-widthの場合は、表示の最大幅を指定してあるだけなので、それ以下の画面サイズの場合は。画面表示に合わせた横幅100%と同じ様に表示されます。横幅1080pxなどのノートPCなどは、横幅一杯に表示されるので、横スクロールバーは表示されません。この時注意が必要な事があります。それは、wrapper内のブロック要素の指定方法です。このサンプルを見て解ると思いますが、conetntとside-barの横幅は%(パーセント)による指定をしています。この指定をpx(ピクセル)で指定しまうと、1200px以下の小さい画面では内側のボックスが飛び出します。その飛び出しを回避する為には、内部のブロック要素を全て%指定にしておく事が必要です。基本的な考え方として、外側をpx指定で固めて内部に関しては、リキッドレイアウトでの制作方法を取り入れています。これは昨今の大画面液晶に対応する為です。最近のワイド画面液晶の場合、キッドレイアウトを使って、外郭を%指定してしまうと、間抜けなデザインになってしまうので、あえてサイト幅に最大値を設定して、バランスのとれたホームページを表示するようにしています。した、発想の転換で簡単に様々な画面サイズに適応が出来るので、お勧めです。この作り方でも問題が発生する場所があります。作り方次第ですがグローバルナビの表示項目が多い場合などは、小さい画面の時にナビが改行されて2段になってしまう事があります。この辺りはナビ関連のCSSでmargin・paddingと言ったプロパティ調整や、ナビの表示項目の見直しで回避するしかありません。個人的には、ホームページを作る時にpx指定するのは、外郭だけですね。内部については、プロパティではpx指定せずに、%かremで対応しています。0(ゼロ)サイズ指定の時はpxですが。margin・paddingと言ったプロパティ値はremで設定する事が多いです。テストでアラートが出てしまう事があります。聞くのは、レスポンシブでモバイル対応はremですると言う方法ですが、PCでも最近はremでの指定が増えています。これからのホームページ制作は、常に画面サイズの変化に対応できるよな基本設計を考えつつ、デザインを作る必要があります。その為には最低限押さえておきたいポイントが幾つかありますが、今回の話はそのうちの重要なポイントの一つです。本当にちょっとした事ですが、これを知っているかいないかで、作業効率が変わるので覚えておくとイイと思います。中小企業や自営業者必見!商品が売れるホームページはこうして作りましょう。ホームページサポート横浜市中区を拠点に、全国の中小企業を対象に効果的なホームページ制作と運営サポートを提供しています。神奈川県横浜市に限らず全国対応で柔軟にサポートいたします。CONTACT無料相談・お見積もりをぜひご利用ください。私たちがあなたのビジネスを成功に導くための最適な提案をいたします。定休日.日祝日ホームページサポートは、神奈川県横浜市のホームページ制作会社です。