CSS入門情報の形を視覚化する

ܳज़৘ใԋशσβΠϯ 8FC ୈ̑ճɿ$44ೖ໳ ৘ใͷܗΛࢹ֮Խ͢Δ ೥݄೔ ౦ژ᥁ज़େֶܳज़৘ใηϯλʔ ".$ ୲౰ɿాॴ३

$44ҙຯͱߏ଄ )5.- ʹදݱΛ༩͑Δ ‣ $44ˠ8FCϖʔδʹɺදݱΛՃ͑Δ ‣ )5.-ͷߏ଄ͷදݱ͔Β͸ಠཱ͍ͯ͠Δ ‣ ৘ใͷ͔ͨͪΛࢹ֮Խ͢Δػೳ )5.-
ϚʔΫΞοϓ ҙຯɾߏ଄ $44 ελΠϧγʔτ දݱɾσβΠϯ

$44ͱ͸ ‣ $44$BTDBEJOH4UZMF4IFFU ‣ ΧεέʔσΟϯάɾελΠϧɾγʔτ ‣ ࠷΋޿͘࢖༻͞Ε͍ͯΔɺελΠϧγʔτݴޠͷͻͱͭ ‣ ݱࡏ͸$44͔Β$44΁ͷҠߦظ ‣
͜ͷतۀͰ͸ɺجຊ෦෼͸$44ͰɺඞཁʹԠͯ͡$44Λ ͱΓೖΕ͍͖ͯ·͢

$44ʹΑΔදݱͷࢦఆ ‣ දࣔͷྲྀΕ )5.-จॻ )5.-จॻ )5.-จॻ

$44ʹΑΔදݱͷࢦఆ ‣ දࣔͷྲྀΕ 8FCϒϥ΢β ཁૉΛ෼ղ πϦʔߏ଄ ελΠϧγʔτͷࢦఆ )5.-จॻ )5.-จॻ )5.-จॻ

$44ʹΑΔදݱͷࢦఆ ‣ දࣔͷྲྀΕ 8FCϒϥ΢β ཁૉΛ෼ղ πϦʔߏ଄ ελΠϧγʔτ $44 ελΠϧγʔτͷࢦఆ
)5.-จॻ )5.-จॻ )5.-จॻ

$44ʹΑΔදݱͷࢦఆ ‣ දࣔͷྲྀΕ 8FCϒϥ΢β ཁૉΛ෼ղ πϦʔߏ଄ ཁૉ͝ͱʹ ελΠϧΛ ద༻ ελΠϧγʔτ
$44 ελΠϧγʔτͷࢦఆ )5.-จॻ )5.-จॻ )5.-จॻ

$44ʹΑΔදݱͷࢦఆ ‣ දࣔͷྲྀΕ 8FCϒϥ΢β ཁૉΛ෼ղ πϦʔߏ଄ ཁૉ͝ͱʹ ελΠϧΛ ద༻ ελΠϧγʔτ
$44 දࣔ ελΠϧγʔτͷࢦఆ )5.-จॻ )5.-จॻ )5.-จॻ

ελΠϧγʔτΛར༻͢ΔϝϦοτ ‣ ෳ਺ͷจॻશମʹҰ؀ͨ͠σβΠϯΛద༻Ͱ͖Δ ‣ ෳ਺จॻͷ؅ཧ͕༰қʹͳΔ ‣ ग़ྗϝσΟΞʹ͋ΘͤͨɺදݱελΠϧͷઃఆ ‣ )5.-ͷ໾ׂΛɺҙຯͷߏ଄Λදݱ͢Δ͜ͱʹప͢Δ͜ͱ͕Ͱ ͖Δ
‣ ελΠϧγʔτ͕දݱ෦෼ΛશͯҾ͖ड͚Δ

ελΠϧઃఆͷجຊ ! ! ηϨΫλ\ϓϩύςΟ஋^ ! ! ‣ ηϨΫλɿର৅Λબ୒͢Δ෦෼ ‣ ϓϩύςΟɿઃఆ͢ΔελΠϧͷੑ࣭
‣ ৭ɺେ͖͞ɺ৔ॴFUD ‣ ஋ɿ࣮ࡍͷ஋

ελΠϧઃఆͷجຊ ྫɿ ! p {color:blue} ! ! ‣ ద༻͢ΔཁૉˠQཁૉ ஈམ
‣ ద༻͢ΔϓϩύςΟˠDPMPS ৭ ‣ ద༻͢Δ஋ˠCMVF ੨

