1. CSSãšã¯äœãïŒ
ãŠã§ããµã€ããèšèšããéã«å¿ èŠäžå¯æ¬ ãªæè¡ã®äžã€ã«ãCSSããããŸããã§ãäžäœãCSSãšã¯äœã§ããããïŒããã§ã¯ããã®åºæ¬çãªåœ¹å²ããç¹åŸŽãŸã§ããããããã解説ããŸãã
1-1. CSSã®åºæ¬çãªåœ¹å²ãšç¹åŸŽ
CSSïŒCascading Style SheetsïŒã¯ãHTMLã«ãã£ãŠããŒã¯ã¢ãããããã³ã³ãã³ãã®èŠãç®ãèšå®ããããã®èšèªã§ããHTMLããŠã§ãããŒãžã®ãéªšæ Œããäœãåºãã®ã«å¯ŸããŠãCSSããã®ãèã€ããããè²åœ©ããäžãããšèãããšããããããã§ãããã
CSSã®åºæ¬çãªåœ¹å²ã¯ããŠã§ãããŒãžã®èŠçŽ ïŒæåã®è²ããµã€ãºãèæ¯è²ãééã眫ç·ãªã©ïŒã«ã¹ã¿ã€ã«ãé©çšããããšã§ããã€ãŸããCSSã¯ãŠã§ããµã€ãã®èŠèŠçãªãã¶ã€ã³ãã¬ã€ã¢ãŠãã統埡ããŸããããã«ãCSSã¯ã¡ãã£ã¢ã¯ãšãªã䜿ã£ãŠãããã€ã¹ã«å¿ããé©åãªã¹ã¿ã€ã«ã®æäŸãå¯èœã«ããŸãã
CSSã®æãéèŠãªç¹åŸŽã®äžã€ã¯ããã«ã¹ã±ãŒããã§ããã«ã¹ã±ãŒããšã¯ãç°ãªãã¹ã¿ã€ã«ã«ãŒã«ã競åããå Žåã«ã©ã®ã«ãŒã«ãé©çšããããã決å®ããä»çµã¿ã®ããšã§ãããã®æ©èœã«ããããŠã§ããã¶ã€ããŒã¯äžå šã«ã«ãŒã«ã管çããæé©ãªãã¶ã€ã³ãå¶åŸ¡ã§ããŸãã
1-2. CSSããŠã§ããã¶ã€ã³ã«ãããŠæããéèŠæ§
CSSã®ååšãªãã§ã¯ãçŸä»£ã®è±ããªãŠã§ããã¶ã€ã³ã¯ååšãåŸãŸãããCSSã¯ãŠã§ããµã€ãã«åæ§ãšé åãäžããäž»èŠãªããŒã«ã§ãããå©çšè ã«ãšã£ãŠåŒãã€ããããŸãã¯å¿ èŠãªæ å ±ã«èªå°ãã圹å²ãæãããŸãã
ãŸããCSSã¯ãŠã§ããã¶ã€ã³ã«ãããŠäžè²«æ§ã確ä¿ããéèŠãªåœ¹å²ãæ ã£ãŠããŸããCSSã䜿çšããã°ããµã€ãå šäœã§äžè²«ããã¹ã¿ã€ã«ãç¶æããããšãå¯èœã«ãªããããã«ããå©çšè ã¯ãµã€ããæããããããŠå¹ççã«ããã²ãŒãã§ããŸãã
ããã«ãCSSã¯ã¬ã¹ãã³ã·ããã¶ã€ã³ãå®çŸããŸããããã«ãããæ§ã ãªããã€ã¹ãç»é¢ãµã€ãºã§ãŠã§ããµã€ããé©åã«è¡šç€ºãããå©çšè äœéšãåäžããŸãã
èŠããã«ãCSSã¯ãŠã§ããã¶ã€ã³ã«ãããŠå€ããªãæè¡ã§ããããã®åœ¹å²ãšéèŠæ§ã¯éåžžã«å€§ãããšèšããã§ãããã
2. CSSã®ç°å¢æ§ç¯ãå§ããåã«
ãŠã§ããã¶ã€ã³ã®é åã§æŽ»èºããããã«ã¯ãç°å¢æ§ç¯ãæ¬ ãããŸãããããã§ã¯ãCSSã®ç°å¢æ§ç¯ãå§ããåã«æŒãããŠããã¹ãåºæ¬çãªç¥èãšãå¿ èŠãªããŒã«ãšãœãããŠã§ã¢ã«ã€ããŠèª¬æããŸãã
2-1. å¿ èŠãªããŒã«ãšãœãããŠã§ã¢ã®çŽ¹ä»
ã³ãŒããšãã£ã¿ã¯ããŠã§ããã¶ã€ã³ã«ãããæåã®ã¹ãããã§ããã³ãŒããšãã£ã¿ã¯ãHTMLãCSSãªã©ã®ã³ãŒããæžãããã®ãœãããŠã§ã¢ã§ãSyntax HighlightïŒã³ãŒãã®è²åãïŒãèªåè£å®ãªã©ã®æ©èœãæäŸããŠãããŸããVisual Studio CodeãAtomãSublime Textãªã©ãããŸããŸãªãšãã£ã¿ãå©çšå¯èœã§ãã
次ã«ãã©ãŠã¶ã§ããCSSã³ãŒãã®ã¬ã³ããªã³ã°ããã§ãã¯ããããã«ã¯ãå®éã®ãŠã§ããã©ãŠã¶ãå¿ èŠã§ããChromeãFirefoxãSafariãªã©ãå©çšããŸããç¹ã«ãéçºè ããŒã«ãæã€ãã©ãŠã¶ã¯ãCSSã®ãããã°ã«åœ¹ç«ã¡ãŸãã
ããŒãžã§ã³ç®¡çã·ã¹ãã ïŒGitãªã©ïŒãéèŠãªããŒã«ã®ã²ãšã€ã§ããè€æ°ã®ããŒãžã§ã³ã®ã³ãŒãã管çããããšãã§ãããšã©ãŒãçºçããå Žåã§ã以åã®ç¶æ ã«æ»ãããšãã§ããŸãã
ã³ãã³ãã©ã€ã³ã¯ããœãããŠã§ã¢ã®å°å ¥ãèšå®ããã£ã¢ã«ããã£ã¬ã¯ããªã®æäœãªã©ãæ§ã ãªã¿ã¹ã¯ãå¹çããè¡ãããã®åŒ·åãªããŒã«ã§ããMacã§ã¯ãã¿ãŒããã«ããWindowsã§ã¯ãã³ãã³ãããã³ãããããPowerShellããå©çšããŸãã
2-2. ç°å¢æ§ç¯ã®ããã®åºæ¬çãªç¥èãšæºå
CSSã®ç°å¢æ§ç¯ãå§ããåã«ã¯ãHTMLãCSSã®åºæ¬çãªææ³ã«ã€ããŠç解ããŠããå¿ èŠããããŸããCSSã¯HTMLãšå¯æ¥ã«é¢é£ããŠãããHTMLã®æ§é ãç解ããªããšãé©åã«ã¹ã¿ã€ãªã³ã°ãé©çšããããšã¯é£ããã§ãããã
ãŸããåè¿°ããããŒã«ã®åºæ¬æäœã«ãæ £ããŠãããŸããããç¹ã«ã³ãã³ãã©ã€ã³ã¯æ £ããªããšæžæãããšããããŸãããåºæ¬çãªã³ãã³ããèŠããããšã§å€§ããªå¹çåãèŠèŸŒããŸãã
æåŸã«ãèªåã®PCãææ°ã®ç¶æ ã«æŽæ°ãããŠããããšã確èªããŠãããŸããããOSããã©ãŠã¶ãéçºããŒã«ãªã©ã®ã¢ããããŒãã¯ãæ°ããæ©èœã掻çšããã ãã§ãªããã»ãã¥ãªãã£åŒ·åã«ãã€ãªãããŸãã
以äžããCSSã®ç°å¢æ§ç¯ãå§ããåã«ç¢ºèªããŠããããç¥èãšããŒã«ã®çŽ¹ä»ã§ãããç°å¢æ§ç¯ã¯åããŠã§ãé£ãããããŸãããäžæ©ãã€é²ããŠãããŸãããã
3. CSSã®ç°å¢æ§ç¯ã¹ããã
ããã§ã¯ãããå¹ççã«CSSãæ±ããããã«ç°å¢æ§ç¯ããŠãããŸãããããã®æé ãåãããããé²ããŠãããŸãã
3-1. ãšãã£ã¿ã®ã€ã³ã¹ããŒã«
ãŸãã¯ãCSSã®ã³ãŒãã£ã³ã°ã«äœ¿çšãããšãã£ã¿ãã€ã³ã¹ããŒã«ããŸãããšãã£ã¿ãšã¯ãã³ãŒããæžãããã®ããŒã«ã§ãããã§ã¯äŸãšããŠVisual Studio Code(VSCode)ã玹ä»ããŸããVSCodeã¯MicrosoftãæäŸããç¡æã®ãšãã£ã¿ã§ãå€ãã®éçºè ã«æçšãããŠããŸããå ¬åŒãµã€ãããããŠã³ããŒãããŠã€ã³ã¹ããŒã«ããŸããããã€ã³ã¹ããŒã«ãå®äºããããæ©ééããŠãè²ã ãªæ©èœãè©Šããªããæ £ããŠãããŸãããã
3-2. éçºç°å¢ã®æ§ç¯: Node.jsãšNPMã®å°å ¥
次ã«ãNode.jsãšNPM(Node Package Manager)ãã€ã³ã¹ããŒã«ããŸããNode.jsã¯JavaScriptããµãŒããŒãµã€ãã§å®è¡ãããããã®ãã©ãããã©ãŒã ã§ãnpmã¯Node.jsã®ããã±ãŒãžç®¡çããŒã«ã§ãããããã®ããŒã«ã¯ãCSSã®ããªããã»ããµãèªååããŒã«ãå©çšããããã«å¿ èŠãšãªããŸããããããã®å ¬åŒãŠã§ããµã€ãããææ°çãããŠã³ããŒãããã€ã³ã¹ããŒã«ããŸãããã
3-3. CSSããªããã»ããµ(Sass, Lessãªã©)ã®å°å ¥
次ã«ãCSSããªããã»ããµãå°å ¥ããŸããCSSããªããã»ããµãšã¯ãCSSã®ã³ãŒãã£ã³ã°ãå¹çåããããã®ããŒã«ã§ããªãã§ãSassãšLessã¯éåžžã«æåã§ããããã§ã¯ãSassã®å°å ¥æ¹æ³ã説æããŸããnpmã䜿çšããŠSassãã€ã³ã¹ããŒã«ããŸãã
npm install -g sass
ã³ãã³ããå®è¡ãããšãã°ããŒãã«ç°å¢ã«Sassãã€ã³ã¹ããŒã«ãããŸãã
3-4. èªååããŒã«(Gulp, Webpackãªã©)ã®èšå®
次ã«ãGulpãWebpackã®ãããªèªååããŒã«ã®èšå®ãè¡ããŸããèªååããŒã«ã¯ãCSSãJavaScriptã®ã³ã³ãã€ã«ãç»åã®å§çž®ããã©ãŠã¶ã®ãªããŒããšãã£ãäœæ¥ãèªåã§è¡ãããŒã«ã§ããããã§ã¯ãGulpã®å°å ¥ããèšå®ãŸã§ã解説ããŸãããŸãã¯ãnpmã䜿ã£ãŠGulpãã€ã³ã¹ããŒã«ããŸãã
npm install --global gulp-cli
次ã«ããããžã§ã¯ãã®ãã£ã¬ã¯ããªã«ç§»åããããã§ä»¥äžã®ã³ãã³ããå®è¡ããŸãã
npm init
npm install --save-dev gulp
ãããã®ã³ãã³ãå®è¡åŸãgulpfile.jsãšãããã¡ã€ã«ãäœæããèªååãããã¿ã¹ã¯ã®èšå®ãæžãå ããŠãããŸãã
3-5. ãããžã§ã¯ãã®äœæãšå®è£
ãããŸã§èšå®ãå®äºããããæ©éCSSã®ã³ãŒãã£ã³ã°ãå§ããŠã¿ãŸããããæ°èŠã«ãããžã§ã¯ããäœæããHTMLãã¡ã€ã«ãšçŽã¥ããCSSãã¡ã€ã«ãäœããå®è£ ã«åãçµã¿ãŸããSassã䜿ã£ãŠããå Žåã.scss圢åŒã®ãã¡ã€ã«ã§ã¹ã¿ã€ã«ãå®çŸ©ããGulpã®ã¿ã¹ã¯ã䜿ã£ãŠã³ã³ãã€ã«ããããšã§äœ¿çšå¯èœãªCSSãã¡ã€ã«ãçæããŸãããã®æµãã確èªããããšã§ãèšå®å°çã確èªãããšåæã«ãç°å¢æ§ç¯ã®ç解ãæ·±ããŸãããã
4. å¿çšç¥èïŒå¹ççãªCSSã®ã³ãŒãã£ã³ã°ãã¯ããã¯
ããã§ã¯ãå¹ççãªCSSã®ã³ãŒãã£ã³ã°ãã¯ããã¯ã玹ä»ããŸããCSSã®æžãæ¹ã«ã¯äžå®ã®ã«ãŒã«ãããããã®ã«ãŒã«ã«åŸãããšã§çŸããã³ãŒããæžãããšãã§ããŸãããã®äžã§è¯ãCSSãæžãããã®ãã¹ããã©ã¯ãã£ã¹ããæéãç¯çŽããããã®ããŒã«ãšããŠCSSãã¬ãŒã ã¯ãŒã¯ã«ã€ããŠã觊ããŠãããŸãã
4-1. å¹ççã«CSSãæžãããã®äžè¬çãªã«ãŒã«
å¹ççã«CSSãæžãããã®äžè¬çãªã«ãŒã«ãšããŠã¯ãé©åãªã»ã¬ã¯ã¿ã®äœ¿çšãå¹ ãé«ãã®æå®ãé©åãªã³ã¡ã³ãã®äœ¿çšãæããããŸãã
ãŸãé©åãªã»ã¬ã¯ã¿ã®äœ¿çšã«ã€ããŠã¯ãidãclassãèŠçŽ ãªã©ãç®çã«å¿ããŠæé©ãªã»ã¬ã¯ã¿ã䜿çšããŸããäŸãã°ãããŒãžå ã§1床ãã䜿çšããªãã¹ã¿ã€ã«ã«ã¯idã»ã¬ã¯ã¿ããåãã¹ã¿ã€ã«ãè€æ°ã®èŠçŽ ã«é©çšããéã«ã¯classã»ã¬ã¯ã¿ã䜿çšããŸãã
次ã«å¹ ãé«ãã®æå®ã«ã€ããŠã¯ãå¯èœãªéãããŒã»ã³ããŒãžãŸãã¯emãremãªã©ã䜿ã£ãŠæå®ããŸããããã«ãããç°ãªãããã€ã¹ãµã€ãºããŠãŒã¶ãŒã®èšå®ã«æè»ã«å¯Ÿå¿ã§ããã¬ã¹ãã³ã·ããªãã¶ã€ã³ãäœæã§ããŸãã
æåŸã«é©åãªã³ã¡ã³ãã®äœ¿çšã«ã€ããŠã¯ãèªåã ãã§ãªãä»ã®éçºè ãã³ãŒããç解ããããããããã«éåžžã«éèŠã§ããç¹ã«ãè€éãªã¹ã¿ã€ã«ã«ãŒã«ãããã¯ã䜿çšããŠããå Žåããªããã®ãããªã³ãŒããå¿ èŠãªã®ããã³ã¡ã³ããšããŠæèšããŠãããšè¯ãã§ãããã
4-2. è¯ãCSSãæžãããã®ãã¹ããã©ã¯ãã£ã¹
è¯ãCSSãæžãããã®ãã¹ããã©ã¯ãã£ã¹ãšããŠã¯ãDRY(Don’t Repeat Yourself)ã®ååãé©çšããããCSSã®ã¹ã³ãŒããç解ããããé©åãªåäœã®äœ¿çšãæããããŸãã
DRYã®ååã¯ãåãã³ãŒããäœåºŠãæžããªããšããååã§ãããããé©çšããããšã§åé·æ§ãæé€ããã¡ã³ããã³ã¹ãå€æŽãç°¡åã«è¡ããããã«ãªããŸããCSSã§DRYååãé©çšããã«ã¯mixinãå€æ°ãšãã£ãã®æ©èœã掻çšãããšè¯ãã§ãããã
CSSã®ã¹ã³ãŒããç解ããããšã¯ãã°ããŒãã«ãªã¹ã¿ã€ã«ãšå±æçãªã¹ã¿ã€ã«ãé©åã«ç®¡çããããéåžžã«éèŠã§ããCSSã«ã¯ã¹ã³ãŒããšããæŠå¿µãååšãããå šãŠã®ã¹ã¿ã€ã«ã¯åºæ¬çã«ã°ããŒãã«ã§ããããããæèçã«ã¹ã³ãŒããåºåãããããšã§ãã¹ã¿ã€ã«ã®ç«¶åãäºæ³å€ã®åœ±é¿ãæå°éã«æããããšãã§ããŸãã
é©åãªåäœã®äœ¿çšã«ã€ããŠã§ãããCSSã«ã¯emãremãvhãvwã%ãªã©æ§ã ãªåäœãååšããŸããããããã®åäœã¯ç¹æ§ãšäœ¿çšå Žé¢ãç°ãªããããé©åãªåäœã䜿ãåããããšãéèŠã§ããåºæ¬çã«ã¯ãæåãµã€ãºã«ã¯emãremãã¬ã¹ãã³ã·ããªã¬ã€ã¢ãŠãã«ã¯vhãvwã%ã䜿ããªã©ã®æšæºãèšãããšè¯ãã§ãããã
4-3. CSSãã¬ãŒã ã¯ãŒã¯ã®å©çš
CSSãã¬ãŒã ã¯ãŒã¯ã¯ãäºåã«å®çŸ©ãããã¹ã¿ã€ã«ãã³ã³ããŒãã³ããæäŸããŠãããããŒã«ã§ãã代衚çãªãã¬ãŒã ã¯ãŒã¯ã«ã¯BootstrapãBulmaãFoundationãªã©ããããŸãããããã®ãã¬ãŒã ã¯ãŒã¯ã䜿ã£ãŠãã¶ã€ã³ãè¡ãããšã§ãã³ãŒãã£ã³ã°ã®æéãå€§å¹ ã«ç¯çŽããããšãå¯èœã§ãã
ãã ãããããŸã§ãã¬ãŒã ã¯ãŒã¯ã¯ããŒã«ãªã®ã§ãèªå·±æµã§äœ¿ãæ¹ãèŠããã®ã§ã¯ãªããåãã¬ãŒã ã¯ãŒã¯ã®ããã¥ã¡ã³ããŒã·ã§ã³ããã£ãããšèªã¿ããã¬ãŒã ã¯ãŒã¯ã®æ©èœãæ倧éã«æŽ»çšããŸãããããŸããCSSãã¬ãŒã ã¯ãŒã¯ã¯ããããã倧éã®ã¹ã¿ã€ã«ãå®çŸ©ãããŠããããããããã®ã¹ã¿ã€ã«ããããžã§ã¯ãã®èŠä»¶ããã¶ã€ã³ã«é©ããŠãããã©ãããèæ ®ããå¿ èŠããããŸãã
5. CSSã®ãããã°ãšæé©å
æ¬ç« ã§ã¯ããŠã§ããµã€ãéçºæã«çµ¶å¯Ÿã«é¿ããŠéããªãéèŠãªã¹ãããã§ãããCSSã®ãããã°æ¹æ³ãšããã©ãŒãã³ã¹åäžã®ããã®CSSæé©åã«ã€ããŠè§£èª¬ããŸãããããã®ç¥èã身ã«ã€ããããšã§ãäžå±€é«åºŠãªéçºã¹ãã«ãç¿åŸãããŠã§ããµã€ãã®å質ãåäžãããããšãã§ããŸãã
5-1. CSSã®ãããã°æ¹æ³
ãŸãã¯ãCSSã®ãããã°æ¹æ³ã«ã€ããŠçŽ¹ä»ããŸããCSSã®ãããã°ãšã¯ããŠã§ããµã€ãã®ãã¶ã€ã³ãã¬ã€ã¢ãŠãã«äºæãã¬åé¡ãçããæããããã©ã®éšåã®CSSã«ãã£ãŠåŒãèµ·ããããŠããããç¹å®ãã解決ããããšãæããŸãã
ãããã°ã®æåã®ã¹ãããã¯ããã©ãŠã¶ã®éçºè ããŒã«ã䜿çšããããšã§ããChromeãFirefoxãªã©ã®ãã©ãŠã¶ã«ã¯éçºè ããŒã«ãæšæºã§ä»å±ããŠããããããçšããŠHTMLãCSSããªã¢ã«ã¿ã€ã ã§ç£èŠã»ç·šéããããšãã§ããŸãã
æãäžè¬çãªãããã°ã®æé ã¯ä»¥äžã®éãã§ãã 1. ããŒãžäžã§åé¡ã®ããèŠçŽ ãéžæããŸãã 2. éçºè ããŒã«ã®ãElementsããŸãã¯ãInspectorãã¿ããéããŸãã 3. éžæããèŠçŽ ã®HTMLãšCSSã確èªããŸãã 4. CSSã®ããããã£ãå€æŽããåé¡ã®è§£æ¶ãè©Šã¿ãŸãã
ãããã®ã¹ããããèžãããšã§ãã©ã®CSSããããã£ãåé¡ãåŒãèµ·ãããŠããããç¹å®ãã解決çãèŠã€ããããšãå¯èœã«ãªããŸãã
5-2. ããã©ãŒãã³ã¹åäžã®ããã®CSSæé©å
次ã«ãCSSã®æé©åã«ã€ããŠè§£èª¬ããŸããCSSãæé©åããããšã¯ããŠã§ãããŒãžã®èªã¿èŸŒã¿ãéããäžã§ãšãŠãéèŠãªèŠçŽ ã§ãã
æé©åã®äžã€ã®æ¹æ³ãšããŠãäžèŠãªCSSã»ã¬ã¯ã¿ãŒãããããã£ãåé€ããCSSã®ãããã£ã±ãŒã·ã§ã³ããããŸããããã«ãããCSSãã¡ã€ã«ã®å€§ãããæžããããšãã§ããŸãã
ãŸããåãã¹ã¿ã€ã«ãè€æ°ã®èŠçŽ ã«é©çšãããŠããå Žåããã®ã¹ã¿ã€ã«ãäžã€ã®ã¯ã©ã¹ã«ãŸãšãããšããæé©åããããŸããããã«ãããCSSãã¡ã€ã«ã®åé·æ§ãæžãããèªã¿èŸŒã¿æéãççž®ããããšãå¯èœãšãªããŸãã
æåŸã«ãç»åã®æé©åãå¿ããŠã¯ãªããŸãããèæ¯ç»åãªã©ã倧ããªãµã€ãºã®ç»åã䜿ã£ãŠãããšãŠã§ãããŒãžã®ããã©ãŒãã³ã¹ã倧ããäœäžããããšããããŸããå¯èœãªéãç»åã®ãµã€ãºãå°ããããå¿ èŠãªå Žåã«ã¯CSSã®ã¹ãã©ã€ãæè¡ãçšããããšã§ãããŒãžã®èªã¿èŸŒã¿é床ãåäžãããããšãå¯èœã§ãã
äžèšã®å šãŠã®æé©åãç©æ¥µçã«è¡ãããšã§ããŠã§ããµã€ã¹ã®ãŠãŒã¶ããªãã£ãåäžããããŠãŒã¶ãŒã«å¿«é©ãªé²èŠ§äœéšãæäŸã§ããããã«ãªããŸãã
6. CSSç°å¢æ§ç¯ã®ãã©ãã«ã·ã¥ãŒãã£ã³ã°
ãããŸã§ã§ãCSSç°å¢æ§ç¯ã®åºæ¬çãªæé ããã€ã³ãã«ã€ããŠçŽ¹ä»ããŠããŸãããããããã®äžæ¹ã§ãå®éã«èªåã§ç°å¢æ§ç¯ãé²ããŠãããšãæãã¬åé¡ã«çŽé¢ããããšãå°ãªããããŸãããããã§ã¯ããããããã©ãã«ã·ã¥ãŒãã£ã³ã°ã«ã€ããŠèããŠã¿ãŸãããã
6-1. ããããåé¡ãšãã®è§£æ±ºç
åé¡1ïŒCSSãåæ ãããªã
CSSãåæ ãããªããšãããŸãèããããã®ã¯ãã¡ã€ã«ãã¹ã®äžäžèŽã§ããHTMLãã¡ã€ã«ããCSSãã¡ã€ã«ãžã®ãªã³ã¯ãæ£ããèšè¿°ãããŠããããå確èªããŸããçžå¯Ÿãã¹ãšçµ¶å¯Ÿãã¹ãã©ã¡ãã䜿çšããŠããããé¢é£ããŸãã®ã§æ³šæãå¿ èŠã§ãã
ãŸããCSSã»ã¬ã¯ã¿ã®èª€ããèããããŸããHTMLèŠçŽ ãšCSSã»ã¬ã¯ã¿ãæ£ãããããã³ã°ãããŠãããããã§ãã¯ããŸããããæååã倧æåãå°æåããã¹ãã«ãã¹ããªããçãèŠç¢ºèªã§ãã
åé¡2ïŒã€ã³ã¹ããŒã«ããããªããã»ããµãåäœããªã
CSSããªããã»ããµãããŸãåäœããªãå Žåããã®åå ã¯äž»ã«2ã€èããããŸããäžã€ã¯ãœãããŠã§ã¢ã®äºææ§ã§ããã€ã³ã¹ããŒã«ãããœãããŠã§ã¢ãšæäœã·ã¹ãã ãäºãã«å¯Ÿå¿ããŠãããã確èªããŸãããããŸããä»ã®ã€ã³ã¹ããŒã«ããŠããããã°ã©ã ãšè¡çªããŠããªãããèŠãã¹ãã§ãã
ããäžã€ã®åå ã¯èšå®ãã¹ã«ãããã®ã§ããããªããã»ããµã®èšå®ãééã£ãŠããã°æ£ããåäœããŸããããšã©ãŒã¡ãã»ãŒãžãããèªã¿ãã©ããåé¡ãªã®ããç解ãã解決ã«åªããŸãããã
ãã®ãããªäžè¬çãªåé¡ãšè§£æ±ºçãé ã«å ¥ããŠããããšã§ãèºãããããã€ã³ããæ©æã«äºèŠããåé¡ãèµ·ããå Žåã§ãè¿ éã«å¯ŸåŠå¯èœãšãªããŸãã
7. ãŸãšã
ãã®èšäºãæåŸãŸã§èªãã§ãã ãããèª ã«ããããšãããããŸãããä»åã¯ãçŸä»£ã®ãŠã§ãéçºã«ãããCSSã®ç°å¢æ§ç¯ã«ã€ããŠããã®åºæ¬çãªæŠå¿µããå ·äœçãªæé ãŸã§ã詳现ã«åŠã³ãŸããã
7-1. CSSç°å¢æ§ç¯ã®éèŠæ§ãå確èª
ããã§CSSç°å¢æ§ç¯ã®éèŠæ§ãå床匷調ããŸããããæ£ããæ§ç¯ãããCSSç°å¢ã¯ãããªããäœæãããŠã§ããµã€ããã¢ããªã±ãŒã·ã§ã³ã®èŠãç®ãå¶åŸ¡ãããŠãŒã¶ãŒã®å©äŸ¿æ§ãšãšã³ã²ãŒãžã¡ã³ããåäžãããŸããããã¯éåžžã«ãªããããªåãããã¬ã¹ãã³ã·ããªã¬ã€ã¢ãŠããèŠèŠçã«é åçãªãã¶ã€ã³ãäœæããããã®ã³ã¢ããŒã«ãšãªããŸãã
ãŸããCSSã®æ£ç¢ºãªç¥èãšç°å¢æ§ç¯èœåã¯ãä»æ¥ã®ç«¶äºã®æ¿ãããŠã§ãéçºæ¥çã«ãããŠæ±ããããéèŠãªã¹ãã«ã§ããããªããããã³ããšã³ããšã³ãžãã¢ããŠã§ããã¶ã€ããŒããŸãã¯ããã«é¡ããè·æ¥ãç®æããŠããå Žåããã®ã¹ãã«ã¯å¿ é ãšèšããã§ãããã
ãããŠæåŸã«ããã®èšäºãéããŠCSSç°å¢æ§ç¯ã®åºæ¬çãªã¹ããããåŠã³ãç解ããããšã§ãããªãèªèº«ãç¬èªã®ãããžã§ã¯ããéå§ããèªç±ã«ã«ã¹ã¿ãã€ãºããæé©åããèœåãåŸãããšãç®æããŸããã
æåŸãŸã§ãèªã¿ããã ããããããšãããããŸããã