
ã¹ããŒããã©ã³æä»£ã®noteèšäºäœæã¬ã€ãïŒã¹ããã§ã®èªã¿ãããã®æå€§å

å°å ¥
ã©ããããã§ã³ã³ããã§ãïŒ
çªç¶ã§ãããnoteã§èšäºãæžããŠããçãããžè³ªåã§ã
noteã®å€ãã®èªè ãã¹ããŒããã©ã³ã§ã¢ã¯ã»ã¹ããŠãããŠããããšããåç¥ã§ããïŒ
å®ã¯ãnoteãŠãŒã¶ãŒã®çŽ8å²ãã¹ããŒããã©ã³ã§é²èЧããŠãããã§ãã
ãã®ãããã¹ããŒããã©ã³ã®ç»é¢ã§ãå¿«é©ã«èªãã§ããããããã«ã
段èœã®äœãæ¹ã工倫ããããšããšãŠãéèŠã«ãªããŸãã
ä»åã¯ããã®ãããªã¹ããŒããã©ã³ãŠãŒã¶ãŒåãã®èšäºãå·çããäžã§ã®å®è·µçãã¯ããã¯ãå ·äœçã«ç޹ä»ããŸãã
ãããã®ãã¯ããã¯ã¯PCãã¿ãã¬ããã§ã®é²èЧã«ãæå¹ã§ãããç¹ã«ã¹ããŒããã©ã³ã§ã¯ãã®å¹æãéç«ã€ã§ãããã
ãã²ãæåŸãŸã§ãä»ãåããã ããã
1. 空çœè¡ã»æ¹è¡ã®æŽ»çš
段èœã𿮵èœã®éã«ç©ºçœè¡ãå ¥ããããšã§ãèªã¿ããããæ Œæ®µã«åäžããŸãã
ã¹ããŒããã©ã³ã§ã¯ã1ã2æãŸãã¯1ã2è¡ã«äžåæ¹è¡ã»ç©ºæ®µèœãå ¥ããæ®µèœåãããäºã§èŠããããªããŸãã
æªãäŸïŒ
ãã®æ®µèœã¯é·ãããŸããã¹ããŒããã©ã³ã®ç»é¢ã§ã¯ããã®ãããªé·ã段èœã¯èªã¿ã¥ããããŠãŒã¶ãŒã®ç®ãç²ããŠããŸããŸãããŸããéèŠãªãã€ã³ããèŠéãå¯èœæ§ãé«ããªããŸããã§ããã ãé¿ããŸãããã
è¯ãäŸïŒ
ãã®æ®µèœã¯é©åãªé·ãã§ãã
ã¹ããŒããã©ã³ã®ç»é¢ã§ãèªã¿ãããããã€ã³ããäŒããããããªããŸãã
çãæ®µèœãå¿ãããã°ãèªè ã¯ã¹ã ãŒãºã«èšäºãèªã¿é²ããããŸãã
3. ç®æ¡æžãã®æŽ»çš
æ å ±ãæŽçããŠäŒãããå Žåã¯ãç®æ¡æžãã广çã§ãã
éèŠãªãã€ã³ããç°¡æœã«äŒãããã
èŠèŠçã«æ å ±ãæŽçããã
ã¹ãã£ã³ãããããèªè ã®çè§£ãä¿é²ããã
ç®æ¡æžãã䜿ãããšã§ãèªè ã¯å¿ èŠãªæ å ±ãããã«èŠã€ããããŸãã
4. èŠåºãã®å¹æçãªäœ¿çš
èŠåºãã䜿ãããšã§ãèšäºã®æ§é ãæç¢ºã«ãªããŸãã
倧èŠåºãïŒH2ïŒã®äœ¿ãæ¹
èšäºã®äž»èŠã»ã¯ã·ã§ã³ã瀺ãã®ã«äœ¿çšããŸãã
äžèŠåºãïŒH3ïŒã®äœ¿ãæ¹
倧èŠåºãã®äžäœé ç®ã瀺ãã®ã«é©ããŠããŸãã
泚æïŒH1ã¯noteã®ã¿ã€ãã«ã«äœ¿ããããããèšäºå ã§ã¯äœ¿çšããŸããã
èŠåºããé©åã«äœ¿ãããšã§ãèªè ã¯èšäºã®å šäœåãææ¡ãããããªããŸãã
5. 匷調衚çŸã®æŽ»çš
éèŠãªãã€ã³ãã¯ã倪åãã€ã¿ãªãã¯äœã§åŒ·èª¿ããŸãããã
äŸïŒ
ãã®éšåã¯ç¹ã«éèŠã§ãã
ããããã€ã³ãã«ãªããŸãã
匷調衚çŸã䜿ãããšã§ãèªè ã®ç®ãåŒãã€ããããšãã§ããŸãã
6. ãªã³ã¯ã®æ¿å ¥
é¢é£æ å ±ãžã®ãªã³ã¯ãé©åã«æ¿å ¥ããããšã§ãèªè ã®çè§£ãæ·±ããããŸãã
äŸïŒ
詳ããã¯noteã®ãã«ãããŒãž
ãã芧ãã ããã
ãªã³ã¯ã广çã«äœ¿ãããšã§ãèªè ã«è¿œå æ å ±ãæäŸã§ããŸãã
7. ç»åã®å¹æçãªé 眮
æç« ã®éã«é©åã«ç»åãæ¿å
¥ããããšã§ãèªè
ã®ç®ãäŒãŸããå
容ã®çè§£ã
ä¿é²ã§ããŸãã
ç»åã®ãµã€ãºãæé©åããèªã¿èŸŒã¿æéãççž®ããããšãéèŠã§ãã
ã¹ããŒããã©ã³ã§ã¯ãç»åã倧ãããããšã¹ã¯ããŒã«ã®éªéã«ãªãå¯èœæ§ãããã®ã§ãé©åãªãµã€ãºã«èª¿æŽããŸãããã
8. ã¬ã¹ãã³ã·ããã¶ã€ã³ã®ç¢ºèª
ç°ãªãããã€ã¹ã§èŠããšãã«ãã¬ã€ã¢ãŠãã厩ããªãããã«ãã¬ã¹ãã³ã·ããã¶ã€ã³ãæèããŸãããã
Chromeæ¡åŒµæ©èœã®ãResponsive Web Design Testerããªã©ã®ããŒã«ã䜿çšããŠãæ§ã ãªç»é¢ãµã€ãºã§ã®è¡šç€ºã確èªããããšãããããããŸãã
9. éäžè§åœ¢ã®æ§æ
èšäºã®æ§æãšããŠããéäžè§åœ¢ãã®æ§æãæèããŸãããã
æåã«çµè«ãéèŠãªã¡ãã»ãŒãžãé 眮
次ã«èª¬æã詳现ãèšè¿°
æåŸã«è£è¶³æ å ±ãå ãã
ãã®æ§æã«ãããèªè ã¯èšäºã®åé ã§äž»èŠãªæ å ±ãåŸãããšãã§ããèå³ãæã£ãŠèªã¿é²ããããšãã§ããŸãã
10. CSSãæŽ»çšããæ¹è¡å¶åŸ¡
HTMLãšCSSãçµã¿åãããããšã§ãããã€ã¹ããšã«æ¹è¡äœçœ®ã倿Žããããšãã§ããŸãã
äŸãã°ã以äžã®ãããªHTMLãšCSSã䜿çšããããšã§ãã¹ããŒããã©ã³ã§ã®ã¿æ¹è¡ãé©çšã§ããŸãã
HTML:
<p>ã¹ããã®æã ã<br class="br-sp">ããã¹ããæ¹è¡ããŸã</p>CSS:
.br-sp {
display: none;
}
@media (max-width: 600px) {
.br-sp {
display: block;
}
}ãã®æ¹æ³ã䜿ãããšã§ãPCãšã¹ããŒããã©ã³ã§ç°ãªãæ¹è¡äœçœ®ãèšå®ã§ããŸãã
11. æç« ã®ç°¡æœã
ã¹ããŒããã©ã³ã®å°ããªç»é¢ã§ã¯ãé·æã¯ç¹ã«èªã¿ã¥ãããªããŸãã
1æãçãããç°¡æœã«è¡šçŸãã
äžèŠãªèšèãåé€ããæç« ãã¹ãªã åãã
åäœãšãã®èª¬æãè¿ã¥ããŠé 眮ããçè§£ãããããã
ç°¡æœãªæç« ã¯ãã¹ããŒããã©ã³ç»é¢ã§ãèªã¿ããããèªè ã®çè§£ãä¿é²ããŸãã
12. ç®æ¬¡ã®æŽ»çš
é·æèšäºã®å Žåãç®æ¬¡ãèšå®ããããšã§èªè ã«å šäœåãææ¡ããŠãããããããªããŸãã
noteã®ç®æ¬¡èšå®æ©èœã䜿çšãã
èŠåºããé©åã«èšå®ããç®æ¬¡é ç®ãšããŠæŽ»çšãã
ç®æ¬¡ãã該åœç®æãžã®ãžã£ã³ãæ©èœã掻çšãã
ç®æ¬¡ãããããšã§ãèªè
ã¯èšäºã®æ§é ãçè§£ããèå³ã®ããéšåã«ããã«
ã¢ã¯ã»ã¹ã§ããŸãã
ãŸãšã
ã¹ããŒããã©ã³é²èЧãæèããnoteã§ã®æ®µèœäœãã¯ãèªè
ã®çè§£ãšæºè¶³åºŠã
é«ããéèŠãªèŠçŽ ã§ãã
çãæ®µèœãèŠèŠçèŠçŽ ã®æŽ»çšãéäžè§åœ¢ã®æ§æãç°¡æœãªæç« ããããŠç®æ¬¡ã®æŽ»çšãå¿ãããã°ãããå€ãã®èªè ã«èªãŸããèšäºãäœæã§ããŸãã
ãããã®ãã¯ããã¯ãå®è·µããç¶ç¶çã«æ¹åããããšã§ãnoteã§ã®çºä¿¡åãé«ããŠããããšãã§ããã§ãããã
ãã²ããã®èšäºãåèã«ãããªãã®noteèšäºãã¹ããŒããã©ã³ãã¬ã³ããªãŒã«ããŠã¿ãŠãã ããïŒ
èªè
ããã®åå¿ãèŠãªãããããã«æ¹åãéããŠããããšã§ã
ããå€ãã®äººã«æãããèšäºäœããã§ããã¯ãã§ãã
ããã°ã£ãŠãã ããïŒ
è£è¶³ïŒããã«æç« åãé«ãããããªããž
ç§ã®ç¡æèšäºã§ã¯ãæ±çšçãªç¥èãå¹ åºããäŒãããŠããŸããããã®ãããªèšäºãèªãã§ããäžã§ã
â
ããã£ãšããå€ãã®ããšãåŠãã§æç« åãããã«äžãããâŠïŒã
â
ãæ¬ã«æžããŠããæ
å ±ã¯ã€ãã€ãèªåã«ã¯åããªãâŠã
â
ãããå®è·µçãªããšãåŠãã§ã¿ã€ãããäžéãããâŠã
ãããªæ©ã¿ãæãå§ãããããŠããŸãããïŒ
ãããªããªãã«ãç§ãèªä¿¡ãæã£ãŠããããããã®ãã
ããå
š7åãèªè
ã®å¿ãæŽã¿ãè¡åãä¿ãã©ã€ãã£ã³ã°è¬åº§ïŒããªãã®èšèã§äººçãå€ããïŒãã§ãã
ãã®è¬åº§ã§ã¯ã
â
第1åïŒå¿ãæŽãïŒåå¿è
ã§ãæžãããå
±æããçãnoteã®æžãæ¹
â
第2åïŒä¿¡é Œãããæžãæã«ãªãïŒãä¿¡é Œããç¯ãnoteãã¯ããã¯
â
第3åïŒèªè
ã®æ©ã¿ã解決ïŒãåé¡æèµ·ãšè§£æ±ºãã§é
åçãªèšäºãäœã
â
第4åïŒæ§ããæãïŒãçæ³ã®æªæ¥ããæç€ºããnoteã®æžãæ¹
â
第5åïŒèªè
ãæé·ãããïŒãç¥èãšææ®µããäŒããnoteãã¯ããã¯
â
第6åïŒèªä¿¡ãã€ããããïŒãèªå·±å¹åæããé«ããnoteã®æžãæ¹
â
第7åã»æçµåïŒè¡åãä¿ãïŒãèäžãæŒããnoteã®ç· ããããæ¹
ãšãå š7åã«ããã£ãŠãèªè ã®å¿ãåãããè¡åãä¿ãããã®ã©ã€ãã£ã³ã°ãã¯ããã¯ãäœãããšãªããäŒãããŸãã
ååã®ããŒãã¯ã
â
å
±æ
â
ä¿¡é Œ
â
åé¡æèµ·ãšè§£æ±º
â
çæ³ã®æªæ¥
â
ç¥èãšææ®µ
â
èªå·±å¹åæ
â
èäžãæŒãç· ãããã
ãšãã£ããèªè ã®å¿ãæŽãããã®éèŠãªèŠçŽ ã°ããïŒ
ååã®èšäºã§ã¯ã
â
ãªããã®èŠçŽ ã倧åãªã®ãïŒ
â
ã©ãããã°ãã®èŠçŽ ãåãå
¥ããããã®ãïŒ
ããå ·äœçãªäŸã亀ããªãã解説ããŠãããŸãã
ãã®è¬åº§ãåè¬ããããšã§ãããªãã¯ã
â
èªè
ã®å¿ãæŽãæç« ã®æžãæ¹ãããã
â
ä¿¡é Œãããæžãæã«ãªãããã®ãã¯ããã¯ã身ã«ã€ã
â
èªè
ã®æ©ã¿ã解決ã§ããé
åçãªèšäºãæžãã
â
èªè
ã®è¡åãä¿ããå匷ãæç« ãæžãã
ããã«ãªããnoteã§ã®çºä¿¡ããããæ¥œãããããæçãªãã®ã«ãªãã¯ãã§ãã
ãã²ã
ã§ãããªãã®æç« åãé£èºçã«åäžãããèªè ã®äººçãå€ãããããªèšäºãæžããŠã¿ãŸãããïŒ
ãã¬ãžã³ã¯ãã¡ãããïŒ