
- WebããŒã±ãã£ã³ã°
- 2021.07.25
Webå¶äœãç¬åŠããããã©ãäœããå§ããããããã ãã…
ããããªãããšã ããã§æ«æããã…
å¹ççã«åŠç¿ãé²ããã«ã¯ã©ãããããããã ãã…
ãã®ãããªãæ©ã¿ã¯ãããŸãããïŒ
倧äžå€«ã§ããå®å¿ããŠãã ããïŒ
Webå¶äœåå¿è ãªã誰ããã¶ã€ããå£ã§ãããå®éã®çŸå Žã§ãå®è£ æ¹æ³ãåãããªããšããå Žé¢ã¯äœåºŠããããŸãã
ãã®å£ãä¹ãè¶ããããã«ã¯ãæ å ±ãéããŠèªåãªãã«è©Šè¡é¯èª€ãéããŠãããããããŸããã
ããã°ã©ãã³ã°ã«è©³ããäººã«æããŠããããšããã®ãäžçªã®è¿éã§ãããèªåã§ãããæ€çŽ¢ããŠè§£æ±ºããŠããåãå¿ èŠã§ãã
ããã§æ¬èšäºã§ã¯ãWebå¶äœã«å¿ é ã®æè¡ãç¥èãåŠã¹ããµã€ããã玹ä»ããŸãïŒ
Webå¶äœåå¿è ã®æ¹ã¯ããã²æ¬èšäºã§ã玹ä»ãããµã€ããåèã«ããŠã¿ãŠãã ããã
ãã¡ãããä»ããç¡æã§åãåãâŒ
ãŸãæåã«ãWebå¶äœã®åºç€åŠç¿ã«åœ¹ç«ã€ãµã€ãã3ã€ã玹ä»ããŸãã
ããã§ã¯é çªã«èª¬æããŠãããŸãã
Progateã¯ããªã³ã©ã€ã³ã§ããã°ã©ãã³ã°ãåŠã¹ãåŠç¿ãµã€ãã
äŒå¡ç»é²ãããããšã§Webå¶äœã«æ¬ ããããšã®ã§ããªãHTMLãCSSãã¯ãããæ§ã ãªããã°ã©ãã³ã°èšèªãåŠç¿ã§ããŸãã
ãããããããã£ã©ã¯ã¿ãŒã®è§£èª¬ãšãšãã«ãå®éã«ãã©ãŠã¶äžã§æãåãããªããåŠç¿ããŠããã®ã§ãå šãç¥èããªã人ã§ãã²ãŒã æèŠã§æ¥œããé²ããããŸãã
ãŸããåãããªãéšåã¯ãã³ããåãåãããšãã§ããã®ã§ãèªåã§èããåãé€ãããšãã§ããã§ãããã
åºæ¬çãªå 容ã¯ç¡æã§ãåããããŸãããå¿çšç·šãå«ãå šãŠã®ã¬ãã¹ã³ãåããããã«ã¯æé¡980åã®ææãã©ã³ã«å€æŽããå¿ èŠããããŸãã
ãŸãã¯ç¡æã®ç¯å²ã§è©ŠããŠã¿ãŠãæ¬æ Œçã«åŠã³ãããšæã£ãå Žåã¯ææãã©ã³ã§åŠç¿ããŠãããŸãããã
ãããã€ã³ã¹ããŒã«ã¯ãåç»ã§ããã°ã©ãã³ã°ãåŠã¹ãåå¿è åãã®ããã°ã©ãã³ã°åŠç¿ãµãŒãã¹ã§ãã
åç»åŠç¿ãµãŒãã¹ã¯ä»ã«ããããããããŸããããããã€ã³ã¹ããŒã«ã§ã¯1æ¬ã®åç»ãé·ããŠã3åå°ã§äœãããŠããã®ã§ãéäžã§é£œãã¥ããããµã¯ãµã¯åŠç¿ãé²ããããšãã§ããã®ããã€ã³ãã
ãã¡ããProgateãšåæ§ã«ç¡æã§åŠç¿ã§ããéšåããããŸãããäžçŽè ããäžçŽè ã®æ¹ã察象ãšããã³ãŒã¹ãåããããã«ã¯ãæé¡980åã®ææãã©ã³ã«ããå¿ èŠããããŸãã
ææãã©ã³ã«ã¯ãåç»ã®ãæåèµ·ããæ©èœããã€ããŠããã®ã§ãé³å£°ãåçã§ããªãéå€ã®é»è»å ãªã©ã§ãåŠç¿ã§ããŸãã
ãµã«ã¯ã«ã¯ãããµã«ã§ããããå³è§£èª¬æãã¬ãžã³ãã®ç¥ã§ããã®ååã®ãšãããèªè ç®ç·ã§ããããããWebå¶äœã®è§£èª¬ã¡ãã£ã¢ã§ãã
å°éçšèªã¯ãªãã¹ã䜿ãããç»åããããã䜿ãããŠããã®ã§ãWebå¶äœãåŠã³å§ããé ã¯ç¹ã«ãäžè©±ã«ãªããµã€ãã§ãã
ã³ãŒãã£ã³ã°ã ãã§ãªããã¶ã€ã³ã®å 容ãªã©ãç¶²çŸ ããŠããã®ã§ãWebå¶äœã§ã€ãŸãããæã«ã¯ããŸãã¯ãã®ãµã€ããèŠã«è¡ããŸãããã
次ã«ãœãŒã¹ã³ãŒãã®åŠç¿ã«ãããŠåœ¹ç«ã€ãµã€ããã玹ä»ããŸãã
é çªã«èª¬æããŠãããŸãã
CSSã»ã¬ã¯ã¿ããŒãã·ãŒãã¯ãCSSã»ã¬ã¯ã¿ã®çš®é¡ãšäœ¿çšäŸãå³è§£ä»ãã§ãŸãšããŠãããµã€ãã§ãäžèº«ã¯ç¥ã£ãŠãããšäŸ¿å©ãªå 容ã°ããã§ãã
CSSã»ã¬ã¯ã¿ãšã¯ãäžå³ã®ããã«CSSãé©çšããããHTMLèŠçŽ ãæå®ããããã®ãã®ã
æ¬ãµã€ãã§ã¯ã飿¥ã»ã¬ã¯ã¿ããbefore/afterãªã©ã®ç䌌èŠçŽ ãäœçªç®ã®èŠçŽ ããæå®ããnth-childãªã©ãå®åã§ããã䜿çšããã»ã¬ã¯ã¿ãåããããããŸãšããããŠããŸãã
CSSã»ã¬ã¯ã¿ãããŸã䜿ãããªãããšã§ãã³ãŒãã£ã³ã°ãã¹ããŒãã£ãã€ç¶ºéºãªãœãŒã¹ã³ãŒãã§é²ããããã®ã§ããã²æ¬ãµã€ããåèã«CSSã»ã¬ã¯ã¿ããã¹ã¿ãŒããŸãããã
FlexboxããŒãã·ãŒãã¯ãFlexboxãå³è§£ãšãšãã«ãããããããŸãšããŠãããµã€ãã§ãã
Flexboxãšã¯ãã·ã³ãã«ãªCSSã³ãŒãã®ã¿ã§èŠçŽ å ã®é 眮ã衚瀺é åºãå€ãããããšãŠã䟿å©ãªå®è£ æ¹æ³ã
以åã¯ãäžéšãã©ãŠã¶ã§ã¯å¯Ÿå¿ããŠããªãããšããããšããããŸããããä»ã§ã¯ã»ãšãã©ã®ãã©ãŠã¶ã§åæ ããããã«ãªã£ãŠãããã¬ã€ã¢ãŠãèšèšã®äž»æµã«ãªã£ãŠããŸãã
ãªã®ã§ãããããWebå¶äœããã£ãŠããããã§ãå¿ ã䜿ãããªããããã«ããŠããŸãããã
Flexboxã¯ãã»ãã®CSSããããã£ã«æ¯ã¹ãŠã§ããããšãå€ãããã䟿å©ãªåé¢å šãŠèŠããããããã¡ãã¡ãããã§èª¿ã¹ãã®ãå²ãšå€§å€ã ã£ãã®ã§ããããã®ã·ãŒããããã°ããã«ç¢ºèªã§ããã®ã§ããšãŠã䟿å©ã§ãã
WordPress Codexãšã¯ãWordPressã®ä»æ§ãããŠããŠãèšèŒãããWordPressã®å ¬åŒããã¥ã¢ã«ã§ãã
ãå ¬åŒããšã¯èšã£ãŠãããã®ããã¥ã¢ã«ãäœã£ãŠããã®ã¯ãWordPressã䜿ã£ãŠããäžçäžã®ãŠãŒã¶ãŒã
ãªãŒãã³ãœãŒã¹ã§ããWordPressã¯æ¥ã 鲿©ããŠããã®ã§ãããã¥ã¢ã«ããªãŒãã³ã«ããŠäžçäžã®äººãã¡ãç·šéã§ããããã«ããŠãã¹ããŒãã£ãªå€åã«å¯Ÿå¿ã§ããããã«ããŠããã®ã§ãã
WordPerss Codexã¯ãæ¬æ¥å šãŠè±èªãªã®ã§ãããæå¿ã®äººãã¡ã®æã«ãã£ãŠç¿»èš³ãããæ¥æ¬èªçãã¯ããä»ã®èšèªã®ããŒãžã§ã³ã倿°ååšããŸãã
WordPressã§äœ¿çšããPHPã®ç¬èªã¿ã°ã¯ããã®ãµã€ããèŠãã°å€§äœèŒã£ãŠããã®ã§ãWordPressã®åæ±èª¬ææžãšããŠåœ¹ç«ã€ããšã§ãããã
CodePenã¯ããã©ãŠã¶äžã§HTMLãCSSãJavaScriptã®ã³ãŒããèšè¿°ãããªã¢ã«ã¿ã€ã ã§è¡šç€ºã確èªããªããéçºã§ãããµãŒãã¹ã§ãã
CodePenã§ã§ããããšã¯ããã£ãšäžèšã®ãšããã
é çªã«è§£èª¬ããŠãããŸãã
CodePenã䜿ãã°ãäžå³ã®ããã«Webãã©ãŠã¶äžã§HTMLãCSSãJavaScriptãªã©ã®ã³ãŒãã£ã³ã°ãå¯èœã§ãã
ã³ãŒãã£ã³ã°ããããšãã®å 容ãããªã¢ã«ã¿ã€ã ã§äžæ®µã¹ããŒã¹ã«åæ ãããä»çµã¿ãªã®ã§ãå®è£ ãããã³ãŒãããã¹ãã§ç¢ºèªãããšãã«äŸ¿å©ã§ãã
CodePenã§æžãããœãŒã¹ã³ãŒãã¯ãCodePenãŠãŒã¶ãŒãžã¯ãã¡ããã®ããšãTwitterãFacebookãªã©ã®SNSã§ãå ±æã§ããŸãã
ä»ã®ãŠãŒã¶ãŒããœãŒã¹ã³ãŒããèŠãããããããã³ããšã³ããå匷ããŠãã人ã«ã¯ãŽã£ãããªãµã€ãã§ãã
CodePenãŠãŒã¶ãŒãäœã£ããœãŒã¹ã³ãŒãã«å¯ŸããŠã¯ãããããããã³ã¡ã³ããã§ããã®ã§ãããã³ããšã³ããšã³ãžãã¢ã®ããã®SNSã®ãããªäœ¿ãæ¹ãã§ããŸãã
CodePenã§ã¯ãäœã£ããœãŒã¹ã³ãŒããããã°ãWebãµã€ãã«åã蟌ãããšãå¯èœã§ãã
å®éã«CodePenãWebãµã€ãã«åã蟌ããšãäžèšã®ããã«è¡šç€ºãããŸãã
See the Pen
eCommerce Slide Effect -> GSAP & JS by Sebi (@DivineBlow)
on CodePen.
åºå žïŒhttps://codepen.io/DivineBlow/pen/jOBdJKK
ã©ã®ãããªãœãŒã¹ã³ãŒããæžãã°ãã©ã®ãããªçµæã«ãªãã®ããäžç®ã§åããã®ã§ãåŠç¿ããå 容ãããã°ãªã©ã§ãŸãšããéã«ãšãŠã䟿å©ã§ãã
æåŸã«ãã¶ã€ã³ã®åŠç¿ã«åœ¹ç«ã€ãµã€ããã玹ä»ããŸãã
é çªã«åãµã€ãã®ç¹åŸŽã説æããŠãããŸãã
MUUUUU.orgã¯ãåèã«ãªããããªã¯ãªãªãã£ã®é«ãWebãµã€ããå³éžããããWebãã¶ã€ã³ãªã³ã¯éãµã€ããã§ãã
æ¥çããã¶ã€ã³ãã€ã¹ããã¡ã€ã³ã«ã©ãŒãªã©ã§çµã蟌ã¿ãå¯èœã§ãæ¢ããããµã€ãã«ãªãŒãããããèšèšã«ãªã£ãŠãããããå®åã§ãã¯ã©ã€ã¢ã³ãããã¶ã€ããŒãšWebãã¶ã€ã³ã®ã€ã¡ãŒãžãå ±æããéã«ããæŽ»çšãããŸãã
MUUUUU.orgã®ä»ã«ãSANKOU!ãšãããµã€ãããããŸãã®ã§ããã²ãã¡ããåèã«ããŠã¿ãŠãã ããã
Parts.ã¯ãã¡ã€ã³ããžã¥ã¢ã«ãããã¿ãŒãªã©ãããŒããã»ã¯ã·ã§ã³ããšã®ãã¶ã€ã³ãäžèЧã«ãããµã€ãã§ãã
ã³ã³ããŒãžã§ã³ãããããã®å¶æ¥çšWebãµã€ããBtoBããŒã±ãã£ã³ã°ã«åã£ãæ§æã®ãµã€ããéããŠãããããLPïŒã©ã³ãã£ã³ã°ããŒãžïŒã®ãã¶ã€ã³ãããéã«ãšãŠãåèã«ãªããŸãã
é è²ã®èŠæ¬åž³ãšã¯ãéžãã è²ãããŒã«ã©ãŒã«ããŠãè²ã®æ³åããå€åœ©ãªé è²ãææ¡ããŠããããµã€ãã§ãã
奜ããªè²ãã¯ãªãã¯ãããšãäžå³ã®ããã«è²ã®è©³çްã確èªã§ããè£è²ãé¡äŒŒè²ãªã©ãåºãŠããŸãã
ããã«ãã®äžã«ã¯ããµãã«ã©ãŒãã¢ã¯ã»ã³ãã«ã©ãŒãã°ã©ããŒã·ã§ã³ãªã©æ§ã ãªé è²ã®ææ¡ãããŠãããã®ã§ãWebãµã€ãã®é è²ã決ããéã«ãšãŠãåèã«ãªããŸãã
é·å¹Žã®åŠæ ¡æè²ã®åœ±é¿ã§ãååŒ·ïŒæèšããšããæŠå¿µãæã¿ä»ããŠãã人ãå€ãã§ãããWebå¶äœã®åŠç¿ã«ãããŠã¯æèšããå¿ èŠã¯å šããããŸããã
å®è£ ã®ä»æ¹ãåãããªããŠããã°ã°ãã°ãã£ãšè§£æ±ºçãèŠã€ããããšãã§ããŸãã
ãšã¯ãããéœåºŠèª¿ã¹ãŠãããšæéãããã£ãŠããŸããŸãããã
ãªã®ã§ãä»åã玹ä»ãããããªãµã€ãã®ããã«ä»åŸã掻çšã§ããããªãµã€ããããã°ããã¯ããŒã¯ããŠããããã€ã§ãåŒãåºããããã«ããŠãããŸãããã
æ±äº¬ããªãŒã©ã³ã¹ã§ã¯ãæªçµéšããã§ãWebå¶äœã®ä»äºãã§ããã¬ãã«ãç®æããªã³ã©ã€ã³ã¹ã¯ãŒã«âãã€ãã©âãéå¶ããŠããŸãã
ãã€ãã©ã¯Webå¶äœãæ¬æ°ã§èªåã®ä»äºã«ããã人ã®ããã®ãªã³ã©ã€ã³ã¹ã¯ãŒã«ã
äœã£ãŠããŠã¯ã¯ã¯ã¯ããå¶äœèª²é¡ãSlackãéããåŠç¿ã³ãã¥ããã£ãåãããããåç»ãªã©ã楜ããç¶ãããã工倫ãè©°ãŸã£ãŠããŸãã
Webå¶äœãå®éã«ä»äºãããéã«æ±ããããå®è·µçãªã¹ãã«ãåŠã¹ãŸãïŒ
HTML/CSS
Bootstrap
ãµãŒããŒãšãã¡ã€ã³ã®åºç€
JavaScript
jQuery
Sass(Scss)
PHP
SQLã®åºç€
WordPress
宿¡ä»¶ãšåãããã«ããã¶ã€ã³ããŒã¿ããã³ãŒãã£ã³ã°ãã課é¡ããWordPressã®ãããã¯ãšãã£ã¿ãŒ ã䜿ã£ãæ°ããå¶äœæ¹æ³ãŸã§ã
ããªãŒã©ã³ã¹ã§ä»äºãããéã®ã宿¡ä»¶ããèãã ãããå®è·µçãªã«ãªãã¥ã©ã ã¯ä»ã®ã¹ã¯ãŒã«ã«ã¯ãªããã€ãã©ã®åŒ·ã¿ã§ãã
ããã«ãæ«æãããªãã¡ã³ã¿ãŒé£ãã¢ããããŒãããç¶ããŠç¡æéã§èŠèŽã§ããè¬åº§å å®¹ãæŽ»çºã«æŽ»åããŠãããªã³ã©ã€ã³ã®åŠç¿ã³ãã¥ããã£ãªã©ããã€ãã©ã®é åã¯å€å²ã«æž¡ããŸãã
ããããWebå¶äœãä»äºã«ããŠãããããšèããããæ¹ã¯ããã²ãã€ãã©ããã§ãã¯ããŠã¿ãŠãã ãããïŒ
äžã®ãããŒãã¿ããããŠäžç䜿ããWebã¹ãã«ã30ç§ã§èšºæããŠã¿ãŠãïŒ