HTML CSS 初心者向け max-widthの使い方

初心者の私がよくやってしまうミスを備忘録としてお届けしていきます^^

参考にしたのはこちら 

作って学ぶコーディング学習サイト

とっても見やすく学習しやすいように初級、中級、上級編と分かれていて、
完成イメージやヒント、デモ、ソースコード、画像素材も用意されているのでおすすめです！

今回の模写対象のデモはシンプルでそんなに時間もかからなさそうと思っていたのですが、
効率の悪い作り方をしてしまったせいで時間がかかってしまいました。

パッと見てわかる通り上下左右には余白があるデザインです。
このようなデザインではまず始めにmax-widthを指定しましょう。

max-widthとは要素の幅の最大値を指定するプロパティです。

例えばレスポンシブデザインを作っていて画面幅を大きく広げたとき、画像や要素が一緒に広がりますが、
max-widthを指定すれば指定した値の範囲を超えて広がることはありません。

CSSで、contentというクラスの中にmax-width:1000px;と指定しました。

max-widthに1000pxを指定したので、横幅１０００pxから超えた範囲はmargin（オレンジ色の部分）となっています。

このmax-widthをはずすと、画面幅いっぱいに広がってしまうので以下のようになります。

反対にmin-widthというプロパティもあります。
min-widthは要素の幅の最小値を指定するプロパティです。

レスポンシブデザインを考える時に特に役立つプロパティですので是非マスターして
使いこなせるようになりましょう！！^^

以上、備忘録でした★！