ελΠϧఆٛΛ͢Δํ๏ ‣ ֎෦$44ϑΝΠϧʹΑΔελΠϧઃఆ ‣ ֎෦ϑΝΠϧʹελΠϧΛهड़͢Δ ‣ )5.-ϑΝΠϧ͔Β͸ɺελΠϧϑΝΠϧͷ৔ॴΛࢦఆ͢ Δ ! ‣
)5.-ଆͷఆٛྫ ‣ IFBEཁૉͷதͰࢦఆ͢Δ ! <head> <link rel="stylesheet" href="style.css" /> </head>

‣ IFBEཁૉ಺ͷTUZMFཁૉʹهड़ ‣ IFBEཁૉͷதʹTUZMFཁૉΛՃ͑ͯએݴ͢Δ ‣ UZQFଐੑͰελΠγʔτͷछྨΛࢦఆ͢Δ ελΠϧఆٛΛ͢Δํ๏ <head> <style type="text/css">
p {color : blue} </style> </head>

ελΠϧఆٛΛ͢Δํ๏ ‣ ΠϯϥΠϯTUZMFଐੑ ‣ )5.-ϑΝΠϧͷλάͷϓϩύςΟͱͯ͠௚઀ॻ͖ࠐΉ ‣ TUZMFlzͱ͍͏ࢦఆͰελΠϧγʔτͱͯ͠ೝࣝ͞Ε Δ <p style="color:red">͜Ε͸੺৭</p>

ʮΧεέʔσΟϯάʯͷҙຯ ‣ ΧεέʔσΟϯάͱ͸ ‣ ελΠϧΛෳ਺ՕॴͰઃఆ͢Δ͜ͱ͕Մೳ ‣ ಉ͡ཁૉλΠϓͷηϨΫλͰҟͳΔελΠϧએݴ͕͞Εͨ৔߹ ‣ ҰఆͷϧʔϧͰ༏ઌॱҐΛ͚ͭͯɺελΠϧΛద༻͢Δ

ελΠϧͷछྨ ‣ ࡞ऀελΠϧ ! ‣ 8FCϖʔδͷ࡞੒ऀ͕ࢦఆͨ͠ελΠϧ ! ‣ ֎෦$44ϑΝΠϧʹΑΔελΠϧઃఆ ‣
IFBEཁૉ಺ͷTUZMFཁૉʹهड़ ‣ ΠϯϥΠϯTUZMFଐੑ

ελΠϧͷछྨ ‣ ϢʔβʔελΠϧ ‣ ϒϥ΢βͷ؀ڥઃఆͱͯ͠ɺϒϥ΢βϢʔβ͕ࢦఆͨ͠ελ Πϧ !

ελΠϧͷछྨ ‣ ϒϥ΢βͷඪ४ελΠϧ ‣ ϒϥ΢βʹ͋Β͔͡Ί૊Έࠐ·Ε͍ͯΔελΠϧઃఆ ‣ Կ΋ελΠϧΛࢦఆ͍ͯ͠ͳ͍ͱࣗಈతʹద༻͞ΕΔ

ελΠϧద༻ͷ༏ઌॱҐ ‣ ελΠϧద༻ͷ༏ઌॱҐ ࡞ऀελΠϧ ϢʔβελΠϧ ϒϥ΢βجຊελΠϧ

$44Λ༻͍ͨจࣈͷσβΠϯ ‣ ·ͣ͸ɺ࣮ࡍʹ$44Λهड़ͯ͠ΈΔ ‣ ઌि࡞੒ͨ͠ɺࣗݾ঺հͷ$44Λར༻͢Δ ‣ $44ϑΝΠϧͷ४උ ‣ )5.-ͱಉ͡֊૚ͷϑΥϧμʹzDTTzϑΥϧμΛ৽ن࡞੒ ‣
lEFGBVMUDTTzͱ͍͏ϑΝΠϧΛ࡞੒ ‣ lEFGBVMUDTTzΛlDTTz಺ʹอଘ JOEFYIUNM DTT ϑΥϧμ EFGBVMUDTT JNH ϑΥϧμ ը૾ϑΝΠϧ

$44Λ༻͍ͨจࣈͷσβΠϯ ‣ ࣗݾ঺հͷ)5.-ͷྫ ‣ ·ͩελΠϧγʔτ͸ద༻͍ͯ͠ͳ͍ঢ়ଶ

