記事をPicture-in-Pictureã§èªã‚るよã†ã«ã—ã¦ã¿ãŸ | stin's Blog
Document Picture-in-Picture APIã¨ã„ã†Web APIãŒã‚ã‚Šã¾ã™ã€‚ã¾ã ブラウザã®å®Ÿè£…ãŒé™å®šçš„ã§ã™ãŒã€Chromeãªã‚‰116ã‹ã‚‰ä½¿ãˆã‚‹ã‚ˆã†ã§ã™ã€‚ The Document Picture-in-Picture API makes it possible to open an always-on-top window that can be populated with arbitrary HTML content — for example a video with custom controls or a set of streams showing the participants of a video conference call. It extends the earlier Picture-in-Picture API for <video>, whi
真ã«ãƒãƒ©ã¤ã‹ãªã„ダークモードをã¤ã„ã«å®Ÿç¾ã—ãŸãžã€‚実ç¾æ–¹æ³•ã¨æ°—付ãを書ã | stin's Blog
真ã«ãƒãƒ©ã¤ã‹ãªã„ダークモードをã¤ã„ã«å®Ÿç¾ã—ãŸãžã€‚実ç¾æ–¹æ³•ã¨æ°—付ãを書ã2024/07/14 14:36 nextjsreact ã“ã®ã‚µã‚¤ãƒˆã¯ãƒ€ãƒ¼ã‚¯ãƒ¢ãƒ¼ãƒ‰ã«å¯¾å¿œã—ã¦ã„ã¾ã™ã€‚ãªãœãªã‚‰ãƒ€ãƒ¼ã‚¯ãƒ¢ãƒ¼ãƒ‰ã¯åŸºæœ¬çš„人権ã ã‹ã‚‰ã§ã™(è¦å‡ºå…¸)。 ã—ã°ã‚‰ãã€ã‚µã‚¤ãƒˆã«è¨ªå•ã—ãŸç›´å¾Œãƒ©ã‚¤ãƒˆãƒ¢ãƒ¼ãƒ‰ã¨ãƒ€ãƒ¼ã‚¯ãƒ¢ãƒ¼ãƒ‰ãŒåˆ‡ã‚Šæ›¿ã‚ã£ã¦ãƒãƒ©ã¤ãç¾è±¡ãŒç™ºç”Ÿã—ã¦ã„ã¾ã—ãŸã€‚ã“れを改善ã—ãŸã®ã§ã€å®Ÿè£…方法ã¨æ°—付ã„ãŸã“ã¨ã‚’残ã—ã¦ãŠãã¾ã™ã€‚ ダークモードã®å®Ÿè£…方法一般ã«ã€ãƒ€ãƒ¼ã‚¯ãƒ¢ãƒ¼ãƒ‰ã®å®Ÿè£…方法ã¯3タイプã‚ã‚Šã¾ã™ã€‚ OSã«ã‚ˆã‚‹ãƒ¢ãƒ¼ãƒ‰è¨å®šã‚’åæ˜ ã™ã‚‹ メディアクエリー@media (prefers-color-scheme: dark)を使ã†ã¨ã€OSå´ã§ãƒ€ãƒ¼ã‚¯ãƒ¢ãƒ¼ãƒ‰ã‚’指定ã—ã¦ã„る時ã ã‘有効ã«ãªã‚‹ã‚¹ã‚¿ã‚¤ãƒ«ã‚’書ãã“ã¨ãŒå‡ºæ¥ã¾ã™ã€‚ JavaScriptã§ã‚‚判定ãŒå¿…è¦ãªå ´åˆã¯matchMedia("(prefers-color-scheme: dark)")
JavaScript ãªã—ã§å‹•ä½œã™ã‚‹ãƒ¢ãƒ€ãƒ³ãªã‚³ãƒ¼ãƒ‰ã®æ›¸ãæ–¹
Next.jsã€Remixã€SvelteKit ã¨ã„ã£ãŸè¿‘å¹´ã®ãƒ•ãƒ¬ãƒ¼ãƒ ワークã¯ã€JavaScript ãŒãªãã¦ã‚‚動作ã™ã‚‹ã“ã¨ã‚’一ã¤ã®ä¾¡å€¤ã¨ã—ã¦æä¾›ã—ã¦ã„ã¾ã™ã€‚ 例ãˆã°SvelteKit ã®ãƒ•ã‚©ãƒ¼ãƒ ã§ã¯ãƒ—ãƒã‚°ãƒ¬ãƒƒã‚·ãƒ–エンãƒãƒ³ã‚¹ãƒ¡ãƒ³ãƒˆã¨ã—ã¦ã€JavaScript ãŒåˆ©ç”¨ã§ãる環境ã§ã¯ãƒªãƒƒãƒãªãƒ¦ãƒ¼ã‚¶ãƒ¼ä½“…
HTML First
HTML First is a style of writing web software that favours using the native capabilities and languages of the browser and reducing layers of abstraction (languages and toolchains) on top of them. Introduction Modern web development has changed a lot in the last decade. Before libraries like React came along, the common approach was to write your interfaces with html and use something like jQuery t
HTMLã«ãŠã‘る自己終了タグã®ä½¿ç”¨ã€æ´å²çš„背景ã€ä½¿ç”¨ã«å¯¾ã™ã‚‹è³›å¦ä¸¡è«–
HTMLã‚„CSSã®ãƒ‡ãƒ¢ãƒšãƒ¼ã‚¸ã§ã‚³ãƒ¼ãƒ‰ã‚’見るã¨ã€HTMLã«è‡ªå·±çµ‚了タグ（/>）ãŒä½¿ç”¨ã•ã‚Œã¦ã„ã‚‹ã®ã‚’見ã‹ã‘ãŸã“ã¨ã¯ã‚ã‚Šã¾ã›ã‚“ã‹ï¼Ÿ HTMLã«ãŠã‘る自己終了タグã®ä½¿ç”¨ã€è‡ªå·±çµ‚了タグã®æ´å²çš„背景ã€è‡ªå·±çµ‚了タグã®ä½¿ç”¨ã«å¯¾ã™ã‚‹è³›å¦ä¸¡è«–ã«ã¤ã„ã¦ç´¹ä»‹ã—ã¾ã™ã€‚ The case against self-closing tags in HTML by Jake Archibald (@jaffathecake) 下記ã¯å„ãƒã‚¤ãƒ³ãƒˆã‚’æ„訳ã—ãŸã‚‚ã®ã§ã™ã€‚ ※当ブãƒã‚°ã§ã®ç¿»è¨³è¨˜äº‹ã¯ã€å…ƒã‚µã‚¤ãƒˆæ§˜ã«ãƒ©ã‚¤ã‚»ãƒ³ã‚¹ã‚’å¾—ã¦ç¿»è¨³ã—ã¦ã„ã¾ã™ã€‚ ã¯ã˜ã‚ã« />ã®æ´å²çš„背景 />ã«å¯¾ã™ã‚‹è³›å¦ä¸¡è«– Prettierã«ã¯ä¸€è²«æ€§ãŒãªã„ ãã‚Œã¨ã‚‚ã€HTMLã¯é–‰ã˜ã‚¿ã‚°ã‚’ã©ã“ã§ã‚‚使用ã§ãã‚‹ã®ã§ã—ょã†ã‹ï¼Ÿ ã¯ã˜ã‚ã« />ã«ã¤ã„ã¦è©±ã‚’ã—ã¾ã—ょã†ã€‚
GitHubã§è¬›ç¾©ãƒŽãƒ¼ãƒˆã‚’書ã
ã¯ã˜ã‚㫠大å¦ã®è¬›ç¾©ãƒŽãƒ¼ãƒˆã‚’ã„ãã¤ã‹GitHubã§å…¬é–‹ã—ã¦ã„ã¾ã™ã€‚ 講義ノートをMarkdownã§æ›¸ã„ã¦GitHubã§å…¬é–‹ã€ã¨ã„ã†ã®ã‚’ã—ã°ã‚‰ã続ã‘ã¦ã€ã„ã‚ã„ã‚ノウãƒã‚¦ãŒæºœã¾ã£ãŸã®ã§å…±æœ‰ã—ã¦ã¿ã‚ˆã†ã¨æ€ã„ã¾ã™ã€‚ 大å¦ã®è¬›ç¾©ãƒŽãƒ¼ãƒˆã‚’ã©ã†ã™ã‚‹ã‹å•é¡Œ 昔ã‹ã‚‰å¤§å¦ã®è¬›ç¾©ãƒŽãƒ¼ãƒˆã‚’公開ã™ã‚‹äººã¯çµæ§‹å¤šã„ã§ã™ã€‚最åˆæœŸã¯ã€LaTeXã§æ›¸ã„ã¦PDFã§å…¬é–‹ã™ã‚‹ã“ã¨ãŒå¤šã‹ã£ãŸã‚ˆã†ã«æ€ã„ã¾ã™ã€‚ã“ã‚Œã¯ã“ã‚Œã§è‰¯ã„ã®ã§ã™ãŒã€åŸºæœ¬çš„ã«ã¯ãƒ€ã‚¦ãƒ³ãƒãƒ¼ãƒ‰ã—ã¦å°åˆ·ã—ã¦èªã‚€å‰æã§ã‚ã‚Šã€ã‚¦ã‚§ãƒ–ã§æ°—軽ã«èªã‚ã‚‹å½¢ã§ã¯ã‚ã‚Šã¾ã›ã‚“ã§ã—ãŸã€‚ãã®å¾Œã€LaTeX2HTMLを使ã£ã¦ã€LaTeXファイルをHTMLã«å¤‰æ›ã—ã¦å…¬é–‹ã™ã‚‹ã‚±ãƒ¼ã‚¹ãŒå¢—ãˆã¾ã—ãŸã€‚ã“ã‚Œã«ã‚ˆã‚Šã‚¦ã‚§ãƒ–ã§è¬›ç¾©ãƒŽãƒ¼ãƒˆãŒæ°—軽ã«é–²è¦§ã§ãるよã†ã«ãªã£ãŸã®ã§ã™ãŒã€ã„ã‹ã«ã‚‚「LaTeX2HTMLを使ã£ã¦å¤‰æ›ã—ã¾ã—ãŸã€ã¨ã„ã†å¤–観ã«ãªã‚‹ã®ã¨ã€(å°‘ãªãã¨ã‚‚デフォルトã§ã¯)レスãƒãƒ³ã‚·ãƒ–ã§ã¯ãªãã€ã‚¹ãƒžãƒ›éžå¯¾å¿œã«ãªã‚‹
JavaScriptã¯ãªã—ã€CSSã§å®Ÿè£…ã•ã‚ŒãŸWebページã§ã‚ˆã使用ã•ã‚Œã‚‹UIコンãƒãƒ¼ãƒãƒ³ãƒˆã®è¶…軽é‡ãƒ©ã‚¤ãƒ–ラリ -CSSUI
アコーディオンã€ãƒ¢ãƒ¼ãƒ€ãƒ«ã€ã‚¿ãƒ–ãªã©ã€Webページã§ã‚ˆã使用ã•ã‚Œã‚‹ã‚¤ãƒ³ã‚¿ãƒ©ã‚¯ãƒ†ã‚£ãƒ–ãªUIコンãƒãƒ¼ãƒãƒ³ãƒˆã‚’CSSã§å®Ÿè£…ã™ã‚‹è¶…軽é‡ãƒ©ã‚¤ãƒ–ラリを紹介ã—ã¾ã™ã€‚ å„UIコンãƒãƒ¼ãƒãƒ³ãƒˆã¯å€‹åˆ¥ã®CSSファイルã§ç®¡ç†ã•ã‚Œã¦ãŠã‚Šã€JavaScriptã¯ä¸€åˆ‡å¿…è¦ãªã—。デザインã¯éžå¸¸ã«ã‚·ãƒ³ãƒ—ルã§ã€ã‚«ã‚¹ã‚¿ãƒžã‚¤ã‚ºã‚‚ç°¡å˜ã§ã™ã€‚ CSSUI MITライセンスã§ã€å•†ç”¨ãƒ—ãƒã‚¸ã‚§ã‚¯ãƒˆã§ã‚‚ç„¡æ–™ã§åˆ©ç”¨ã§ãã¾ã™ã€‚ ピュアCSSã§å®Ÿè£…ã•ã‚ŒãŸã‚³ãƒ³ãƒãƒ¼ãƒãƒ³ãƒˆ: JavaScriptã‚’èªã¿è¾¼ã‚€å¿…è¦ãŒãªã„ãŸã‚ã€ã‚³ãƒ³ãƒãƒ¼ãƒãƒ³ãƒˆã®å¾…機時間ã¯ã‚ã‚Šã¾ã›ã‚“。 カスタマイズãŒç°¡å˜: スタイルã®è¿½åŠ ã¯ç°¡å˜ã§ã™ã€‚デフォルトã®CSS変数をオーãƒãƒ¼ãƒ©ã‚¤ãƒ‰ã™ã‚‹ã‹ã€ã‚¯ãƒ©ã‚¹ã‚’使用ã—ã¦ã‚³ãƒ³ãƒãƒ¼ãƒãƒ³ãƒˆã‚’カスタマイズã§ãã¾ã™ã€‚ スタンダードãªHTML: å„コンãƒãƒ¼ãƒãƒ³ãƒˆã¯ã€ãƒ¢ãƒ€ãƒ³ãªHTMLè¦ç´ ã§æ§‹ç¯‰ã•ã‚Œã¦ã„ã¾ã™ã€‚ ビギナーã§ã‚‚プãƒã§ã‚‚ç°¡å˜: ç°¡å˜ãªãƒ—ãƒãƒˆã‚¿ã‚¤ãƒ—ã‹ã‚‰å®Ÿç¨¼åƒã®W
ã“ã®å®Ÿè£…方法ã¯å·§ã„ï¼ ã‚³ãƒ³ãƒ†ãƒ³ãƒ„ãŒå°‘ãªã„é‡ã§ã‚‚フッタを一番下ã«é…ç½®ã™ã‚‹CSSã®ãƒ†ã‚¯ãƒ‹ãƒƒã‚¯
ページã®ã‚³ãƒ³ãƒ†ãƒ³ãƒ„ãŒå°‘ãªãã¦ã‚‚ã€ãƒ•ãƒƒã‚¿ã‚’一番下ã«é…ç½®ã™ã‚‹CSSã®ãƒ†ã‚¯ãƒ‹ãƒƒã‚¯ã‚’紹介ã—ã¾ã™ã€‚コンテンツãŒå¤šã‘ã‚Œã°ã€æˆã‚Šè¡Œãã§é…ç½®ã•ã‚Œã¾ã™ã€‚ フッタã®é«˜ã•ã¯è‡ªç”±ã§ã€CSS Gridã‚„Flexboxã‚„calc()ã¯ä½¿ç”¨ã›ãšã€è¿½åŠ ã®ãƒ©ãƒƒãƒ‘ーも必è¦ã‚ã‚Šã¾ã›ã‚“。シンプルãªHTMLã«ã€æ•°è¡Œã®CSSã§ç°¡å˜ã«å®Ÿè£…ã§ãã¾ã™ã€‚ A Clever Sticky Footer Technique by Chris Coyier 下記ã¯å„ãƒã‚¤ãƒ³ãƒˆã‚’æ„訳ã—ãŸã‚‚ã®ã§ã™ã€‚ ※当ブãƒã‚°ã§ã®ç¿»è¨³è¨˜äº‹ã¯ã€å…ƒã‚µã‚¤ãƒˆæ§˜ã«ãƒ©ã‚¤ã‚»ãƒ³ã‚¹ã‚’å¾—ã¦ç¿»è¨³ã—ã¦ã„ã¾ã™ã€‚ ã¯ã˜ã‚㫠コンテンツãŒå分ãªé‡ã§ãªãã¦ã‚‚フッタを一番下ã«é…ç½®ã™ã‚‹æ–¹æ³• ã¯ã˜ã‚㫠「スティッã‚ーフッタã€ã¨ã„ã†ã¨ã€ãƒšãƒ¼ã‚¸ã‚’スクãƒãƒ¼ãƒ«ã—ãŸæ™‚ã«ã´ãŸã£ã¨å›ºå®šè¡¨ç¤ºã•ã‚Œã‚‹position: sticky;ã‚’æ€ã„æµ®ã‹ã¹ã‚‹äººãŒå¤šã„ã¨æ€ã„ã¾ã™ã€‚ ã—ã‹ã—ã€ãã‚Œã¯ã“ã“ã§è©±ã™ã“ã¨ã¨ã¯ã™ã“ã—ç•°ãªã‚Šã¾ã™ã€‚ 「ス
HTML属性を使ã„ã€ãƒ¦ãƒ¼ã‚¶ãƒ¼ã«å„ªã—ã„2è¦ç´ èªè¨¼ã‚’実ç¾ã™ã‚‹æ–¹æ³•
è£½å“ ã‚³ãƒŸãƒ¥ãƒ‹ã‚±ãƒ¼ã‚·ãƒ§ãƒ³ メッセージング マルãƒãƒãƒ£ãƒãƒ«ã®ãƒ†ã‚ストメッセージã¨ãƒ¡ãƒ‡ã‚£ã‚¢ãƒ¡ãƒƒã‚»ãƒ¼ã‚¸ã®é€å—ä¿¡ã‚’180ã‹å›½ä»¥ä¸Šã§
head内ã§ãƒ‘フォーマンスã®å•é¡ŒãŒã‚る箇所ã€Webページã®ãƒ¬ãƒ³ãƒ€ãƒªãƒ³ã‚°ã‚’妨ã’ã‚‹è¦å› を明らã‹ã«ã™ã‚‹CSS
Webページã®ãƒ¬ãƒ³ãƒ€ãƒªãƒ³ã‚°ã‚’妨ã’ã‚‹è¦å› ã€<head>タグ内ã§ãƒ¬ãƒ³ãƒ€ãƒªãƒ³ã‚°ã‚’ブãƒãƒƒã‚¯ã—ã¦ã„ã‚‹CSSã‚„JavaScriptã€ã‚µãƒ¼ãƒ‰ãƒ‘ーティーã®ãƒªã‚½ãƒ¼ã‚¹ãªã©ã‚’表示ã—ã¦ã€ã©ã“ã‚’ä¿®æ£ã™ã‚Œã°ã‚ˆã„ã‹æ•™ãˆã¦ãれるCSSã®ã‚¹ãƒ‹ãƒšãƒƒãƒˆã‚’紹介ã—ã¾ã™ã€‚ ã¡ãªã¿ã«ä¸‹è¨˜ã®ã‚°ãƒªãƒ¼ãƒ³ã¯å•é¡Œãªã—ã€ãƒ¬ãƒƒãƒ‰ã¯ã‚¨ãƒ©ãƒ¼ã§å¯¾å¿œãŒå¿…è¦ã€ã‚ªãƒ¬ãƒ³ã‚¸ã¯ç‰¹å®šã®ã‚·ãƒŠãƒªã‚ªã§å•é¡ŒãŒç™ºç”Ÿã™ã‚‹ã€ã§ã™ã€‚ ct.css ct.css -GitHub ct.cssã®ç‰¹å¾´ ct.cssã®ãƒ‡ãƒ¢ ct.cssã®ä½¿ã„æ–¹ ct.cssã®ç‰¹å¾´ <head>内ã«ã‚ã‚‹ã‚¿ã‚°ã¯ã€ãƒšãƒ¼ã‚¸ã®ãƒ¬ãƒ³ãƒ€ãƒªãƒ³ã‚°ã‚’妨ã’ã‚‹è¦å› ã¨ãªã‚‹æœ€å¤§ã®ç®‡æ‰€ã§ã€æ£ã—ã„å½¢å¼ã§ã‚ã‚‹ã“ã¨ã¯éžå¸¸ã«é‡è¦ã§ã™ã€‚ct.cssã¯ã€Webページã®<head>タグ内ã«æ½œåœ¨ã™ã‚‹ãƒ‘フォーマンス上ã®å•é¡Œã‚’明らã‹ã«ã™ã‚‹CSSã®ã‚¹ãƒ‹ãƒšãƒƒãƒˆã§ã™ã€‚ ct.css ct.cssã®ä½¿ç”¨ã«ã‚ãŸã£ã¦ã®åˆ¶é™äº‹é …ã¯ã€ä¸‹è¨˜ã®é€šã‚Šã§ã™ã€‚ 一致ã—ãªã„media
空ã®divè¦ç´ ã«ã¤ã„ã¦ã®å“²å¦çš„ãªè©± - lacolaco
命令ã¯ã€ç„¡æ¡ä»¶ã«å¾“ã†ã¹ã当為ã¨ã—ã¦å‘½ä»¤ã™ã‚‹ã€Œå®šè¨€å‘½æ³•ã€ã¨ã€æ¡ä»¶ä»˜ãã§ã€Œã“ã†ã„ã†ã¨ãã¯ã“ã†ã™ã¹ãã€ã¨å‘½ä»¤ã™ã‚‹ã€Œä»®è¨€å‘½æ³•ã€ã«åˆ†ã‘られる
昔ã¨é•ã†2021å¹´ã®HTML制作。アンケートçµæžœã‹ã‚‰åˆ†æžã™ã‚‹ã‚¤ãƒžãƒ‰ã‚ã®ã‚¦ã‚§ãƒ–制作 - ICS MEDIA
ウェブæ¥ç•Œã®å½“ãŸã‚Šå‰ã ã¨æ€ã£ã¦ã„ã‚‹ã“ã¨ã§ã‚‚ã€ä»–社ã®äººã«ã¯é•ã†å¸¸è˜ãŒã‚ã‚‹ã‹ã‚‚ã—ã‚Œã¾ã›ã‚“。自分ãŒæ¥ç•Œå¤šæ•°ã®å‚¾å‘ã¨é•ã†ã¨ã“ã‚ã¯ã©ã“ãªã®ã‹ãƒ»ãƒ»ãƒ»ã€ã“ã®é€£è¼‰ã§ã¯ã‚¢ãƒ³ã‚±ãƒ¼ãƒˆãƒ‡ãƒ¼ã‚¿ã‹ã‚‰å›½å†…ã®ã‚¦ã‚§ãƒ–æ¥ç•Œã®å‚¾å‘を分æžã—ã¾ã™ã€‚ 連載7回目ã¨ãªã‚‹æœ¬è¨˜äº‹ã§ã¯ã€Œã‚¦ã‚§ãƒ–æ¥ç•Œã§ã€2010年代ã‹ã‚‰å¤‰åŒ–ã—ãŸã‚‚ã®ã€ã‚’テーマã¨ã—ã¦ã‚¢ãƒ³ã‚±ãƒ¼ãƒˆçµæžœã‚’紹介ã—ã¾ã™ã€‚ floatプãƒãƒ‘ティーã¯ç¾å½¹ï¼Ÿ floatプãƒãƒ‘ティーã¯ã€CSSレイアウトã®ãŸã‚ã«2000年代ä¸é ƒã‹ã‚‰ãƒ†ãƒ¼ãƒ–ルレイアウトã«ä»£ã‚ã£ã¦ä½¿ã‚ã‚Œã¦ãã¾ã—ãŸã€‚Flexboxã‚„CSS Gridãªã©ã€ä»–ã«ãƒ¬ã‚¤ã‚¢ã‚¦ãƒˆæ‰‹æ³•ãŒå˜åœ¨ã™ã‚‹ç¾åœ¨ã«ãŠã„ã¦ã€floatプãƒãƒ‘ティーã¯ã©ã‚Œã»ã©ä½¿ã‚ã‚Œã¦ã„ã‚‹ã®ã§ã—ょã†ã‹ã€‚ 1829票ã®å›žç”ãŒã‚り「ã¨ã¦ã‚‚よã使ã†ã€ãŒ5.7%ã€ã€ŒãŸã¾ã«ä½¿ã†ã€ãŒ19.8%ã€ã€Œã»ã¨ã‚“ã©ä½¿ã‚ãªã„ã€ãŒ69%ã€ã€Œfloatを知らãªã„ã€ãŒ5.5%ã§ã—ãŸã€‚ ç¾åœ¨ã¯floatプãƒãƒ‘ティーを使ã†
ã©ã†ã—ã¦HTML5ãŒå»ƒæ¢ã•ã‚ŒãŸã®ã‹ | フューãƒãƒ£ãƒ¼æŠ€è¡“ブãƒã‚°
フãƒãƒ³ãƒˆã‚¨ãƒ³ãƒ‰é€£è¼‰ã®5記事目ã§ã™ã€‚ HTML5ãŒ2021å¹´ã®1月ã«å»ƒæ¢ã•ã‚Œã¾ã—ãŸã€‚ Webエンジニアã¨ã—ã¦ãƒãƒªãƒãƒªæ´»èºã•ã‚Œã¦ã‚‹æ–¹ã‚„エグゼクティブテックリードã®ã‚ˆã†ãªè‚©æ›¸ãã‚’æŒã¤æ–¹ã«ã¨ã£ã¦ã¯ã€Œä½•ã‚’ã„ã¾ã•ã‚‰ã€ã¨ã„ã†è©±é¡Œã‹ã¨æ€ã„ã¾ã™ã€‚ ã—ã‹ã—ãªãŒã‚‰ã€ä»Šå¹´ã‚‚新人ã•ã‚“å…¥ã£ã¦ãã¦ãã ã•ã£ãŸã®ã§ã€ãƒ—ãƒã‚°ãƒ©ãƒŸãƒ³ã‚°ã‚’å¦ç¿’ä¸ã«HTML5ã¨ã„ã†æ–‡å—列ã«æ‚©ã¾ã•ã‚Œãªã„よã†ã«ã€ãã‚‚ãã‚‚HTML5ã¨ã¯ä½•ã‹ã‚„ã€å»ƒæ¢ã•ã‚ŒãŸçµŒç·¯ã‚’ã¾ã¨ã‚ã¦ã¿ã¾ã™ã€‚ HTML5ã¨ã¯Webサイトを作るã¨ãã«å¿…ãšæ›¸ãã“ã¨ã«ãªã‚‹HTML。Webサイトã®ã‚³ãƒ³ãƒ†ãƒ³ãƒ„ã€ã¤ã¾ã‚Šä¸èº«ã‚„æ§‹é€ ã‚’ä½œã‚‹ãŸã‚ã«ä½¿ã†ãƒžãƒ¼ã‚¯ã‚¢ãƒƒãƒ—言語ã§ã™ã€‚ ãã—ã¦ã€ãã®æœ€è¿‘版ã¨ã—ã¦10å¹´ã»ã©å‰ã«ç™»å ´ã—ãŸHTML5。当時㯠Webニュースãªã©ã§ç››ã‚“ã«ç‰¹é›†ãŒçµ„ã¾ã‚Œã¦ã„ã¾ã—ãŸãŒã€ã“ã®HTML5ãŒã¤ã„ã“ãªã„ã ã€2021å¹´1月28æ—¥ã«å»ƒæ¢ã•ã‚Œã¾ã—ãŸã€‚ 広義ã®HTML5 / ç‹ç¾©ã®HTML5HTML5
Web制作ãŒæ—ã‚‹Chrome拡張機能12é¸ â€“ ãŠã™ã™ã‚ã®æ‹¡å¼µæ©Ÿèƒ½ã‚’集ã‚ã¦ã¿ãŸ | Pulp Note
Chrome拡張機能ã«ã¯Web制作ã«ä¾¿åˆ©ãªã‚‚ã®ãŒå¤šãã€ç§ã‚‚よã利用ã—ã¦ã„ã¾ã™ã€‚特ã«1〜2クリックã§ã•ã£ã¨ãƒã‚§ãƒƒã‚¯ã§ãã‚‹ã‚‚ã®ã¯é »ç¹ã«ä½¿ã„制作ã®ä¸ã§é¦´æŸ“ã‚“ã ã‚‚ã®ã§ã‚ã‚‹ãŸã‚ã€ã“れらãŒãªã„ã¨æ‰‹é–“ã©ã£ã¦ã—ã¾ã†ãらã„ä¾å˜æ€§ã®é«˜ã„ã‚‚ã®ã°ã‹ã‚Šã€‚今回ã¯ç§ãŒã‚ˆã利用ã—ã¦ã„ã‚‹Chrome拡張機能を12個紹介ã—ã¾ã™ã€‚åˆè¦‹ã®ã‚‚ã®ãŒã‚ã‚Šã¾ã—ãŸã‚‰ã€ãœã²è©¦ã—ã¦ã¿ã¦ãã ã•ã„。 Eagle – 効率的ã«ç”»åƒã‚’ä¿å˜ã™ã‚‹ Eagle サイト上ã«ã‚ã‚‹ç”»åƒã‚’ドラッグ＆ドãƒãƒƒãƒ—ã ã‘ã§ä¿å˜ã§ãã‚‹Chrome拡張機能。ã‚ã¨ã§è¦‹è¿”ã—ãŸã„ç”»åƒã‚’効率的ã«ä¿å˜ã§ãã‚‹ã®ã¯å¬‰ã—ã„。ページ全体ã®ã‚¹ã‚¯ãƒªãƒ¼ãƒ³ã‚·ãƒ§ãƒƒãƒˆã®æ’®å½±ã‚‚å¯èƒ½ã€‚撮影後ã¯å°‚用ã®ã‚¢ãƒ—リã«ä¿å˜ã•ã‚Œã¾ã™ã€‚ã“ã®æ‰‹ã®ã‚‚ã®ã¯ä»–ã«ã‚‚ã‚ã£ãŸã®ã§ã™ãŒã‚µãƒ¼ãƒ“ス終了ã—ã¦ã—ã¾ã„ã€ä»–を探ã—ã¦ã‚ˆã†ã‚„ã見ã¤ã‘ãŸã®ãŒEagleã§ã—ãŸã€‚é‡å®ã—ã¦ã„ã¾ã™ã€‚ Eagle – 効率的ã«ç”»åƒã‚’ä¿å˜ã™ã‚‹ 専用アプリã®ãƒ€ã‚¦ãƒ³ãƒãƒ¼ãƒ‰ã¯ã“ã¡
ã€HTML】知ã£ã¦ãŠãã¨ä¾¿åˆ©ï¼çŸã„HTMLコードã§å®Ÿè£…ã§ãã‚‹å°æŠ€ãƒ†ã‚¯17é¸
ã“ã®è¨˜äº‹ã§ã¯ã€ã‚ã¾ã‚ŠçŸ¥ã‚‰ã‚Œã¦ã„ãªã„HTMLã®å°æŠ€20個を実例サンプルã¨ä¸€ç·’ã«ã”紹介ã—ã¾ã™ã€‚ CSSã‚„JavaScriptãªã©ã‚‚使ã‚ãšã«ã€ã‚ãšã‹ãªHTMLコードã ã‘ã§å®Ÿè£…å¯èƒ½ãªä¾¿åˆ©ãƒ†ã‚¯ãƒ‹ãƒƒã‚¯ã§ã€æ‰‹è»½ã«åˆ©ç”¨ã§ãã‚‹ã®ã‚‚ãƒã‚¤ãƒ³ãƒˆã§ã™ã€‚ 先日紹介ã—ãŸCSSå°æŠ€ãƒ†ã‚¯ã¨ä¸€ç·’ã«æ´»ç”¨ã—ã¦ã¿ã¦ã¯ã„ã‹ãŒã§ã—ょã†ã€‚ ã€CSS】知ã£ã¦ãŠãã¨ä¾¿åˆ©ï¼çŸã„コードã§å®Ÿè£…ã§ãã‚‹CSSå°æŠ€20é¸ ãŸã£ãŸ1è¡Œã®CSSï¼ã‚ˆã見ã‹ã‘ã‚‹Webレイアウトを実ç¾ã™ã‚‹å‡„技テクニック10個 ãã‚‚ãã‚‚HTMLã£ã¦ãªã«ï¼Ÿ HTML（Hypertext Markup Language）ã¯ã€Webブラウザã§è¡¨ç¤ºã™ã‚‹ãŸã‚ã®åŸºæœ¬ã¨ãªã‚‹æ¨™æº–çš„ãªãƒžãƒ¼ã‚¯ã‚¢ãƒƒãƒ—言語ã§ã™ã€‚ã¾ãŸã€CSS（Cascading Style Sheets）ãªã©ã®æŠ€è¡“ã‚„ã€JavaScriptãªã©ã®ã‚¹ã‚¯ãƒªãƒ—ト言語ã«ã‚ˆã£ã¦ã‚µãƒãƒ¼ãƒˆã•ã‚Œã‚‹ã“ã¨ã‚‚ã‚ã‚Šã¾ã™ã€‚ ホームページを作るã¨ãã¯ã€ã¾ãšHTMLã‚’
ブラウザレンダリングã®ä»•çµ„ã¿
Webã®ç”¨èªžã‚’100秒ã§è§£èª¬ã™ã‚‹ãƒãƒ£ãƒ³ãƒãƒ«ã‚’作りã¾ã—ãŸï¼ よã‹ã£ãŸã‚‰ãƒã‚§ãƒƒã‚¯ã—ã¦ã¿ã¦ãã ã•ã„ï¼ ã¯ã˜ã‚㫠以å‰æ›¸ã„ãŸè¨˜äº‹ã€ŒWebページãŒãƒ–ラウザã«è¡¨ç¤ºã•ã‚Œã‚‹ã¾ã§ã«ä½•ãŒèµ·ã“ã‚‹ã®ã‹ï¼Ÿã€ã§ ブラウザレンダリングã«ã¤ã„ã¦è©³ç´°ã«çŸ¥ã‚ŠãŸã„ã¨ã„ã†æ„見をã„ãŸã ã„ãŸã®ã§ã€èª¿ã¹ã¦ã¾ã¨ã‚ã¦ã¿ã¾ã—ãŸã€‚ 全体図 レンダリングã®å¤§ã¾ã‹ãªæµã‚Œã§ã™ã€‚ HTMLã®ãƒ€ã‚¦ãƒ³ãƒãƒ¼ãƒ‰ サーãƒã‹ã‚‰é€ã‚‰ã‚Œã¦ããŸHTMLをダウンãƒãƒ¼ãƒ‰ã—ã¾ã™ã€‚ HTMLã®è§£æž サーãƒã‹ã‚‰é€ã‚‰ã‚Œã¦ããŸHTMLファイルã¯ã€ã€Œ0ã€ã¨ã€Œ1ã€ã§ã§ããŸãƒ‡ãƒ¼ã‚¿ã«ãªã£ã¦ã„ã¾ã™ã€‚ ブラウザã¯ã€ã‚µãƒ¼ãƒã‹ã‚‰å—ã‘å–ã£ãŸãƒ‡ãƒ¼ã‚¿ã‚’ãã®ã¾ã¾HTMLã¨ã—ã¦è§£é‡ˆã™ã‚‹ã“ã¨ã¯ã§ããªã„ã®ã§ã€è‡ªåˆ†ã§æ‰±ã†ã“ã¨ãŒã§ãã‚‹å½¢ã€ã¤ã¾ã‚ŠDOMã«å¤‰æ›ã™ã‚‹å¿…è¦ãŒã‚ã‚Šã¾ã™ã€‚ã“ã®ä½œæ¥ã‚’ è§£æž ( Parse ) ã¨è¨€ã„ã¾ã™ã€‚ HTMLをダウンãƒãƒ¼ãƒ‰ã—ãŸã‚‰ã€ã™ãã«ã“ã®è§£æžä½œæ¥ã«å…¥ã‚Šã¾ã™ã€‚作æ¥ã¯ä»¥ä¸‹ã®ã‚ˆã†ãªã‚¹ãƒ†ãƒƒãƒ—ã«ãª
JavaScriptã§ä»»æ„ã®HTMLè¦ç´ ã‚’Picture-in-Pictureã™ã‚‹
ã¿ãªã•ã‚“ã¯Picture-in-Picture(PiP)ã¨ã„ã†æ©Ÿèƒ½ã‚’使ã£ãŸã“ã¨ãŒã‚ã‚Šã¾ã™ã‹ã€‚PiPã¯å‹•ç”»ã‚³ãƒ³ãƒ†ãƒ³ãƒ„ãªã©ã‚’æµ®éŠã™ã‚‹å°çª“ã«è¡¨ç¤ºã™ã‚‹æ©Ÿèƒ½ã§ã™ã€‚å°çª“ã¯ã‚¦ã‚£ãƒ³ãƒ‰ã‚¦ã®å¤–å´ã‚’自由ã«ç§»å‹•ã§ãã¾ã™ã€‚ デスクトップãŒè³‘ã‚„ã‹ã«ãªã‚ŠãŒã¡ãªPCã§ã‚‚PiPã¯å¤§æ´»èºãªã®ã§ã™ãŒã€ç‰¹ã«ã‚¹ãƒžãƒ¼ãƒˆãƒ•ã‚©ãƒ³ã«ãŠã„ã¦ã¯æ•°å°‘ãªã„「ウィンドウã€æ©Ÿèƒ½ã«ãªã‚Šã¾ã™ã€‚Androidã¯ã‚‚ã¡ã‚ã‚“ã€iOS14も対応ã—ãŸã“ã¨ã§è©±é¡Œã«ãªã‚Šã¾ã—ãŸã€‚ ã“ã‚Œã«ã‚ˆã£ã¦ã‚¹ãƒžãƒ›ä¸€å°ã‚ã‚Œã°ã€ã‚½ã‚·ãƒ£ã‚²ã®å…¬å¼ç”Ÿæ”¾é€ã‚’見ãªãŒã‚‰ã‚½ã‚·ãƒ£ã‚²ã®ã‚¤ãƒ™ãƒ³ãƒˆã‚’周回ã™ã‚‹åœ°ç„ã®ã‚ˆã†ãªè¡Œç‚ºãŒå¯èƒ½ã«ãªã‚Šã¾ã—ãŸã€‚ 利用者ã¨ã„ã†è¦–点ã‹ã‚‰è¦‹ã‚‹ã¨éžå¸¸ã«ä¾¿åˆ©ãªã®ã§ã™ãŒã€é–‹ç™ºè€…ã‹ã‚‰è¦‹ã‚‹ã¨å‹•ç”»ã—ã‹è¡¨ç¤ºã§ããªã„ã®ã¯ãªã‹ãªã‹ä½¿ã„所ãŒé›£ã—ããªã‚Šã¾ã™ã€‚ãã“ã§ã€ã“ã®æ©Ÿèƒ½ã‚’使ã£ã¦å¥½ããªæƒ…å ±ã‚’è¡¨ç¤ºã§ããªã„ã‹å®Ÿé¨“ã—ã¦ã¿ã¾ã—ãŸã€‚ PiP機能ã®å¯¾å¿œç’°å¢ƒ Chrome 70 Firefox 71（制é™ä»˜ã） mac
CSSã ã‘ã§å®Ÿè£…ã§ãã‚‹ã¨ã¯ï¼ãƒ†ãƒ¼ãƒ–ルã®ãƒ˜ãƒƒãƒ€ã¨å·¦ç«¯ã®ã‚»ãƒ«ã®ä¸¡æ–¹ã‚’固定ã•ã›ã‚‹CSSã®æ¥µä¸Šãƒ†ã‚¯ãƒ‹ãƒƒã‚¯
テーブルã®ãƒ˜ãƒƒãƒ€ã‚’上部ã«å›ºå®šã™ã‚‹ã®ã¯ã€position: sticky;ã§ç°¡å˜ã«å®Ÿè£…ã§ãã¾ã™ã€‚ヘッダã ã‘ã§ãªãã€ãƒ†ãƒ¼ãƒ–ルã®å·¦ç«¯ã®ã‚»ãƒ«ã‚‚固定ã•ã›ãŸã„å ´åˆã¯ã€ã©ã†å®Ÿè£…ã™ã‚Œã°ã‚ˆã„ã§ã—ょã†ã‹ï¼Ÿ JavaScriptãŒãªã„ã¨å®Ÿè£…ã§ããªã„よã†ã«æ€ã†ã‹ã‚‚ã—ã‚Œã¾ã›ã‚“ãŒã€position: sticky;を効果的ã«ä½¿ç”¨ã™ã‚‹ã“ã¨ã§å®Ÿè£…ã§ãã¾ã™ã€‚テーブルã®ãƒ˜ãƒƒãƒ€ã¨å·¦ç«¯ã®ã‚»ãƒ«ã®ä¸¡æ–¹ã‚’固定ã•ã›ã‚‹CSSã®ãƒ†ã‚¯ãƒ‹ãƒƒã‚¯ã‚’紹介ã—ã¾ã™ã€‚ A table with both a sticky header and a sticky first column 下記ã¯å„ãƒã‚¤ãƒ³ãƒˆã‚’æ„訳ã—ãŸã‚‚ã®ã§ã™ã€‚ ※当ブãƒã‚°ã§ã®ç¿»è¨³è¨˜äº‹ã¯ã€å…ƒã‚µã‚¤ãƒˆæ§˜ã«ãƒ©ã‚¤ã‚»ãƒ³ã‚¹ã‚’å¾—ã¦ç¿»è¨³ã—ã¦ã„ã¾ã™ã€‚ tableã®ã‚»ãƒ«ã€thã‚„tdã‚’position: sticky;ã•ã›ã‚‹ã“ã¨ã¯ã“ã®è¨˜äº‹ã§è§£èª¬ã—ã¾ã—ãŸã€‚テーブルã®ãƒ˜ãƒƒãƒ€ã‚’上部ã«ãã£ã¤ã‘ã¦å›ºå®šã•ã›ã‚‹ã®ã¯ç°¡å˜ã§ã™ï¼ˆãƒ‡ãƒ¢ãƒš
「SEOã«å¼·ã„HTMLã®æ›¸ãæ–¹ã€ã«ã¤ã„ã¦ã®å€‹äººçš„ãªè¦‹è§£
「SEO ã«å¼·ã„ HTML ã®æ›¸ãæ–¹ã€ã¨ã„ã†ãƒ„イートãŒãã“ãã“ãƒã‚ºã£ã¦ã„ã¦ã€ãã®å†…容ã«å¯¾ã—ã¦é§†ã‘出ã—エンジニアã®æ–¹ãŸã¡ãŒã€Œå‚考ã«ãªã£ãŸã€ãªã©ã¨ç§°è³›ã®å£°ã‚’挙ã’ã¦ã„ãŸã®ã‚’見ã‹ã‘ã¦æ€ã†ã¨ã“ã‚ãŒã‚ã£ãŸã®ã§ã“ã®è¨˜äº‹ã‚’書ãã¾ã—ãŸã€‚ 元ツイã®æ¦‚è¦ã¯æ¬¡ã®é€šã‚Šã€‚ body > main > article > sectionã« h1㯠1 ページ㫠1 ã¤ï¼ˆè¦ã‚ーワード） 見出ã—ã‚¿ã‚°ã¯æ¯Žåº¦ section ã§å›²ã‚€ ヘッダーメニュー㯠nav ã§å›²ã‚€ ç”»åƒã«é©åˆ‡ãª alt ã‚’è¨å®šã™ã‚‹ title / description を書ã 階層をæ„è˜ã—ã¦æ›¸ã div ã¯ã‚ã¾ã‚Šä½¿ã‚ãªã„ ç”»åƒã¯ p ã§å›²ã‚€ ã“ã®è¨˜äº‹ã¯å…ƒãƒ„イãŠã‚ˆã³å…ƒãƒ„イã®æŠ•ç¨¿è€…を批判ã™ã‚‹æ„図ã§æ›¸ã„ãŸã‚‚ã®ã§ã¯ãªãã€ã‚ãã¾ã§æŒ™ã’られã¦ã„る内容ã«å¯¾ã™ã‚‹å€‹äººçš„見解をã¾ã¨ã‚ãŸã‚‚ã®ã§ã™ã€‚ æ£ã—ã„ã‹æ£ã—ããªã„ã‹ã‚’ãã‚Œãžã‚Œã®é …ç›®ã®ã¯ã˜ã‚ã«æ›¸ã„ã¦ã„ã¾ã™ãŒã€ã‚ãã¾ã§åƒ•å€‹äººã®
CSSã®ä¸å¤®æƒãˆã§ã€æœ€ã‚‚万能ã§ä¿¡é ¼ã§ãる実装テクニック
CSSã¯é€²åŒ–ãŒæ—©ãã€ä¸å¤®æƒãˆã®ãƒ†ã‚¯ãƒ‹ãƒƒã‚¯ã‚‚一昔å‰ã®ã‚‚ã®ã‚ˆã‚Šã‚‚確実ã«ä½¿ã„ã‚„ã™ããªã£ã¦ã„ã¾ã™ã€‚天地左å³ã®ä¸å¤®ã«è¦ç´ ã‚’é…ç½®ã™ã‚‹éš›ã«ã€è¦ç´ ã®å¹…や高ã•ãŒå¯å¤‰ã ã£ãŸã‚Šã€è¦ç´ ã®æ•°ãŒå¢—ãˆã¦ã‚‚対応ã™ã‚‹æœ€æ–°ã®å®Ÿè£…テクニックを紹介ã—ã¾ã™ã€‚ ç¾åœ¨ä¸»æµã®5ã¤ã®ãƒ†ã‚¯ãƒ‹ãƒƒã‚¯ã‹ã‚‰ãã‚Œãžã‚Œã®ç‰¹å¾´ã¨æœ€ã‚‚万能ã§ä¿¡é ¼ã§ãるテクニックを評価ã—ã¾ã™ã€‚ Centering in CSS by Adam Argyle 下記ã¯å„ãƒã‚¤ãƒ³ãƒˆã‚’æ„訳ã—ãŸã‚‚ã®ã§ã™ã€‚ ※当ブãƒã‚°ã§ã®ç¿»è¨³è¨˜äº‹ã¯ã€å…ƒã‚µã‚¤ãƒˆæ§˜ã«ãƒ©ã‚¤ã‚»ãƒ³ã‚¹ã‚’å¾—ã¦ç¿»è¨³ã—ã¦ã„ã¾ã™ã€‚ ã¯ã˜ã‚ã« 1. Content Center 2. Gentle Flex 3. Autobot 4. Fluffy Center 5. Pop & Plop ä¸å¤®æƒãˆã«æœ€é©ãªãƒ†ã‚¯ãƒ‹ãƒƒã‚¯ ã¯ã˜ã‚ã« CSSã®ä¸å¤®æƒãˆã¯ã€ã‚¸ãƒ§ãƒ¼ã‚¯ã®å¯¾è±¡ã«ã‚‚ãªã‚‹æ‚ªå高ã„課題ã§ã—ãŸã€‚ã—ã‹ã—今日ã§ã¯CSSã¯ã™ã¹ã¦é€²åŒ–ã—ã€ç´ ç›´ã«ã“れらã®ã‚¸ãƒ§ãƒ¼
リリースã€éšœå®³æƒ…å ±ãªã©ã®ã‚µãƒ¼ãƒ“スã®ãŠçŸ¥ã‚‰ã›
最新ã®äººæ°—エントリーã®é…ä¿¡
j次ã®ãƒ–ックマーク
kå‰ã®ãƒ–ックマーク
lã‚ã¨ã§èªã‚€
eコメント一覧を開ã
oページを開ã
{{#tags}}- {{label}}
{{/tags}}