初心者向けにCSSのmin-widthの使い方について解説しています。min-widthは要素に最小の幅を設定することが出来ます。max-widthとともにレスポンシブなどでもよく使われるので、この機会にぜひ覚えましょう。2018/2/28テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。調査手法:インターネット調査CSSのmin-widthの使い方について解説します。min-widthは要素の最小の幅を設定できるプロパティです。レスポンシブサイトなどでも使いますので、ぜひこの機会に覚えましょう。そもそもCSSについてよく分からないという方は、CSSの書き方について解説した記事を読むとさらに理解が深まります。本記事は、TechAcademyのオンラインブートキャンプWebデザイン講座のCSSカリキュラムをもとに執筆しています。今回は、CSSに関する内容だね!大石ゆかりどういう内容でしょうか?田島悠介CSSのmin-widthの使い方について詳しく説明していくね!大石ゆかりお願いします!min-widthとはwidthを%などで可変の値で設定した時に最小値を設定できるプロパティです。30%;で設定した要素があるとします。その値よりも小さくならないようになります。実際に書いてみよう以下のHTMLにCSSを適用させると、ブラウザの幅を小さくしてもmax-widthで指定した幅以下にはなりません。<p>ブラウザー幅を変更してみてください。200px以下にはなりません。祥子(わださちこ)フリーランスのWebデザイナー7年目です。テニスと音楽とビールが好きです。大石ゆかり内容分かりやすくて良かったです!田島悠介ゆかりちゃんも分からないことがあったら質問してね!大石ゆかり分かりました。ありがとうございます!TechAcademyでは、初心者でもオリジナルWebサイトを公開できるオンラインブートキャンプWebデザイン講座を開催しています。挫折しない学習方法を知れる説明動画や、現役エンジニアとのビデオ通話とチャットサポート、学習用カリキュラムを体験できる無料体験も実施しているので、ぜひ参加してみてください。30分間、オンラインでどんなことでも質問し放題です。あなたの相談に真摯に向き合います。「漠然としているがプロの話を聞いてみたい」こんな気持ちでも大丈夫です。お気軽にご参加ください。※体験用のカリキュラムも無料で配布いたします。関連する記事CSSでの正規表現の使い方を現役エンジニアが解説【初心者向け】CSSでの正規表現の使い方について、TechAcademyのメンター(現役エンジニア)が実際のコードを使用して初心者向けに解説します。CSSについてそも...CSSCSSで画像をトリミングして表示する方法【初心者向け】CSSで画像をトリミングして表示する方法について解説します。トリミングとは画像の一部分だけを切り抜いて表示することです。そもそもCSSについてよく分から...CSSCSSで回転アニメーションを実現する方法を現役デザイナーが解説【初心者向け】CSSで回転アニメーションを実現する方法について、TechAcademyのメンター(現役エンジニア)が実際のコードを使用して初心者向けに解説します。いくつかの方...CSSCSSの親要素から子要素へのスタイルの適用方法を現役エンジニアが解説【初心者向け】CSSの親要素から子要素へのスタイルの適用方法について、TechAcademyのメンター(現役エンジニア)が実際のコードを使用して初心者向けに解説します。...CSSCSSのflexで内容に合わせて高さを変える方法【初心者向け】CSSのflexで内容に合わせて高さを変える方法について解説します。flexboxではデフォルトで高さが揃った状態で表示されますが、内容に応じて表示するようにし...CSSCSSだけでimgタグのsrcを差し替える方法を現役エンジニアが解説【初心者向け】CSSだけでimgタグのsrcを差し替える方法について、TechAcademyのメンター(現役エンジニア)が実際のコードを使用して初心者向けに解説します。)を使う方法【初心者向け】CSSで書くcalcファンクションの使い方について、テックアカデミーのメンター(現役エンジニア)が実際のコードを使用して初心者向けに解説します。要素の水平や垂直のセンタリング、可変的な幅の指定や均等に要素を配置したい場合にもcalcファンクションを使えます。異なる単位で複雑な計算も簡単に指定できます。レイアウトやサイズ指定を楽に行うことができるので、少し応用的な使い方ですが、覚えておくと便利でしょう。CSSの書き方について解説した記事を読むとさらに理解が深まります。方法があるけどcalcファンクションを使えば簡単だよ。3)のように指定できるよ。