Zenn
🌞

学習記録4_CSSの色やフォントに関連するプロパティ

2022/12/11に公開
CSS
初心者
idea

ひとこと

  • 天気が良くて気持ちいい休日だー！朝からみなとみらい散歩してから自習へ。捗る🌞(最高気温14°/最低気温7°)

教材

https://www.udemy.com/share/105qh83@ajKGu7peAqJPriZy6R-3rNLTCheyosKEJjzl63HlrI0sLu3IKBx37T1iOOHXWIc1/

学習範囲

HTMLを終えCSSに😄
今回はCSS入門

  • 超重要
    • CSSの概要
    • CSSの基本的な構文
    • CSSファイルの読み込み
    • CSSでの色の使い方: RGB, 16新数, etc.
    • font-family
  • 重要
    • よく使われるCSSテキストのプロパティ

ノート📓

  1. CSSとは
  2. CSSの書き方
  3. colorプロパティ
  4. background-colorプロパティ
  5. 色について: 140のカラーネーム/RGB/16進数
  6. CSSのセミコロン
  7. text-alignプロパティ
  8. font-weightプロパティ
  9. text-decolationプロパティ
  10. line-heightプロパティ
  11. letter-spacingプロパティ
  12. font-sizeプロパティ
  13. font-familyプロパティ
  14. CSS演習課題: ロゴ🧐?をつくる

1. CSSとは

  • CSSは文書の体裁や見栄えを表現するためにつかう
  • 要素が画面上でどのように表現されるのかを定義する言語
  • CSSはCascading Style Sheetsの略
  • CSSの構造は 1/ selector, 2/property, 3/value

これもCSS

2. CSSの書き方


通りある

  • インラインスタイル
    • 非推奨,ドキュメント間でスタイルの共有ができないため
  • <style>要素
    • HTMLの<head>要素内に記載する
    • インラインスタイルと同じ理由で非推奨
  • CSSファイル
    • もっとも推奨される方法！
    • <head>要素内の<link>要素でCSSファイルを読み込む
    • <link rel="stylesheet" href="style.css">

3. colorプロパティ

4. background-colorプロパティ

https://developer.mozilla.org/ja/docs/Web/CSS/background-color

  • その名の通り背景色
  • 色以外も指定できるbackgroundプロパティもあるよ

初のCSS演習

5. 色について: 140のカラーネーム/RGB/16進数

Modern browsers support 140 named colors, which are listed below. Use them in your HTML and CSS by name, Hex color code or RGB value.

  • とはいえディスプレイで表示できるのは 16,000,000色もある。それに比べると140色はわずかでしかない。。
  • RGB: Red(⾚), Green(緑),Blue(⻘)の組み合わせ, チャンネルという。各チャンネルは0-255の値をとる
  • Colorpicker
  • 16進数: これもRed(⾚),Green(緑), Blue(⻘)チャンネル。各チャンネルは0-255の値をとるが、16進数で表現する, HEXともいう
    • 1~9の次はA, 1チャンネルのffはRBGにおける255といっしょ

6. CSSのセミコロン

  • CSSにおいてはプロパティおわりのセミコロン忘れないように！

7. text-alignプロパティ

  • ←水平方向→の左寄せ、中央寄せ、右寄せ、散らす　など

https://developer.mozilla.org/ja/docs/Web/CSS/text-align

text-align CSS プロパティは、ブロック要素または表のセルボックス内におけるインラインレベルコンテンツの水平方向の配置を設定します。

8. font-weightプロパティ

  • フォントの太さ

https://developer.mozilla.org/ja/docs/Web/CSS/font-weight

font-weight は CSS のプロパティで、フォントの太さ (あるいは重み) を指定します。

font-weight構文

/* キーワード値 */
font-weight: normal;
font-weight: bold;

/* 親要素に対して相対的なキーワード値 */
font-weight: lighter; //フォントの太さが親要素よりも相対的に 1 つ細くなります。
font-weight: bolder; //フォントの太さが親要素よりも相対的に1つ太くなります。

/* 数値のキーワード値 */
font-weight: 100;
font-weight: 200;
font-weight: 300;
font-weight: 400;// normal
font-weight: 500;
font-weight: 600;
font-weight: 700;// bold
font-weight: 800;
font-weight: 900;

