a-blog cmsで考えるレイアウトと文字組み

Transcript

1. ೥݄೔ʢۚʣɹϨτϩσβΠϯɹੴ઒
   ण౛ BCMPH
   DNT
   Ͱߟ͑Δ
   ϨΠΞ΢τͱจࣈ૊Έ BCMPH
   DNT
   5SBJOJOH
   $BNQ
   
2. ੴ઒
   ण౛ 8FCσΟϨΫλʔɹϑϩϯτΤϯυΤϯδχΞ w ೥ੜ·Ε
   ܈അݝग़਎ɹࢁܗࢢࡏॅ
   w औࡐɾฤूɺϥΠςΟϯά
   ˠ
   8FCαΠτ੍࡞
   w .PWBCMF
   5ZQF
   ˠ
   BCMPH
   DNTʢ೥ʙʣ
   w ೥ΑΓɺݸਓࣄ຿ॴͰελʔτ ͍͔͠Θ
   ͻ͞ͱ
3. w ϨΠΞ΢τύλʔϯ
   w จࣈ૊Έ
   ࠓޙͷ࢓ࣄͰఏڙͰ͖Δ͔ͷݕূ
   
   ϝΠϯɿϒϩοΫΤσΟλ
   
   αϒɿैདྷϢχοτʗΧελϜϢχοτ
4. ϨΠΞ΢τύλʔϯ
   ϒϩοΫΤσΟλͷதͰ૊ΈཱͯΔߟ࡯
5. ˔˔˔˔˔˔˔˔ 
   ΧϥϜ ˔˔˔˔˔˔˔˔ ˔˔˔˔˔˔˔˔ 
   ΧϥϜ ˔˔˔˔ ˔˔˔˔ ˔˔˔˔ ˔˔˔˔ ˔˔˔˔ ˔˔˔˔ 
   ΧϥϜ Α͘ݟΔϖʔδϨΠΞ΢τྫͰ͢ɻ
   ϒϩοΫΤσΟλͰ΋࣮ݱͰ͖·͕͢ɺ࣍͸Ͳ͏Ͱ͠ΐ͏ʁ
6. ˔˔˔˔ ˔˔˔˔ ˔˔˔˔ ˔˔˔˔ ˔˔˔˔ ˔˔˔˔ 
   ΧϥϜ ˔˔˔˔ ˔˔˔˔ ˔˔˔˔ ˔˔˔˔   
   ෯ͷฒͼ
   ϒϩοΫΤσΟλͰ࡞Δ͜ͱ͕Ͱ͖ΔͰ͠ΐ͏͔ʁ
7. ˔˔˔˔ ˔˔˔˔ ˔˔˔˔ ˔˔˔˔ ˔˔˔˔ ˔˔˔˔ 
   ΧϥϜ ˔˔˔˔ ˔˔˔˔ ˔˔˔˔ ˔˔˔˔  
   $44Ͱ෯Λௐ੔
   छྨͱͯ͠ɻ࣮ࡍͷબ୒Ͱ͸͋Γ·ͤΜ ϒϩοΫΤσΟλͰઃఆ͢Δʹ͸ʮ̎ΧϥϜʹ෼ׂʯ͕֘౰͠
   ͋ͱ͸$44Ͱௐ੔͢Δ͔͋͠Γ·ͤΜɻͦ͏͍͑͹ʜ
8. fl PBU
   MFGU WFSͰɺ fl PBU
   ഑ஔ͕ͳ͘ͳΓ·ͨ͠ɻ
   ࣍ͷϨΠΞ΢τ͸Ͳ͏͠·͠ΐ͏ʁ
9. ˔˔˔˔˔˔˔˔ ˔˔˔˔˔˔˔˔ 
   ΧϥϜ ˔˔˔˔˔˔˔˔ float: left; ςΩετͷճΓࠐΈɻ͜ΕΛٻΊΔ͓٬༷͸গͳ͍ͱࢥ͍·͕͢
   ϨΠΞ΢τͷόϦΤʔγϣϯͱͯ͠͸͍͍࣋ͬͯͨͱ͜Ζɻ
10. ˔˔˔˔˔˔˔˔ ˔˔˔˔˔˔˔˔ 
    ΧϥϜ ˔˔˔˔˔˔˔˔ float: left; float: right; ʮ̎ΧϥϜʹ෼ׂʯΛ࢖͑ΔͰ͠ΐ͏͔ʁ
11. ˔˔˔˔˔˔˔˔ ˔˔˔˔˔˔˔˔ 
    ΧϥϜ ˔˔˔˔˔˔˔˔   ʮ̎ΧϥϜʹ෼ׂʯ͸্ͷ੨఺ઢͷΑ͏ʹ
    ϒϩοΫΤϦΞ͕ฒͿͷͰϑϩʔτ͸೉ͦ͠͏Ͱ͢ɻ
    ʢ্ه͸ɺ$44Ͱ౳෯Λઃఆͨ͠৔߹Ͱ͢ɻʣ
