モダンCSSã§ã‚ˆã使用ã•ã‚Œã‚‹ãƒ¬ã‚¤ã‚¢ã‚¦ãƒˆã‚’実装ã™ã‚‹ã¾ã¨ã‚ヘッダ・フッタ・コンテンツ・サイドãƒãƒ¼ã€ãƒ•ãƒ«ãƒšãƒ¼ã‚¸ã®ãƒ¬ã‚¤ã‚¢ã‚¦ãƒˆã€æœ€ä¸‹éƒ¨ã®ãƒ•ãƒƒã‚¿ã€ä¸å¤®é…ç½®ã€ã‚«ãƒ¼ãƒ‰ãªã©ã€ä¸€èˆ¬çš„ãªWebサイトやスマホアプリã®UIをモダンCSSã§å®Ÿè£…ã™ã‚‹æ–¹æ³•ã‚’紹介ã—ã¾ã™ã€‚ CSSã®å®Ÿè£…ã¯ãƒ‡ãƒã‚¤ã‚¹ãƒ™ãƒ¼ã‚¹ã‹ã‚‰ã‚³ãƒ³ãƒ†ãƒ³ãƒ„ベースã«ç§»è¡Œã—ã¦ã„ã‚‹ã®ãŒç¾çŠ¶ã§ã™ã€‚ã“ã‚Œã‹ã‚‰ã®ãƒ—ãƒã‚¸ã‚§ã‚¯ãƒˆã«å½¹ç«‹ã¤CSSã®ãƒ†ã‚¯ãƒ‹ãƒƒã‚¯ã‚’解説ã—ã¾ã™ã€‚ Layout patterns 下記ã¯å„ãƒã‚¤ãƒ³ãƒˆã‚’æ„訳ã—ãŸã‚‚ã®ã§ã™ã€‚ ※当ブãƒã‚°ã§ã®ç¿»è¨³è¨˜äº‹ã¯ã€å…ƒã‚µã‚¤ãƒˆæ§˜ã«ãƒ©ã‚¤ã‚»ãƒ³ã‚¹ã‚’å¾—ã¦ç¿»è¨³ã—ã¦ã„ã¾ã™ã€‚ モダンCSSã§å®Ÿè£…ã™ã‚‹ãƒ¬ã‚¤ã‚¢ã‚¦ãƒˆ アスペクト比ãŒç¶æŒã•ã‚Œã‚‹ç”»åƒã‚«ãƒ¼ãƒ‰ 最大値ã¨æœ€å°å€¤ã‚’決ã‚ã€ä¼¸ç¸®ã™ã‚‹ã‚«ãƒ¼ãƒ‰ コンテナã«åˆã‚ã›ã¦æœ€é©åŒ–ã•ã‚Œã‚‹ã‚«ãƒ¼ãƒ‰ スペースã«åˆã‚ã›ã¦ä¼¸ç¸®ã™ã‚‹ãƒ‘ンケー゠è–æ¯ãƒ¬ã‚¤ã‚¢ã‚¦ãƒˆ ラインナップ ç©ã¿é‡ãªã‚‹ãƒ‘ンケー゠RAM (Repeat, Auto, Minmax) メディアクエリãªã—ã®ã‚µã‚¤ãƒ‰ãƒãƒ¼ ã“ã‚Œã‹ã‚‰ã®
CSSã®æ•°å¦é–¢æ•°min()ã€max()ã€clamp()ã®åŸºæœ¬çš„ãªä½¿ã„æ–¹
head内ã§ãƒ‘フォーマンスã®å•é¡ŒãŒã‚る箇所ã€Webページã®ãƒ¬ãƒ³ãƒ€ãƒªãƒ³ã‚°ã‚’妨ã’ã‚‹è¦å› を明らã‹ã«ã™ã‚‹CSS
モダンCSSã«ã‚ˆã‚‹çµ¶å¯¾é…置（position: absolute;）ã®å‰Šæ¸›
最近見ã‹ã‘ã‚‹ã€ç²’åã®ç²—ã„グラデーションï¼ã»ã‚“ã®å°‘ã—ã®CSSã¨SVGã§å®Ÿè£…ã§ãã‚‹ã®çŸ¥ã£ã¦ãŸï¼Ÿ
デザインã«å°‘ã—æ‰‹ã‚’åŠ ãˆã€ãƒ•ã‚©ãƒ¼ãƒ を改善ã™ã‚‹å®Ÿè·µçš„ãªUIã®ãƒ†ã‚¯ãƒ‹ãƒƒã‚¯ã®ã¾ã¨ã‚
日本語フォントãŒGoogle Fontsã«å¤§é‡è¿½åŠ ï¼ã™ã¹ã¦ã®ãƒ•ã‚©ãƒ³ãƒˆãŒå•†ç”¨åˆ©ç”¨ã‚‚ç„¡æ–™ã®ãƒ•ãƒªãƒ¼ãƒ•ã‚©ãƒ³ãƒˆã§ã™
CSSã®æ–°ã—ã„プãƒãƒ‘ティ「accent-colorã€ãŒä¾¿åˆ©ï¼ä»Šã¾ã§ã§ããªã‹ã£ãŸãƒ•ã‚©ãƒ¼ãƒ è¦ç´ ã®ã‚«ãƒ©ãƒ¼ã‚’ç°¡å˜ã«å¤‰æ›´ã§ãã‚‹
ã“れを見逃ã—ãŸã‚‰æï¼ã“ã“3å¹´é–“ã§ä¸€ç•ªã®æœ€å®‰å€¤ã€Adobe CC コンプリートプランã®ã‚»ãƒ¼ãƒ«ãŒAmazonã§é–‹å‚¬
CSSã§ãƒ–ãƒãƒƒã‚¯è¦ç´ ã®å¹…をコンテンツã®ã‚µã‚¤ã‚ºã´ã£ãŸã‚Šã«ã—ãŸã„時ã®ã“ã‚Œã‹ã‚‰ã®è¨˜è¿°æ–¹æ³•
æ–°ã—ã„CSSリセットã¯ã‚·ãƒ³ãƒ—ルã§è»½é‡ï¼CSSã®æ–°ã—ã„機能を使用ã—ãŸCSSリセット -The New CSS Reset
Web制作ã«å½¹ç«‹ã¤ï¼é¢å€’ãªCSSã®ã‚³ãƒ¼ãƒ‰ã‚’ç°¡å˜ã«ç”Ÿæˆã§ãる便利ツールをã¾ã¨ã‚ã¾ã—ãŸ
スクãƒãƒ¼ãƒ«ã«é€£å‹•ã™ã‚‹ã‚¢ãƒ‹ãƒ¡ãƒ¼ã‚·ãƒ§ãƒ³ã‚’実装ã™ã‚‹æ™‚ã¯ã€JSã®Intersection Observerを使用ã™ã‚‹ã¨ç°¡å˜ã«å®Ÿè£…ã§ãã‚‹
CSSã®insetプãƒãƒ‘ティã§ä¸Šä¸‹å·¦å³ã®ä¸å¤®ã«é…ç½®ã™ã‚‹æ™‚ã®ã€Œposition: fixed;ã€ã§ã®æ–°ã—ã„記述方法
HTML tableã®å®Ÿè£…ãŒã“ã‚Œã¾ã§ã¨å¤‰ã‚ã‚‹ï¼Googleデベãƒãƒƒãƒ‘ーã«ã‚ˆã‚‹å¤‰æ›´ç‚¹ã®è§£èª¬ -TablesNG
Webサイトやスマホアプリã®UIã§ã‚ˆã使用ã™ã‚‹ã‚¢ã‚¤ã‚³ãƒ³ã®SVGコードをコピペã§ç°¡å˜ã«åˆ©ç”¨ã§ãã‚‹ -Akar Icons
クリスタã§ã‚‚使ãˆã‚‹é«˜å“質ãªãƒ–ãƒ©ã‚·ç´ æï¼Photoshopã®æ–°ä½œãƒ–ラシãŒAdobeå…¬å¼ã‹ã‚‰ç„¡æ–™ã§ãƒ€ã‚¦ãƒ³ãƒãƒ¼ãƒ‰ã§ãã‚‹ãž
CSSコンテナクエリã®ç™»å ´ã§ã€ãƒ‡ã‚¶ã‚¤ãƒ³ã®ã‚„り方も考ãˆæ–¹ã‚‚大ãã変ã‚ã‚‹
CSSã ã‘ã§ãƒ¢ãƒ¼ãƒ•ã‚£ãƒ³ã‚°ã‚’実装ã§ãã‚‹ï¼æ–‡å—列をé•ã†æ–‡å—列ã«æ»‘らã‹ã«å¤‰åŒ–ã•ã›ã‚‹CSSã®ãƒ†ã‚¯ãƒ‹ãƒƒã‚¯
CSSã®é€²åŒ–ãŒã™ã”ã™ãŽã‚‹ï¼æ–°ã—ã„レスãƒãƒ³ã‚·ãƒ–デザインã®å®Ÿè£…方法を解説
{{#tags}}- {{label}}
{{/tags}}