/* グローバル値 */
font-weight: inherit;
font-weight: initial;
font-weight: revert;
font-weight: unset;

9. text-decolationプロパティ

  • 下線や打ち消し線などテキスト装飾
    • 結局よく使うのは, 下線を消す/下線をいれる/打ち消し線をいれる、ときくらい
  • 線の色や種類も変えることができる
    • text-decoration: green wavy underline; 色はgreenで種類はwavy(波線)のunderline(下線)みたいな
  • 線を無くすこともできる,「ハイパーリンクのanchorタグにて下線つけなくない！」ってときはtext-decoration: none`でOK

https://developer.mozilla.org/ja/docs/Web/CSS/text-decoration

text-decoration は CSS の一括指定プロパティで、テキストの装飾的な線の表示を設定します。これは text-decoration-line、text-decoration-color、text-decoration-style およびさらに新しい text-decoration-thickness プロパティの一括指定です。

10. line-heightプロパティ

  • 1行の高さ
  • いろんな種類の仕方がある(あとで)下記/MDN参照
line-height構文

/* キーワード値 */
line-height: normal;

/* 単位のない値: この値を要素のフォントサイズに
掛けたものを使用する */
line-height: 3.5;

/* <length> 値 */
line-height: 3em;

/* <percentage> 値 */
line-height: 34%;

/* グローバル値 */
line-height: inherit;
line-height: initial;
line-height: revert;
line-height: unset;

https://developer.mozilla.org/ja/docs/Web/CSS/line-height

line-height は CSS のプロパティで、行ボックスの高さを設定します。これは主にテキストの行間を設定するために使用します。ブロックレベル要素では、要素に含まれる行ボックスの最小の高さを指定します。

11. letter-spacingプロパティ

  • 文字の間のスペース

https://developer.mozilla.org/ja/docs/Web/CSS/letter-spacing

letter-spacing は CSS のプロパティで、テキストの水平方向の字間のスペースに関する挙動を設定します。この値はテキストを描画する際に文字間の自然な空間に追加されます。

12. font-sizeプロパティ

  • 文字のサイズ (なんだけど、割と深いので注意)
    • 相対単位と絶対単位
    • PX - 絶対単位, HTMLならどこでも同じサイズになる　

https://developer.mozilla.org/ja/docs/Web/CSS/font-size

font-size は CSS のプロパティで、フォントの大きさを定義します。フォントの大きさを変更すると、フォントの大きさに相対的な <length> の単位例えば em, ex, なども更新されます。

font-size構文

/* <absolute-size> 値 */
font-size: xx-small;
font-size: x-small;
font-size: small;
font-size: medium;
font-size: large;
font-size: x-large;
font-size: xx-large;
font-size: xxx-large;

/* <relative-size> 値 */
font-size: smaller;
font-size: larger;

/* <length> 値 */
font-size: 12px;
font-size: 0.8em;

/* <percentage> 値 */
font-size: 80%;

/* グローバル値 */
font-size: inherit;
font-size: initial;
font-size: revert;
font-size: unset;

13. font-familyプロパティ

  • フォント
    • 指定したフォントが使えるかどうかは別
    • https://www.cssfontstack.com/ で、MacやWindowsそれぞれが標準で備えてるフォントがわかる, けどあんまり多くないらしい
    • 値にはArialなどのフォント名あるいはsan-serifなど総称ファミリを書くことができる
      • 代替として総称ファミリを最後尾に指定するといい

https://developer.mozilla.org/ja/docs/Web/CSS/font-family

CSS の font-family プロパティは、選択した要素に対して、フォントファミリー名や総称ファミリー名の優先順位リストを指定することができます。

14. CSS演習課題: ロゴ🧐?をつくる

h1(見出し要素)を以下のようにスタイルしましょう：

  • 英語を全部CSSで大文字にしましょう（やったことないのでググりましょう！）
  • font-familyはmonospace
  • textは中央揃え
  • font-weightは100
  • テキストの大きさは40px
  • 文字間は20pxあける
  • plum色のwavyな波線

どんどん進もう😋

Discussion