撮影時ã«çŸ¥ã£ã¦ãŠã‘ã°ãƒãƒ©ãƒ³ã‚¹ãŒè‰¯ããªã‚‹æ§‹å›³ã®12ã¤ã®ãƒ‘ターンãŒæ€ã‚ãšä½¿ã„ãŸããªã‚‹ã€‚「ãã‚Œã£ã½ã見ãˆã‚‹ãƒ¬ã‚¤ã‚¢ã‚¦ãƒˆã€ã‚„「視線を誘導ã•ã›ã‚‹ãƒ¬ã‚¤ã‚¢ã‚¦ãƒˆã€ã‚‚
デザナビ👀デザインを図解ã§è§£èª¬ @wkwdesigner フォãƒãƒ¼ã™ã‚‹ã¨ãƒ‡ã‚¶ã‚¤ãƒ³ã®ãƒ’ントやã‚ッカケãŒè¦‹ã¤ã‹ã‚‹ðŸ’¡ åˆå¿ƒè€…å‘ã‘デザインテクニック・Tipsï¼ãƒ‡ã‚¶ã‚¤ãƒ³ã®ãƒã‚¤ãƒ³ãƒˆã‚’図解付ãã§è§£èª¬ðŸ’¡ ツイートã ã‘ã§ã¯ã‚ã‹ã‚Šã¥ã‚‰ã„部分ã¯ãƒ–ãƒã‚°ã§è©³ã—ã解説âœï¸ https://t.co/X9FzimhN9e
モダンCSSã«ã‚ˆã‚‹çµ¶å¯¾é…置（position: absolute;）ã®å‰Šæ¸›
テã‚ストを画åƒã®ä¸Šã«é…ç½®ã€ã‚¿ã‚°ã‚’é‡ããŸã„ã€ãƒ’ーãƒãƒ¼ã‚»ã‚¯ã‚·ãƒ§ãƒ³ã§ç”»åƒã®ä¸Šã«ã‚³ãƒ³ãƒ†ãƒ³ãƒ„ã‚’é…ç½®ã€ç”»åƒã®ã‚¢ã‚¹ãƒšã‚¯ãƒˆæ¯”ã‚’ç¶æŒã•ã›ãŸã„時ãªã©ã€CSSã®çµ¶å¯¾é…置（position: absolute;）を使用ã™ã‚‹ã“ã¨ãŒã‚ã‚Šã¾ã™ã€‚ã‚‚ã¡ã‚ã‚“ã€ãã‚Œã§ã†ã¾ãã„ã時ã¯ã‚ã‚Šã¾ã™ãŒã€ãªã‚“らã‹ã®åˆ¶ç´„ãŒã‚ã£ãŸã‚Šã€ãƒ†ã‚ストãŒé•·ã„ã¨å´©ã‚ŒãŸã‚Šã—ã¾ã™ã€‚ position: absolute;ãŒå¿…è¦ã ã¨æ€ã‚ã‚Œã¦ã„ãŸå®Ÿè£…ã§ã€ä½¿ç”¨ã—ãªãã¦ã‚‚実装ã§ãるモダンCSSã®ãƒ†ã‚¯ãƒ‹ãƒƒã‚¯ã‚’紹介ã—ã¾ã™ã€‚ Less Absolute Positioning With Modern CSS by Ahmad Shadeed ã¯ã˜ã‚㫠ケース1: カードã®ã‚ªãƒ¼ãƒãƒ¼ãƒ¬ã‚¤ ケース2: カードã®ã‚¿ã‚° ケース3: ヒーãƒãƒ¼ã‚»ã‚¯ã‚·ãƒ§ãƒ³ ケース4: display: contents; ケース5: カードアイテムã®ä¸¦ã¹æ›¿ãˆ ケース6: ä¸å¤®å¯„㛠ケース7: ç”»åƒã®ã‚¢ã‚¹
Class for Zoom誕生ï¼æ—©é€Ÿè§£èª¬ã—ã¾ã™ã€‚授æ¥ã§Zoom使ã†ãªã‚‰ã“れ一択ï¼ï½œé‡‘太郎 #教育 #プãƒã‚°ãƒ©ãƒŸãƒ³ã‚° #国際政治経済
今やオンライン会è°ãƒ»ã‚ªãƒ³ãƒ©ã‚¤ãƒ³é£²ã¿ä¼šãƒ»ã‚ªãƒ³ãƒ©ã‚¤ãƒ³æŽˆæ¥ã®ä»£åè©žã§ã‚‚ã‚ã‚‹Zoomã§ã™ãŒã€Zoomã¯å¦æ ¡å‘ã‘ã«ä½œã‚‰ã‚ŒãŸã‚¢ãƒ—リケーションã§ã¯ã‚ã‚Šã¾ã›ã‚“。授æ¥ã§ä½¿ã†ã«ã¯å°‘ã—使ã„ã¥ã‚‰ã„部分もã‚ã‚Šã¾ã—ãŸã€‚ ãã‚“ãªZoomã§ã™ãŒã€ã“ã®åº¦ã€å¦æ ¡å‘ã‘ã®æœ€å¼·ã‚¢ãƒ‰ã‚ªãƒ³ãŒç™»å ´ã—ã¾ã—ãŸã€‚ãã®åã‚‚Class for Zoomï¼ ã©ã‚“ãªç‰¹å¾´ãŒã‚ã‚‹ã®ã‹ã€æ—©é€Ÿè¦‹ã¦ã¿ã¾ã—ょã†ï¼ 1. 全員見渡ã›ã‚‹ã€‚TAã¯ä¸Šã«æ˜ る。 クラス全員を見渡ã›ã‚‹ãƒ¬ã‚¤ã‚¢ã‚¦ãƒˆã§ã€ãƒšãƒ¼ã‚¸ã‚’スクãƒãƒ¼ãƒ«ã™ã‚‹å¿…è¦ã¯ã‚ã‚Šã¾ã›ã‚“。全員を一斉ã«è¦‹æ¸¡ã›ã‚‹æ©Ÿèƒ½ã¯çµæ§‹å¤§äº‹ã§ã™ã‚ˆã。 通常ã®Zoomã®ã‚°ãƒªãƒƒãƒ‰ãƒ“ューã ã¨ã€å…ˆç”Ÿã‚‚生徒ã®ä¸ã«åŸ‹ã‚‚ã‚Œã¦ã—ã¾ã„ã¾ã™ãŒã€Class for Zoomã¯ã€å…ˆç”Ÿã¯å·¦å´ã«å˜ç‹¬ã§è¡¨ç¤ºã•ã‚Œã¾ã™ã€‚ã¡ãªã¿ã«TA(Teaching Assistant)ã¯å°‘ã—大ãã‚ã«ã€ä¸Šéƒ¨ã«è¡¨ç¤ºã•ã‚Œã¾ã™ã€‚生徒ãŒãƒ—レゼンç‰ã‚’ã™ã‚‹éš›ã€åŒã˜ã‚ˆã†ã«å°‘ã—大ãã‚ã«ä¸Šéƒ¨ã«è¡¨ç¤ºã™ã‚‹ã“ã¨ã‚‚ã§ã
よãã‚るデザインã§èµ·ã“る想定外ã®ã‚³ãƒ³ãƒ†ãƒ³ãƒ„ã«å‚™ãˆã‚‹ã€CSSã®å®Ÿè£…方法ã®ã¾ã¨ã‚
タイトルやラベルã®æ–‡å—æ•°ãŒå¤šããªã£ãŸã‚Šã€ãƒœã‚¿ãƒ³ã®æ•°ãŒå¢—ãˆãŸã‚Šã€ã‚³ãƒ³ãƒ†ãƒ³ãƒ„ãŒé•·ã„å ´åˆã¨çŸã„å ´åˆãŒã‚ã£ãŸã‚Šã€æƒ³å®šå¤–ã®ã‚³ãƒ³ãƒ†ãƒ³ãƒ„ãŒä½¿ç”¨ã•ã‚ŒãŸå ´åˆã«å¯¾å¿œã§ãるよã†ã€å¿µã®ãŸã‚ã«å‚™ãˆãŸCSSã®å®Ÿè£…方法を紹介ã—ã¾ã™ã€‚ ç¾çŠ¶ã¯ãƒœã‚¿ãƒ³ãŒ2個ã ã‘ã©ã€1個ã®å ´åˆã‚„3個以上ã«å¢—ãˆã‚‹å ´åˆã‚‚考慮ã—ã¦å®Ÿè£…ã—ã¦ãŠãã¨ã€ãƒ¡ãƒ³ãƒ†ãƒŠãƒ³ã‚¹ãŒæ¥½ã«ãªã‚Šã¾ã™ã€‚ The Just in Case Mindset in CSS by Ahmad Shadeed 下記ã¯å„ãƒã‚¤ãƒ³ãƒˆã‚’æ„訳ã—ãŸã‚‚ã®ã§ã™ã€‚ ※当ブãƒã‚°ã§ã®ç¿»è¨³è¨˜äº‹ã¯ã€å…ƒã‚µã‚¤ãƒˆæ§˜ã«ãƒ©ã‚¤ã‚»ãƒ³ã‚¹ã‚’å¾—ã¦ç¿»è¨³ã—ã¦ã„ã¾ã™ã€‚ ã¯ã˜ã‚㫠「念ã®ãŸã‚ã€ã®è€ƒãˆæ–¹ よãã‚るデザインã§èµ·ã“る想定外ã«å‚™ãˆã‚‹ 終ã‚ã‚Šã« ã¯ã˜ã‚ã« Webサイトを構築ã™ã‚‹éš›ã«ã€ã‚³ãƒ³ãƒãƒ¼ãƒãƒ³ãƒˆãŒã•ã¾ã–ã¾ãªæ¡ä»¶ä¸‹ã§æ©Ÿèƒ½ã™ã‚‹ã‹ç¢ºèªã—ãŸã„å ´åˆãŒã‚ˆãã‚ã‚Šã¾ã™ã€‚「念ã®ãŸã‚（Just in Case）ã®è€ƒãˆæ–¹ã€ã¨ã¯ã€ãã®ã‚³ãƒ³ãƒãƒ¼ãƒãƒ³ãƒˆã«èµ·ã“ã‚Š
CSS Flexboxã§ãƒŠãƒ“ゲーションを実装ã™ã‚‹æ™‚ã«å½¹ç«‹ã¤ã€ã‚ªãƒ¼ãƒˆãƒžãƒ¼ã‚¸ãƒ³ï¼ˆmargin: auto;）ã®ä¾¿åˆ©ãªä½¿ã„æ–¹
ナビゲーションを実装ã™ã‚‹æ™‚ã€ã‚¢ã‚¤ãƒ†ãƒ を左端ã«è©°ã‚ã¦é…ç½®ã—ãŸã„ã‘ã©ã€1ã¤ã ã‘å³ç«¯ã«é…ç½®ã—ãŸã„ã€ãã‚“ãªæ™‚ã¯Flexboxã§ã‚ªãƒ¼ãƒˆãƒžãƒ¼ã‚¸ãƒ³ï¼ˆmargin: auto;）を使用ã™ã‚‹ã¨ç°¡å˜ã§ã™ã€‚ã¾ãŸã€è«–ç†ãƒ—ãƒãƒ‘ティã®åŠ¹æžœçš„ãªä½¿ã„æ–¹ã«ã‚‚触れられã¦ã„ã‚‹ã®ã§ã€å‹‰å¼·ã«ãªã‚Šã¾ã™ã€‚ How Auto Margins Work in Flexbox Flexboxã«ãŠã‘るオートマージンã®ä»•çµ„ã¿ã‚’ã•ã‚‰ã«è©³ã—ã知りãŸã„æ–¹ã¯ä¸‹è¨˜ã®è¨˜äº‹ã‚‚å‚考ã«ãªã‚‹ã¨æ€ã„ã¾ã™ã€‚ CSS Flexboxã§é…ç½®ã™ã‚‹æ™‚ã«çŸ¥ã£ã¦ãŠãã¨ä¾¿åˆ©ï¼ã‚ªãƒ¼ãƒˆãƒžãƒ¼ã‚¸ãƒ³ï¼ˆmargin: auto;）ã®ä»•çµ„ã¿ã¨åŠ¹æžœçš„ãªä½¿ã„æ–¹ 下記ã¯å„ãƒã‚¤ãƒ³ãƒˆã‚’æ„訳ã—ãŸã‚‚ã®ã§ã™ã€‚ ※当ブãƒã‚°ã§ã®ç¿»è¨³è¨˜äº‹ã¯ã€å…ƒã‚µã‚¤ãƒˆæ§˜ã«ãƒ©ã‚¤ã‚»ãƒ³ã‚¹ã‚’å¾—ã¦ç¿»è¨³ã—ã¦ã„ã¾ã™ã€‚ Flexboxã§ã®ã‚ªãƒ¼ãƒˆãƒžãƒ¼ã‚¸ãƒ³ã®ä»•çµ„ã¿ Flexboxã®ã‚ªãƒ¼ãƒˆãƒžãƒ¼ã‚¸ãƒ³ã«ã¤ã„ã¦magic of flexbox and auto
CSS Flexboxã§é…ç½®ã™ã‚‹æ™‚ã«çŸ¥ã£ã¦ãŠãã¨ä¾¿åˆ©ï¼ã‚ªãƒ¼ãƒˆãƒžãƒ¼ã‚¸ãƒ³ï¼ˆmargin: auto;）ã®ä»•çµ„ã¿ã¨åŠ¹æžœçš„ãªä½¿ã„æ–¹
Flexboxã‚‚ã€margin: auto;ã‚‚ã€CSSã§ã‚ˆã使ã†ãƒ—ãƒãƒ‘ティã§ã™ã€‚ ã“ã®Flexboxã¨ã‚ªãƒ¼ãƒˆãƒžãƒ¼ã‚¸ãƒ³ï¼ˆmargin: auto;）を組ã¿åˆã‚ã›ã‚‹ã¨ã€ã•ã¾ã–ã¾ãªãƒ¬ã‚¤ã‚¢ã‚¦ãƒˆãƒ»é…ç½®ãŒã§ãã¾ã™ã€‚例ãˆã°ã€ãƒŠãƒ“ゲーションã®ã‚¢ã‚¤ãƒ†ãƒ ã‚’é…ç½®ã™ã‚‹éš›ã«ã€ãƒã‚´ã ã‘左端ã«ã€æ¤œç´¢ã‚’å³ç«¯ã«ã€ã¨ã„ã£ãŸé…置もオートマージンãŒæ´»èºã—ã¾ã™ã€‚ オートマージン（margin: auto;）ã®ä»•çµ„ã¿ã€CSS Flexboxã¨ã‚ªãƒ¼ãƒˆãƒžãƒ¼ã‚¸ãƒ³ã®åŠ¹æžœçš„ãªä½¿ã„方を紹介ã—ã¾ã™ã€‚ Flexbox: Aligning with Auto Margins by Samantha Ming 下記ã¯å„ãƒã‚¤ãƒ³ãƒˆã‚’æ„訳ã—ãŸã‚‚ã®ã§ã™ã€‚ ※当ブãƒã‚°ã§ã®ç¿»è¨³è¨˜äº‹ã¯ã€å…ƒã‚µã‚¤ãƒˆæ§˜ã«ãƒ©ã‚¤ã‚»ãƒ³ã‚¹ã‚’å¾—ã¦ç¿»è¨³ã—ã¦ã„ã¾ã™ã€‚ Flexboxã«ãŠã‘るオートマージンã®å½¹å‰² マージンã«ã¤ã„ã¦ç†è§£ã™ã‚‹ オートマージンãŒå¸¸ã«å„ªå…ˆã•ã‚Œã‚‹ オートマージンã®åŠ¹æžœçš„ãªä½¿ã„æ–¹ F
互ã„é•ã„レイアウトã®çµ„ã¿æ–¹ã€œãƒ¬ã‚¹ãƒãƒ³ã‚·ãƒ–編〜 | æ ªå¼ä¼šç¤¾LIG(リグ)｜DX支æ´ãƒ»ã‚·ã‚¹ãƒ†ãƒ 開発・Web制作
ã“ã‚“ã«ã¡ã¯ï¼ã€€ã¯ã£ã¡ã‚ƒã‚“ã§ã™ã€‚ 今回ã¯ã‚³ãƒ¼ãƒ‡ã‚£ãƒ³ã‚°ã§ã‚ã‚‹ã‚ã‚‹ã®ã€Œäº’ã„é•ã„レイアウトã€ã®çµ„ã¿æ–¹ã‚’ã”紹介ã—ã¾ã™ã€‚ レスãƒãƒ³ã‚·ãƒ–対応ã§ã€SP表示時ã«ã¯ç¸¦ä¸¦ã³ã«ãªã‚‹ã‚ˆã†ã«ã—ã¾ã™ã€‚ è¦ä»¶ PC表示 ブラウザ幅ãŒ769px以上ã ã£ãŸã‚‰PCレイアウト表示 互ã„é•ã„ SP表示 ブラウザ幅ãŒ769px未満ã ã£ãŸã‚‰SPレイアウト表示 å‡ä¸€ã«ç¸¦ä¸¦ã³ flex-directionã§ä¸¦ã³ã‚’入れ替ãˆã‚‹ ãã‚Œã§ã¯æ—©é€Ÿçµ„ã‚“ã§ã„ãã¾ã—ょã†ã€‚ 互ã„é•ã„ã«ã¯ã€Flexboxã®flex-directionを使用ã—ã¾ã™ã€‚ See the Pen Alternate Layout1 by k_hatsushi (@hatsushi_kazuya) on CodePen. メディアクエリã§SP時ã«ã¯Flexboxを解除 Flexboxを解除ã™ã‚‹ã ã‘ã§ã€DOMを書ã„ãŸé †ã«ç¸¦ã«ç©ã¿ä¸ŠãŒã£ã¦ã„ãã¾ã™ã€‚ See the Pen Alterna
フãƒãƒ³ãƒˆã‚¨ãƒ³ãƒ‰ã‚¨ãƒ³ã‚¸ãƒ‹ã‚¢å¾¡ç”¨é”ã® MDN web docs を網羅ã—ãŸ
ã“ã®ãƒªã‚¹ãƒˆã¯ä½•ï¼Ÿ MDN web docs ã‚’ã€ã‚ãŸã‹ã‚‚書ç±ã®ç›®æ¬¡ã‹ã®ã”ã¨ãæ•´ç†ã—ãªãŠã—ãŸã‚‚ã®ã§ã™ã€‚ãã‚Œãžã‚Œ MDN web docs ã®è¨˜äº‹ã¸ãƒªãƒ³ã‚¯ã—ã¦ã„ã¾ã™ã€‚ ãªãœã“ã‚ŒãŒå¿…è¦ã«ãªã£ãŸã‹ã¨ã„ã†ã¨ã€äººæå¸‚å ´ã§ãƒ•ãƒãƒ³ãƒˆã‚¨ãƒ³ãƒ‰ã‚¨ãƒ³ã‚¸ãƒ‹ã‚¢ãŒå°‘ãªã™ãŽã‚‹ç¾çŠ¶ã‚’ã©ã†ã«ã‹ã™ã‚‹ã¹ã教育体制を整ãˆã‚‹ã¨ã“ã‚ã‹ã‚‰è€ƒãˆå§‹ã‚ãŸã®ã§ã™ãŒã€ãã‚Œãªã‚‰ã¾ãšã¯æ—¥é ƒãŠä¸–話ã«ãªã£ã¦ã„ã‚‹ MDN web docs ã‚’æ•™æã¨ã—ã¦æ‰±ã„ãŸã„ãªã¨æ€ã£ãŸã‹ã‚‰ã§ã™ã€‚慣れã¦ãã¦ã‚‚よãå‚ç…§ã™ã‚‹ã—「アレã©ã“ã ã£ã‘ãªã？ã€ã‚’軽減もã—ã‚„ã™ã„ã‹ãªã£ã¦ã€‚ MDN web docs ã¯å†…容ãã®ã‚‚ã®ã¯ã‹ãªã‚Šå……実ã—ã¦ã„ã‚‹ã‚‚ã®ã®ã€ãƒªãƒ³ã‚¯ãŒã‚らゆる方å‘ã«å¼µã‚Šå·¡ã‚‰ã›ã‚‰ã‚Œã¦ãŠã‚Š ã‚る一定ã®æµã‚Œã«æ²¿ã£ã¦èªã‚€ ã¨ã„ã†ã“ã¨ãŒå°‘々難ã—ã„å´é¢ã‚‚ã‚ã‚Šã¾ã™ã€‚特ã«åˆå¦è€…ã«ã¨ã£ã¦ã¯ã€è¿·åã«ãªã‚Šã‚„ã™ã„ã‹ã‚‚ã—ã‚Œã¾ã›ã‚“。 ã§ã™ã®ã§ã€åˆå¦è€…ã§ã‚‚å¦ç¿’ã—ã‚„ã™ã„よã†ã« MDN web docs 全体ã®
CSSã®ãƒ¡ãƒ‡ã‚£ã‚¢ã‚¯ã‚¨ãƒªã«ã¯é ¼ã‚‰ãšã€ã‚³ãƒ³ãƒ†ãƒ³ãƒ„ベースã§å®Ÿè£…ã™ã‚‹ãƒ¬ã‚¤ã‚¢ã‚¦ãƒˆã®æœ€è¿‘ã®æ–¹æ³• -Relearn CSS layout
CSSã®ãƒ¬ã‚¤ã‚¢ã‚¦ãƒˆã¯æœ€è¿‘ã§ã¯FlexboxãŒä¸»æµã¨ãªã‚Šã€ãã‚Œã¾ã§ã®è€ƒãˆæ–¹ã‚„実装方法ã¨ã¯å¤§ããç•°ãªã‚Šã¾ã™ã€‚@mediaã®ãƒ–レイクãƒã‚¤ãƒ³ãƒˆã‚„ãƒãƒƒã‚¯ã‚’使用ã›ãšã€CSSã®æ€§èƒ½ã‚’æ´»ã‹ã—ãŸã€ã‚³ãƒ³ãƒ†ã‚ストã«ä¾å˜ã—ãªã„コンテンツベースã§å®Ÿè£…ã™ã‚‹ã‚³ãƒ³ãƒãƒ¼ãƒãƒ³ãƒˆã®ãƒ¬ã‚¤ã‚¢ã‚¦ãƒˆæ–¹æ³•ã‚’å¦ã¹ã‚‹Relearn CSS layoutを紹介ã—ã¾ã™ã€‚ ã™ã¹ã¦ã®ãƒ‡ãƒã‚¤ã‚¹ã«å¯¾ã—ã¦ãƒ•ãƒ¬ã‚シブルãªãƒ¬ã‚¤ã‚¢ã‚¦ãƒˆãŒå¯èƒ½ã§ã€ä¸€è²«æ€§ã®ã‚ã‚‹ç°¡æ½”ãªã‚³ãƒ¼ãƒ‰ã§å®Ÿè£…ã§ãã¾ã™ã€‚ Relearn CSS layout Relearn CSS layoutã¯ã€ã‚¤ãƒ³ã‚¯ãƒ«ãƒ¼ã‚·ãƒ– HTML＋CSS＆JavaScript（紹介記事）ã€ã‚³ãƒ¼ãƒ‡ã‚£ãƒ³ã‚°Webアクセシビリティ（紹介記事）ãªã©ã®è‘—者Heydon Pickeringæ°ï¼ˆ@heydonworks）ã¨Andy Bellæ°ï¼ˆ@andybelldesign）ã®ãƒ—ãƒã‚¸ã‚§ã‚¯ãƒˆã§ã™ã€‚
1
リリースã€éšœå®³æƒ…å ±ãªã©ã®ã‚µãƒ¼ãƒ“スã®ãŠçŸ¥ã‚‰ã›
最新ã®äººæ°—エントリーã®é…ä¿¡
j次ã®ãƒ–ックマーク
kå‰ã®ãƒ–ックマーク
lã‚ã¨ã§èªã‚€
eコメント一覧を開ã
oページを開ã
{{#tags}}- {{label}}
{{/tags}}