裏CSS.pdf

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
    Ͱ؆ུԽ