12. ˔˔˔˔˔˔˔˔ ˔˔˔˔˔˔˔˔ 
    ΧϥϜ ˔˔˔˔˔˔˔˔   float: left; float: right; ✕ ճΓࠐΈͷϨΠΞ΢τ͸ෆՄͱ͍͏݁࿦
    ͜ΕΛ๬·Εͨͱ͖͸ΧελϜϢχοτͰରԠ͠·͠ΐ͏ɻ
13. ˔˔˔˔˔˔˔˔ ˔˔˔˔˔˔˔˔ 
    ΧϥϜ ˔˔˔˔˔˔˔˔   float: left; float: right; ˚ $44Ͱग़དྷͳ͍͜ͱ͸ͳ͍ ݟͨ໨͚ͩͰ͸࣮Ҋ݅Ͱ͸࢖͑ͳ͍ ̎ΧϥϜʹ෼ׂ
    Λ࢖ͬͯճΓࠐΈͰ͖Δ͔ࢼͯ͠Έ·ͨ͠ɻ
14. ˙
    ΧϥϜʹ෼ׂ
    ΛબΜͩͱ͖ͷιʔε <div class="layout-two-column" data-layout="two-column" data-type="columns"> <div data-position data-type="column"></div> <div data-position data-type="column"></div> </div> ˙
    ฤूը໘ηοτ
    
    ϒϩοΫΤσΟλઃఆ
    ʹͯɺϒϩοΫϝχϡʔΛ௥Ճ ˙
    ճΓࠐΈ
    ΛબͿͱΫϥε͕௥Ճ͞Ε·͢ <div class=“layout-float-left layout-two-column” data-layout="two-column" data-type="columns"> <div data-position data-type="column"></div> <div data-position data-type="column"></div> </div> ˙
    $44
    Λઃఆ .layout-two-column { &.layout-float-left { display: block; & > div { width: 100%; } & > div:first-child { width: 33%; float: left; margin-right: 1.5em; margin-bottom: 1.5em; .media-image-block { margin-top: .25em; } } } } ௨ৗͷʮΧϥϜʹ෼ׂʯ΋ઃఆ͍ͯ͠Δ લఏͰɺ͜͜Ͱ͸ࢠཁૉ
    EJW
    ෯ΛϦηοτ ͍ͯ͠·͢ɺ ࠷ॳͷ
    EJW
    Λ
    fl PBU
    ઃఆ ͜ͷઃఆ͸ݸਓతͳݕূͷ̍ͭͰ͢ɻϨεϙϯγϒ͸ߟྀ͍ͯ͠· ͤΜɻ·ͨɺ࣮༻Λ͢͢ΊΔ΋ͷͰ΋͋Γ·ͤΜɻ͋Β͔͡Ίྃ͝ ঝ͍ͩ͘͞ɻ ˕
    උߟ
    ̎ΧϥϜʹ෼ׂʢMBZPVUUXPDPMVNOʣɺ̏ΧϥϜʹ෼ׂʢMBZPVUUISFFDPMVNOʣͷ$44͸༻ҙ͞Ε͍ͯ ·ͤΜɻ fl FY
    ΍
    DTT
    HSJE
    ͳͲࣗ༝ʹઃఆͰ͖·͢ɻࢠཁૉͷ
    EJW
    ෯͸ۉ౳ʹઃఆ͓ͯ͘͠ͷ͕ҰൠతͰ͢ɻ ̎ΧϥϜʹ෼ׂΛ࢖ͬͯճΓࠐΈͰ͖Δ͔ࢼͯ͠Έͨɻ
15. ˔˔˔˔˔˔˔˔ ˔˔˔˔˔˔˔˔ 
    ΧϥϜ ˔˔˔˔˔˔˔˔ float: left; float: right; ͪͳΈʹݱ࣌఺Ͱ͸ɺ͜ͷϨΠΞ΢τ෦෼ʹ
    ΧϥϜʹ෼ׂ
    ͳͲ௥Ճ͸Ͱ͖ͳ͍ͦ͏Ͱ͢ɻ
16. จࣈ૊Έ
    ݟग़͠ͱஈམʹ͍ͭͯ ଓ͍ͯɺจࣈ૊Έ
    Կ͔Λઆ໌͢ΔͨΊʹ͸จࣈ͸͔ܽͤ·ͤΜ
    ಡΈ΍͍͢ͱ͍͍Ͱ͢ΑͶɻ
17. ·ͨɺϒϩοΫΤσΟλͷදࣔͱ
    ࣮ࡍͷϖʔδͷද͕ࣔಉ͡Ͱ͋Ε͹ߋ৽୲౰ऀ΋͏Ε͍͠Ͱ͠ΐ͏ɻ
18. 
    ॳظઃఆͷͱ͖ ·ͣɺ͢Ͱʹઃఆ͞Ε͍ͯΔஈམ΍ݟग़͠͸
    Ϋϥεͷͳ͍)5.-λά͕ग़ྗ͞Ε·͢ɻ
