CSSのメディアクエリを使用するのが一般的です。
以下にその具体的なCSSの指定方法を示します。
CSS
/* コンテンツを囲むコンテナ要素に適用します */
.container {
width: 100%; /* デフォルトは100% (スマホなどで全幅表示) */
margin: 0 auto; /* 中央寄せ (デフォルトでも有効だが、PC表示で重要) */
}
/* PC表示用のメディアクエリ */
/* 例として、画面幅が768px以上の場合に適用 */
@media (min-width: 768px) {
.container {
width: 60%; /* 画面幅を60%に制限 */
margin: 0 auto; /* 中央寄せ */
}
}
/* より大きな画面サイズ向けに別のブレークポイントを設定することも可能です */
/* 例として、画面幅が1024px以上の場合に適用 */
@media (min-width: 1024px) {
.container {
width: 60%; /* 画面幅を60%に制限 */
/* あるいは、最大幅を指定することも検討できます */
/* max-width: 960px; */
margin: 0 auto; /* 中央寄せ */
}
}
解説:
.container: ウェブサイトの主要なコンテンツを囲むHTML要素（例えばdivタグ）にこのクラスを適用することを想定しています。width: 100%;: デフォルト（スマホなど、小さい画面幅）では、コンテナの幅を100%にします。margin: 0 auto;: コンテナを中央寄せするための指定です。上下のマージンは0、左右のマージンはautoにすることで、利用可能なスペースが左右に均等に分配され中央に配置されます。@media (min-width: 768px): これがメディアクエリです。「画面の最小幅が768ピクセル以上の場合に、このブロック内のCSSを適用する」という意味になります。この768pxという値はブレークポイントと呼ばれ、デザインの切り替える基準となる画面幅です。プロジェクトやデザインに合わせて適切な値を設定してください。width: 60%;: メディアクエリ内で、コンテナの幅を画面幅の60%に制限しています。margin: 0 auto;: PC表示でも引き続き中央寄せを適用します。
HTMLでの適用例:
HTML
<body>
<div class="container">
<h1>サイトタイトル</h1>
<p>サイトの本文...</p>
</div>
</body>
このCSSをHTMLの<head>タグ内の<style>タグ内、または外部CSSファイルに記述してリンクすることで、PC表示時にコンテンツ領域が画面幅の60%程度になり、中央に配置されるようになります。ブレークポイント（min-widthの値）は、デザインの意図に合わせて調整してください。
0 件のコメント:
コメントを投稿