裏CSS.pdf

 裏CSS.pdf

78d138a74c8135fe40735a286a71f4c7?s=128

IMANISHI TOSHIFUMI

November 21, 2018
Tweet

Transcript

  1. ཪ $44 άϥσʔγϣϯร

  2. ͭͷ୯৭എܠΛάϥσʔγϣϯͰදݱ

  3. ͭͷ୯৭എܠΛάϥσʔγϣϯͰදݱ background: linear-gradient(#e66465, #9198e5);

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

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

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

    background: linear-gradient(#e66465 50%, #9198e5 50%); ΧϥʔετοϓͷҐஔ͕ಉ͡Ґஔʹࢦఆ͞Εͨ৔߹ɺ࠷ॳʹ ࢦఆ͞Εͨ৭͔Β࠷ޙʹࢦఆ͞Εͨ৭΁ͷۃখ෯ͷάϥσʔ γϣϯ͕ੜ੒͞ΕΔɻͭ·Γɺͭͷ৭͸εϜʔζʹมԽ͢ ΔͷͰ͸ͳ͘ٸʹมԽ͢ΔΑ͏ʹදࣔ͞ΕΔɻ 同じカラーストップの設定
  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); 同じカラーストップの設定 同じカラーストップの値を 繰り返し記述する必要はない
  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); 同じカラーストップの設定 同じカラーストップの値を 繰り返し記述する必要はない ͋ΔΧϥʔετοϓͷҐஔͷ஋͕ҎલͷΧϥʔετοϓΑΓ ΋খ͍͞৔߹ɺҎલͷΧϥʔετοϓͷதͰ࠷΋େ͖͍஋͕ ࢦఆ͞Ε͍ͯΔͱݟͳ͞ΕΔɻͭ·Γɺͭ໨ͷΧϥʔε τοϓΛθϩʹࢦఆ͢Δͱɺͭ໨ͱҰக͢ΔΑ͏ʹҐஔ͕ ௐ੔͞ΕΔɻ
  9. ετϥΠϓΛάϥσʔγϣϯͰදݱ

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

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

    0); background-size: 100% 30px; グラデーションのサイズ設定
  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%;
  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; 斜めの設定
  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; 斜めの設定 冗長
  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;
  16. ·ͱΊ • MJOFBSHSBEJFOU ͰάϥσʔγϣϯҎ֎ͷදݱ͕Մೳ • Χϥʔετοϓͷ࢓༷Λཧղ͢Δ • SFQFBUJOHMJOFBSHSBEJFOU Ͱ؆ུԽ