$44Λ༻͍ͨจࣈͷσβΠϯ ‣ )5.-ϑΝΠϧ಺ʹҎԼͷهड़Λ௥Ճ͢Δ ‣ IFBEཁૉͷதʹɺMJOLཁૉͱͯ͠$44ͷ৔ॴΛࢦఆ͢Δ <!DOCTYPE html> <html lang="ja"> <head>
<meta charset="utf-8" /> <title>自己紹介</title> <link rel="stylesheet" href="css/default.css" type="text/css" /> </head> ...

$44Λ༻͍ͨจࣈͷσβΠϯ ‣ DTTϑΥϧμ಺ͷzEFGBVMUDTTzʹҎԼͷهड़Λ͢Δ ‣ Ϧϩʔυ͢ΔͱԿ͕มԽ͢Δ͔ h1 { font-size: 1.75em; }
h2 { font-size: 1.25em; } p { font-size: 0.8em; } li { font-size: 0.8em; }

$44Λ༻͍ͨจࣈͷσβΠϯ ‣ ελΠϧద༻ޙɿจࣈͷେ͖͕͞มԽ

$44Λ༻͍ͨจࣈͷσβΠϯ ‣ ௕͞ɺେ͖͞ͷ୯Ґ ୯Ґ ୯Ґ QY ϐΫηϧ QU ϙΠϯτ FN
਌ཁૉͷจࣈαΠζΛͱͨ͠ͱ͖ͷൺ཰ ਌ཁૉͷจࣈαΠζΛͱͨ͠ͱ͖ͷൺ཰

