＊max-width・min-widthの紹介です＊

Webサイトを作っていると、「この画像は画面サイズに合わせて拡大されるようにしたいけど、○○px以上には大きくなって欲しくない」…というケースがよくあります。逆に、「一定の大きさ以下に縮小されると困る」という場合も。

そこで今回は、要素の最大・最小幅を指定できるmax-widthプロパティ、min-widthプロパティを紹介していきます。

＊background-image・size・position・repeatの紹介です＊

普通に画像を貼り付けるだけであれば、HTMLのimgタグを使用すれば良いですが、画像の上に文字や表など別の要素を配置したい場合、imgタグによる画像の挿入では色々と不都合が出てきてしまいます。

そこで今回は、背景画像を指定するための、background-imageプロパティと、それに関連するCSSプロパティを紹介していきます。

＊border-radiusの紹介です＊

Webサイトを作り始めの頃は、正方形や長方形ばかりを並べてしまい、「見やすいんだけど会議の資料っぽい感じ」になってしまいがちです。ということで、今回は四角形を卒業するためのCSSプロパティである、border-radiusプロパティを紹介していきます。

＊color・background-colorの紹介です＊

文字色や背景色の調整は、Webサイト全体のイメージを左右する重要なCSS調整になります。CSSの調整自体はとても簡単なので、marginやwidthの設定と同時に、最初に覚えておきたいCSSプロパティです。

今回はグリッドレイアウトにしたものを中央に配置したり、右端に配置したりしたい場合のテクニックを紹介します、。フレックスボックスの場合と比べて、仕様や注意する点が異なる部分もあるので、しっかり確認していきましょう！ &#8 […]

グリッドレイアウトのレスポンシブでは、ブレークポイントでカラム数を切り替えるCSSを入れても良いのですが、違う方法もあります。カラム数を何列と指定せずに、画面幅に合わせて自動で折り返されるようにする方法です。今回はその方 […]

グリッドレイアウトでグリッド状に配置したアイテムは、何も設定しなければ余白がゼロでアイテム同士がくっついた状態になってしまいます。そこで今回は、グリッドアイテム間の余白を一括で設定できるCSSプロパティを紹介します！ & […]

例えばフォトギャラリーなど、縦にも横にも規則正しく写真を並べたい場合、要素をグリッド（格子状）のように配置する必要があります。このようなケースでは、フレックスボックスよりもグリッドレイアウトの方が適しているので、今回はそ […]

display: flex;ではフレックスアイテムを横並びにすることができますが、フレックスアイテムの数が多くてボックス内に納まりきらないこともあり得ます。また、フレックスアイテムを手前ではなく奥から詰めていきたいという […]

今回はちょっと応用です！display: flex; で横並びにしたフレックスアイテムは何も設定していない場合、画面や親要素の幅に合わせて縮小はしますが、拡大はしません（フレックスアイテムのwidthを％で指定していたら […]