19. <h2>ϨΠΞ΢τͱจࣈ૊Έ</h2> ݟग़̎͠Λ௥Ճͯ͠ϥϕϧͱΫϥεΛઃఆ͢Ε͹
    ผσβΠϯͷݟग़̎͠Λ࡞Ε·͢ʢ࣍ϖʔδࢀরʣ
20. <h2 class=“xxxxx”>ϨΠΞ΢τͱจࣈ૊Έ</h2> ݟग़͠ʢԼઢʣ ྫ VOEFSMJOF <h2>ϨΠΞ΢τͱจࣈ૊Έ</h2>
21. ݟग़̏͠ஈ֊ͷύλʔϯ
    γϯϓϧ
    ελϯμʔυ
    ΦϦδφϧ Ҋ݅Ͱܾ·Δ8FCσβΠϯ͸̍छྨͩͱࢥ͍·͕͢
    ͦΕΛϕʔεʹ̏ஈ֊ͷఏҊ͕͋ͬͯ΋ྑ͍͔΋͠Ε·ͤΜɻ
22. ̏ஈ֊ͷύλʔϯ
    ᶃ γϯϓϧ
    ᶄ ελϯμʔυ
    ᶅ ΦϦδφϧ <h2> <h2 class=“underline”> <h2 class=“tagline”> ྫ͑͹ɺઃఆ͸͜ͷΑ͏ʹͳΓ·͢ɻ
    ͦΕͧΕͷσβΠϯ͸࣍ϖʔδͷͱ͓Γɻ
23. γϯϓϧ ελϯμʔυ ΦϦδφϧ lγϯϓϧzΛϕʔεʹগͣͭ͠σβΠϯ͕มΘΔɻ
    ͦͷมԽΛΤσΟλ಺Ͱ֬ೝͰ͖ΔΑ͏ઃఆͰ͖Δɻ͍͢͝ʂ
24. ຊจQͷจࣈ૊Έ
    $44Ͱઃఆ
    GPOUGFBUVSFTFUUJOH
    UFYUBMJHO ଓ͍ͯɺݟग़͠ʹଓ͘ຊจͷςΩετ΋ݟ΍͢͞Λݕ౼
    จࣈ٧ΊͰ͖Δ$44ϓϩύςΟΛઃఆͯ͠ௐ੔ͯ͠Έ·͢
25. ஈམ <em> <u> <s> <code> <mark> <sub> <sup> p { font-feature-settings: “palt”; text-align: justify; } ஈམ
    Q
    ʹؔ܎͢Δπʔϧ΋ଟ͘ͳΓઃఆ΋؆୯Ͱ͢Ͷɻ
    ΤϯτϦʔຊจ಺ͷ
    Q
    ͚ͩʹ$44Λ౰ͯͯΈ·͢ɻ
26. ͍͔͕Ͱ͠ΐ͏ɻจࣈؒͱ྆୺ଗ͕͑ޮ͍ͯΩϡοͱͳΓ·ͨ͠ɻ
    ಡΈ΍͘͢ͳͬͨͱࢥ͍·͢ɻ
27. ຊจQͷจࣈ٧Ί
    ϑΥϯτʹΑͬͯಡΈͮΒ͍͜ͱ͕͋Δ
    8FCσβΠϯʹΑͬͯࠨӈ͞ΕΔ
    ಡΜͰ΋Β͏ͨΊʹಡΈ΍͢͞ॏࢹʂ ͨͩɺ8FCͷจࣈ٧Ίʹ͸஫ҙ͕ඞཁͰ͢ɻ
    ٧·Γա͗ͯಡΈʹ͘͘ͳΔϑΥϯτ΋͋Γ·͢ɻ
    σβΠϯͱͷόϥϯεɺಡΈ΍͢͞Λ༏ઌͨ͠ઃఆ͕ྑͦ͞͏Ͱ͢ɻ
28. ·ͱΊʢݟղʣ
    ϒϩοΫΤσΟλͰݟͨ··ͷߋ৽࡞ۀ͕Ͱ͖ͦ͏
    ࣮ݱ͕೉ͦ͠͏ͩͬͨΒैདྷͷϢχοτɾΧελϜϢχοτ
    ͱʹ͔͘࢖͍΍͢͞Λߟ͑Δ͜ͱ ࠓճ͸ϒϩοΫΤσΟλத৺ͷݕূͰͨ͠ɻ
    ݁Ռͱͯ͠͸ɺϝΠϯͷϢχοτͱͯ͠ఏҊͰ͖ͦ͏Ͱ͢ɻ
    ΧελϜϢχοτɺάϧʔϓϢχοτͷ࢖͍෼͚΋ݕূ͍͖ͯ͠·͢ɻ
29. ͋Γ͕ͱ͏͍͟͝·ͨ͠ɻ BCMPH
    DNT
    Ͱߟ͑Δ
    ϨΠΞ΢τͱจࣈ૊Έ ೥݄೔ʢۚʣɹϨτϩσβΠϯɹੴ઒
    ण౛