Webデザインを学び始めたばかりの方が、見本サイトと同じレイアウトを作ろうとする際によく直面する問題が、文字が画面いっぱいに広がってしまうことです。これは主にCSSでの余白設定が不足していることが原因です。
左右の余白を設定する方法
HTMLの要素に対して、CSSでpaddingやmarginを設定することで、文字が左右いっぱいに広がるのを防ぐことができます。例えば、コンテンツ全体を囲む
に次のように指定します。
div.content {
padding-left: 20px;
padding-right: 20px;
}これにより、左右に20pxの余白ができ、文字が画面端に張り付かなくなります。
コンテナ幅を制限する方法
画面サイズに応じて文字やコンテンツの幅を制限するには、max-widthを使います。
div.content {
max-width: 1200px;
margin-left: auto;
margin-right: auto;
}こうすることで、画面が大きくてもコンテンツの幅が制限され、中央に寄せられます。
レスポンシブ対応
スマホやタブレットなどの画面サイズに合わせて余白を変えるには、@mediaを使ったメディアクエリで調整します。
@media screen and (max-width: 768px) {
div.content {
padding-left: 10px;
padding-right: 10px;
}
}これにより、狭い画面でも適切な余白が確保されます。
まとめ
文字が画面いっぱいに広がってしまう場合は、paddingやmarginで余白を作り、max-widthでコンテナ幅を制限することが基本です。メディアクエリを使うことで、スマホやタブレットでも見やすいレイアウトに調整できます。これらを使いこなすことで、見本サイトに近いデザインを実現できます。
コメント