https://b.hatena.ne.jp/winterfall/HTML/ HTMLに関するwinterfallのはてなブックマーク (37) https://jser.info/2023/09/29/babel-v7.23.0-vike-state-of-html-2023/ winterfall 2023-09-30T01:06:42Z JavaScript Web標準 ブラウザ最新動向 HTML techfeed 11 <blockquote cite="https://jser.info/2023/09/29/babel-v7.23.0-vike-state-of-html-2023/" title="2023-09-29のJS: Babel v7.23.0、Vike、State of HTML 2023受付開始"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fjser.info%2F2023%2F09%2F29%2Fbabel-v7.23.0-vike-state-of-html-2023%2F" alt="" /> <a href="https://jser.info/2023/09/29/babel-v7.23.0-vike-state-of-html-2023/">2023-09-29のJS: Babel v7.23.0、Vike、State of HTML 2023受付開始</a></cite><p><a href="https://jser.info/2023/09/29/babel-v7.23.0-vike-state-of-html-2023/"><img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/d67b9134fa9e455b922453f2adf8afa7763ac5ed/backend=imagemagick;height=90;version=1;width=120/https%3A%2F%2Fjser.info%2Fmedia%2Flogo.png" alt="2023-09-29のJS: Babel v7.23.0、Vike、State of HTML 2023受付開始" title="2023-09-29のJS: Babel v7.23.0、Vike、State of HTML 2023受付開始" class="entry-image" /></a></p><p>JSer.info #662 - Babel v7.23.0リリースされました。 7.23.0 Released: Decorator Metadata and many new import features! · Babel Stage 3のDecorator Metadataのサポート、Stage 3のimport sourceのサポートが追加されています。 Stage 2のimport deferのサポート、Stage 1のOptional Chaining Assignmentのサポート...</p><p><a href="https://b.hatena.ne.jp/entry/s/jser.info/2023/09/29/babel-v7.23.0-vike-state-of-html-2023/"><img src="https://b.hatena.ne.jp/entry/image/https://jser.info/2023/09/29/babel-v7.23.0-vike-state-of-html-2023/" alt="はてなブックマーク - 2023-09-29のJS: Babel v7.23.0、Vike、State of HTML 2023受付開始" title="はてなブックマーク - 2023-09-29のJS: Babel v7.23.0、Vike、State of HTML 2023受付開始" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/s/jser.info/2023/09/29/babel-v7.23.0-vike-state-of-html-2023/"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> https://qiita.com/degudegu2510/items/9fb31e7daeba8f328de3 winterfall 2023-07-15T11:06:59Z JavaScript HTML Web標準 ブラウザ最新動向 techfeed 9 <blockquote cite="https://qiita.com/degudegu2510/items/9fb31e7daeba8f328de3" title="【HTML】popover属性を使うとJavaScriptなしにモーダルが作れるらしい - Qiita"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fqiita.com%2Fdegudegu2510%2Fitems%2F9fb31e7daeba8f328de3" alt="" /> <a href="https://qiita.com/degudegu2510/items/9fb31e7daeba8f328de3">【HTML】popover属性を使うとJavaScriptなしにモーダルが作れるらしい - Qiita</a></cite><p><a href="https://qiita.com/degudegu2510/items/9fb31e7daeba8f328de3"><img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/a6fa907aa8282482b91e8158f0a3d4637afcbe64/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-9f5428127621718a910c8b63951390ad.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTkxNiZoPTMzNiZ0eHQ9JUUzJTgwJTkwSFRNTCVFMyU4MCU5MXBvcG92ZXIlRTUlQjElOUUlRTYlODAlQTclRTMlODIlOTIlRTQlQkQlQkYlRTMlODElODYlRTMlODElQThKYXZhU2NyaXB0JUUzJTgxJUFBJUUzJTgxJTk3JUUzJTgxJUFCJUUzJTgzJUEyJUUzJTgzJUJDJUUzJTgzJTgwJUUzJTgzJUFCJUUzJTgxJThDJUU0JUJEJTlDJUUzJTgyJThDJUUzJTgyJThCJUUzJTgyJTg5JUUzJTgxJTk3JUUzJTgxJTg0JnR4dC1jb2xvcj0lMjMyMTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9NTYmdHh0LWNsaXA9ZWxsaXBzaXMmdHh0LWFsaWduPWxlZnQlMkN0b3Amcz0xMzNkNTQwNjhmYzk5MThlMjUzNWYxOTVhM2I0Y2RjYg%26mark-x%3D142%26mark-y%3D112%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTcxNiZ0eHQ9JTQwZGVndWRlZ3UyNTEwJTIwaW4lMjBRaWl0YSVFNiVBMCVBQSVFNSVCQyU4RiVFNCVCQyU5QSVFNyVBNCVCRSZ0eHQtY29sb3I9JTIzMjEyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTMyJnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnM9ZDA4ZThjNDAzMjVmNDE2ZWI0NWRhMDg0M2E2MDgwNDk%26blend-x%3D142%26blend-y%3D491%26blend-mode%3Dnormal%26s%3De5009f9e42a0c9cb9f5f6851442671e5" alt="【HTML】popover属性を使うとJavaScriptなしにモーダルが作れるらしい - Qiita" title="【HTML】popover属性を使うとJavaScriptなしにモーダルが作れるらしい - 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/degudegu2510/items/9fb31e7daeba8f328de3"><img src="https://b.hatena.ne.jp/entry/image/https://qiita.com/degudegu2510/items/9fb31e7daeba8f328de3" alt="はてなブックマーク - 【HTML】popover属性を使うとJavaScriptなしにモーダルが作れるらしい - Qiita" title="はてなブックマーク - 【HTML】popover属性を使うとJavaScriptなしにモーダルが作れるらしい - Qiita" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/s/qiita.com/degudegu2510/items/9fb31e7daeba8f328de3"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> https://ics.media/entry/230206/ winterfall 2023-02-14T23:19:47Z Web標準 ブラウザ最新動向 HTML techfeed 182 <blockquote cite="https://ics.media/entry/230206/" title="HTML制作で気をつけたいスクロールバーの挙動 - ガタつきをCSSのscrollbar-gutterで防ぐ方法など - ICS MEDIA"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fics.media%2Fentry%2F230206%2F" alt="" /> <a href="https://ics.media/entry/230206/">HTML制作で気をつけたいスクロールバーの挙動 - ガタつきをCSSのscrollbar-gutterで防ぐ方法など - ICS MEDIA</a></cite><p><a href="https://ics.media/entry/230206/"><img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/4ab6d61e1ec9218a50f04171a5d30864440368a5/backend=imagemagick;height=90;version=1;width=120/https%3A%2F%2Fics.media%2Fentry%2F230206%2Fimages%2Feyecatch.jpg" alt="HTML制作で気をつけたいスクロールバーの挙動 - ガタつきをCSSのscrollbar-gutterで防ぐ方法など - ICS MEDIA" title="HTML制作で気をつけたいスクロールバーの挙動 - ガタつきをCSSのscrollbar-gutterで防ぐ方法など - ICS MEDIA" class="entry-image" /></a></p><p>HTML制作で気をつけたい スクロールバーの挙動 - ガタつきをCSSのscrollbar-gutterで防ぐ方法など - ブラウザのスクロールバーは、OSの種類によって挙動や見た目がさまざまです。環境によって挙動が違うため、自分の環境では問題なくても、ユーザーの環境から見ると問題が起きていることがあります。次のような問題を経...</p><p><a href="https://b.hatena.ne.jp/entry/s/ics.media/entry/230206/"><img src="https://b.hatena.ne.jp/entry/image/https://ics.media/entry/230206/" alt="はてなブックマーク - HTML制作で気をつけたいスクロールバーの挙動 - ガタつきをCSSのscrollbar-gutterで防ぐ方法など - ICS MEDIA" title="はてなブックマーク - HTML制作で気をつけたいスクロールバーの挙動 - ガタつきをCSSのscrollbar-gutterで防ぐ方法など - ICS MEDIA" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/s/ics.media/entry/230206/"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> https://baigie.me/sogitani/2018/08/baigie-workflow/ winterfall 2018-08-15T09:07:20Z マーケティング HTML プロジェクトマネジメ techfeed あとで読む 738 <blockquote cite="https://baigie.me/sogitani/2018/08/baigie-workflow/" title="ベイジのweb制作ワークフロー2018（140のタスクと解説） | ベイジの社長ブログ"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fbaigie.me%2Fsogitani%2F2018%2F08%2Fbaigie-workflow%2F" alt="" /> <a href="https://baigie.me/sogitani/2018/08/baigie-workflow/">ベイジのweb制作ワークフロー2018（140のタスクと解説） | ベイジの社長ブログ</a></cite><p><a href="https://baigie.me/sogitani/2018/08/baigie-workflow/"><img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/9142b55af90ac6a11e37f953c7403475cbfe1a97/backend=imagemagick;height=90;version=1;width=120/https%3A%2F%2Fbaigie.me%2Fsogitani%2Fwp-content%2Fuploads%2Fworkflow.png" alt="ベイジのweb制作ワークフロー2018（140のタスクと解説） | ベイジの社長ブログ" title="ベイジのweb制作ワークフロー2018（140のタスクと解説） | ベイジの社長ブログ" class="entry-image" /></a></p><p>ベイジで社内のワークフローを整理しだしたのは確か2014年頃です。その頃はまだ4～5人しか社員がいない状態で、タスクの粒度も粗く、いくつかのタスクは各人の能力に委ねたものでした。しかし10人を超えて関わる人が増えたあたりから、仕事の進め方も徐々に変わり、ワークフローの綻びも色々と出始めてきました。そこで...</p><p><a href="https://b.hatena.ne.jp/entry/s/baigie.me/sogitani/2018/08/baigie-workflow/"><img src="https://b.hatena.ne.jp/entry/image/https://baigie.me/sogitani/2018/08/baigie-workflow/" alt="はてなブックマーク - ベイジのweb制作ワークフロー2018（140のタスクと解説） | ベイジの社長ブログ" title="はてなブックマーク - ベイジのweb制作ワークフロー2018（140のタスクと解説） | ベイジの社長ブログ" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/s/baigie.me/sogitani/2018/08/baigie-workflow/"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> https://photoshopvip.net/101352 winterfall 2017-05-24T12:24:14Z HTML css 154 <blockquote cite="https://photoshopvip.net/101352" title="2017年大本命！HTML/CSSで表現できる、参考にしたいカード型レイアウト60個まとめ - PhotoshopVIP"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fphotoshopvip.net%2F101352" alt="" /> <a href="https://photoshopvip.net/101352">2017年大本命！HTML/CSSで表現できる、参考にしたいカード型レイアウト60個まとめ - PhotoshopVIP</a></cite><p><a href="https://photoshopvip.net/101352"><img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/3205163a2c12e03a27b354a2c64c897ec773f607/backend=imagemagick;height=90;version=1;width=120/https%3A%2F%2Fphotoshopvip.net%2Fwp-content%2Fuploads%2F2017%2F05%2F60card-layout.jpg" alt="2017年大本命！HTML/CSSで表現できる、参考にしたいカード型レイアウト60個まとめ - PhotoshopVIP" title="2017年大本命！HTML/CSSで表現できる、参考にしたいカード型レイアウト60個まとめ - PhotoshopVIP" class="entry-image" /></a></p><p>Google が2014年に発表したマテリアルデザインは、ウェブだけでなくグラフィックデザインでもますます人気となっており、さまざまな方法で採用しているケースをよく見かけるようになりました。 今回は HTML と CSS、わずかな JavaScript で実装できる、今後の参考にしたいカード型レイアウト用コードスニペットをまとめ...</p><p><a href="https://b.hatena.ne.jp/entry/s/photoshopvip.net/101352"><img src="https://b.hatena.ne.jp/entry/image/https://photoshopvip.net/101352" alt="はてなブックマーク - 2017年大本命！HTML/CSSで表現できる、参考にしたいカード型レイアウト60個まとめ - PhotoshopVIP" title="はてなブックマーク - 2017年大本命！HTML/CSSで表現できる、参考にしたいカード型レイアウト60個まとめ - PhotoshopVIP" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/s/photoshopvip.net/101352"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> https://qiita.com/kyoyababa/items/b07b6a4afac3bd970617 winterfall 2017-05-22T13:45:40Z あとで読む html CSS ejs ES2015 Angular HTML5 442 <blockquote cite="https://qiita.com/kyoyababa/items/b07b6a4afac3bd970617" title="おじさんが若者たちにモテるためのモダンなHTML/CSSマークアップ"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fqiita.com%2Fkyoyababa%2Fitems%2Fb07b6a4afac3bd970617" alt="" /> <a href="https://qiita.com/kyoyababa/items/b07b6a4afac3bd970617">おじさんが若者たちにモテるためのモダンなHTML/CSSマークアップ</a></cite><p><a href="https://qiita.com/kyoyababa/items/b07b6a4afac3bd970617"><img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/5baeaf1b1232d8610968f8643ffa1ac625700773/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.1.1%2526w%253D1200%2526blend64%253DaHR0cHM6Ly9xaWl0YS11c2VyLXByb2ZpbGUtaW1hZ2VzLmltZ2l4Lm5ldC9odHRwcyUzQSUyRiUyRnFpaXRhLWltYWdlLXN0b3JlLnMzLmFwLW5vcnRoZWFzdC0xLmFtYXpvbmF3cy5jb20lMkYwJTJGMTA1MjUyJTJGcHJvZmlsZS1pbWFnZXMlMkYxNzc1MTA3MjM1P2l4bGliPXJiLTQuMS4xJmFyPTElM0ExJmZpdD1jcm9wJm1hc2s9ZWxsaXBzZSZiZz1GRkZGRkYmZm09cG5nMzImcz03N2FkYzhmN2ZmNDU4MzUzNjk1YjM2MGRkYTBhN2ZmYw%2526blend-x%253D120%2526blend-y%253D467%2526blend-w%253D82%2526blend-h%253D82%2526blend-mode%253Dnormal%2526s%253D4d5313c04c1b2279327fb8bdbe84da59%3Fixlib%3Drb-4.1.1%26w%3D1200%26fm%3Djpg%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjEuMSZ3PTk2MCZoPTMyNCZ0eHQ9JUUzJTgxJThBJUUzJTgxJTk4JUUzJTgxJTk1JUUzJTgyJTkzJUUzJTgxJThDJUU4JThCJUE1JUU4JTgwJTg1JUUzJTgxJTlGJUUzJTgxJUExJUUzJTgxJUFCJUUzJTgzJUEyJUUzJTgzJTg2JUUzJTgyJThCJUUzJTgxJTlGJUUzJTgyJTgxJUUzJTgxJUFFJUUzJTgzJUEyJUUzJTgzJTgwJUUzJTgzJUIzJUUzJTgxJUFBSFRNTCUyRkNTUyVFMyU4MyU5RSVFMyU4MyVCQyVFMyU4MiVBRiVFMyU4MiVBMiVFMyU4MyU4MyVFMyU4MyU5NyZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZ0eHQtY29sb3I9JTIzMUUyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTU2JnR4dC1wYWQ9MCZzPTM0OTkyOGYwNjhhNTUzYzlmYTRiMjVmMjkzNjU1ODUz%26mark-x%3D120%26mark-y%3D112%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjEuMSZ3PTgzOCZoPTU4JnR4dD0lNDBreW95YV9iJnR4dC1jb2xvcj0lMjMxRTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9MzYmdHh0LXBhZD0wJnM9YmE5NGFhOWZjZGI4MTYwYjFiMTY2NDcwZTI1OGZjYjU%26blend-x%3D242%26blend-y%3D480%26blend-w%3D838%26blend-h%3D46%26blend-fit%3Dcrop%26blend-crop%3Dleft%252Cbottom%26blend-mode%3Dnormal%26s%3Da4e454baa55dc4d9e7d70720c99a0fc6" alt="おじさんが若者たちにモテるためのモダンなHTML/CSSマークアップ" title="おじさんが若者たちにモテるためのモダンなHTML/CSSマークアップ" class="entry-image" /></a></p><p>タイトルに含まれる語に関する補足 おじさん： 筆者の便宜上、30歳前後のフロントエンドエンジニア、マークアップエンジニア等を指す。性別は問わない。 なぜ「モテ」なければいけないのか 「モテる」とは、最先端の流行を知り取捨選択することで、自由意志を謳歌することで実現する。 PHPとjQueryの時代は廃れ始め、Ang...</p><p><a href="https://b.hatena.ne.jp/entry/s/qiita.com/kyoyababa/items/b07b6a4afac3bd970617"><img src="https://b.hatena.ne.jp/entry/image/https://qiita.com/kyoyababa/items/b07b6a4afac3bd970617" alt="はてなブックマーク - おじさんが若者たちにモテるためのモダンなHTML/CSSマークアップ" title="はてなブックマーク - おじさんが若者たちにモテるためのモダンなHTML/CSSマークアップ" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/s/qiita.com/kyoyababa/items/b07b6a4afac3bd970617"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> https://qiita.com/crifff/items/94a2c2f269b005383ee8 winterfall 2017-01-13T05:27:55Z html プログラミング 6 <blockquote cite="https://qiita.com/crifff/items/94a2c2f269b005383ee8" title="PhpStormで他の言語を埋め込む - Qiita"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fqiita.com%2Fcrifff%2Fitems%2F94a2c2f269b005383ee8" alt="" /> <a href="https://qiita.com/crifff/items/94a2c2f269b005383ee8">PhpStormで他の言語を埋め込む - Qiita</a></cite><p><a href="https://qiita.com/crifff/items/94a2c2f269b005383ee8"><img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/bc676feefdd5b6e08affb0f77cf291e56517f528/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%25252Fadvent-calendar-ogp-background-7940cd1c8db80a7ec40711d90f43539e.jpg%253Fixlib%253Drb-4.0.0%2526w%253D1200%2526blend64%253DaHR0cHM6Ly9xaWl0YS11c2VyLXByb2ZpbGUtaW1hZ2VzLmltZ2l4Lm5ldC9odHRwcyUzQSUyRiUyRnFpaXRhLWltYWdlLXN0b3JlLnMzLmFtYXpvbmF3cy5jb20lMkYwJTJGMzE4MSUyRnByb2ZpbGUtaW1hZ2VzJTJGMTQ3MzY4MjczOT9peGxpYj1yYi00LjAuMCZhcj0xJTNBMSZmaXQ9Y3JvcCZtYXNrPWVsbGlwc2UmZm09cG5nMzImcz1mNzJkMjM0MzZlNDAxZWM3NjhkOGRhNDQzMzkwYjJkZg%2526blend-x%253D120%2526blend-y%253D467%2526blend-w%253D82%2526blend-h%253D82%2526blend-mode%253Dnormal%2526s%253D5ecc622cef05431ada53595af1e4062e%3Fixlib%3Drb-4.0.0%26w%3D1200%26fm%3Djpg%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk2MCZoPTMyNCZ0eHQ9UGhwU3Rvcm0lRTMlODElQTclRTQlQkIlOTYlRTMlODElQUUlRTglQTglODAlRTglQUElOUUlRTMlODIlOTIlRTUlOUYlOEIlRTMlODIlODElRTglQkUlQkMlRTMlODIlODAmdHh0LWFsaWduPWxlZnQlMkN0b3AmdHh0LWNvbG9yPSUyMzNBM0MzQyZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT01NiZ0eHQtcGFkPTAmcz1iMjM0ZTRhYjFmZjU2ZGYxZmZlOWVkZmZiMDRjYmE1ZA%26mark-x%3D120%26mark-y%3D112%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTgzOCZoPTU4JnR4dD0lNDBjcmlmZmYmdHh0LWNvbG9yPSUyMzNBM0MzQyZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT0zNiZ0eHQtcGFkPTAmcz04ZGQxMmJkOTExMjM0ZjQ4ODI3YzNjYjMzOGEwOWVkMg%26blend-x%3D242%26blend-y%3D454%26blend-w%3D838%26blend-h%3D46%26blend-fit%3Dcrop%26blend-crop%3Dleft%252Cbottom%26blend-mode%3Dnormal%26txt64%3DaW4g5qCq5byP5Lya56S-44OQ44Oz44OA44Kk44OK44Og44Kz44K544K_44K444Kq%26txt-x%3D242%26txt-y%3D539%26txt-width%3D838%26txt-clip%3Dend%252Cellipsis%26txt-color%3D%25233A3C3C%26txt-font%3DHiragino%2520Sans%2520W6%26txt-size%3D28%26s%3D4b7f800283554657997c0e9f06a9c641" alt="PhpStormで他の言語を埋め込む - Qiita" title="PhpStormで他の言語を埋め込む - Qiita" class="entry-image" /></a></p><p>PhpStormには、PHPのコード中の一部をPHP以外の言語として扱えるLanguage Injectionという機能があります。 文字列の中にHTMLやSQLを書いたときに自然とハイライトされるアレです。 ちなみにSQLはPhpStormでDBの接続設定を行うとテーブルやカラム名の補完やチェックも行ってくれます。すごい。(実際の設定は割愛します) ...</p><p><a href="https://b.hatena.ne.jp/entry/s/qiita.com/crifff/items/94a2c2f269b005383ee8"><img src="https://b.hatena.ne.jp/entry/image/https://qiita.com/crifff/items/94a2c2f269b005383ee8" alt="はてなブックマーク - PhpStormで他の言語を埋め込む - Qiita" title="はてなブックマーク - PhpStormで他の言語を埋め込む - Qiita" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/s/qiita.com/crifff/items/94a2c2f269b005383ee8"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> https://codepen.io/codedsignal/pen/fwpaF winterfall 2017-01-12T23:56:31Z javascript html 3 <blockquote cite="https://codepen.io/codedsignal/pen/fwpaF" title="Responsive progress meter"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fcodepen.io%2Fcodedsignal%2Fpen%2FfwpaF" alt="" /> <a href="https://codepen.io/codedsignal/pen/fwpaF">Responsive progress meter</a></cite><p><a href="https://codepen.io/codedsignal/pen/fwpaF"><img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/b784278db33dd3b4c5b77279ac62ccfbc28bde2e/backend=imagemagick;height=90;version=1;width=120/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fi.cdpn.io%2F3232.fwpaF.b198bff9-2109-4cc8-b87b-0deecd35b01f.png" alt="Responsive progress meter" title="Responsive progress meter" class="entry-image" /></a></p><p>About HTML Preprocessors HTML preprocessors can make writing HTML more powerful or convenient. For instance, Markdown is designed to be easier to write and read for text documents and you could write a loop in Pug. Learn more · Versions Adding Classes In CodePen, whatever you write in the HTML ed...</p><p><a href="https://b.hatena.ne.jp/entry/s/codepen.io/codedsignal/pen/fwpaF"><img src="https://b.hatena.ne.jp/entry/image/https://codepen.io/codedsignal/pen/fwpaF" alt="はてなブックマーク - Responsive progress meter" title="はてなブックマーク - Responsive progress meter" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/s/codepen.io/codedsignal/pen/fwpaF"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> https://ics.media/entry/14340 winterfall 2016-12-19T12:22:34Z html コーディング 974 <blockquote cite="https://ics.media/entry/14340" title="2016年に見直したHTML5・CSS3コーディング手法6選 - ICS MEDIA"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fics.media%2Fentry%2F14340" alt="" /> <a href="https://ics.media/entry/14340">2016年に見直したHTML5・CSS3コーディング手法6選 - ICS MEDIA</a></cite><p><a href="https://ics.media/entry/14340"><img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/5d05998749981af639392976e6470a71a0702273/backend=imagemagick;height=90;version=1;width=120/https%3A%2F%2Fics.media%2Fentry%2F14340%2Fimages%2Feyecatch.jpg" alt="2016年に見直したHTML5・CSS3コーディング手法6選 - ICS MEDIA" title="2016年に見直したHTML5・CSS3コーディング手法6選 - ICS MEDIA" class="entry-image" /></a></p><p>HTML・CSSコーディングを取り巻く状況は、数年前と大きく変わっています。最近では、2016年11月にHTML 5.1が勧告されたり、2015年8月頃にChromeのブラウザーシェアがInternet Explorerを抜いたりといったニュースがありました。また、2017年4月にはWindows Vistaのサポートも終了するため、今後対応すべきはWindows 7のI...</p><p><a href="https://b.hatena.ne.jp/entry/s/ics.media/entry/14340"><img src="https://b.hatena.ne.jp/entry/image/https://ics.media/entry/14340" alt="はてなブックマーク - 2016年に見直したHTML5・CSS3コーディング手法6選 - ICS MEDIA" title="はてなブックマーク - 2016年に見直したHTML5・CSS3コーディング手法6選 - ICS MEDIA" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/s/ics.media/entry/14340"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> https://creive.me/archives/8814/ winterfall 2016-11-13T00:58:31Z html SEO 144 <blockquote cite="https://creive.me/archives/8814/" title="SEO対策として最低限押さえておきたいHTML/HTML5マークアップの大事な6つのポイント"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fcreive.me%2Farchives%2F8814%2F" alt="" /> <a href="https://creive.me/archives/8814/">SEO対策として最低限押さえておきたいHTML/HTML5マークアップの大事な6つのポイント</a></cite><p><a href="https://creive.me/archives/8814/"><img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/2ee4e3a2cc1d25a5aca0faea7ad96456fa9c2eb0/backend=imagemagick;height=90;version=1;width=120/https%3A%2F%2Fcreive.me%2Fwp-content%2Fuploads%2F2016%2F03%2Fhtml-thumbnail.png" alt="SEO対策として最低限押さえておきたいHTML/HTML5マークアップの大事な6つのポイント" title="SEO対策として最低限押さえておきたいHTML/HTML5マークアップの大事な6つのポイント" class="entry-image" /></a></p><p>検索エンジンがページ構造を理解しやすいようにHTMLがマークアップされていることは、安定的に検索結果上位にインデックスされるために重要な要素の1つです。 当然のことながら、前提として検索キーワードを想定した質の高いコンテンツ作成が必要です。せっかく質の高いコンテンツを作成してもマークアップの仕方が論理...</p><p><a href="https://b.hatena.ne.jp/entry/s/creive.me/archives/8814/"><img src="https://b.hatena.ne.jp/entry/image/https://creive.me/archives/8814/" alt="はてなブックマーク - SEO対策として最低限押さえておきたいHTML/HTML5マークアップの大事な6つのポイント" title="はてなブックマーク - SEO対策として最低限押さえておきたいHTML/HTML5マークアップの大事な6つのポイント" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/s/creive.me/archives/8814/"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> http://on-ze.com/archives/4831 winterfall 2016-01-20T23:48:03Z html 617 <blockquote cite="http://on-ze.com/archives/4831" title="HTML の 〜 内に書くタグの順番にも気を遣ってみた。"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=http%3A%2F%2Fon-ze.com%2Farchives%2F4831" alt="" /> <a href="http://on-ze.com/archives/4831">HTML の 〜 内に書くタグの順番にも気を遣ってみた。</a></cite><p><a href="http://on-ze.com/archives/4831"><img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/61204b56a0a9b926175cd97f8718a53357febcf6/backend=imagemagick;height=90;version=1;width=120/https%3A%2F%2Fon-ze.com%2Fblog%2Fwordpress%2Fwp-content%2Fthemes%2Fonze-blog-2024%2Finc%2Fthumbnail%2F1200x630x80-727d1461365b650d08e5805a9b8ebdc2-image-1.png" alt="HTML の 〜 内に書くタグの順番にも気を遣ってみた。" title="HTML の 〜 内に書くタグの順番にも気を遣ってみた。" class="entry-image" /></a></p><p>今アナタがご覧になっている、このオンズのウェブサイトでは読み込み速度のスピードアップや各種マークアップのクオリティ維持のために随時徹底した改善作業を行っています。 これまでも本ブログにて様々なテクニックを紹介してきましたが、今日は&lt;head&gt;〜&lt;/head&gt;タグ内のコードにフォーカスして、弊社が実際に行ってい...</p><p><a href="https://b.hatena.ne.jp/entry/on-ze.com/archives/4831"><img src="https://b.hatena.ne.jp/entry/image/http://on-ze.com/archives/4831" alt="はてなブックマーク - HTML の 〜 内に書くタグの順番にも気を遣ってみた。" title="はてなブックマーク - HTML の 〜 内に書くタグの順番にも気を遣ってみた。" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/on-ze.com/archives/4831"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> http://style-validator.github.io/Style-Validator/ winterfall 2015-11-25T14:57:50Z CSS Browser Chrome dom IT html W3C DOM chrome 21 <blockquote cite="http://style-validator.github.io/Style-Validator/" title="Style Validator - to reduce patch."><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=http%3A%2F%2Fstyle-validator.github.io%2FStyle-Validator%2F" alt="" /> <a href="http://style-validator.github.io/Style-Validator/">Style Validator - to reduce patch.</a></cite><p><a href="http://style-validator.github.io/Style-Validator/"><img src="" alt="Style Validator - to reduce patch." title="Style Validator - to reduce patch." class="entry-image" /></a></p><p>Style Validator is a new html/css validator with chrome extension or bookmarklet.&quot;Validation in the Browser&quot;. Style Validator is a new CSS Validator that check computedStyle NOT syntax. Chrome Extension (for only chrome browser) Style Validator 0.2.5 Differences from W3C CSS Validator and Existin...</p><p><a href="https://b.hatena.ne.jp/entry/style-validator.github.io/Style-Validator/"><img src="https://b.hatena.ne.jp/entry/image/http://style-validator.github.io/Style-Validator/" alt="はてなブックマーク - Style Validator - to reduce patch." title="はてなブックマーク - Style Validator - to reduce patch." border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/style-validator.github.io/Style-Validator/"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> https://developer-blog.finc.co.jp/post/133650532767/%E3%82%B5%E3%83%BC%E3%83%90%E3%83%BC%E3%82%B5%E3%82%A4%E3%83%89%E3%82%A8%E3%83%B3%E3%82%B8%E3%83%8B%E3%82%A2%E3%81%A0%E3%82%89%E3%81%91%E3%81%AE%E3%83%81%E3%83%BC%E3%83%A0%E3%81%A7%E3%83%95%E3%83%AD%E3%83%B3%E3%83%88%E3%82%A8%E3%83%B3%E3%83%89%E3%82%92%E6%94%B9%E5%96%84%E3%81%99%E3%82%8B%E3%81%9F%E3%82%81%E3%81%AB%E3%82%84%E3%81%A3%E3%81%9F%E3%81%93%E3%81%A8 winterfall 2015-11-24T05:12:34Z フロントエンド CSSフレームワーク 開発の現場 html 16 <blockquote cite="https://developer-blog.finc.co.jp/post/133650532767/%E3%82%B5%E3%83%BC%E3%83%90%E3%83%BC%E3%82%B5%E3%82%A4%E3%83%89%E3%82%A8%E3%83%B3%E3%82%B8%E3%83%8B%E3%82%A2%E3%81%A0%E3%82%89%E3%81%91%E3%81%AE%E3%83%81%E3%83%BC%E3%83%A0%E3%81%A7%E3%83%95%E3%83%AD%E3%83%B3%E3%83%88%E3%82%A8%E3%83%B3%E3%83%89%E3%82%92%E6%94%B9%E5%96%84%E3%81%99%E3%82%8B%E3%81%9F%E3%82%81%E3%81%AB%E3%82%84%E3%81%A3%E3%81%9F%E3%81%93%E3%81%A8" title="サーバーサイドエンジニアだらけのチームでフロントエンドを改善するためにやったこと | FiNC Developers Blog"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fdeveloper-blog.finc.co.jp%2Fpost%2F133650532767%2F%25E3%2582%25B5%25E3%2583%25BC%25E3%2583%2590%25E3%2583%25BC%25E3%2582%25B5%25E3%2582%25A4%25E3%2583%2589%25E3%2582%25A8%25E3%2583%25B3%25E3%2582%25B8%25E3%2583%258B%25E3%2582%25A2%25E3%2581%25A0%25E3%2582%2589%25E3%2581%2591%25E3%2581%25AE%25E3%2583%2581%25E3%2583%25BC%25E3%2583%25A0%25E3%2581%25A7%25E3%2583%2595%25E3%2583%25AD%25E3%2583%25B3%25E3%2583%2588%25E3%2582%25A8%25E3%2583%25B3%25E3%2583%2589%25E3%2582%2592%25E6%2594%25B9%25E5%2596%2584%25E3%2581%2599%25E3%2582%258B%25E3%2581%259F%25E3%2582%2581%25E3%2581%25AB%25E3%2582%2584%25E3%2581%25A3%25E3%2581%259F%25E3%2581%2593%25E3%2581%25A8" alt="" /> <a href="https://developer-blog.finc.co.jp/post/133650532767/%E3%82%B5%E3%83%BC%E3%83%90%E3%83%BC%E3%82%B5%E3%82%A4%E3%83%89%E3%82%A8%E3%83%B3%E3%82%B8%E3%83%8B%E3%82%A2%E3%81%A0%E3%82%89%E3%81%91%E3%81%AE%E3%83%81%E3%83%BC%E3%83%A0%E3%81%A7%E3%83%95%E3%83%AD%E3%83%B3%E3%83%88%E3%82%A8%E3%83%B3%E3%83%89%E3%82%92%E6%94%B9%E5%96%84%E3%81%99%E3%82%8B%E3%81%9F%E3%82%81%E3%81%AB%E3%82%84%E3%81%A3%E3%81%9F%E3%81%93%E3%81%A8">サーバーサイドエンジニアだらけのチームでフロントエンドを改善するためにやったこと | FiNC Developers Blog</a></cite><p><a href="https://developer-blog.finc.co.jp/post/133650532767/%E3%82%B5%E3%83%BC%E3%83%90%E3%83%BC%E3%82%B5%E3%82%A4%E3%83%89%E3%82%A8%E3%83%B3%E3%82%B8%E3%83%8B%E3%82%A2%E3%81%A0%E3%82%89%E3%81%91%E3%81%AE%E3%83%81%E3%83%BC%E3%83%A0%E3%81%A7%E3%83%95%E3%83%AD%E3%83%B3%E3%83%88%E3%82%A8%E3%83%B3%E3%83%89%E3%82%92%E6%94%B9%E5%96%84%E3%81%99%E3%82%8B%E3%81%9F%E3%82%81%E3%81%AB%E3%82%84%E3%81%A3%E3%81%9F%E3%81%93%E3%81%A8"><img src="" alt="サーバーサイドエンジニアだらけのチームでフロントエンドを改善するためにやったこと | FiNC Developers Blog" title="サーバーサイドエンジニアだらけのチームでフロントエンドを改善するためにやったこと | FiNC Developers Blog" class="entry-image" /></a></p><p>サーバーサイドエンジニアだらけのチームでフロントエンドを改善するためにやったこと はじめまして、エンジニアインターンの田中です。 各企業の従業員の健康状態を調べるアンケートシステムであるウェルネスサーベイというプロジェクトのリニューアルを行っています。 サーバーサイドはともかくフロントエンドは再利用...</p><p><a href="https://b.hatena.ne.jp/entry/s/developer-blog.finc.co.jp/post/133650532767/%E3%82%B5%E3%83%BC%E3%83%90%E3%83%BC%E3%82%B5%E3%82%A4%E3%83%89%E3%82%A8%E3%83%B3%E3%82%B8%E3%83%8B%E3%82%A2%E3%81%A0%E3%82%89%E3%81%91%E3%81%AE%E3%83%81%E3%83%BC%E3%83%A0%E3%81%A7%E3%83%95%E3%83%AD%E3%83%B3%E3%83%88%E3%82%A8%E3%83%B3%E3%83%89%E3%82%92%E6%94%B9%E5%96%84%E3%81%99%E3%82%8B%E3%81%9F%E3%82%81%E3%81%AB%E3%82%84%E3%81%A3%E3%81%9F%E3%81%93%E3%81%A8"><img src="https://b.hatena.ne.jp/entry/image/https://developer-blog.finc.co.jp/post/133650532767/%E3%82%B5%E3%83%BC%E3%83%90%E3%83%BC%E3%82%B5%E3%82%A4%E3%83%89%E3%82%A8%E3%83%B3%E3%82%B8%E3%83%8B%E3%82%A2%E3%81%A0%E3%82%89%E3%81%91%E3%81%AE%E3%83%81%E3%83%BC%E3%83%A0%E3%81%A7%E3%83%95%E3%83%AD%E3%83%B3%E3%83%88%E3%82%A8%E3%83%B3%E3%83%89%E3%82%92%E6%94%B9%E5%96%84%E3%81%99%E3%82%8B%E3%81%9F%E3%82%81%E3%81%AB%E3%82%84%E3%81%A3%E3%81%9F%E3%81%93%E3%81%A8" alt="はてなブックマーク - サーバーサイドエンジニアだらけのチームでフロントエンドを改善するためにやったこと | FiNC Developers Blog" title="はてなブックマーク - サーバーサイドエンジニアだらけのチームでフロントエンドを改善するためにやったこと | FiNC Developers Blog" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/s/developer-blog.finc.co.jp/post/133650532767/%E3%82%B5%E3%83%BC%E3%83%90%E3%83%BC%E3%82%B5%E3%82%A4%E3%83%89%E3%82%A8%E3%83%B3%E3%82%B8%E3%83%8B%E3%82%A2%E3%81%A0%E3%82%89%E3%81%91%E3%81%AE%E3%83%81%E3%83%BC%E3%83%A0%E3%81%A7%E3%83%95%E3%83%AD%E3%83%B3%E3%83%88%E3%82%A8%E3%83%B3%E3%83%89%E3%82%92%E6%94%B9%E5%96%84%E3%81%99%E3%82%8B%E3%81%9F%E3%82%81%E3%81%AB%E3%82%84%E3%81%A3%E3%81%9F%E3%81%93%E3%81%A8"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> https://coliss.com/articles/build-websites/operation/work/html5-template-by-sixrevisions.html winterfall 2015-10-29T03:14:52Z html HTML5 テンプレート 452 <blockquote cite="https://coliss.com/articles/build-websites/operation/work/html5-template-by-sixrevisions.html" title="HTML5でWebページを作成する時のベースになるシンプルなコードで書かれたテンプレート"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fcoliss.com%2Farticles%2Fbuild-websites%2Foperation%2Fwork%2Fhtml5-template-by-sixrevisions.html" alt="" /> <a href="https://coliss.com/articles/build-websites/operation/work/html5-template-by-sixrevisions.html">HTML5でWebページを作成する時のベースになるシンプルなコードで書かれたテンプレート</a></cite><p><a href="https://coliss.com/articles/build-websites/operation/work/html5-template-by-sixrevisions.html"><img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/35ddbe4f43a6ba202678c2fd5710c9120d5f7dee/backend=imagemagick;height=90;version=1;width=120/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201503%2F2015101301.png" alt="HTML5でWebページを作成する時のベースになるシンプルなコードで書かれたテンプレート" title="HTML5でWebページを作成する時のベースになるシンプルなコードで書かれたテンプレート" class="entry-image" /></a></p><p>HTML5でWebページを作成する時に役立つ、必要最小限のブランクのテンプレート、ナビゲーションを上部に固定配置、写真画像などの背景画像をブラウザいっぱいに表示させるシンプルなテンプレートを紹介します。 画像: Girly Drop HTML5で作成する時の必要最小限のテンプレート ナビゲーションを上部に固定配置 背景画像を...</p><p><a href="https://b.hatena.ne.jp/entry/s/coliss.com/articles/build-websites/operation/work/html5-template-by-sixrevisions.html"><img src="https://b.hatena.ne.jp/entry/image/https://coliss.com/articles/build-websites/operation/work/html5-template-by-sixrevisions.html" alt="はてなブックマーク - HTML5でWebページを作成する時のベースになるシンプルなコードで書かれたテンプレート" title="はてなブックマーク - HTML5でWebページを作成する時のベースになるシンプルなコードで書かれたテンプレート" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/s/coliss.com/articles/build-websites/operation/work/html5-template-by-sixrevisions.html"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> http://kia-king.com/code-guide/ winterfall 2015-10-22T07:55:45Z html コーディング ガイドライン 869 <blockquote cite="http://kia-king.com/code-guide/" title="コーディングガイド by @mdo"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=http%3A%2F%2Fkia-king.com%2Fcode-guide%2F" alt="" /> <a href="http://kia-king.com/code-guide/">コーディングガイド by @mdo</a></cite><p><a href="http://kia-king.com/code-guide/"><img src="" alt="コーディングガイド by @mdo" title="コーディングガイド by @mdo" class="entry-image" /></a></p><p>HTMLシンタックス インデントには半角スペース2個分のソフトタブを使用すること。これが全ての環境で全く同じように見せる唯一の方法。 ネストされた要素はかならず1段階だけインデント(半角スペース2個)すること。 いつもダブルクォートを使うこと。属性値に対してシングルクォートを使わないこと。 閉じタグの無い要素...</p><p><a href="https://b.hatena.ne.jp/entry/kia-king.com/code-guide/"><img src="https://b.hatena.ne.jp/entry/image/http://kia-king.com/code-guide/" alt="はてなブックマーク - コーディングガイド by @mdo" title="はてなブックマーク - コーディングガイド by @mdo" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/kia-king.com/code-guide/"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> https://react.dev/learn/tutorial-tic-tac-toe winterfall 2015-08-05T04:41:40Z JS javascript markdown チュートリアル react html 606 <blockquote cite="https://react.dev/learn/tutorial-tic-tac-toe" title="Tutorial: Tic-Tac-Toe – React"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Freact.dev%2Flearn%2Ftutorial-tic-tac-toe" alt="" /> <a href="https://react.dev/learn/tutorial-tic-tac-toe">Tutorial: Tic-Tac-Toe – React</a></cite><p><a href="https://react.dev/learn/tutorial-tic-tac-toe"><img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/6d12f7f4fdb15da0b18f83823dd51db70c6cbabc/backend=imagemagick;height=90;version=1;width=120/https%3A%2F%2Freact.dev%2Fimages%2Fog%2Flearn-tutorial-tic-tac-toe.png" alt="Tutorial: Tic-Tac-Toe – React" title="Tutorial: Tic-Tac-Toe – React" class="entry-image" /></a></p><p>You will build a small tic-tac-toe game during this tutorial. This tutorial does not assume any existing React knowledge. The techniques you’ll learn in the tutorial are fundamental to building any React app, and fully understanding it will give you a deep understanding of React. This tutorial is...</p><p><a href="https://b.hatena.ne.jp/entry/s/react.dev/learn/tutorial-tic-tac-toe"><img src="https://b.hatena.ne.jp/entry/image/https://react.dev/learn/tutorial-tic-tac-toe" alt="はてなブックマーク - Tutorial: Tic-Tac-Toe – React" title="はてなブックマーク - Tutorial: Tic-Tac-Toe – React" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/s/react.dev/learn/tutorial-tic-tac-toe"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> http://detarame.moo.jp/2012/08/07/google%E3%81%8C%E6%8E%A8%E8%96%A6%E3%81%99%E3%82%8Bhtml%E3%81%A8css%E3%81%AE%E3%82%B3%E3%83%BC%E3%83%87%E3%82%A3%E3%83%B3%E3%82%B0%E6%96%B9%E6%B3%95/ winterfall 2015-08-03T04:53:50Z google コーディング規約 コーディング webdesign Web制作 html CSS ガイドライン 1053 <blockquote cite="http://detarame.moo.jp/2012/08/07/google%E3%81%8C%E6%8E%A8%E8%96%A6%E3%81%99%E3%82%8Bhtml%E3%81%A8css%E3%81%AE%E3%82%B3%E3%83%BC%E3%83%87%E3%82%A3%E3%83%B3%E3%82%B0%E6%96%B9%E6%B3%95/" title="Googleが推薦するHTMLとCSSのコーディング方法"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=http%3A%2F%2Fdetarame.moo.jp%2F2012%2F08%2F07%2Fgoogle%25E3%2581%258C%25E6%258E%25A8%25E8%2596%25A6%25E3%2581%2599%25E3%2582%258Bhtml%25E3%2581%25A8css%25E3%2581%25AE%25E3%2582%25B3%25E3%2583%25BC%25E3%2583%2587%25E3%2582%25A3%25E3%2583%25B3%25E3%2582%25B0%25E6%2596%25B9%25E6%25B3%2595%2F" alt="" /> <a href="http://detarame.moo.jp/2012/08/07/google%E3%81%8C%E6%8E%A8%E8%96%A6%E3%81%99%E3%82%8Bhtml%E3%81%A8css%E3%81%AE%E3%82%B3%E3%83%BC%E3%83%87%E3%82%A3%E3%83%B3%E3%82%B0%E6%96%B9%E6%B3%95/">Googleが推薦するHTMLとCSSのコーディング方法</a></cite><p><a href="http://detarame.moo.jp/2012/08/07/google%E3%81%8C%E6%8E%A8%E8%96%A6%E3%81%99%E3%82%8Bhtml%E3%81%A8css%E3%81%AE%E3%82%B3%E3%83%BC%E3%83%87%E3%82%A3%E3%83%B3%E3%82%B0%E6%96%B9%E6%B3%95/"><img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/7ccb4ad50e503f1992654ad65f1b45f1b02120df/backend=imagemagick;height=90;version=1;width=120/http%3A%2F%2Fdetarame.moo.jp%2Fwp%2Fwp-content%2Fuploads%2F2012%2F08%2Fgooglehtmlguide.png" alt="Googleが推薦するHTMLとCSSのコーディング方法" title="Googleが推薦するHTMLとCSSのコーディング方法" class="entry-image" /></a></p><p>2012年7月12日のGoogle ウェブマスター向け公式ブログの記事「HTML と CSS のコーディングガイドライン」で紹介されていた「Google HTML/CSS Style Guide」に書いてあるコーディング方法と感想を紹介します。 Google HTML/CSS Style Guideの日本語翻訳 Google HTML/CSS Style Guideは英語なのでGoogle Chromeで翻訳して...</p><p><a href="https://b.hatena.ne.jp/entry/detarame.moo.jp/2012/08/07/google%E3%81%8C%E6%8E%A8%E8%96%A6%E3%81%99%E3%82%8Bhtml%E3%81%A8css%E3%81%AE%E3%82%B3%E3%83%BC%E3%83%87%E3%82%A3%E3%83%B3%E3%82%B0%E6%96%B9%E6%B3%95/"><img src="https://b.hatena.ne.jp/entry/image/http://detarame.moo.jp/2012/08/07/google%E3%81%8C%E6%8E%A8%E8%96%A6%E3%81%99%E3%82%8Bhtml%E3%81%A8css%E3%81%AE%E3%82%B3%E3%83%BC%E3%83%87%E3%82%A3%E3%83%B3%E3%82%B0%E6%96%B9%E6%B3%95/" alt="はてなブックマーク - Googleが推薦するHTMLとCSSのコーディング方法" title="はてなブックマーク - Googleが推薦するHTMLとCSSのコーディング方法" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/detarame.moo.jp/2012/08/07/google%E3%81%8C%E6%8E%A8%E8%96%A6%E3%81%99%E3%82%8Bhtml%E3%81%A8css%E3%81%AE%E3%82%B3%E3%83%BC%E3%83%87%E3%82%A3%E3%83%B3%E3%82%B0%E6%96%B9%E6%B3%95/"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> https://coliss.com/articles/build-websites/operation/work/css-and-html5-templated.html winterfall 2015-07-08T23:58:32Z css3 html HTML5 410 <blockquote cite="https://coliss.com/articles/build-websites/operation/work/css-and-html5-templated.html" title="Bootstrapは無し、HTML5とCSS3のシンプルなコードで実装されたレスポンシブ対応のテンプレートのまとめ"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fcoliss.com%2Farticles%2Fbuild-websites%2Foperation%2Fwork%2Fcss-and-html5-templated.html" alt="" /> <a href="https://coliss.com/articles/build-websites/operation/work/css-and-html5-templated.html">Bootstrapは無し、HTML5とCSS3のシンプルなコードで実装されたレスポンシブ対応のテンプレートのまとめ</a></cite><p><a href="https://coliss.com/articles/build-websites/operation/work/css-and-html5-templated.html"><img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/65f740d21cddc35f339c9ce66dd5766d13862c1c/backend=imagemagick;height=90;version=1;width=120/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201502%2F2015070601.png" alt="Bootstrapは無し、HTML5とCSS3のシンプルなコードで実装されたレスポンシブ対応のテンプレートのまとめ" title="Bootstrapは無し、HTML5とCSS3のシンプルなコードで実装されたレスポンシブ対応のテンプレートのまとめ" class="entry-image" /></a></p><p>Bootstrapなどのフレームワークは無し、HTML5とCSS3のシンプルなコードをベースに、jQueryなどでいろいろなインタラクションやアイコンフォントなどを使ったレスポンシブ対応のテンプレートをTemplatedから紹介します。</p><p><a href="https://b.hatena.ne.jp/entry/s/coliss.com/articles/build-websites/operation/work/css-and-html5-templated.html"><img src="https://b.hatena.ne.jp/entry/image/https://coliss.com/articles/build-websites/operation/work/css-and-html5-templated.html" alt="はてなブックマーク - Bootstrapは無し、HTML5とCSS3のシンプルなコードで実装されたレスポンシブ対応のテンプレートのまとめ" title="はてなブックマーク - Bootstrapは無し、HTML5とCSS3のシンプルなコードで実装されたレスポンシブ対応のテンプレートのまとめ" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/s/coliss.com/articles/build-websites/operation/work/css-and-html5-templated.html"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> http://soraxism.com/soraxism/blog/display-inline-block-%E3%81%AE%E9%9A%99%E9%96%93%E3%82%92%E8%A9%B0%E3%82%81%E3%82%8B%E6%96%B9%E6%B3%95 winterfall 2015-06-08T06:43:06Z css3 css html Webデザイン Web制作 web開発 display 23 <blockquote cite="http://soraxism.com/soraxism/blog/display-inline-block-%E3%81%AE%E9%9A%99%E9%96%93%E3%82%92%E8%A9%B0%E3%82%81%E3%82%8B%E6%96%B9%E6%B3%95" title="display: inline-block の隙間を詰める方法 | Soraxism"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=http%3A%2F%2Fsoraxism.com%2Fsoraxism%2Fblog%2Fdisplay-inline-block-%25E3%2581%25AE%25E9%259A%2599%25E9%2596%2593%25E3%2582%2592%25E8%25A9%25B0%25E3%2582%2581%25E3%2582%258B%25E6%2596%25B9%25E6%25B3%2595" alt="" /> <a href="http://soraxism.com/soraxism/blog/display-inline-block-%E3%81%AE%E9%9A%99%E9%96%93%E3%82%92%E8%A9%B0%E3%82%81%E3%82%8B%E6%96%B9%E6%B3%95">display: inline-block の隙間を詰める方法 | Soraxism</a></cite><p><a href="http://soraxism.com/soraxism/blog/display-inline-block-%E3%81%AE%E9%9A%99%E9%96%93%E3%82%92%E8%A9%B0%E3%82%81%E3%82%8B%E6%96%B9%E6%B3%95"><img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/4fa322a4d7888ba7eb0004e2b8ce5f1f0bee053d/backend=imagemagick;height=90;version=1;width=120/http%3A%2F%2Fsoraxism.com%2Fsoraxism%2Fblog%2Fwp-content%2Fuploads%2F2014%2F07%2Fcss.jpg" alt="display: inline-block の隙間を詰める方法 | Soraxism" title="display: inline-block の隙間を詰める方法 | Soraxism" class="entry-image" /></a></p><p>今日会社の後輩くんから「display: inline-blockを使ってliを横並びにしてるんですけど、隙間ができてしまうんですが…」との質問。 彼は最近HTMLを学び始めたばかりなんですが、自分も昔これでmarginとかいじくり倒して悩んだことがあり、みんな同じ壁にぶち当たるもんなんだなぁとしみじみ…。 display: inline-blockでl...</p><p><a href="https://b.hatena.ne.jp/entry/soraxism.com/soraxism/blog/display-inline-block-%E3%81%AE%E9%9A%99%E9%96%93%E3%82%92%E8%A9%B0%E3%82%81%E3%82%8B%E6%96%B9%E6%B3%95"><img src="https://b.hatena.ne.jp/entry/image/http://soraxism.com/soraxism/blog/display-inline-block-%E3%81%AE%E9%9A%99%E9%96%93%E3%82%92%E8%A9%B0%E3%82%81%E3%82%8B%E6%96%B9%E6%B3%95" alt="はてなブックマーク - display: inline-block の隙間を詰める方法 | Soraxism" title="はてなブックマーク - display: inline-block の隙間を詰める方法 | Soraxism" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/soraxism.com/soraxism/blog/display-inline-block-%E3%81%AE%E9%9A%99%E9%96%93%E3%82%92%E8%A9%B0%E3%82%81%E3%82%8B%E6%96%B9%E6%B3%95"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> https://www.webcyou.com/ winterfall 2015-05-31T14:20:44Z html web webデザイン まとめ javascript jQuery tips web制作 design blog 113 <blockquote cite="https://www.webcyou.com/" title="web帳 | webデザイナーの、webデザイナーによる、webデザイナーのためのサイト"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fwww.webcyou.com%2F" alt="" /> <a href="https://www.webcyou.com/">web帳 | webデザイナーの、webデザイナーによる、webデザイナーのためのサイト</a></cite><p><a href="https://www.webcyou.com/"><img src="" alt="web帳 | webデザイナーの、webデザイナーによる、webデザイナーのためのサイト" title="web帳 | webデザイナーの、webデザイナーによる、webデザイナーのためのサイト" class="entry-image" /></a></p><p>このサイトは、只今WEB業界で活躍中のデザイナー、プログラマーの方々の情報を集めたweb統合情報サイトです。 web帳</p><p><a href="https://b.hatena.ne.jp/entry/s/www.webcyou.com/"><img src="https://b.hatena.ne.jp/entry/image/https://www.webcyou.com/" alt="はてなブックマーク - web帳 | webデザイナーの、webデザイナーによる、webデザイナーのためのサイト" title="はてなブックマーク - web帳 | webデザイナーの、webデザイナーによる、webデザイナーのためのサイト" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/s/www.webcyou.com/"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote>