Webサイトのコーティングについての質問です。

HTML、CSS | ホームページ作成22閲覧xmlns="http://www.w3.org/2000/svg">250

ベストアンサー

0

>ほかの回答者様も仰ってる通り全サイズ対応はワードプレスでなければ不可能に近いみたいですね WordPressを使わなくても可能です、当然 それなりの知識は必要ですが。

その他の回答(3件)

0

全サイズのモニターに対応するのは、至難の業です。 https://webdesign-abc.com/tech/resolution-list/ 大抵で良いので、やっておく。 例えば、ブラウザの幅が 480px~960px の場合は、 @media (min-width: 480px) and (max-width: 960px) { } ↑ このようにしておくとか。 あと、WordPressは、レスポンジプ対応のテーマ(テンプレート)が用意されており、楽にできるメリットもある。

0

Webデザイナーです。大雑把なやり方ですが 640px前後(スマホ用)とそれ以外で作ればとりあえずは体裁は保てますね。 後は微調整で750px前後(タブレット用) 1000px前後(ノートpc用) で微調整します。 崩れないようにするコツは ・画像は基本的にスマホの画面一杯のサイズで用意する。そのためパソコン用としては大きなサイズになる。 ・PC(最大画面)をきっちり作る ・コンテンツの横幅は原則的に%とmax-widthで指定する ・横並びなどレイアウトはdisplay:flexを主に使う。 ・display:noneでPCかSP専用のコンテンツを作るのは極力避ける ・imgの横幅は100%を指定しておく ・罫線は画像で表現しない。CSSで行描く ・PC(最大画面)のCSSは全ての画面幅に有効となるように記述する ブレークポイントの書き方はmax-widthの方しか指定しないことが多いです。 ・SP用のCSSは主にPCのCSSで都合悪い物を否定する内容を書く。主に多いのは、コンテンツの幅、上下のスペース、文字サイズ、背景指定の画像の切り替えや非表示が主になる。 ・スマホ、またはPCだけ改行したい時は〈br〉にclassをつけて、改行されるのが都合が悪い方はdisplay:noneで隠す。 という方法で作っています。

非常に参考になります。 ほかの回答者様も仰ってる通り全サイズ対応はワードプレスでなければ不可能に近いみたいですね、、 これからのサイト作りにこれらのことを意識して制作しようと思います。 追加質問失礼します。 Googleの検証ツールでレスポンシブなどの確認を行うのですが、中途半端な数値でレイアウトが崩れてしまうのは仕方ないことですよね? 例えば768px、1024pxなどでブレイクポイントをうっていてその途中の900px〜あたりでレイアウトが崩れてしまうということです。