$44Λ༻͍ͨจࣈͷσβΠϯ ‣ ͞Βʹจࣈͷ৭Λࢦఆͯ͠ΈΔ h1 { font-size: 1.75em; color: #3399cc; }
h2 { font-size: 1.25em; color: #3399cc; } p { font-size: 0.8em; color: #333333; } li { font-size: 0.8em; color: #333333; }

$44Λ༻͍ͨจࣈͷσβΠϯ ‣ ελΠϧద༻ޙɿจࣈͷ৭͕มԽ

$44Λ༻͍ͨจࣈͷσβΠϯ ‣ ৭ͷࢦఆํ๏ɿਐ਺Ͱࢦఆ͢Δํ๏ ‣ 3(#ΛɺͦΕͧΕʙ⒎·Ͱͷਐ਺Ͱදݱ͢Δ ‣ ࠷ॳʹγϟʔϓlzΛ͚ͭΔ ‣ ྫɿ ‣
D ‣ 3ˠ ‣ (ˠ ‣ #ˠD

ࢀߟɿίϯϐϡʔλͷ৭ͷࢦఆ ‣ ৭Λࢦఆ͢Δʹ͸ ‣ 3 ੺ ( ྘ #
੨ ͷࡾݪ৭Ͱࢦఆ͢Δ ‣ Ճ๏ࠞ৭ ޫͷࡾݪ৭Ͱ͋Δ͜ͱʹ஫ҙ ޫͷࡾݪ৭ ৭ྉͷࡾݪ৭

ࢀߟɿίϯϐϡʔλͷ৭ͷࢦఆ ‣ ৭ͷ֊ௐ ! ‣ 3CJU ਐ਺ ⒎ ਐ਺
‣ (CJU ਐ਺ ⒎ ਐ਺ ‣ #CJU ਐ਺ ⒎ ਐ਺ ! ‣ 3(#ͷ૊Έ߹ΘͤͰɺԿ৭ͷ৭Λ࠶ݱͰ͖Δͷ͔ ‣ ਐ਺Ͱ͸ɺ ‣ YY CJU ‣ ਐ਺Ͱ͸ɺ ‣ ‣ ਐ਺Ͱ͸ɺ ‣ ⒎⒎⒎

ࢀߟɿίϯϐϡʔλͷ৭ͷࢦఆ ‣ ਐ਺Ͱͷ৭ͷࢦఆ ‣ 3⒎ (⒎ #⒎ ff (0ʙ255) ff
(0ʙ255) ff (0ʙ255)

$44Ͱ༻͍ΒΕΔجຊ୯Ґɿ৭ ‣ ਐ਺ʹΑΔදݱ ‣ 33((##ɿ33ɺ((ɺ##Λʙ''ͷൣғͰࢦఆ ‣ 3(#ɿ3(#Λʙ'ͷൣғͰࢦఆ ! ‣ ਐ਺ʹΑΔදݱ
‣ SHC 3 ( # ɿ3(#ΛͦΕͧΕʙͷൣғͰࢦఆ ! ‣ ύʔηϯτʹΑΔදݱ ‣ SHC 3 ( # ɿ3(#ΛͦΕͧΕʙͰࢦఆ

$44Λ༻͍ͨจࣈͷσβΠϯ ‣ จࣈͷഎܠ৭Λࢦఆ͢Δ h1 { font-size: 1.75em; color: #3399cc; }
h2 { font-size: 1.25em; background-color: #3399cc; color: #ffffff; } p { font-size: 0.8em; color: #333333; line-height: 1.75em; } li { font-size: 0.8em; color: #333333; }

$44Λ༻͍ͨจࣈͷσβΠϯ ‣ จࣈͷഎܠ৭Λࢦఆ͢Δ

$44Λ༻͍ͨจࣈͷσβΠϯ ‣ ৭ͱഎܠޮՌʹؔ͢ΔϓϩύςΟ ϓϩύςΟ ద༻Օॴ ஋ DPMPS ཁૉ಺ͷจࣈͷ৭ ৭ͷ୯Ґ CBDLHSPVOEDPMPS
ཁૉ಺ͷഎܠͷ৭ ৭ͷ୯Ґ

$44Λ༻͍ͨจࣈͷσβΠϯ ‣ ߦἧ͑Λมߋͯ͠ΈΔIཁૉΛηϯλϦϯά h1 { font-size: 1.75em; color: #3399cc; text-align:
center; } h2 { font-size: 1.25em; background-color: #3399cc; color: #ffffff; } p { font-size: 0.8em; color: #333333; } li { font-size: 0.8em; color: #333333; }

$44Λ༻͍ͨจࣈͷσβΠϯ ‣ ߦἧ͑Λมߋ

$44Λ༻͍ͨจࣈͷσβΠϯ ‣ ߦؒΛ֦͛Δ h1 { font-size: 1.75em; color: #3399cc; text-align:
center; } h2 { font-size: 1.25em; background-color: #3399cc; color: #ffffff; } p { font-size: 0.8em; color: #333333; line-height: 1.75em; } li { font-size: 0.8em; color: #333333; }

$44Λ༻͍ͨจࣈͷσβΠϯ ‣ ߦؒΛ֦͛Δ

$44Λ༻͍ͨจࣈͷσβΠϯ ‣ ࣼମͷઃఆ ... ! li { font-size: 0.8em; color:
#333333; } address{ font-size: 0.75em; font-style: italic; }

$44Λ༻͍ͨจࣈͷσβΠϯ ‣ ࣼମͷઃఆ

$44Λ༻͍ͨจࣈͷσβΠϯ ‣ ςΩετʹؔ͢ΔελΠϧ ϓϩύςΟ ద༻Օॴ ஋ GPOUTJ[F ϑΥϯτͷେ͖͞ αΠζͷ୯Ґ GPOUTUZMF
ࣼࣈମͷઃఆ OPSNBM JUBMJD PCMJRVF GPOUXFJHIU จࣈͷଠ͞ ʙ OPSNBM CPME UFYUEFDPSBUPJO ԼઢͳͲͷ૷০ OPOF VOEFSMJOF PWFSMJOF MJOFUISPVHI

$44Λ༻͍ͨจࣈͷσβΠϯ ‣ ࠓ೔ͷ·ͱΊ ͜Ε͚ͩ͸Ա͑ͯཉ͍͠Ϧετ ! ‣ $44ͷجຊ୯Ґ ‣ ৭ɿ''''''
‣ େ͖͞ɿFN QU QY ! ‣ ςΩετͷදࣔʹؔ͢Δ$44ϓϩύςΟ ‣ େ͖͞ɾଠ͞ɿGPOUTJ[F GPOUXFJHIU ‣ ৭ɿDPMPS CBDLHSPVOEDPMPS ‣ จࣈͷମࡋɿGPOUTUZMF UFYUEFDPSBUJPO ‣ ߦૹΓɿUFYUBMJHO ‣ ߦؒɿMJOFIFJHIU

CSS入門 情報の形を視覚化する

CSS入門 情報の形を視覚化する

More Decks by Atsushi Tadokoro

Featured

Transcript

CSS入門情報の形を視覚化する

CSS入門情報の形を視覚化する