裏CSS.pdf

 裏CSS.pdf

78d138a74c8135fe40735a286a71f4c7?s=128

IMANISHI TOSHIFUMI

November 21, 2018
Tweet

Transcript

  1. 6.

    ͭͷ୯৭എܠΛάϥσʔγϣϯͰදݱ background: linear-gradient(#e66465, #9198e5); background: linear-gradient(#e66465 20%, #9198e5 80%); カラーストップの設定

    background: linear-gradient(#e66465 50%, #9198e5 50%); ΧϥʔετοϓͷҐஔ͕ಉ͡Ґஔʹࢦఆ͞Εͨ৔߹ɺ࠷ॳʹ ࢦఆ͞Εͨ৭͔Β࠷ޙʹࢦఆ͞Εͨ৭΁ͷۃখ෯ͷάϥσʔ γϣϯ͕ੜ੒͞ΕΔɻͭ·Γɺͭͷ৭͸εϜʔζʹมԽ͢ ΔͷͰ͸ͳ͘ٸʹมԽ͢ΔΑ͏ʹදࣔ͞ΕΔɻ 同じカラーストップの設定
  2. 7.

    ͭͷ୯৭എܠΛάϥσʔγϣϯͰදݱ background: linear-gradient(#e66465, #9198e5); background: linear-gradient(#e66465 20%, #9198e5 80%); カラーストップの設定

    background: linear-gradient(#e66465 50%, #9198e5 50%); background: linear-gradient(#e66465 50%, #9198e5 0); 同じカラーストップの設定 同じカラーストップの値を 繰り返し記述する必要はない
  3. 8.

    ͭͷ୯৭എܠΛάϥσʔγϣϯͰදݱ background: linear-gradient(#e66465, #9198e5); background: linear-gradient(#e66465 20%, #9198e5 80%); カラーストップの設定

    background: linear-gradient(#e66465 50%, #9198e5 50%); background: linear-gradient(#e66465 50%, #9198e5 0); 同じカラーストップの設定 同じカラーストップの値を 繰り返し記述する必要はない ͋ΔΧϥʔετοϓͷҐஔͷ஋͕ҎલͷΧϥʔετοϓΑΓ ΋খ͍͞৔߹ɺҎલͷΧϥʔετοϓͷதͰ࠷΋େ͖͍஋͕ ࢦఆ͞Ε͍ͯΔͱݟͳ͞ΕΔɻͭ·Γɺͭ໨ͷΧϥʔε τοϓΛθϩʹࢦఆ͢Δͱɺͭ໨ͱҰக͢ΔΑ͏ʹҐஔ͕ ௐ੔͞ΕΔɻ
  4. 12.

    ετϥΠϓΛάϥσʔγϣϯͰදݱ background: linear-gradient(#e66465 50%, #9198e5 0); background: linear-gradient(#e66465 50%, #9198e5

    0); background-size: 100% 30px; グラデーションのサイズ設定 方向の設定 background: linear-gradient(90deg, #e66465 50%, #9198e5 0); background-size: 30px 100%;
  5. 13.

    ετϥΠϓΛάϥσʔγϣϯͰදݱ background: linear-gradient(#e66465 50%, #9198e5 0); background: linear-gradient(#e66465 50%, #9198e5

    0); background-size: 100% 30px; グラデーションのサイズ設定 方向の設定 background: linear-gradient(90deg, #e66465 50%, #9198e5 0); background-size: 30px 100%; background: linear-gradient(45deg, #e66465 25%, #9198e5 0, #9198e5 50%, #e66465 0, #e66465 75%, #9198e5 0); background-size: 30px 30px; 斜めの設定
  6. 14.

    ετϥΠϓΛάϥσʔγϣϯͰදݱ background: linear-gradient(#e66465 50%, #9198e5 0); background: linear-gradient(#e66465 50%, #9198e5

    0); background-size: 100% 30px; グラデーションのサイズ設定 方向の設定 background: linear-gradient(90deg, #e66465 50%, #9198e5 0); background-size: 30px 100%; background: linear-gradient(45deg, #e66465 25%, #9198e5 0, #9198e5 50%, #e66465 0, #e66465 75%, #9198e5 0); background-size: 30px 30px; 斜めの設定 冗長
  7. 15.

    ετϥΠϓΛάϥσʔγϣϯͰදݱ background: linear-gradient(#e66465 50%, #9198e5 0); background: linear-gradient(#e66465 50%, #9198e5

    0); background-size: 100% 30px; グラデーションのサイズ設定 方向の設定 background: linear-gradient(90deg, #e66465 50%, #9198e5 0); background-size: 30px 100%; 斜めの設定 background: repeating-linear-gradient(45deg, #e66465 0, #e66465 25%, #9198e5 0, #9198e5 50%); background-size: 30px 30px;