ã©ã†ã—ã¦HTML5ãŒå»ƒæ¢ã•ã‚ŒãŸã®ã‹ | フューãƒãƒ£ãƒ¼æŠ€è¡“ブãƒã‚°
フãƒãƒ³ãƒˆã‚¨ãƒ³ãƒ‰é€£è¼‰ã®5記事目ã§ã™ã€‚ HTML5ãŒ2021å¹´ã®1月ã«å»ƒæ¢ã•ã‚Œã¾ã—ãŸã€‚ Webエンジニアã¨ã—ã¦ãƒãƒªãƒãƒªæ´»èºã•ã‚Œã¦ã‚‹æ–¹ã‚„エグゼクティブテックリードã®ã‚ˆã†ãªè‚©æ›¸ãã‚’æŒã¤æ–¹ã«ã¨ã£ã¦ã¯ã€Œä½•ã‚’ã„ã¾ã•ã‚‰ã€ã¨ã„ã†è©±é¡Œã‹ã¨æ€ã„ã¾ã™ã€‚ ã—ã‹ã—ãªãŒã‚‰ã€ä»Šå¹´ã‚‚新人ã•ã‚“å…¥ã£ã¦ãã¦ãã ã•ã£ãŸã®ã§ã€ãƒ—ãƒã‚°ãƒ©ãƒŸãƒ³ã‚°ã‚’å¦ç¿’ä¸ã«HTML5ã¨ã„ã†æ–‡å—列ã«æ‚©ã¾ã•ã‚Œãªã„よã†ã«ã€ãã‚‚ãã‚‚HTML5ã¨ã¯ä½•ã‹ã‚„ã€å»ƒæ¢ã•ã‚ŒãŸçµŒç·¯ã‚’ã¾ã¨ã‚ã¦ã¿ã¾ã™ã€‚ HTML5ã¨ã¯Webサイトを作るã¨ãã«å¿…ãšæ›¸ãã“ã¨ã«ãªã‚‹HTML。Webサイトã®ã‚³ãƒ³ãƒ†ãƒ³ãƒ„ã€ã¤ã¾ã‚Šä¸èº«ã‚„æ§‹é€ ã‚’ä½œã‚‹ãŸã‚ã«ä½¿ã†ãƒžãƒ¼ã‚¯ã‚¢ãƒƒãƒ—言語ã§ã™ã€‚ ãã—ã¦ã€ãã®æœ€è¿‘版ã¨ã—ã¦10å¹´ã»ã©å‰ã«ç™»å ´ã—ãŸHTML5。当時㯠Webニュースãªã©ã§ç››ã‚“ã«ç‰¹é›†ãŒçµ„ã¾ã‚Œã¦ã„ã¾ã—ãŸãŒã€ã“ã®HTML5ãŒã¤ã„ã“ãªã„ã ã€2021å¹´1月28æ—¥ã«å»ƒæ¢ã•ã‚Œã¾ã—ãŸã€‚ 広義ã®HTML5 / ç‹ç¾©ã®HTML5HTML5
JavaScriptã§ä»»æ„ã®HTMLè¦ç´ ã‚’Picture-in-Pictureã™ã‚‹
ã¿ãªã•ã‚“ã¯Picture-in-Picture(PiP)ã¨ã„ã†æ©Ÿèƒ½ã‚’使ã£ãŸã“ã¨ãŒã‚ã‚Šã¾ã™ã‹ã€‚PiPã¯å‹•ç”»ã‚³ãƒ³ãƒ†ãƒ³ãƒ„ãªã©ã‚’æµ®éŠã™ã‚‹å°çª“ã«è¡¨ç¤ºã™ã‚‹æ©Ÿèƒ½ã§ã™ã€‚å°çª“ã¯ã‚¦ã‚£ãƒ³ãƒ‰ã‚¦ã®å¤–å´ã‚’自由ã«ç§»å‹•ã§ãã¾ã™ã€‚ デスクトップãŒè³‘ã‚„ã‹ã«ãªã‚ŠãŒã¡ãªPCã§ã‚‚PiPã¯å¤§æ´»èºãªã®ã§ã™ãŒã€ç‰¹ã«ã‚¹ãƒžãƒ¼ãƒˆãƒ•ã‚©ãƒ³ã«ãŠã„ã¦ã¯æ•°å°‘ãªã„「ウィンドウã€æ©Ÿèƒ½ã«ãªã‚Šã¾ã™ã€‚Androidã¯ã‚‚ã¡ã‚ã‚“ã€iOS14も対応ã—ãŸã“ã¨ã§è©±é¡Œã«ãªã‚Šã¾ã—ãŸã€‚ ã“ã‚Œã«ã‚ˆã£ã¦ã‚¹ãƒžãƒ›ä¸€å°ã‚ã‚Œã°ã€ã‚½ã‚·ãƒ£ã‚²ã®å…¬å¼ç”Ÿæ”¾é€ã‚’見ãªãŒã‚‰ã‚½ã‚·ãƒ£ã‚²ã®ã‚¤ãƒ™ãƒ³ãƒˆã‚’周回ã™ã‚‹åœ°ç„ã®ã‚ˆã†ãªè¡Œç‚ºãŒå¯èƒ½ã«ãªã‚Šã¾ã—ãŸã€‚ 利用者ã¨ã„ã†è¦–点ã‹ã‚‰è¦‹ã‚‹ã¨éžå¸¸ã«ä¾¿åˆ©ãªã®ã§ã™ãŒã€é–‹ç™ºè€…ã‹ã‚‰è¦‹ã‚‹ã¨å‹•ç”»ã—ã‹è¡¨ç¤ºã§ããªã„ã®ã¯ãªã‹ãªã‹ä½¿ã„所ãŒé›£ã—ããªã‚Šã¾ã™ã€‚ãã“ã§ã€ã“ã®æ©Ÿèƒ½ã‚’使ã£ã¦å¥½ããªæƒ…å ±ã‚’è¡¨ç¤ºã§ããªã„ã‹å®Ÿé¨“ã—ã¦ã¿ã¾ã—ãŸã€‚ PiP機能ã®å¯¾å¿œç’°å¢ƒ Chrome 70 Firefox 71（制é™ä»˜ã） mac
ユーティリティーファーストã¨Tailwind CSSã®ã‚¹ã‚¹ãƒ¡ - Qiita
.align-left { text-align: left; } .align-center { text-align: center; } .align-right { text-align: right; } .align-top { vertical-align: top; } .align-middle { vertical-align: middle; } .align-bottom { vertical-align: bottom; } .mb-1 { margin-bottom: 1rem; } .mb-2 { margin-bottom: 2rem; } .mb-3 { margin-bottom: 3rem; } ã“れをHTMLã«å½“ã¦ã¾ãã£ã¦ç”»é¢ã‚’作れã°ã»ã‚‰ç°¡å˜ï¼ãŠæ‰‹è»½ã«ç”»é¢ãŒä½œã‚Œã‚‹ãï¼ ã¨è¨€ã†æ„Ÿã˜ã§ã‚る。 ã“ã‚Œã®è‰¯ã„ã¨ã“ã‚ã¨ã„ã†ã®ã¯ã€ã‚µã‚¯ã‚µã‚¯ç”»é¢ãŒä½œã‚Œã‚‹ã“ã¨ã€‚ã“れを体
ç”»åƒã«ã‚ˆã‚‹ Layout Shift ãŒç„¡ããªã‚‹ Web ãŒã‚„ã£ã¦æ¥ã‚‹ - mizdra's blog
ã¯ã˜ã‚ã« Web ã§ã¯å¤æ¥ã‚ˆã‚Š <img> タグを用ã„ã¦ç”»åƒã‚’èªã¿è¾¼ã‚“ã§ã„ã¾ã—ãŸ. ã—ã‹ã— <img> ã‚¿ã‚°ã«ã¯ã‚¢ã‚¹ãƒšã‚¯ãƒˆæ¯”ã«é–¢ã™ã‚‹æƒ…å ±ã‚’åŸ‹ã‚込むãŸã‚ã®å±žæ€§ãŒç”¨æ„ã•ã‚Œã¦ã„ã¾ã›ã‚“. ãã®ãŸã‚, ブラウザãŒç”»åƒã‚’ãƒãƒƒãƒˆãƒ¯ãƒ¼ã‚¯ã‹ã‚‰ fetch ã—ã¦èªã¿è¾¼ã¿ãŒå®Œäº†ã™ã‚‹ã¾ã§, レスãƒãƒ³ã‚·ãƒ–㪠img è¦ç´ ã®å¯¸æ³•ã‚’決定ã§ããš, ページã«ã‚¬ã‚¿ãƒ„ã‚ (Layout Shift) ãŒç”Ÿã˜ã‚‹å•é¡ŒãŒã‚ã‚Šã¾ã—ãŸ. ã“ã®å•é¡Œã‚’解決ã™ã‚‹ãŸã‚以å‰ã‚ˆã‚Š, アスペクト比を埋ã‚込むãŸã‚ã®æ–°ãŸãªå±žæ€§ã®å°Žå…¥ãŒæ案ã•ã‚Œã¦ã„ã¾ã—ãŸ. ã—ã‹ã—最近è°è«–ã«å‹•ããŒã‚ã‚Š, æ—¢å˜ã®å±žæ€§ã‚’利用ã™ã‚‹æ–¹æ³•ãŒæ案ã•ã‚Œ, ブラウザã«å®Ÿè£…ã•ã‚Œå§‹ã‚ã¦ã„ã¾ã™. ã“ã“ã§ã¯å•é¡Œã®èƒŒæ™¯, æ案ã¨è°è«–ã®å¤‰é·, ãã—ã¦é–‹ç™ºè€…ãŒå–ã‚‹ã¹ã対応ã«ã¤ã„ã¦ç´¹ä»‹ã—ã¾ã™. ã¯ã˜ã‚ã« img タグ㨠Layout Shift intrinsicsize 属性 intrinsicsize
HTML+CSSコーディングã®è¨€èªžåŒ– - Qiita
ã¯ã˜ã‚ã« HTML＋CSSコーディングã«ãŠã‘る制作者ã®æ€è€ƒã‚„判æ–ã€ã‚¢ãƒ—ãƒãƒ¼ãƒã€ã‚³ãƒ¼ãƒ‰åŒ–ã«è‡³ã‚‹ã¾ã§ã®æµã‚Œãªã©ã‚’分解ã—ã€ã‚³ãƒ¼ãƒ‰ã®çŠ¶æ…‹ãªã©ã‚‚å«ã‚ã¦ãã‚Œãžã‚Œã‚’çŸã„言葉ã§è¨€èªžåŒ–ã—ã¾ã—ãŸã€‚ 以下ã®ã‚ˆã†ãªåŠ¹æžœãŒæœŸå¾…ã§ãã¾ã™ã€‚ HTMLã¨CSSを使ã£ã¦ãŠã“ãªã£ã¦ããŸäº‹ã‚’客観視・å†èªè˜ã§ãã‚‹ 始原的ãªå‹•æ©Ÿã‚’把æ¡ã™ã‚‹ã“ã¨ã§ã€æ‰‹æ³•ã‚’別ã®è¦–点ã§æ‰ãˆã‚‰ã‚Œã‚‹ã‚ˆã†ã«ãªã‚‹ èªè˜åˆã‚ã›ã‚„熟練度確èªã«åˆ©ç”¨ã—ã€åˆ¶ä½œæ™‚ã®ã‚³ãƒŸãƒ¥ãƒ‹ã‚±ãƒ¼ã‚·ãƒ§ãƒ³ã‚’円滑ã«ã™ã‚‹ å ´åˆã«ã‚ˆã£ã¦ã¯ã€ã¼ã‚“ã‚„ã‚Šã¨æ‰ãˆã¦ã„ãŸã“ã¨ã‚„ã€è©°ã¾ã‚Šã‚„ã™ã‹ã£ãŸãƒã‚¤ãƒ³ãƒˆãªã©ãŒãƒãƒƒã‚リã¨èªè˜ã§ãるよã†ã«ãªã‚‹ã‹ã‚‚ã—ã‚Œã¾ã›ã‚“。 言語化ã®æ¦‚è¦ ã¾ãšã¯ã€å…¨ä½“åƒãŒåˆ†ã‹ã‚‹æ¦‚è¦å›³ã‚’掲載ã—ã¾ã™ã€‚ ã“ã®è¨˜äº‹ã¯ã€ä»¥ä¸‹ã®ã‚¹ãƒ†ãƒƒãƒ—ã¨å„é …ç›®ã«ã¤ã„ã¦é †ã«èª¬æ˜Žã™ã‚‹ã‚‚ã®ã«ãªã‚Šã¾ã™ã€‚ å‰æäº‹é …ãƒ»ç’°å¢ƒã«ã¤ã„㦠言語化ã™ã‚‹ã«ã‚ãŸã£ã¦å‰æã¨ãªã‚‹è€ƒãˆæ–¹ã‚„環境ã«ã¤ã„ã¦è¨˜è¼‰ã—ã¾ã™ã€‚ HTMLã¨CSSã®å½¹å‰² HTML → データ
制作者ã®ãŸã‚ã®HTML
主ã«ãƒ¦ãƒ¼ã‚¶ãƒ¼å´ã®è¦–点ã‹ã‚‰èªžã‚‰ã‚Œã‚‹ã“ã¨ãŒå¤šã„アクセシビリティã§ã™ãŒã€åˆ¶ä½œã¨ã„ã†å´ã‹ã‚‰ã¯ã©ã®ã‚ˆã†ã«æ‰ãˆã‚‹ã“ã¨ãŒã§ãã‚‹ã®ã§ã—ょã†ã‹ã€‚2ã¤ã®åˆ‡ã‚Šå£ã‹ã‚‰è€ƒãˆã¦ã¿ã¾ã™ã€‚ # アクセシビリティã¨ã„ã†æ–‡è„ˆã«ãŠã„ã¦ã€ä½•ã®ãŸã‚ã«HTMLを書ãã‹ã¨ã„ã†è©±ã«ãªã‚‹ã¨ マシンリーダビリティã®ãŸã‚ スクリーンリーダーã®ã‚¢ã‚¯ã‚»ã‚·ãƒ“リティã®ãŸã‚ ã¨ã„ã†ã‚ˆã†ã«ã€ãƒ¦ãƒ¼ã‚¶ãƒ¼ãŒåˆ©ç”¨ã™ã‚‹ãŸã‚ã€ã¨ã„ã†ã¨ã“ã‚ã«ãƒ•ã‚©ãƒ¼ã‚«ã‚¹ã—ãŸèªžã‚‰ã‚Œæ–¹ãŒå¤šã„よã†ã«æ„Ÿã˜ã¦ã„ã¾ã™ ã‚‚ã¡ã‚んユーザーã®ãŸã‚ã«ä½œã‚‹ã¨ã„ã†ã®ã¯æ£ã—ã„ã®ã§ã™ãŒã€ä»Šå›žã¯ã‚ãˆã¦è¦–点を変ãˆã¦ã€åˆ¶ä½œè€…自身ã®ä½œã‚‹ã¨ã„ã†ã¨ã“ã‚ã«è¦–点をåˆã‚ã›ã¦è©±ã—ã¦ã¿ãŸã„ã¨æ€ã£ã¦ã„ã¾ã™ 僕ãŒã©ã†ã„ã†ã‚‚ã®ãªã®ã‹ã¨ã„ã†ã¨ã€ # å‚ç…§: 全部入りHTML太郎(@_yuheiy)ã•ã‚“ | Twitter ツイッターã§ã¯ã€Œå…¨éƒ¨å…¥ã‚ŠHTML太郎ã€ã¨ã„ã†åå‰ã§ã‚„ã£ã¦ã„ã¾ã™ # å‚ç…§: シフトブレインï¼ã‚¹ã‚¿ãƒ³ãƒ€ãƒ¼ãƒ‰ãƒ‡ã‚¶ã‚¤ãƒ³ãƒ¦ãƒ‹ãƒƒãƒˆ
リンクを作る時㮠target="_blank" ã®å±é™ºæ€§ - éš™ã‚らã°å¯ã‚‹
html 㧠リンクを新ã—ã„タブ(やウィンドウ)ã§é–‹ã‹ã›ãŸã„å ´åˆã€target="_blank" を指定ã™ã‚‹ãŒã€ ã“ã®ä½¿ã„æ–¹ã«ã¯è½ã¨ã—ç©´ãŒã‚るらã—ã„。 www.jitbit.com リンクを開ã„ãŸå…ˆã® javascript ã‹ã‚‰ã€é–‹ã„ãŸå…ƒã®ãƒšãƒ¼ã‚¸ã‚’æ“作ã§ãã¦ã—ã¾ã†ã¨ã®ã“ã¨ã€‚ æ°—ã«ãªã£ãŸã®ã§ç¢ºèªã—ã¦ã¿ãŸã€‚ 悪用ã®ãƒ‘ターン insecure.html ãŒæœ€åˆã«é–‹ãページã§ã€ã“ã“ã« target="_blank" ãªãƒªãƒ³ã‚¯ãŒã‚る。 ã“ã®ãƒªãƒ³ã‚¯ã‚’押ã™ã¨ new_window.html ã‚’æ–°ã—ã„タブã§é–‹ã。 ã“ã® new_window.html ã« javascript ãŒä»•è¾¼ã¾ã‚Œã¦ãŠã‚Šã€å…ƒãƒšãƒ¼ã‚¸ã‚’æ“作ã•ã‚Œã‚‹ã¨ã„ã†è©±ã€‚ 具体的ã«ã¯ window.opener.location="./evil.html" ã¨å®Ÿè¡Œã™ã‚‹ã¨ã€å…ƒã‚¿ãƒ–㯠evil.html ã«é·ç§»ã™ã‚‹ã€‚ 実際試ã—ã¦ã¿ãŸã®ãŒ ã“ã“。 リンクを開
phiary
phi I'm a Game Programmer and Frontend Engineer passionate about programming education. Math / C / C++ / C# / JavaScript / HTML5 / CSS3 / Python ã¯ã˜ã‚㫠「webpack インストールã—ã¨ã„ã¦ãƒ¼ã€, 「gulp å°Žå…¥ã—㦠watch ã—ãªãŒã‚‰é–‹ç™ºã—ã¦ãƒ¼ã€, 「React ã ã‹ã‚‰ ES6 ã§ã‚³ãƒ¼ãƒ‰æ›¸ã„ã¦ãƒ¼ã€ 最近ã“ã‚“ãªä¼šè©±ãŒå½“ãŸã‚Šå‰ã®ã‚ˆã†ã«ç¾å ´ã§é£›ã³äº¤ã£ã¦ã„ã¾ã™. フãƒãƒ³ãƒˆã‚¨ãƒ³ãƒ‰ã®é–‹ç™ºè€…ã«ã¯ HTML, CSS ã«ç‰¹åŒ–ã—ã¦ã„る人 (coder, markup engineer) JavaScript ã¯å¾—æ„ã ã‘ã© CSS ã¯ã¡ã‚‡ã£ã¨å¼±ã„人 (javascripter) HTML, CSS, JavaScript å…¨ã¦ã‚’çµ±ã¹ã‚‹è€… (frontend
1
ãŠçŸ¥ã‚‰ã›
ランã‚ング
ランã‚ング
リリースã€éšœå®³æƒ…å ±ãªã©ã®ã‚µãƒ¼ãƒ“スã®ãŠçŸ¥ã‚‰ã›
最新ã®äººæ°—エントリーã®é…ä¿¡
j次ã®ãƒ–ックマーク
kå‰ã®ãƒ–ックマーク
lã‚ã¨ã§èªã‚€
eコメント一覧を開ã
oページを開ã
HTML特殊文å—コード表
{{#tags}}- {{label}}
{{/tags}}