/category/css
CSS
見た目やレイアウトの「やり方」をやさしく解説。
15 件
- 01スマホ対応の第一歩 — メディアクエリの書き方と考え方画面幅によってレイアウトを変えるのがメディアクエリです。書き方は簡単ですが、順番と考え方を間違えると効かなくなります。まずは1か所から始めましょう。
- 02hover と focus — 「押せそう」を伝える状態のスタイルリンクやボタンは、見た目が変わることで「押せる」と伝わります。マウス以外で操作する人のための focus まで含めて、セットで覚えましょう。
- 03Flexboxで横並びにする — 最初に覚える3つのプロパティ横並びはCSSの最初の山場です。Flexboxはプロパティが多く見えますが、入り口で必要なのは3つだけ。並び方が変わる様子を動かしながら確かめます。
- 04transition でなめらかに変化させる — 1行で印象が変わるホバーで色が「パッ」と変わるか「ふわっ」と変わるか。この差を作るのが transition です。書き方はほぼ1行。やりすぎない基準も添えます。
- 05CSS Grid 入門 — カードを格子状に並べる最短ルートFlexboxが「並べる」なら、Gridは「区画を作る」道具です。カード一覧の定番の書き方を、たった3行で作れるところまで案内します。
- 06position 入門 — 重ねる・貼り付けるための4つの値バッジを右上に置く、ヘッダーを上に固定する。この手の表現に使うのが position です。混乱しやすい absolute の基準も、動かしながら整理します。
- 07px・rem・%・vw の使い分け — 迷ったら何を使うか単位が多すぎて選べない。実務で使うのは4つだけで、しかも用途はほぼ決まっています。「なぜ rem を使うのか」まで含めて説明します。
- 08余白の考え方 — margin と padding を使い分ける見た目が素人っぽくなる原因の多くは余白です。margin と padding の違い、そして「どちらで空けるべきか」の判断基準を、実際に動かして確かめます。
- 09画像の見せ方を整える — 潰れる・はみ出すを止める2行写真の縦横比がおかしくなる、画面からはみ出す。この2つは、たった2行で解決します。object-fit を知っているかどうかで仕上がりが変わります。
- 10影の付け方 — box-shadow の4つの数字の意味コピペで使いがちな box-shadow。4つ並ぶ数字の意味が分かれば、自分で自然な影を作れます。やりすぎた影が古く見える理由も説明します。
- 11文字を読みやすく整える — サイズ・行間・色の決め方文字の指定は種類が多く、どれをどう決めればいいか迷います。実務で使うのは実質4つだけです。読みやすさが変わる基準値とあわせて確かめます。
- 12枠線と角丸 — border と border-radius の書き方枠線は3つの値を並べるだけ。角丸は数字ひとつ。単純なのに、指定する場所を間違えるとレイアウトがずれます。その理由まで含めて確かめます。
- 13背景の付け方 — 色・画像・グラデーションの基本background は指定できることが多く、覚えるのが大変に見えます。実際に使うのは4つだけ。背景画像がずれる・繰り返される問題もここで解決します。
- 14CSSの当て方とセレクタの基本 — どこに、何を指定するかCSSは「どこに」「何を」の2つだけでできています。その「どこに」を決めるのがセレクタです。書き方3種類と、初心者が使う範囲のセレクタをまとめます。
- 15CSSでの色の指定 — #ffffff の6文字が意味するものcolorに書く謎の6文字。あれは「赤・緑・青をどれだけ混ぜるか」の指定です。仕組みが分かると、色を自分で微調整できるようになります。