CSS 勉強まとめ

さてさて、CSSを勉強し始めて4か月。のろのろながらも教材の全動画を勉強し終えたました。HTMLの時同様遅すぎでは？？？という感が否めませんが、途中でやめずコツコツ続けてるだけいいとしよう！ 今まで勉強してきたことを記事にまとめてきたわけですが、1回で物になったとは思っていないので、今後の（自分の）見直し用に下記に簡易リンクを設置しておきます。 CSS 勉強まとめ 基礎編 CSSとは？ CSSの書き方について 直接CSSを書き込む方法 styleタグによるスタイル適応の仕方 外部ファイルによるスタイル適応について セレクタ編 ブロック要素とインライン要素について セレクタの種類と書き方について…

影をつける方法について

本日の教材動画はこちら 今回はボックスに影（ドロップシャドウ）をつける方法です。色々なものにつけれるようですが、基本的な使い方は同じとのこと。 box-shadow の使い方について ボックスに影をつけるには box-shadow プロパティを使います。6つの値があります。 水平方向の影のオフセット値（必須） 垂直方向の影のオフセット値（必須） ぼかしの距離（強さ） 広がりの距離 影の色 insetの有無（内側の影にするか） では順番に見ていきましょう。 水平と垂直方向の影を指定する まずこの2つはセットです。水平だけ、垂直だけ指定しても影はできませんので注意。使い方としては box-shad…

角丸プロパティのあれこれについて

本日の教材動画はこちら 今回は引き続きボーダー関連について。前回はボーダー線のあれこれでしたが、今回はボーダーの角についてお勉強していきます。 border-radius について ボックスには必ず左上、右上、右下、左下と四隅がありますよね。border-radiusはその四隅のコーナー部分をどうするかを指定できるプロパティになります。何もしなければただの四角形のボックスになりますが、手を加えることで角丸にしたり、円形にしたりなどできます。 それぞれ指定したり、一括指定できたりするのですが、文字で説明するより実際に見てもらったほうが早いので早速書きながら見ていきましょう。 ページソースと外部C…

borderプロパティについて

本日の教材動画はこちら 今回はちょくちょく利用してきたborderについて掘り下げてみていきましょう。今までは黒色の実線を使う事が多かったかと思いますが、borderプロパティでより細かく姿勢ができるようです。 border について そもそもボーダーの範囲ってどこぞ？って思いますが、「ボックスの外側の線」「マージンの内側であり、パティングの外側」という範囲のようです。前回で勉強したbackground-clipを参照するとちょっとわかりやすいかもですね。では順番でborderの細かいプロパティを見ていきましょう。 border-style ボーダーの種類を決める border-styleでは…

背景のサイズと適応範囲について

本日の教材動画はこちら 引き続き、背景指定のあれこれについて深く掘り下げて勉強していきます。今回は背景のサイズ指定についてと、背景の適応範囲について勉強していきましょう。 background-size で指定できる値について background-sizeは文字通り背景の大きさを指定できるプロパティです。指定できる値は以下の5つです。 auto → 自動的に大きさを調節（初期値） contain → 縦横比を保持したまま、背景領域に収まる最大サイズになるよう拡大縮小する cover → 縦横比は保持したまま、背景領域を完全に覆う最小サイズになるよう拡大縮小する 値指定 → 〇pxという形で、…

背景の繰り返し・表示位置・固定表示の指定について

本日の教材動画はこちら 前回に引き続き、背景指定のあれこれについて深く掘り下げて勉強していきます。動画の後半が死ぬほど説明不足だったため、実践される人は一旦最後まで読んでいただけるとわかりやすいかと思います。 背景の繰り返し設定について 前回一瞬だけ触れた背景画像の繰り返し設定のプロパティについて、より詳細に見ていきましょう。まず背景の繰り返し設定は background-repeat プロパティを使用します。設定できる値は下記の4つ。 no-repeat → 繰り返さない repeat → 縦横に繰り返す repeat-x → 横に繰り返す repeat-y → 縦に繰り返す 実際に使ってみ…