ページ幅をこれ以上広げないCSS

ページ幅をこれ以上広げないCSS
この記事は約1分で読めます。

パソコンでウェブを見ると、中心にコンテンツが表示されるのが一般的です。
CSSでこれを表現するには、下記の記述をコンテンツの最も外のDivに付ければOK。

【CSS】
  .contents {
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
    background: #82fcc9;
  }

最大幅は800pxでそれ以上伸びずに中央に固定されます。
max-widthの値を変えてお好みのサイズにしてください。

【プレビュー】

See the Pen
横幅最大値800px
by endebataro (@endebataro)
on CodePen.

CSS

フロントエンドエンジニアとして10年目のキャリアを積んでおり、figma、Illustrator、Photoshop、WordPress、HTML、今は亡きXHTML、CSS(scss)、JavaScript(jQuery)、PHPなど使って日々仕事をしています。

仕事で検索する手間を省くためフロントエンド技術に関するブログを書いています。

制作のご依頼やお問い合わせはこちらから連絡お願いします。

エンデ・バタローをフォローする
シェアする
初めてのブログ

コメント

タイトルとURLをコピーしました