コーディングが楽になる知っておくと便利なCSS10選
Вставка
- Опубліковано 24 лют 2023
- 普段使いできるCSSプロパティで便利なものを10個ピックアップしました。
コーディングが少し楽になると思いますので、知らないプロパティがあればぜひこの機会に覚えてみてください。
＝＝＝ 動画学習サービス「unazuki」
Web制作を学べる動画学習サービスを運営しています。
unazuki.online/
・JavaScriptコース
unazuki.online/javascript
・WordPressコンプリートコース
unazuki.online/wordpress
・HTML & CSSコース
unazuki.online/html_css
＝＝＝ SNS
■ Twitter： / life_toshindai
＝＝＝ 経歴
Webデザイナー・エンジニア
〜 2013 自動車メーカー系の企画職
2014 〜 フリーランスWebデザイナー
2016 〜 法人化 ソーイ株式会社
-------------------- 簡単な自己紹介
都内でWeb制作をやっています。
苦労した経験をもとに、
UA-camでは過去の自分が欲しかった
知識・技術・マインドなどをスライドやデモ解説で発信しています💪
🏋️♂️活動
WordPressやWebデザイン講座など有益な情報を発信。
初心者向けの動画〜超実践向けの動画まで多数公開しています。
再生リストも作っているのでよろしければご覧ください。
✈️出身
福岡県
---------------------------
Webデザイナーとして活躍される方の
知的好奇心・技術的向上心に少しでもお役に立てたらいいなと思っています
(｀･ω･´)ゞ
詳しくはチャンネル概要欄もご覧ください。
コードを見ながらでわかりやすかったです。
良かったですー！
ぜひ参考にしてください！
出会えるか出会えないかは本当に重要ですよね。
いつも良質な動画を投稿してくださりありがとうございます！
ですよね♪
ありがとうございます！
まさに書こうと思ってたコメント！
完全に同意です！
いつも本来の仕組みをよく理解しないままlinear-gradientを使っていましたが、仕組みをきちんと理解できたので今後の実装がうまくできそうです。
良い機会になったようでご覧いただけて良かったです！
とても勉強になりました。
以下学習メモです。
動画にでてきたCSSプロパティ
①gap
②order
③background-size
④object-fit
⑤white-space
⑥scroll-behavior
⑦postion:sticky
⑧letter-spacing
⑨writting-mode
⑩liear-gradient
① gap
余白を簡単に付けられる
gapプロパティは、FlexboxやGridコンテナ内のアイテム（子要素）の間隔を指定します。row-gapとcolumn-gapの2つの値を取ることができ、それぞれ行と列の間隔を調整します。
② order
並び順指定
orderプロパティは、Flexboxアイテムの表示順序を制御します。デフォルトではすべてのアイテムの order 値は 0 ですが、order プロパティを使用することで表示順序を変更できます。
③ background-size
画像を全部表示するか枠いっぱいで表示するか
background-sizeプロパティは、背景画像のサイズを指定します。主に contain（画像を全て表示）や cover（画像で枠を満たす）などの値を使用して画像の拡大・縮小を制御します。
④ object-fit
background-sizeと一緒
object-fitプロパティは、やなどの置換要素のサイズやアスペクト比の調整に使用されます。coverやcontainなどの値を指定して、要素内におさまるように調整できます。
⑤ white-space
テーブル内でテキスト折り返し禁止
white-spaceプロパティは、テキスト内の空白や改行の扱いを制御します。nowrapを指定すると、テキストが折り返されずに連続して表示されます。
⑥ scroll-behavior
一瞬でページトップに戻れる
scroll-behaviorプロパティは、ページ内のスクロールアクションの挙動を制御します。smoothを指定すると、スムーズなスクロールアニメーションが有効になります。
⑦ position: sticky
画面スクロールしても固定
position: sticky;は、要素を通常のフローに従って配置し、一定のスクロール量または親要素の境界に達すると固定位置になります。スクロール時にヘッダーやサイドバーなどを固定するのに利用されます。
⑧ letter-spacing
文字間隔を広げる
letter-spacingプロパティは、テキスト内の文字間隔を調整します。正の値を指定すると文字が離れ、負の値を指定すると文字が寄ります。
⑨ writing-mode
縦書きにできる
writing-modeプロパティは、テキストやレイアウトの書き方の方向を指定します。主に、縦書きや横書きの指定に使用されます。
⑩ linear-gradient
蛍光ペンでアンダーラインひける
linear-gradientは、線形グラデーションを作成するための関数です。2つ以上の色を指定し、それらの色が線形に混ざるグラデーションが作成できます。例えば、背景に縦方向のグラデーションを追加するのに利用されます。
🇯🇵🇯🇵🇯🇵いいですね🇯🇵
今まで知らなかったCSSなので、とても勉強になりました。 ありがとうございます。
ちょっと気になったのは、demoN の説明をしている画面で、demoN-1のコードが見えていて、混乱しました。