https://b.hatena.ne.jp/Cherenkov/HTML/ HTMLに関するCherenkovのはてなブックマーク (110) https://zenn.dev/kazzyfrog/articles/tutorial-html-dnd Cherenkov 2025-01-05T08:58:14Z react html 124 <blockquote cite="https://zenn.dev/kazzyfrog/articles/tutorial-html-dnd" title="HTML Drag and Drop APIの紹介と導入【React】"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fzenn.dev%2Fkazzyfrog%2Farticles%2Ftutorial-html-dnd" alt="" /> <a href="https://zenn.dev/kazzyfrog/articles/tutorial-html-dnd">HTML Drag and Drop APIの紹介と導入【React】</a></cite><p><a href="https://zenn.dev/kazzyfrog/articles/tutorial-html-dnd"><img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/ede098a27a8e19d004a5535ebc16e757aecf786c/backend=imagemagick;height=90;version=1;width=120/https%3A%2F%2Fres.cloudinary.com%2Fzenn%2Fimage%2Fupload%2Fs--p6yyWIVL--%2Fc_fit%252Cg_north_west%252Cl_text%3Anotosansjp-medium.otf_55%3AHTML%252520Drag%252520and%252520Drop%252520API%2525E3%252581%2525AE%2525E7%2525B4%2525B9%2525E4%2525BB%25258B%2525E3%252581%2525A8%2525E5%2525B0%25258E%2525E5%252585%2525A5%2525E3%252580%252590React%2525E3%252580%252591%252Cw_1010%252Cx_90%252Cy_100%2Fg_south_west%252Cl_text%3Anotosansjp-medium.otf_37%3Akazzyfrog%252Cx_203%252Cy_121%2Fg_south_west%252Ch_90%252Cl_fetch%3AaHR0cHM6Ly9zdG9yYWdlLmdvb2dsZWFwaXMuY29tL3plbm4tdXNlci11cGxvYWQvYXZhdGFyLzgwMzRmZDk1NTIuanBlZw%3D%3D%252Cr_max%252Cw_90%252Cx_87%252Cy_95%2Fv1627283836%2Fdefault%2Fog-base-w1200-v2.png" alt="HTML Drag and Drop APIの紹介と導入【React】" title="HTML Drag and Drop APIの紹介と導入【React】" class="entry-image" /></a></p><p>はじめに Web アプリケーション開発において、ユーザー体験を向上させる重要な機能の 1 つに、ドラッグ&amp;ドロップが挙げられます。 シンプルなマウス操作で要素を移動したり、ファイルをアップロードしたり、 直感的な操作性を実現することができます。 今回は、HTML Drag and Drop API について調査したので、基礎的な内...</p><p><a href="https://b.hatena.ne.jp/entry/s/zenn.dev/kazzyfrog/articles/tutorial-html-dnd"><img src="https://b.hatena.ne.jp/entry/image/https://zenn.dev/kazzyfrog/articles/tutorial-html-dnd" alt="はてなブックマーク - HTML Drag and Drop APIの紹介と導入【React】" title="はてなブックマーク - HTML Drag and Drop APIの紹介と導入【React】" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/s/zenn.dev/kazzyfrog/articles/tutorial-html-dnd"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> https://t32k.me/mol/log/reduce-http-requests-overview/ Cherenkov 2024-11-29T02:34:00Z performance development web web制作 network tips html 914 <blockquote cite="https://t32k.me/mol/log/reduce-http-requests-overview/" title="HTTPリクエストを減らすために【序章】HTTPリクエストは甘え - MOL"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Ft32k.me%2Fmol%2Flog%2Freduce-http-requests-overview%2F" alt="" /> <a href="https://t32k.me/mol/log/reduce-http-requests-overview/">HTTPリクエストを減らすために【序章】HTTPリクエストは甘え - MOL</a></cite><p><a href="https://t32k.me/mol/log/reduce-http-requests-overview/"><img src="" alt="HTTPリクエストを減らすために【序章】HTTPリクエストは甘え - MOL" title="HTTPリクエストを減らすために【序章】HTTPリクエストは甘え - MOL" class="entry-image" /></a></p><p>このシリーズはHTTPリクエストの理解を通じてWebパフォーマンスの重要性について考える5章構成になっている。 【序章】HTTPリクエストは甘え 【CSS Sprite編】スプライト地獄からの解放 【WebFont編】ドラッグ＆ドロップしてコマンド叩いてウェーイ 【DataURI編】遅延ロードでレンダリングブロックを回避 【終章】我々に...</p><p><a href="https://b.hatena.ne.jp/entry/s/t32k.me/mol/log/reduce-http-requests-overview/"><img src="https://b.hatena.ne.jp/entry/image/https://t32k.me/mol/log/reduce-http-requests-overview/" alt="はてなブックマーク - HTTPリクエストを減らすために【序章】HTTPリクエストは甘え - MOL" title="はてなブックマーク - HTTPリクエストを減らすために【序章】HTTPリクエストは甘え - MOL" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/s/t32k.me/mol/log/reduce-http-requests-overview/"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> https://zenn.dev/yamap_dev/articles/4937ada684b833 heading h1 Cherenkov 2024-03-28T07:07:06Z a11y html 2 <blockquote cite="https://zenn.dev/yamap_dev/articles/4937ada684b833" title="見出しにまつわるエトセトラ"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fzenn.dev%2Fyamap_dev%2Farticles%2F4937ada684b833" alt="" /> <a href="https://zenn.dev/yamap_dev/articles/4937ada684b833">見出しにまつわるエトセトラ</a></cite><p><a href="https://zenn.dev/yamap_dev/articles/4937ada684b833"><img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/5a1a9d75c7f564068b20cbfe99b009f0425114bf/backend=imagemagick;height=90;version=1;width=120/https%3A%2F%2Fres.cloudinary.com%2Fzenn%2Fimage%2Fupload%2Fs--rrc-7n7R--%2Fc_fit%252Cg_north_west%252Cl_text%3Anotosansjp-medium.otf_55%3A%2525E8%2525A6%25258B%2525E5%252587%2525BA%2525E3%252581%252597%2525E3%252581%2525AB%2525E3%252581%2525BE%2525E3%252581%2525A4%2525E3%252582%25258F%2525E3%252582%25258B%2525E3%252582%2525A8%2525E3%252583%252588%2525E3%252582%2525BB%2525E3%252583%252588%2525E3%252583%2525A9%252Cw_1010%252Cx_90%252Cy_100%2Fg_south_west%252Cl_text%3Anotosansjp-medium.otf_34%3Aheesaid%252Cx_220%252Cy_108%2Fbo_3px_solid_rgb%3Ad6e3ed%252Cg_south_west%252Ch_90%252Cl_fetch%3AaHR0cHM6Ly9zdG9yYWdlLmdvb2dsZWFwaXMuY29tL3plbm4tdXNlci11cGxvYWQvYXZhdGFyLzdmNmEyMTBiNmMuanBlZw%3D%3D%252Cr_20%252Cw_90%252Cx_92%252Cy_102%2Fco_rgb%3A6e7b85%252Cg_south_west%252Cl_text%3Anotosansjp-medium.otf_30%3AYAMAP%252520%2525E3%252583%252586%2525E3%252583%252583%2525E3%252582%2525AF%2525E3%252583%252596%2525E3%252583%2525AD%2525E3%252582%2525B0%252Cx_220%252Cy_160%2Fbo_4px_solid_white%252Cg_south_west%252Ch_50%252Cl_fetch%3AaHR0cHM6Ly9zdG9yYWdlLmdvb2dsZWFwaXMuY29tL3plbm4tdXNlci11cGxvYWQvYXZhdGFyL2IyZDg3MmFlN2YuanBlZw%3D%3D%252Cr_max%252Cw_50%252Cx_139%252Cy_84%2Fv1627283836%2Fdefault%2Fog-base-w1200-v2.png" alt="見出しにまつわるエトセトラ" title="見出しにまつわるエトセトラ" class="entry-image" /></a></p><p>記事の背景 HTML 要素の中でももっとも基本的かつ最重要と言える見出し要素。社内でもそのセマンティクスや適切な内容について議論されることが少なくないのですが、ふと振り返ってみるとつまみ食いのような Tips の積み重ねばかりで体系的な理解を怠っていたな…という反省があります。自分自身の理解やチームへの説明の...</p><p><a href="https://b.hatena.ne.jp/entry/s/zenn.dev/yamap_dev/articles/4937ada684b833"><img src="https://b.hatena.ne.jp/entry/image/https://zenn.dev/yamap_dev/articles/4937ada684b833" alt="はてなブックマーク - 見出しにまつわるエトセトラ" title="はてなブックマーク - 見出しにまつわるエトセトラ" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/s/zenn.dev/yamap_dev/articles/4937ada684b833"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> https://qiita.com/diescake/items/65ce4499ab8a70d029de なかなかうまいこといかないなー。 Cherenkov 2023-06-12T07:02:18Z html a11y web 33 <blockquote cite="https://qiita.com/diescake/items/65ce4499ab8a70d029de" title="数値入力で input[type=&quot;number&quot;]を使ったら、ユーザから問い合わせが増えてしまった話 - Qiita"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fqiita.com%2Fdiescake%2Fitems%2F65ce4499ab8a70d029de" alt="" /> <a href="https://qiita.com/diescake/items/65ce4499ab8a70d029de">数値入力で input[type=&quot;number&quot;]を使ったら、ユーザから問い合わせが増えてしまった話 - Qiita</a></cite><p><a href="https://qiita.com/diescake/items/65ce4499ab8a70d029de"><img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/faa94f18c5869aed58023b8ed821e2f9e3de6922/backend=imagemagick;height=90;version=1;width=120/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Fadvent-calendar-ogp-background-7940cd1c8db80a7ec40711d90f43539e.jpg%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9JUU2JTk1JUIwJUU1JTgwJUE0JUU1JTg1JUE1JUU1JThBJTlCJUUzJTgxJUE3JTIwaW5wdXQlNUJ0eXBlJTNEJTIybnVtYmVyJTIyJTVEJUUzJTgyJTkyJUU0JUJEJUJGJUUzJTgxJUEzJUUzJTgxJTlGJUUzJTgyJTg5JUUzJTgwJTgxJUUzJTgzJUE2JUUzJTgzJUJDJUUzJTgyJUI2JUUzJTgxJThCJUUzJTgyJTg5JUU1JTk1JThGJUUzJTgxJTg0JUU1JTkwJTg4JUUzJTgyJThGJUUzJTgxJTlCJUUzJTgxJThDJUU1JUEyJTk3JUUzJTgxJTg4JUUzJTgxJUE2JUUzJTgxJTk3JUUzJTgxJUJFJUUzJTgxJUEzJUUzJTgxJTlGJUU4JUE5JUIxJnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnR4dC1jb2xvcj0lMjMzQTNDM0MmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9NTYmcz00MmRmNDNhYTNkODQ1MTk2Y2Q5Mjc4NGNiMmI1YzhkMw%26mark-x%3D120%26mark-y%3D96%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9OTcyJnR4dD0lNDBkaWVzY2FrZSZ0eHQtY29sb3I9JTIzM0EzQzNDJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTM2JnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnM9NGFhMWI0NTQ2ZjQ2MWU3YjMwNDdiNjk2MjQ0MzRhM2E%26blend-x%3D120%26blend-y%3D445%26blend-mode%3Dnormal%26txt64%3DaW4g5qCq5byP5Lya56S-U21hcnRIUg%26txt-width%3D972%26txt-clip%3Dend%252Cellipsis%26txt-color%3D%25233A3C3C%26txt-font%3DHiragino%2520Sans%2520W6%26txt-size%3D36%26txt-x%3D134%26txt-y%3D546%26s%3D56dbe34e15a483ce49f955c0efc9c4ed" alt="数値入力で input[type=&quot;number&quot;]を使ったら、ユーザから問い合わせが増えてしまった話 - Qiita" title="数値入力で input[type=&quot;number&quot;]を使ったら、ユーザから問い合わせが増えてしまった話 - Qiita" class="entry-image" /></a></p><p>この記事は SmartHR Advent Calendar 2020 23 日目の記事です。 こんばんは！ @diescake です。 今年は、React で「そこそこの規模で、そこそこ機能のフォームアプリケーション」を設計・実装する機会がありました。 技術選定で formik + yup を選んだので、その選定理由と結果を共有しよう！ ……そんなふうに考えていた...</p><p><a href="https://b.hatena.ne.jp/entry/s/qiita.com/diescake/items/65ce4499ab8a70d029de"><img src="https://b.hatena.ne.jp/entry/image/https://qiita.com/diescake/items/65ce4499ab8a70d029de" alt="はてなブックマーク - 数値入力で input[type=&quot;number&quot;]を使ったら、ユーザから問い合わせが増えてしまった話 - Qiita" title="はてなブックマーク - 数値入力で input[type=&quot;number&quot;]を使ったら、ユーザから問い合わせが増えてしまった話 - Qiita" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/s/qiita.com/diescake/items/65ce4499ab8a70d029de"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> https://yoshiko-pg.github.io/slides/20221216-devfest/devfest-2022-web.pdf Cherenkov 2022-12-16T04:08:08Z frontend browser html javascript css 39 <blockquote cite="https://yoshiko-pg.github.io/slides/20221216-devfest/devfest-2022-web.pdf" title="今までああ書いてたアレ、これからはこう書けそう 2022 - DevFest Tokyo 2022"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fyoshiko-pg.github.io%2Fslides%2F20221216-devfest%2Fdevfest-2022-web.pdf" alt="" /> <a href="https://yoshiko-pg.github.io/slides/20221216-devfest/devfest-2022-web.pdf">今までああ書いてたアレ、これからはこう書けそう 2022 - DevFest Tokyo 2022</a></cite><p><a href="https://yoshiko-pg.github.io/slides/20221216-devfest/devfest-2022-web.pdf"><img src="" alt="今までああ書いてたアレ、これからはこう書けそう 2022 - DevFest Tokyo 2022" title="今までああ書いてたアレ、これからはこう書けそう 2022 - DevFest Tokyo 2022" class="entry-image" /></a></p><p></p><p><a href="https://b.hatena.ne.jp/entry/s/yoshiko-pg.github.io/slides/20221216-devfest/devfest-2022-web.pdf"><img src="https://b.hatena.ne.jp/entry/image/https://yoshiko-pg.github.io/slides/20221216-devfest/devfest-2022-web.pdf" alt="はてなブックマーク - 今までああ書いてたアレ、これからはこう書けそう 2022 - DevFest Tokyo 2022" title="はてなブックマーク - 今までああ書いてたアレ、これからはこう書けそう 2022 - DevFest Tokyo 2022" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/s/yoshiko-pg.github.io/slides/20221216-devfest/devfest-2022-web.pdf"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> https://zenn.dev/fuqda/articles/92f22e98b989de Cherenkov 2022-10-02T18:37:25Z development html 85 <blockquote cite="https://zenn.dev/fuqda/articles/92f22e98b989de" title="アクセシビリティを考慮したHTMLコーディングガイド"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fzenn.dev%2Ffuqda%2Farticles%2F92f22e98b989de" alt="" /> <a href="https://zenn.dev/fuqda/articles/92f22e98b989de">アクセシビリティを考慮したHTMLコーディングガイド</a></cite><p><a href="https://zenn.dev/fuqda/articles/92f22e98b989de"><img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/cb4384fdda35bc0daf6e1e71ba2c641c712d5406/backend=imagemagick;height=90;version=1;width=120/https%3A%2F%2Fres.cloudinary.com%2Fzenn%2Fimage%2Fupload%2Fs--8qcLxxZK--%2Fc_fit%252Cg_north_west%252Cl_text%3Anotosansjp-medium.otf_55%3A%2525E3%252582%2525A2%2525E3%252582%2525AF%2525E3%252582%2525BB%2525E3%252582%2525B7%2525E3%252583%252593%2525E3%252583%2525AA%2525E3%252583%252586%2525E3%252582%2525A3%2525E3%252582%252592%2525E8%252580%252583%2525E6%252585%2525AE%2525E3%252581%252597%2525E3%252581%25259FHTML%2525E3%252582%2525B3%2525E3%252583%2525BC%2525E3%252583%252587%2525E3%252582%2525A3%2525E3%252583%2525B3%2525E3%252582%2525B0%2525E3%252582%2525AC%2525E3%252582%2525A4%2525E3%252583%252589%252Cw_1010%252Cx_90%252Cy_100%2Fg_south_west%252Cl_text%3Anotosansjp-medium.otf_37%3Afuqda%252Cx_203%252Cy_121%2Fg_south_west%252Ch_90%252Cl_fetch%3AaHR0cHM6Ly9zdG9yYWdlLmdvb2dsZWFwaXMuY29tL3plbm4tdXNlci11cGxvYWQvYXZhdGFyLzdmMTUxYjM3YzkuanBlZw%3D%3D%252Cr_max%252Cw_90%252Cx_87%252Cy_95%2Fv1627283836%2Fdefault%2Fog-base-w1200-v2.png%3F_a%3DBACAGSGT" alt="アクセシビリティを考慮したHTMLコーディングガイド" title="アクセシビリティを考慮したHTMLコーディングガイド" class="entry-image" /></a></p><p>これ何なの？ もともと私が社内メンバー向けに書いていたドキュメントで、 UIパーツ毎のアクセシビリティを考慮したHTMLコーディングTips集です。 社内のドキュメント置き場に眠っていたものですが、知見として社外にも共有出来る内容だなと思ったのと、アクセシビリティをこれからやっていこう！という方の参考になれば...</p><p><a href="https://b.hatena.ne.jp/entry/s/zenn.dev/fuqda/articles/92f22e98b989de"><img src="https://b.hatena.ne.jp/entry/image/https://zenn.dev/fuqda/articles/92f22e98b989de" alt="はてなブックマーク - アクセシビリティを考慮したHTMLコーディングガイド" title="はてなブックマーク - アクセシビリティを考慮したHTMLコーディングガイド" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/s/zenn.dev/fuqda/articles/92f22e98b989de"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> https://blog.kenall.jp/entry/address-form-best-practice Cherenkov 2022-02-28T13:32:32Z ui webdesign html design 1215 <blockquote cite="https://blog.kenall.jp/entry/address-form-best-practice" title="これだけは押さえよう！住所フォームの作り方 - ケンオールブログ"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fblog.kenall.jp%2Fentry%2Faddress-form-best-practice" alt="" /> <a href="https://blog.kenall.jp/entry/address-form-best-practice">これだけは押さえよう！住所フォームの作り方 - ケンオールブログ</a></cite><p><a href="https://blog.kenall.jp/entry/address-form-best-practice"><img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/c23556e5fb4fa63ea1db52813b6f536453306eb8/backend=imagemagick;height=90;version=1;width=120/https%3A%2F%2Fcdn.image.st-hatena.com%2Fimage%2Fscale%2F50ee0d3a7689e9f03a558ef7a2f55d810ba62006%2Fbackend%3Dimagemagick%3Bversion%3D1%3Bwidth%3D1300%2Fhttps%253A%252F%252Fcdn-ak.f.st-hatena.com%252Fimages%252Ffotolife%252Fk%252Fkenall%252F20220225%252F20220225163230.png" alt="これだけは押さえよう！住所フォームの作り方 - ケンオールブログ" title="これだけは押さえよう！住所フォームの作り方 - ケンオールブログ" class="entry-image" /></a></p><p>まとめ 住所フォームの作り方 住所フォームを作るときには以下の4つを押さえましょう。 オートコンプリート機能に最適化する 郵便番号フィールドは1フィールドにしてハイフン有無どちらも対応する モバイルUX優先なら郵便番号が入力されたら即座に補完。精度優先なら郵便番号補完ボタンを設置 住所フィールドは「都道府...</p><p><a href="https://b.hatena.ne.jp/entry/s/blog.kenall.jp/entry/address-form-best-practice"><img src="https://b.hatena.ne.jp/entry/image/https://blog.kenall.jp/entry/address-form-best-practice" alt="はてなブックマーク - これだけは押さえよう！住所フォームの作り方 - ケンオールブログ" title="はてなブックマーク - これだけは押さえよう！住所フォームの作り方 - ケンオールブログ" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/s/blog.kenall.jp/entry/address-form-best-practice"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> https://penpen-dev.com/blog/picture-srcset/ Cherenkov 2022-02-24T08:17:49Z html 130 <blockquote cite="https://penpen-dev.com/blog/picture-srcset/" title="pictureタグとsrcset属性の違い。超わかりやすく"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fpenpen-dev.com%2Fblog%2Fpicture-srcset%2F" alt="" /> <a href="https://penpen-dev.com/blog/picture-srcset/">pictureタグとsrcset属性の違い。超わかりやすく</a></cite><p><a href="https://penpen-dev.com/blog/picture-srcset/"><img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/6f9b7d08b95ed7af7fc64f5c27b1ff0da6c550ae/backend=imagemagick;height=90;version=1;width=120/https%3A%2F%2Fpenpen-dev.com%2Fblog%2Fwp-content%2Fuploads%2Fsrcset-picture.png" alt="pictureタグとsrcset属性の違い。超わかりやすく" title="pictureタグとsrcset属性の違い。超わかりやすく" class="entry-image" /></a></p><p>例えば、スマホ端末に対して1920×1080の画像を表示するのはムダです。 もっと小さいサイズでいいですからね。 逆にデスクトップPCだと画面が大きいので、1920×1080の画像を表示しても良いですよね。 このように デスクトップPC →1024×682の画像を表示する ノートパソコンPC →640×426の画像を表示する スマホ →400×266の...</p><p><a href="https://b.hatena.ne.jp/entry/s/penpen-dev.com/blog/picture-srcset/"><img src="https://b.hatena.ne.jp/entry/image/https://penpen-dev.com/blog/picture-srcset/" alt="はてなブックマーク - pictureタグとsrcset属性の違い。超わかりやすく" title="はてなブックマーク - pictureタグとsrcset属性の違い。超わかりやすく" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/s/penpen-dev.com/blog/picture-srcset/"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> https://note.com/hissy/n/n91a4c435f289 ユーティリティファーストは分かったけど、同時に共通パーツ化もしないと、結局全てのボタンのclass名を手動で変更することになるよね Cherenkov 2021-10-14T11:17:41Z css html webdesign tailwind 67 <blockquote cite="https://note.com/hissy/n/n91a4c435f289" title="ユーティリティファーストCSSのススメ〜なぜ、セマンティックなclass命名は失敗するのか？｜菱川拓郎"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fnote.com%2Fhissy%2Fn%2Fn91a4c435f289" alt="" /> <a href="https://note.com/hissy/n/n91a4c435f289">ユーティリティファーストCSSのススメ〜なぜ、セマンティックなclass命名は失敗するのか？｜菱川拓郎</a></cite><p><a href="https://note.com/hissy/n/n91a4c435f289"><img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/8dd6217a5b11c6dc4cec2b5f18a7c0434d3203ae/backend=imagemagick;height=90;version=1;width=120/https%3A%2F%2Fassets.st-note.com%2Fproduction%2Fuploads%2Fimages%2F41504789%2Frectangle_large_type_2_04a6b8fd64e549f08d13ae2296b81430.png%3Ffit%3Dbounds%26quality%3D85%26width%3D1280" alt="ユーティリティファーストCSSのススメ〜なぜ、セマンティックなclass命名は失敗するのか？｜菱川拓郎" title="ユーティリティファーストCSSのススメ〜なぜ、セマンティックなclass命名は失敗するのか？｜菱川拓郎" class="entry-image" /></a></p><p>弊社では全ての新規サイトの構築で、CSSフレームワークをtailwindcssに切り替える意思決定を行い、実際に1年くらいが経過しました。「案件によって、tailwindが向いてそうなものは使う」ではなく「全ての案件で使用」です。使えば使うほどメリットの大きさを感じていますが、同時にtailwindcssの世界観が世間の常識とあ...</p><p><a href="https://b.hatena.ne.jp/entry/s/note.com/hissy/n/n91a4c435f289"><img src="https://b.hatena.ne.jp/entry/image/https://note.com/hissy/n/n91a4c435f289" alt="はてなブックマーク - ユーティリティファーストCSSのススメ〜なぜ、セマンティックなclass命名は失敗するのか？｜菱川拓郎" title="はてなブックマーク - ユーティリティファーストCSSのススメ〜なぜ、セマンティックなclass命名は失敗するのか？｜菱川拓郎" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/s/note.com/hissy/n/n91a4c435f289"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> https://future-architect.github.io/articles/20210621a/ Cherenkov 2021-06-21T03:52:55Z html web 1890 <blockquote cite="https://future-architect.github.io/articles/20210621a/" title="どうしてHTML5が廃止されたのか | フューチャー技術ブログ"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Ffuture-architect.github.io%2Farticles%2F20210621a%2F" alt="" /> <a href="https://future-architect.github.io/articles/20210621a/">どうしてHTML5が廃止されたのか | フューチャー技術ブログ</a></cite><p><a href="https://future-architect.github.io/articles/20210621a/"><img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/326a40fc5244d7989d03af0612ecff90c9175438/backend=imagemagick;height=90;version=1;width=120/https%3A%2F%2Ffuture-architect.github.io%2Fimages%2F2021%2F20210621a%2Fhtml5_tombstone.png" alt="どうしてHTML5が廃止されたのか | フューチャー技術ブログ" title="どうしてHTML5が廃止されたのか | フューチャー技術ブログ" class="entry-image" /></a></p><p>フロントエンド連載の5記事目です。 HTML5が2021年の1月に廃止されました。 Webエンジニアとしてバリバリ活躍されてる方やエグゼクティブテックリードのような肩書きを持つ方にとっては「何をいまさら」という話題かと思います。 しかしながら、今年も新人さん入ってきてくださったので、プログラミングを学習中にHTML5...</p><p><a href="https://b.hatena.ne.jp/entry/s/future-architect.github.io/articles/20210621a/"><img src="https://b.hatena.ne.jp/entry/image/https://future-architect.github.io/articles/20210621a/" alt="はてなブックマーク - どうしてHTML5が廃止されたのか | フューチャー技術ブログ" title="はてなブックマーク - どうしてHTML5が廃止されたのか | フューチャー技術ブログ" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/s/future-architect.github.io/articles/20210621a/"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> https://digital.com/html-cheat-sheet/ Cherenkov 2021-06-10T08:01:31Z html document cheatsheet webdesign 20 <blockquote cite="https://digital.com/html-cheat-sheet/" title="HTML Cheat Sheet- List of HTML Elements by Category"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fdigital.com%2Fhtml-cheat-sheet%2F" alt="" /> <a href="https://digital.com/html-cheat-sheet/">HTML Cheat Sheet- List of HTML Elements by Category</a></cite><p><a href="https://digital.com/html-cheat-sheet/"><img src="" alt="HTML Cheat Sheet- List of HTML Elements by Category" title="HTML Cheat Sheet- List of HTML Elements by Category" class="entry-image" /></a></p><p>Disclosure: Our content is reader-supported, which means we earn commissions from links on Digital. Commissions do not affect our editorial evaluations or opinions. Hypertext markup language (HTML), has come a long way since Tim Berners-Lee invented it in 1991. The rise of e-commerce websites in ...</p><p><a href="https://b.hatena.ne.jp/entry/s/digital.com/html-cheat-sheet/"><img src="https://b.hatena.ne.jp/entry/image/https://digital.com/html-cheat-sheet/" alt="はてなブックマーク - HTML Cheat Sheet- List of HTML Elements by Category" title="はてなブックマーク - HTML Cheat Sheet- List of HTML Elements by Category" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/s/digital.com/html-cheat-sheet/"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> https://nhiroki.jp/2021/05/06/resource-loading-apis Cherenkov 2021-05-06T09:42:19Z browser api web html http 355 <blockquote cite="https://nhiroki.jp/2021/05/06/resource-loading-apis" title="リソースの読み込みを助けるウェブブラウザ API の世界"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fnhiroki.jp%2F2021%2F05%2F06%2Fresource-loading-apis" alt="" /> <a href="https://nhiroki.jp/2021/05/06/resource-loading-apis">リソースの読み込みを助けるウェブブラウザ API の世界</a></cite><p><a href="https://nhiroki.jp/2021/05/06/resource-loading-apis"><img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/631a50a97db2ecf006dd65d5490045735d9bd8a8/backend=imagemagick;height=90;version=1;width=120/https%3A%2F%2Fnhiroki.jp%2Fimages%2Fprofile.png" alt="リソースの読み込みを助けるウェブブラウザ API の世界" title="リソースの読み込みを助けるウェブブラウザ API の世界" class="entry-image" /></a></p><p>ウェブブラウザはネットワークから様々なリソースを集め、それらを処理して組み合わせてウェブページをレンダリングします。リソースが揃わないとレンダリングできないので、この一連の処理のどこかが遅れるとページの表示も遅くなります。レンダリングをすみやかに開始できるようにウェブブラウザはリソースの取得やそ...</p><p><a href="https://b.hatena.ne.jp/entry/s/nhiroki.jp/2021/05/06/resource-loading-apis"><img src="https://b.hatena.ne.jp/entry/image/https://nhiroki.jp/2021/05/06/resource-loading-apis" alt="はてなブックマーク - リソースの読み込みを助けるウェブブラウザ API の世界" title="はてなブックマーク - リソースの読み込みを助けるウェブブラウザ API の世界" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/s/nhiroki.jp/2021/05/06/resource-loading-apis"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> https://newcss.net/ vanillajs的なことかと思ったけどちがった。リセットcssみたいなもんか reset Cherenkov 2021-01-28T23:23:24Z css framework html ネタ 66 <blockquote cite="https://newcss.net/" title="new.css"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fnewcss.net%2F" alt="" /> <a href="https://newcss.net/">new.css</a></cite><p><a href="https://newcss.net/"><img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/25f0c22a6d8d917bb87f96b0f9b2524d8fa17239/backend=imagemagick;height=90;version=1;width=120/https%3A%2F%2Fnewcss.net%2F_assets%2Fog.png" alt="new.css" title="new.css" class="entry-image" /></a></p><p>Write modern websites using only HTML. This site is made from vanilla HTML and the default new.css theme. View Source new.css is a classless CSS framework to write modern websites using only HTML. It&#39;s ~4.5kb. It&#39;s perfect for- A dead-simple blog Collecting your most used links Making a simple &quot;a...</p><p><a href="https://b.hatena.ne.jp/entry/s/newcss.net/"><img src="https://b.hatena.ne.jp/entry/image/https://newcss.net/" alt="はてなブックマーク - new.css" title="はてなブックマーク - new.css" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/s/newcss.net/"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> https://qiita.com/dowanna6/items/b9e132b4c56e67491027 img srcset size 属性 Cherenkov 2020-11-03T03:02:06Z html markup 8 <blockquote cite="https://qiita.com/dowanna6/items/b9e132b4c56e67491027" title="srcsetとsizesが理解できなかった人のために、日本一分かりやすく解説してみた - Qiita"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fqiita.com%2Fdowanna6%2Fitems%2Fb9e132b4c56e67491027" alt="" /> <a href="https://qiita.com/dowanna6/items/b9e132b4c56e67491027">srcsetとsizesが理解できなかった人のために、日本一分かりやすく解説してみた - Qiita</a></cite><p><a href="https://qiita.com/dowanna6/items/b9e132b4c56e67491027"><img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/12ae7185cc669e0f79abafac537346a6e2c18fd3/backend=imagemagick;height=90;version=1;width=120/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-412672c5f0600ab9a64263b751f1bc81.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9c3Jjc2V0JUUzJTgxJUE4c2l6ZXMlRTMlODElOEMlRTclOTAlODYlRTglQTclQTMlRTMlODElQTclRTMlODElOEQlRTMlODElQUElRTMlODElOEIlRTMlODElQTMlRTMlODElOUYlRTQlQkElQkElRTMlODElQUUlRTMlODElOUYlRTMlODIlODElRTMlODElQUIlRTMlODAlODElRTYlOTclQTUlRTYlOUMlQUMlRTQlQjglODAlRTUlODglODYlRTMlODElOEIlRTMlODIlOEElRTMlODIlODQlRTMlODElOTklRTMlODElOEYlRTglQTclQTMlRTglQUElQUMlRTMlODElOTclRTMlODElQTYlRTMlODElQkYlRTMlODElOUYmdHh0LWFsaWduPWxlZnQlMkN0b3AmdHh0LWNvbG9yPSUyMzIxMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT01NiZzPTM5MzMzZGI3MTgxZmQ4ZmZlMWQxYWRkN2Q3Y2U3MWFk%26mark-x%3D142%26mark-y%3D57%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9NzcwJnR4dD0lNDBkb3dhbm5hNiZ0eHQtY29sb3I9JTIzMjEyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTM2JnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnM9MjI3NzExMmM3NzNkMTkxMzA4OTcyMTUwNGY3MjNlZGY%26blend-x%3D142%26blend-y%3D436%26blend-mode%3Dnormal%26txt64%3DaW4gUHJBaGEgSW5jLg%26txt-width%3D770%26txt-clip%3Dend%252Cellipsis%26txt-color%3D%2523212121%26txt-font%3DHiragino%2520Sans%2520W6%26txt-size%3D36%26txt-x%3D156%26txt-y%3D536%26s%3D017c4b86c0a6cd391e0f2ca3d7a77b18" alt="srcsetとsizesが理解できなかった人のために、日本一分かりやすく解説してみた - Qiita" title="srcsetとsizesが理解できなかった人のために、日本一分かりやすく解説してみた - Qiita" class="entry-image" /></a></p><p>Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?</p><p><a href="https://b.hatena.ne.jp/entry/s/qiita.com/dowanna6/items/b9e132b4c56e67491027"><img src="https://b.hatena.ne.jp/entry/image/https://qiita.com/dowanna6/items/b9e132b4c56e67491027" alt="はてなブックマーク - srcsetとsizesが理解できなかった人のために、日本一分かりやすく解説してみた - Qiita" title="はてなブックマーク - srcsetとsizesが理解できなかった人のために、日本一分かりやすく解説してみた - Qiita" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/s/qiita.com/dowanna6/items/b9e132b4c56e67491027"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> https://posfie.com/@clockmaker/p/bCXsAmh マークアップ コーディング Cherenkov 2020-09-20T16:54:42Z html 考え方 仕事 web制作 webdesign markup 227 <blockquote cite="https://posfie.com/@clockmaker/p/bCXsAmh" title="ピクセルパーフェクトは必要なのか？ HTMLコーダーの考え方まとめ"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fposfie.com%2F%40clockmaker%2Fp%2FbCXsAmh" alt="" /> <a href="https://posfie.com/@clockmaker/p/bCXsAmh">ピクセルパーフェクトは必要なのか？ HTMLコーダーの考え方まとめ</a></cite><p><a href="https://posfie.com/@clockmaker/p/bCXsAmh"><img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/5bf1efb2d50f5a6f751d59c773c7baab8e4f3792/backend=imagemagick;height=90;version=1;width=120/https%3A%2F%2Fs.tgstc.com%2Fogp3%2F32386e2860e064c753ba48331eb082f9-1200x630.jpeg" alt="ピクセルパーフェクトは必要なのか？ HTMLコーダーの考え方まとめ" title="ピクセルパーフェクトは必要なのか？ HTMLコーダーの考え方まとめ" class="entry-image" /></a></p><p>平尾誠 @Makopontass コーディングを外に出すことが増えてきた。 やはり経験値が少ない人の品質管理は大変だと感じつつも、しぶとくピクセルパーフェクトを狙ってくる方に仕事を任せてよかった。 この再現性への執着心がないと伸び代を感じれない。 2020-09-20 00:34:07 Tsudoi Yoshimoto | 吉本 集 @tsuDoi220 いやー、...</p><p><a href="https://b.hatena.ne.jp/entry/s/posfie.com/@clockmaker/p/bCXsAmh"><img src="https://b.hatena.ne.jp/entry/image/https://posfie.com/@clockmaker/p/bCXsAmh" alt="はてなブックマーク - ピクセルパーフェクトは必要なのか？ HTMLコーダーの考え方まとめ" title="はてなブックマーク - ピクセルパーフェクトは必要なのか？ HTMLコーダーの考え方まとめ" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/s/posfie.com/@clockmaker/p/bCXsAmh"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> https://www.slideshare.net/slideshow/html5-63938625/63938625 Cherenkov 2020-08-20T03:17:56Z html 動画 html5 video web制作 176 <blockquote cite="https://www.slideshare.net/slideshow/html5-63938625/63938625" title="HTML5時代のネット動画技術〜良い子悪い子普通の子（増補改訂版）"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fwww.slideshare.net%2Fslideshow%2Fhtml5-63938625%2F63938625" alt="" /> <a href="https://www.slideshare.net/slideshow/html5-63938625/63938625">HTML5時代のネット動画技術〜良い子悪い子普通の子（増補改訂版）</a></cite><p><a href="https://www.slideshare.net/slideshow/html5-63938625/63938625"><img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/2056125f5cce8ec5a0506ac6510d4704d38905b0/backend=imagemagick;height=90;version=1;width=120/https%3A%2F%2Fcdn.slidesharecdn.com%2Fss_thumbnails%2F160625ccreativecamphtml5video-160712075809-thumbnail.jpg%3Fwidth%3D640%26height%3D640%26fit%3Dbounds" alt="HTML5時代のネット動画技術〜良い子悪い子普通の子（増補改訂版）" title="HTML5時代のネット動画技術〜良い子悪い子普通の子（増補改訂版）" class="entry-image" /></a></p><p>サッポロクリエイティブキャンプ 2016 #3で使った資料を増補改訂したものです。HTML5 VideoとかHLSとかDASHとかのことについてです。</p><p><a href="https://b.hatena.ne.jp/entry/s/www.slideshare.net/slideshow/html5-63938625/63938625"><img src="https://b.hatena.ne.jp/entry/image/https://www.slideshare.net/slideshow/html5-63938625/63938625" alt="はてなブックマーク - HTML5時代のネット動画技術〜良い子悪い子普通の子（増補改訂版）" title="はてなブックマーク - HTML5時代のネット動画技術〜良い子悪い子普通の子（増補改訂版）" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/s/www.slideshare.net/slideshow/html5-63938625/63938625"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> https://qiita.com/j5c8k6m8/items/4695ee12b35e9c14047e すごい Cherenkov 2020-07-15T04:43:50Z css html pug 486 <blockquote cite="https://qiita.com/j5c8k6m8/items/4695ee12b35e9c14047e" title="「(HTML) + CSS」のみを使って、今「リアルな電卓」を作ってみた - Qiita"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fqiita.com%2Fj5c8k6m8%2Fitems%2F4695ee12b35e9c14047e" alt="" /> <a href="https://qiita.com/j5c8k6m8/items/4695ee12b35e9c14047e">「(HTML) + CSS」のみを使って、今「リアルな電卓」を作ってみた - Qiita</a></cite><p><a href="https://qiita.com/j5c8k6m8/items/4695ee12b35e9c14047e"><img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/9b9ec2bf8568c4ceeeddee00e48b6834848038a2/backend=imagemagick;height=90;version=1;width=120/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fqiita-user-contents.imgix.net%252Fhttps%25253A%25252F%25252Fcdn.qiita.com%25252Fassets%25252Fpublic%25252Farticle-ogp-background-afbab5eb44e0b055cce1258705637a91.png%253Fixlib%253Drb-4.0.0%2526w%253D1200%2526blend64%253DaHR0cHM6Ly9xaWl0YS11c2VyLXByb2ZpbGUtaW1hZ2VzLmltZ2l4Lm5ldC9odHRwcyUzQSUyRiUyRnFpaXRhLWltYWdlLXN0b3JlLnMzLmFwLW5vcnRoZWFzdC0xLmFtYXpvbmF3cy5jb20lMkYwJTJGMzUyODY1JTJGcHJvZmlsZS1pbWFnZXMlMkYxNTkwMDMwOTEyP2l4bGliPXJiLTQuMC4wJmFyPTElM0ExJmZpdD1jcm9wJm1hc2s9ZWxsaXBzZSZiZz1GRkZGRkYmZm09cG5nMzImcz1mZjFlYTQ1NTZjYTk4Zjg3MzE0MDU4MTcwMzljMDliNA%2526blend-x%253D120%2526blend-y%253D467%2526blend-w%253D82%2526blend-h%253D82%2526blend-mode%253Dnormal%2526s%253D9dc7a893dc9005d058ee02f66d5dfdc2%3Fixlib%3Drb-4.0.0%26w%3D1200%26fm%3Djpg%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk2MCZoPTMyNCZ0eHQ9JUUzJTgwJThDJTI4SFRNTCUyOSUyMCUyQiUyMENTUyVFMyU4MCU4RCVFMyU4MSVBRSVFMyU4MSVCRiVFMyU4MiU5MiVFNCVCRCVCRiVFMyU4MSVBMyVFMyU4MSVBNiVFMyU4MCU4MSVFNCVCQiU4QSVFMyU4MCU4QyVFMyU4MyVBQSVFMyU4MiVBMiVFMyU4MyVBQiVFMyU4MSVBQSVFOSU5QiVCQiVFNSU4RCU5MyVFMyU4MCU4RCVFMyU4MiU5MiVFNCVCRCU5QyVFMyU4MSVBMyVFMyU4MSVBNiVFMyU4MSVCRiVFMyU4MSU5RiZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZ0eHQtY29sb3I9JTIzMUUyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTU2JnR4dC1wYWQ9MCZzPThmMzRmN2RhNDgyNDI4YjUxZTQyZjBhYjllOGMwNjQx%26mark-x%3D120%26mark-y%3D112%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTgzOCZoPTU4JnR4dD0lNDBqNWM4azZtOCZ0eHQtY29sb3I9JTIzMUUyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTM2JnR4dC1wYWQ9MCZzPWQwOWM4YzZlYzJhMTkyMjI3ZjMxZDllNmJmZWU1YTNm%26blend-x%3D242%26blend-y%3D480%26blend-w%3D838%26blend-h%3D46%26blend-fit%3Dcrop%26blend-crop%3Dleft%252Cbottom%26blend-mode%3Dnormal%26s%3D17005c3d2d992adc0a7f98c3103f72cd" alt="「(HTML) + CSS」のみを使って、今「リアルな電卓」を作ってみた - Qiita" title="「(HTML) + CSS」のみを使って、今「リアルな電卓」を作ってみた - Qiita" class="entry-image" /></a></p><p>続編を書きました。CSSも大幅改善してるので、一度見てみてください。 【小数点実装】「(HTML +) CSS」のみを使って、今「もっとリアルな電卓」を作ってみた - Qiita 完成品 まずは、CodePenで完成品を紹介します。ボタンを押して計算を試してみてください。 ※ スマホだと反応が悪い場合があります。 See the Pen qiita_...</p><p><a href="https://b.hatena.ne.jp/entry/s/qiita.com/j5c8k6m8/items/4695ee12b35e9c14047e"><img src="https://b.hatena.ne.jp/entry/image/https://qiita.com/j5c8k6m8/items/4695ee12b35e9c14047e" alt="はてなブックマーク - 「(HTML) + CSS」のみを使って、今「リアルな電卓」を作ってみた - Qiita" title="はてなブックマーク - 「(HTML) + CSS」のみを使って、今「リアルな電卓」を作ってみた - Qiita" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/s/qiita.com/j5c8k6m8/items/4695ee12b35e9c14047e"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> https://tech.dely.jp/entry/vis_reg_test Cherenkov 2019-04-22T23:40:16Z test html javascript development 開発 328 <blockquote cite="https://tech.dely.jp/entry/vis_reg_test" title="1px の変化も見逃さない！ビジュアルリグレッションテスト導入で快適フロントエンド開発 - Kurashiru Tech Blog"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Ftech.dely.jp%2Fentry%2Fvis_reg_test" alt="" /> <a href="https://tech.dely.jp/entry/vis_reg_test">1px の変化も見逃さない！ビジュアルリグレッションテスト導入で快適フロントエンド開発 - Kurashiru Tech Blog</a></cite><p><a href="https://tech.dely.jp/entry/vis_reg_test"><img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/5f529758491d810e23801ba3f472e661a80b830e/backend=imagemagick;height=90;version=1;width=120/https%3A%2F%2Fcdn.image.st-hatena.com%2Fimage%2Fscale%2F65488dd943da62150a542231e9314407b84c4f80%2Fbackend%3Dimagemagick%3Bversion%3D1%3Bwidth%3D1300%2Fhttps%253A%252F%252Fcdn-ak.f.st-hatena.com%252Fimages%252Ffotolife%252Fa%252Falluser%252F20181207%252F20181207182750.png" alt="1px の変化も見逃さない！ビジュアルリグレッションテスト導入で快適フロントエンド開発 - Kurashiru Tech Blog" title="1px の変化も見逃さない！ビジュアルリグレッションテスト導入で快適フロントエンド開発 - Kurashiru Tech Blog" class="entry-image" /></a></p><p>こんにちは！dely でフロントエンドの開発をしています @all__user です。 今回は kurashiru のフロントエンド開発に導入されたビジュアルリグレッションテストについてご紹介したいと思います。 【反応を多くいただいた点について記事の最後に追記しました】 目次 目次 ビジュアルリグレッションテストとは 導入の背景 ...</p><p><a href="https://b.hatena.ne.jp/entry/s/tech.dely.jp/entry/vis_reg_test"><img src="https://b.hatena.ne.jp/entry/image/https://tech.dely.jp/entry/vis_reg_test" alt="はてなブックマーク - 1px の変化も見逃さない！ビジュアルリグレッションテスト導入で快適フロントエンド開発 - Kurashiru Tech Blog" title="はてなブックマーク - 1px の変化も見逃さない！ビジュアルリグレッションテスト導入で快適フロントエンド開発 - Kurashiru Tech Blog" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/s/tech.dely.jp/entry/vis_reg_test"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> https://qiita.com/hayakix/items/4c841ea76eab70a66e91 mp4 videoタグ tag html playsinline属性付けたら再生された 動画 movie Cherenkov 2018-11-16T08:58:52Z ios apple mobile video html movie 8 <blockquote cite="https://qiita.com/hayakix/items/4c841ea76eab70a66e91" title="iOS10 Mobile Safariにおけるビデオの自動再生（インライン再生） - Qiita"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fqiita.com%2Fhayakix%2Fitems%2F4c841ea76eab70a66e91" alt="" /> <a href="https://qiita.com/hayakix/items/4c841ea76eab70a66e91">iOS10 Mobile Safariにおけるビデオの自動再生（インライン再生） - Qiita</a></cite><p><a href="https://qiita.com/hayakix/items/4c841ea76eab70a66e91"><img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/10a543318a33ffdab2968bc82348bbb4b760b2f0/backend=imagemagick;height=90;version=1;width=120/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fqiita-user-contents.imgix.net%252Fhttps%25253A%25252F%25252Fcdn.qiita.com%25252Fassets%25252Fpublic%25252Farticle-ogp-background-afbab5eb44e0b055cce1258705637a91.png%253Fixlib%253Drb-4.0.0%2526w%253D1200%2526blend64%253DaHR0cHM6Ly9xaWl0YS11c2VyLXByb2ZpbGUtaW1hZ2VzLmltZ2l4Lm5ldC9odHRwcyUzQSUyRiUyRnFpaXRhLWltYWdlLXN0b3JlLnMzLmFtYXpvbmF3cy5jb20lMkYwJTJGMzg1NDglMkZwcm9maWxlLWltYWdlcyUyRjE0NzM2ODc4MDg_aXhsaWI9cmItNC4wLjAmYXI9MSUzQTEmZml0PWNyb3AmbWFzaz1lbGxpcHNlJmJnPUZGRkZGRiZmbT1wbmczMiZzPWYxZjJiM2U5YjI5MzBjMWNlODA0ZDZmYmFjZGVlZjE4%2526blend-x%253D120%2526blend-y%253D467%2526blend-w%253D82%2526blend-h%253D82%2526blend-mode%253Dnormal%2526s%253D6cf15d844fdfcc8654c8bed9c3c7b674%3Fixlib%3Drb-4.0.0%26w%3D1200%26fm%3Djpg%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk2MCZoPTMyNCZ0eHQ9aU9TMTAlMjBNb2JpbGUlMjBTYWZhcmklRTMlODElQUIlRTMlODElOEElRTMlODElOTElRTMlODIlOEIlRTMlODMlOTMlRTMlODMlODclRTMlODIlQUElRTMlODElQUUlRTglODclQUElRTUlOEIlOTUlRTUlODYlOEQlRTclOTQlOUYlRUYlQkMlODglRTMlODIlQTQlRTMlODMlQjMlRTMlODMlQTklRTMlODIlQTQlRTMlODMlQjMlRTUlODYlOEQlRTclOTQlOUYlRUYlQkMlODkmdHh0LWFsaWduPWxlZnQlMkN0b3AmdHh0LWNvbG9yPSUyMzFFMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT01NiZ0eHQtcGFkPTAmcz05Y2JiMWQ5Y2EyYzBhOWZkMTY5MmRmMGRiZWQwZDVjZA%26mark-x%3D120%26mark-y%3D112%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTgzOCZoPTU4JnR4dD0lNDBoYXlha2l4JnR4dC1jb2xvcj0lMjMxRTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9MzYmdHh0LXBhZD0wJnM9ZDYzNWRlZDUxM2U4NzgzYTBjMWZjZTk5NWQ4ZTc5NTU%26blend-x%3D242%26blend-y%3D480%26blend-w%3D838%26blend-h%3D46%26blend-fit%3Dcrop%26blend-crop%3Dleft%252Cbottom%26blend-mode%3Dnormal%26s%3D3e841fd91cf10d3a2948c3f892d4cf54" alt="iOS10 Mobile Safariにおけるビデオの自動再生（インライン再生） - Qiita" title="iOS10 Mobile Safariにおけるビデオの自動再生（インライン再生） - Qiita" class="entry-image" /></a></p><p>Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?</p><p><a href="https://b.hatena.ne.jp/entry/s/qiita.com/hayakix/items/4c841ea76eab70a66e91"><img src="https://b.hatena.ne.jp/entry/image/https://qiita.com/hayakix/items/4c841ea76eab70a66e91" alt="はてなブックマーク - iOS10 Mobile Safariにおけるビデオの自動再生（インライン再生） - Qiita" title="はてなブックマーク - iOS10 Mobile Safariにおけるビデオの自動再生（インライン再生） - Qiita" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/s/qiita.com/hayakix/items/4c841ea76eab70a66e91"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> https://qiita.com/ran/items/ef0e09b7aeb04a14047b Cherenkov 2018-09-12T07:41:16Z Flexbox css html web webdesign flex tutorial example 3 <blockquote cite="https://qiita.com/ran/items/ef0e09b7aeb04a14047b" title="flexboxを使ってwebページをレイアウトするざっくりメモ - Qiita"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fqiita.com%2Fran%2Fitems%2Fef0e09b7aeb04a14047b" alt="" /> <a href="https://qiita.com/ran/items/ef0e09b7aeb04a14047b">flexboxを使ってwebページをレイアウトするざっくりメモ - Qiita</a></cite><p><a href="https://qiita.com/ran/items/ef0e09b7aeb04a14047b"><img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/1c99d218794fa146e75eb852f6b6b771240e4399/backend=imagemagick;height=90;version=1;width=120/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fqiita-user-contents.imgix.net%252Fhttps%25253A%25252F%25252Fcdn.qiita.com%25252Fassets%25252Fpublic%25252Farticle-ogp-background-afbab5eb44e0b055cce1258705637a91.png%253Fixlib%253Drb-4.0.0%2526w%253D1200%2526blend64%253DaHR0cHM6Ly9xaWl0YS11c2VyLXByb2ZpbGUtaW1hZ2VzLmltZ2l4Lm5ldC9odHRwcyUzQSUyRiUyRnFpaXRhLWltYWdlLXN0b3JlLnMzLmFtYXpvbmF3cy5jb20lMkYwJTJGNzU0OTglMkZwcm9maWxlLWltYWdlcyUyRjE1MjM5NTA1MjM_aXhsaWI9cmItNC4wLjAmYXI9MSUzQTEmZml0PWNyb3AmbWFzaz1lbGxpcHNlJmJnPUZGRkZGRiZmbT1wbmczMiZzPTY1NDRmN2ZiMDJjOWFhNGY5MjljYmE0YmUzMGE2Y2Y4%2526blend-x%253D120%2526blend-y%253D467%2526blend-w%253D82%2526blend-h%253D82%2526blend-mode%253Dnormal%2526s%253D96b6ae3da02198896a0a5d5ff261c8f3%3Fixlib%3Drb-4.0.0%26w%3D1200%26fm%3Djpg%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk2MCZoPTMyNCZ0eHQ9ZmxleGJveCVFMyU4MiU5MiVFNCVCRCVCRiVFMyU4MSVBMyVFMyU4MSVBNndlYiVFMyU4MyU5QSVFMyU4MyVCQyVFMyU4MiVCOCVFMyU4MiU5MiVFMyU4MyVBQyVFMyU4MiVBNCVFMyU4MiVBMiVFMyU4MiVBNiVFMyU4MyU4OCVFMyU4MSU5OSVFMyU4MiU4QiVFMyU4MSU5NiVFMyU4MSVBMyVFMyU4MSU4RiVFMyU4MiU4QSVFMyU4MyVBMSVFMyU4MyVBMiZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZ0eHQtY29sb3I9JTIzMUUyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTU2JnR4dC1wYWQ9MCZzPTFjZGI3NDM3NzMyNDBjMTRjNDYyMGZkYWFlZjVkNjJi%26mark-x%3D120%26mark-y%3D112%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTgzOCZoPTU4JnR4dD0lNDByYW4mdHh0LWNvbG9yPSUyMzFFMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT0zNiZ0eHQtcGFkPTAmcz1jNzdmNmUwMzU2NjllZWNjNDRkZTViYTdlODAyOTUzNA%26blend-x%3D242%26blend-y%3D480%26blend-w%3D838%26blend-h%3D46%26blend-fit%3Dcrop%26blend-crop%3Dleft%252Cbottom%26blend-mode%3Dnormal%26s%3D71c787e539350af501e5890d8ff4e138" alt="flexboxを使ってwebページをレイアウトするざっくりメモ - Qiita" title="flexboxを使ってwebページをレイアウトするざっくりメモ - Qiita" class="entry-image" /></a></p><p>Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?</p><p><a href="https://b.hatena.ne.jp/entry/s/qiita.com/ran/items/ef0e09b7aeb04a14047b"><img src="https://b.hatena.ne.jp/entry/image/https://qiita.com/ran/items/ef0e09b7aeb04a14047b" alt="はてなブックマーク - flexboxを使ってwebページをレイアウトするざっくりメモ - Qiita" title="はてなブックマーク - flexboxを使ってwebページをレイアウトするざっくりメモ - Qiita" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/s/qiita.com/ran/items/ef0e09b7aeb04a14047b"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote>