https://b.hatena.ne.jp/ozomatli/CSS/ CSSに関するozomatliのはてなブックマーク (14) https://epic-spinners.vuestic.dev/ ozomatli 2020-02-06T07:47:57Z CSS 42 <blockquote cite="https://epic-spinners.vuestic.dev/" title="Epic Spinners"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fepic-spinners.vuestic.dev%2F" alt="" /> <a href="https://epic-spinners.vuestic.dev/">Epic Spinners</a></cite><p><a href="https://epic-spinners.vuestic.dev/"><img src="" alt="Epic Spinners" title="Epic Spinners" class="entry-image" /></a></p><p></p><p><a href="https://b.hatena.ne.jp/entry/s/epic-spinners.vuestic.dev/"><img src="https://b.hatena.ne.jp/entry/image/https://epic-spinners.vuestic.dev/" alt="はてなブックマーク - Epic Spinners" title="はてなブックマーク - Epic Spinners" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/s/epic-spinners.vuestic.dev/"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> https://css-tricks.com/snippets/svg/curved-text-along-path/ ozomatli 2020-01-08T07:38:55Z CSS 1 <blockquote cite="https://css-tricks.com/snippets/svg/curved-text-along-path/" title="Curved Text Along a Path | CSS-Tricks"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fcss-tricks.com%2Fsnippets%2Fsvg%2Fcurved-text-along-path%2F" alt="" /> <a href="https://css-tricks.com/snippets/svg/curved-text-along-path/">Curved Text Along a Path | CSS-Tricks</a></cite><p><a href="https://css-tricks.com/snippets/svg/curved-text-along-path/"><img src="" alt="Curved Text Along a Path | CSS-Tricks" title="Curved Text Along a Path | CSS-Tricks" class="entry-image" /></a></p><p></p><p><a href="https://b.hatena.ne.jp/entry/s/css-tricks.com/snippets/svg/curved-text-along-path/"><img src="https://b.hatena.ne.jp/entry/image/https://css-tricks.com/snippets/svg/curved-text-along-path/" alt="はてなブックマーク - Curved Text Along a Path | CSS-Tricks" title="はてなブックマーク - Curved Text Along a Path | CSS-Tricks" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/s/css-tricks.com/snippets/svg/curved-text-along-path/"><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/frontend-tooling-survey-2018.html ozomatli 2018-05-15T03:21:10Z ライブラリ javascript CSS 101 <blockquote cite="https://coliss.com/articles/build-websites/operation/work/frontend-tooling-survey-2018.html" title="2018年、フロントエンドのデベロッパーがプロジェクトで使用しているCSS, JavaScriptのツールを調査"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fcoliss.com%2Farticles%2Fbuild-websites%2Foperation%2Fwork%2Ffrontend-tooling-survey-2018.html" alt="" /> <a href="https://coliss.com/articles/build-websites/operation/work/frontend-tooling-survey-2018.html">2018年、フロントエンドのデベロッパーがプロジェクトで使用しているCSS, JavaScriptのツールを調査</a></cite><p><a href="https://coliss.com/articles/build-websites/operation/work/frontend-tooling-survey-2018.html"><img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/0d9cb73c412b8f3fbe3039baa2eb08b33dcbe4be/backend=imagemagick;height=90;version=1;width=120/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201802%2F2018051201.png" alt="2018年、フロントエンドのデベロッパーがプロジェクトで使用しているCSS, JavaScriptのツールを調査" title="2018年、フロントエンドのデベロッパーがプロジェクトで使用しているCSS, JavaScriptのツールを調査" class="entry-image" /></a></p><p>フロントエンドのデベロッパーがプロジェクトで使用しているCSS, JavaScriptのツールについての調査結果を紹介します。 SassやLESS、BootstrapやFoundation、AutoprefixerやModernizr、BEMやCSS-in-JS、CSS GridやFlexbox、NPMやGulp、jQueryやReactやVue.js、WebpackやESLintなど、実際にどのように使用されているかが...</p><p><a href="https://b.hatena.ne.jp/entry/s/coliss.com/articles/build-websites/operation/work/frontend-tooling-survey-2018.html"><img src="https://b.hatena.ne.jp/entry/image/https://coliss.com/articles/build-websites/operation/work/frontend-tooling-survey-2018.html" alt="はてなブックマーク - 2018年、フロントエンドのデベロッパーがプロジェクトで使用しているCSS, JavaScriptのツールを調査" title="はてなブックマーク - 2018年、フロントエンドのデベロッパーがプロジェクトで使用しているCSS, JavaScriptのツールを調査" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/s/coliss.com/articles/build-websites/operation/work/frontend-tooling-survey-2018.html"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> https://parashuto.com/rriver/development/mq-px-em-rem ozomatli 2018-04-27T09:07:17Z CSS あとで読む 43 <blockquote cite="https://parashuto.com/rriver/development/mq-px-em-rem" title="メディアクエリで「em」を使うと基準になるのは何のサイズ？"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fparashuto.com%2Frriver%2Fdevelopment%2Fmq-px-em-rem" alt="" /> <a href="https://parashuto.com/rriver/development/mq-px-em-rem">メディアクエリで「em」を使うと基準になるのは何のサイズ？</a></cite><p><a href="https://parashuto.com/rriver/development/mq-px-em-rem"><img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/a39e7be04dd393ca0be4f5b5dc9ece55c3f33969/backend=imagemagick;height=90;version=1;width=120/https%3A%2F%2Fparashuto.com%2Frriver%2Fwp%2Fwp-content%2Fuploads%2F2018%2F04%2Fmq-mystery.png" alt="メディアクエリで「em」を使うと基準になるのは何のサイズ？" title="メディアクエリで「em」を使うと基準になるのは何のサイズ？" class="entry-image" /></a></p><p>メディアクエリを書くときの単位って、何を使ってますか？ 僕はいまのところpxしか使ってないんですが、先日、「PX, EM or REM Media Queries? 」という記事を読んで、メディアクエリで使うemやrem単位について、逆に混乱してしまったので、自分でも仕様やブラウザの挙動を確かめてみました。 結論から言うと、emもremも...</p><p><a href="https://b.hatena.ne.jp/entry/s/parashuto.com/rriver/development/mq-px-em-rem"><img src="https://b.hatena.ne.jp/entry/image/https://parashuto.com/rriver/development/mq-px-em-rem" alt="はてなブックマーク - メディアクエリで「em」を使うと基準になるのは何のサイズ？" title="はてなブックマーク - メディアクエリで「em」を使うと基準になるのは何のサイズ？" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/s/parashuto.com/rriver/development/mq-px-em-rem"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> https://projects.verou.me/bubbly/ ozomatli 2018-04-05T11:03:13Z CSS バルーン 2 <blockquote cite="https://projects.verou.me/bubbly/" title="Bubbly — CSS speech bubbles made easy"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fprojects.verou.me%2Fbubbly%2F" alt="" /> <a href="https://projects.verou.me/bubbly/">Bubbly — CSS speech bubbles made easy</a></cite><p><a href="https://projects.verou.me/bubbly/"><img src="" alt="Bubbly — CSS speech bubbles made easy" title="Bubbly — CSS speech bubbles made easy" class="entry-image" /></a></p><p>CSS speech bubbles made easy! Side Top Right Bottom Left Pointer triangle Symmetrical Right Left Pointer size Use ems Background color</p><p><a href="https://b.hatena.ne.jp/entry/s/projects.verou.me/bubbly/"><img src="https://b.hatena.ne.jp/entry/image/https://projects.verou.me/bubbly/" alt="はてなブックマーク - Bubbly — CSS speech bubbles made easy" title="はてなブックマーク - Bubbly — CSS speech bubbles made easy" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/s/projects.verou.me/bubbly/"><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/how-to-work-display-contents.html ozomatli 2018-04-04T11:43:52Z CSS Webデザイン 353 <blockquote cite="https://coliss.com/articles/build-websites/operation/work/how-to-work-display-contents.html" title="[CSS]「display: contents;」がすごい便利！ラッパーを使った実装が大きく変わるこれからのテクニック"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fcoliss.com%2Farticles%2Fbuild-websites%2Foperation%2Fwork%2Fhow-to-work-display-contents.html" alt="" /> <a href="https://coliss.com/articles/build-websites/operation/work/how-to-work-display-contents.html">[CSS]「display: contents;」がすごい便利！ラッパーを使った実装が大きく変わるこれからのテクニック</a></cite><p><a href="https://coliss.com/articles/build-websites/operation/work/how-to-work-display-contents.html"><img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/9fe20db35ea2d0baffa1a01827aa62f15eb8fe62/backend=imagemagick;height=90;version=1;width=120/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201802%2F2018040106.png" alt="[CSS]「display: contents;」がすごい便利！ラッパーを使った実装が大きく変わるこれからのテクニック" title="[CSS]「display: contents;」がすごい便利！ラッパーを使った実装が大きく変わるこれからのテクニック" class="entry-image" /></a></p><p>例えばカードで、見出しが1行・3行、本文の量が多かったり少なかったりする場合、それぞれの高さを揃えるのは非常に難しく、かなりトリッキーな実装が必要でした。もしくは、JavaScriptを使用しなくてはできなかった実装です。 こういったレイアウトをセマンティックなHTMLで実装できるようになるdisplay: contents;の基...</p><p><a href="https://b.hatena.ne.jp/entry/s/coliss.com/articles/build-websites/operation/work/how-to-work-display-contents.html"><img src="https://b.hatena.ne.jp/entry/image/https://coliss.com/articles/build-websites/operation/work/how-to-work-display-contents.html" alt="はてなブックマーク - [CSS]「display: contents;」がすごい便利！ラッパーを使った実装が大きく変わるこれからのテクニック" title="はてなブックマーク - [CSS]「display: contents;」がすごい便利！ラッパーを使った実装が大きく変わるこれからのテクニック" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/s/coliss.com/articles/build-websites/operation/work/how-to-work-display-contents.html"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> https://qiita.com/102Design/items/d61a2c4512eaf331df66 ozomatli 2018-04-01T07:43:12Z CSS 74 <blockquote cite="https://qiita.com/102Design/items/d61a2c4512eaf331df66" title="【それでもCSSは破綻する】 CSSの設計手法と書き方を考える - Qiita"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fqiita.com%2F102Design%2Fitems%2Fd61a2c4512eaf331df66" alt="" /> <a href="https://qiita.com/102Design/items/d61a2c4512eaf331df66">【それでもCSSは破綻する】 CSSの設計手法と書き方を考える - Qiita</a></cite><p><a href="https://qiita.com/102Design/items/d61a2c4512eaf331df66"><img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/3204222ed677086f81d4ed191f1e19de84379a93/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%253DaHR0cHM6Ly9xaWl0YS11c2VyLXByb2ZpbGUtaW1hZ2VzLmltZ2l4Lm5ldC9odHRwcyUzQSUyRiUyRnFpaXRhLWltYWdlLXN0b3JlLnMzLmFtYXpvbmF3cy5jb20lMkYwJTJGNDc4NDQlMkZwcm9maWxlLWltYWdlcyUyRjE1MzU4OTA2MjY_aXhsaWI9cmItNC4xLjEmYXI9MSUzQTEmZml0PWNyb3AmbWFzaz1lbGxpcHNlJmJnPUZGRkZGRiZmbT1wbmczMiZzPTBjZGUzMzRiMzNiZGJiM2M0NzM5ZmJkNjhiMWRiYjRh%2526blend-x%253D120%2526blend-y%253D467%2526blend-w%253D82%2526blend-h%253D82%2526blend-mode%253Dnormal%2526s%253Df22f249b1fda0b729de40b69ccf7b2ec%3Fixlib%3Drb-4.1.1%26w%3D1200%26fm%3Djpg%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjEuMSZ3PTk2MCZoPTMyNCZ0eHQ9JUUzJTgwJTkwJUUzJTgxJTlEJUUzJTgyJThDJUUzJTgxJUE3JUUzJTgyJTgyQ1NTJUUzJTgxJUFGJUU3JUEwJUI0JUU3JUI2JUJCJUUzJTgxJTk5JUUzJTgyJThCJUUzJTgwJTkxJTIwQ1NTJUUzJTgxJUFFJUU4JUE4JUFEJUU4JUE4JTg4JUU2JTg5JThCJUU2JUIzJTk1JUUzJTgxJUE4JUU2JTlCJUI4JUUzJTgxJThEJUU2JTk2JUI5JUUzJTgyJTkyJUU4JTgwJTgzJUUzJTgxJTg4JUUzJTgyJThCJnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnR4dC1jb2xvcj0lMjMxRTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9NTYmdHh0LXBhZD0wJnM9MzNjOTkzOWViYjcwNjViNGQzMjg5NWNlNDNkMDQzM2E%26mark-x%3D120%26mark-y%3D112%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjEuMSZ3PTgzOCZoPTU4JnR4dD0lNDAxMDJEZXNpZ24mdHh0LWNvbG9yPSUyMzFFMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT0zNiZ0eHQtcGFkPTAmcz04N2E3ZjNiNjM1MTY4MjNkZjIwMDM3MzI3YTY2MWFkNw%26blend-x%3D242%26blend-y%3D480%26blend-w%3D838%26blend-h%3D46%26blend-fit%3Dcrop%26blend-crop%3Dleft%252Cbottom%26blend-mode%3Dnormal%26s%3D54fd6950ee6cdb5e548a71b1a7b3074c" alt="【それでもCSSは破綻する】 CSSの設計手法と書き方を考える - Qiita" title="【それでもCSSは破綻する】 CSSの設計手法と書き方を考える - 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/102Design/items/d61a2c4512eaf331df66"><img src="https://b.hatena.ne.jp/entry/image/https://qiita.com/102Design/items/d61a2c4512eaf331df66" alt="はてなブックマーク - 【それでもCSSは破綻する】 CSSの設計手法と書き方を考える - Qiita" title="はてなブックマーク - 【それでもCSSは破綻する】 CSSの設計手法と書き方を考える - Qiita" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/s/qiita.com/102Design/items/d61a2c4512eaf331df66"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> https://qiita.com/Keita_I/items/72f302b6470a2ccdd9f4 ozomatli 2018-03-16T09:10:50Z CSS 19 <blockquote cite="https://qiita.com/Keita_I/items/72f302b6470a2ccdd9f4" title="CSSアニメーションで円形プログレスバーを作る方法 - Qiita"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fqiita.com%2FKeita_I%2Fitems%2F72f302b6470a2ccdd9f4" alt="" /> <a href="https://qiita.com/Keita_I/items/72f302b6470a2ccdd9f4">CSSアニメーションで円形プログレスバーを作る方法 - Qiita</a></cite><p><a href="https://qiita.com/Keita_I/items/72f302b6470a2ccdd9f4"><img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/be1096af981340e552ccc0f419432f7d49b95083/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%253DaHR0cHM6Ly9xaWl0YS11c2VyLXByb2ZpbGUtaW1hZ2VzLmltZ2l4Lm5ldC9odHRwcyUzQSUyRiUyRnFpaXRhLWltYWdlLXN0b3JlLnMzLmFtYXpvbmF3cy5jb20lMkYwJTJGMjIzMDM2JTJGcHJvZmlsZS1pbWFnZXMlMkYxNTIxMDA5OTk4P2l4bGliPXJiLTQuMC4wJmFyPTElM0ExJmZpdD1jcm9wJm1hc2s9ZWxsaXBzZSZiZz1GRkZGRkYmZm09cG5nMzImcz00MzBkZTc0MDQ3MDM1YWNhM2ZhNGNhNTlmZDY5MmEwNg%2526blend-x%253D120%2526blend-y%253D467%2526blend-w%253D82%2526blend-h%253D82%2526blend-mode%253Dnormal%2526s%253D0053ebfeebfc8790c52641b32b43d244%3Fixlib%3Drb-4.0.0%26w%3D1200%26fm%3Djpg%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk2MCZoPTMyNCZ0eHQ9Q1NTJUUzJTgyJUEyJUUzJTgzJThCJUUzJTgzJUExJUUzJTgzJUJDJUUzJTgyJUI3JUUzJTgzJUE3JUUzJTgzJUIzJUUzJTgxJUE3JUU1JTg2JTg2JUU1JUJEJUEyJUUzJTgzJTk3JUUzJTgzJUFEJUUzJTgyJUIwJUUzJTgzJUFDJUUzJTgyJUI5JUUzJTgzJTkwJUUzJTgzJUJDJUUzJTgyJTkyJUU0JUJEJTlDJUUzJTgyJThCJUU2JTk2JUI5JUU2JUIzJTk1JnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnR4dC1jb2xvcj0lMjMxRTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9NTYmdHh0LXBhZD0wJnM9YjA0MDhjYmMwY2M4N2Y1ZjUwY2E5MmRhOTBjMDdjMmI%26mark-x%3D120%26mark-y%3D112%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTgzOCZoPTU4JnR4dD0lNDBLZWl0YV9JJnR4dC1jb2xvcj0lMjMxRTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9MzYmdHh0LXBhZD0wJnM9N2JjMThkMDU4YmNlYzhjZGFlYjYxNzYyZDBkNWQyYmE%26blend-x%3D242%26blend-y%3D480%26blend-w%3D838%26blend-h%3D46%26blend-fit%3Dcrop%26blend-crop%3Dleft%252Cbottom%26blend-mode%3Dnormal%26s%3De2e98debe1dd538d9f00712be262ea61" alt="CSSアニメーションで円形プログレスバーを作る方法 - Qiita" title="CSSアニメーションで円形プログレスバーを作る方法 - Qiita" class="entry-image" /></a></p><p>.circle { position: relative; width: 120px; height: 120px; background: #333; border-radius: 50%; text-align: center; overflow: hidden; z-index: 1; } .circle::before { content: &quot;&quot;; display: block; position: absolute; top: 0; left: -60px; width: 120px; height: 120px; background: #999; transform-ori...</p><p><a href="https://b.hatena.ne.jp/entry/s/qiita.com/Keita_I/items/72f302b6470a2ccdd9f4"><img src="https://b.hatena.ne.jp/entry/image/https://qiita.com/Keita_I/items/72f302b6470a2ccdd9f4" alt="はてなブックマーク - CSSアニメーションで円形プログレスバーを作る方法 - Qiita" title="はてなブックマーク - CSSアニメーションで円形プログレスバーを作る方法 - Qiita" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/s/qiita.com/Keita_I/items/72f302b6470a2ccdd9f4"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> https://css-tricks.com/using-devtools-tweak-designs-browser/ ozomatli 2018-02-08T09:02:14Z CSS chrome 10 <blockquote cite="https://css-tricks.com/using-devtools-tweak-designs-browser/" title="Using DevTools to Tweak Designs in the Browser | CSS-Tricks"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fcss-tricks.com%2Fusing-devtools-tweak-designs-browser%2F" alt="" /> <a href="https://css-tricks.com/using-devtools-tweak-designs-browser/">Using DevTools to Tweak Designs in the Browser | CSS-Tricks</a></cite><p><a href="https://css-tricks.com/using-devtools-tweak-designs-browser/"><img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/ba5c514612cc3291296453351feeb42f53988809/backend=imagemagick;height=90;version=1;width=120/https%3A%2F%2Fi0.wp.com%2Fcss-tricks.com%2Fwp-content%2Fuploads%2F2017%2F03%2Ffirefox-screenshot.jpg" alt="Using DevTools to Tweak Designs in the Browser | CSS-Tricks" title="Using DevTools to Tweak Designs in the Browser | CSS-Tricks" class="entry-image" /></a></p><p>Let’s look at some ways we can use the browsers DevTools to do design work. There are a few somewhat hidden tricks you mind find handy! Toggling Classes With Checkboxes This is useful when trying to pick a design from different options or to toggle the active state of an element without adding th...</p><p><a href="https://b.hatena.ne.jp/entry/s/css-tricks.com/using-devtools-tweak-designs-browser/"><img src="https://b.hatena.ne.jp/entry/image/https://css-tricks.com/using-devtools-tweak-designs-browser/" alt="はてなブックマーク - Using DevTools to Tweak Designs in the Browser | CSS-Tricks" title="はてなブックマーク - Using DevTools to Tweak Designs in the Browser | CSS-Tricks" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/s/css-tricks.com/using-devtools-tweak-designs-browser/"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> https://w3g.jp/blog/confusing_word-break_word-wrap ozomatli 2018-02-02T09:16:04Z CSS 157 <blockquote cite="https://w3g.jp/blog/confusing_word-break_word-wrap" title="word-breakとword-wrapはややこしい"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fw3g.jp%2Fblog%2Fconfusing_word-break_word-wrap" alt="" /> <a href="https://w3g.jp/blog/confusing_word-break_word-wrap">word-breakとword-wrapはややこしい</a></cite><p><a href="https://w3g.jp/blog/confusing_word-break_word-wrap"><img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/a234f376021e1042412e1f23a4e9fdac44070bb3/backend=imagemagick;height=90;version=1;width=120/https%3A%2F%2Fweb.w3g.jp%2Fogp.png" alt="word-breakとword-wrapはややこしい" title="word-breakとword-wrapはややこしい" class="entry-image" /></a></p><p>Updated 2015.01.13 / Published 2015.01.13 word-break:break-all;は一切の禁則処理を解除し、どの文字の間でも改行するため、単語の途中や括弧の直前・直後で折り返したり、句読点が行頭にきてしまうことなどがあることから折り返しの制御には好ましくないとされています。望ましい折り返しの制御をしてくれるword-wra...</p><p><a href="https://b.hatena.ne.jp/entry/s/w3g.jp/blog/confusing_word-break_word-wrap"><img src="https://b.hatena.ne.jp/entry/image/https://w3g.jp/blog/confusing_word-break_word-wrap" alt="はてなブックマーク - word-breakとword-wrapはややこしい" title="はてなブックマーク - word-breakとword-wrapはややこしい" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/s/w3g.jp/blog/confusing_word-break_word-wrap"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> https://coliss.com/articles/build-websites/operation/css/css3-flexbox-properties-by-scotch.html ozomatli 2018-01-31T06:33:16Z CSS Flex 610 <blockquote cite="https://coliss.com/articles/build-websites/operation/css/css3-flexbox-properties-by-scotch.html" title="CSS3 Flexbox の各プロパティの使い方をヴィジュアルで詳しく解説 | コリス"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fcoliss.com%2Farticles%2Fbuild-websites%2Foperation%2Fcss%2Fcss3-flexbox-properties-by-scotch.html" alt="" /> <a href="https://coliss.com/articles/build-websites/operation/css/css3-flexbox-properties-by-scotch.html">CSS3 Flexbox の各プロパティの使い方をヴィジュアルで詳しく解説 | コリス</a></cite><p><a href="https://coliss.com/articles/build-websites/operation/css/css3-flexbox-properties-by-scotch.html"><img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/3dcfaac9eccb4d11adee7e741f74f7efab6478df/backend=imagemagick;height=90;version=1;width=120/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-202301%2F2023022501%402x.png" alt="CSS3 Flexbox の各プロパティの使い方をヴィジュアルで詳しく解説 | コリス" title="CSS3 Flexbox の各プロパティの使い方をヴィジュアルで詳しく解説 | コリス" class="entry-image" /></a></p><p>CSS Flexboxとは水平または垂直に要素を配置し、柔軟なレイアウトを実現できるCSSのレイアウトモジュールです。複雑なレイアウトでも今までより少ないコードで、よりシンプルなプロセスで実装することができます。 CSS Flexboxの基礎知識、Flexboxの各プロパティがどのように機能するのか、Flexboxでどのようにレイアウ...</p><p><a href="https://b.hatena.ne.jp/entry/s/coliss.com/articles/build-websites/operation/css/css3-flexbox-properties-by-scotch.html"><img src="https://b.hatena.ne.jp/entry/image/https://coliss.com/articles/build-websites/operation/css/css3-flexbox-properties-by-scotch.html" alt="はてなブックマーク - CSS3 Flexbox の各プロパティの使い方をヴィジュアルで詳しく解説 | コリス" title="はてなブックマーク - CSS3 Flexbox の各プロパティの使い方をヴィジュアルで詳しく解説 | コリス" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/s/coliss.com/articles/build-websites/operation/css/css3-flexbox-properties-by-scotch.html"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> https://saruwakakun.com/html-css/reference/css-sample ozomatli 2018-01-31T05:33:45Z CSS 147 <blockquote cite="https://saruwakakun.com/html-css/reference/css-sample" title="コピペで使えるCSSデザインサンプル集（Web用コード250個以上まとめ）"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fsaruwakakun.com%2Fhtml-css%2Freference%2Fcss-sample" alt="" /> <a href="https://saruwakakun.com/html-css/reference/css-sample">コピペで使えるCSSデザインサンプル集（Web用コード250個以上まとめ）</a></cite><p><a href="https://saruwakakun.com/html-css/reference/css-sample"><img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/614583b9cabb03b14c6b559846163e763334018c/backend=imagemagick;height=90;version=1;width=120/https%3A%2F%2Fsaruwakakun.com%2Fwp-content%2Fuploads%2F2017%2F05%2Fdadadada-01.png" alt="コピペで使えるCSSデザインサンプル集（Web用コード250個以上まとめ）" title="コピペで使えるCSSデザインサンプル集（Web用コード250個以上まとめ）" class="entry-image" /></a></p><p>サルワカでは「見出し」や「ボタン」などWebサイトのパーツごとに様々なデザインサンプルを作成しています。どれもHTMLとCSSのコピペだけで使えるものです（いわゆる「スニペット」というものですね）。 サンプルの数がかなり増えてきたので、このページでまとめておこうと思います。ブログのデザインカスタマイズの際に...</p><p><a href="https://b.hatena.ne.jp/entry/s/saruwakakun.com/html-css/reference/css-sample"><img src="https://b.hatena.ne.jp/entry/image/https://saruwakakun.com/html-css/reference/css-sample" alt="はてなブックマーク - コピペで使えるCSSデザインサンプル集（Web用コード250個以上まとめ）" title="はてなブックマーク - コピペで使えるCSSデザインサンプル集（Web用コード250個以上まとめ）" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/s/saruwakakun.com/html-css/reference/css-sample"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> https://saruwakakun.com/html-css/basic/before-after わかりやすい ozomatli 2018-01-31T05:24:43Z CSS 43 <blockquote cite="https://saruwakakun.com/html-css/basic/before-after" title="CSSの疑似要素とは？beforeとafterの使い方まとめ"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fsaruwakakun.com%2Fhtml-css%2Fbasic%2Fbefore-after" alt="" /> <a href="https://saruwakakun.com/html-css/basic/before-after">CSSの疑似要素とは？beforeとafterの使い方まとめ</a></cite><p><a href="https://saruwakakun.com/html-css/basic/before-after"><img src="" alt="CSSの疑似要素とは？beforeとafterの使い方まとめ" title="CSSの疑似要素とは？beforeとafterの使い方まとめ" class="entry-image" /></a></p><p>今回はCSSの超便利な疑似要素「after」と「before」の使い方をまとめます。初心者の方でも分かるように丁寧に解説していきます。</p><p><a href="https://b.hatena.ne.jp/entry/s/saruwakakun.com/html-css/basic/before-after"><img src="https://b.hatena.ne.jp/entry/image/https://saruwakakun.com/html-css/basic/before-after" alt="はてなブックマーク - CSSの疑似要素とは？beforeとafterの使い方まとめ" title="はてなブックマーク - CSSの疑似要素とは？beforeとafterの使い方まとめ" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/s/saruwakakun.com/html-css/basic/before-after"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> https://www.tam-tam.co.jp/tipsnote/html_css/post14400.html ozomatli 2018-01-23T09:36:09Z SVG CSS 239 <blockquote cite="https://www.tam-tam.co.jp/tipsnote/html_css/post14400.html" title="SVGでリアルな湯気を作ってみる ｜ Tips Note by TAM"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fwww.tam-tam.co.jp%2Ftipsnote%2Fhtml_css%2Fpost14400.html" alt="" /> <a href="https://www.tam-tam.co.jp/tipsnote/html_css/post14400.html">SVGでリアルな湯気を作ってみる ｜ Tips Note by TAM</a></cite><p><a href="https://www.tam-tam.co.jp/tipsnote/html_css/post14400.html"><img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/80969196f387f3979617ccdf1a06238b65841165/backend=imagemagick;height=90;version=1;width=120/https%3A%2F%2Fwww.tam-tam.co.jp%2Ftipsnote%2Fwpdata%2Fwp-content%2Fuploads%2F2018%2F01%2Feyecatch-1024x538.jpg" alt="SVGでリアルな湯気を作ってみる ｜ Tips Note by TAM" title="SVGでリアルな湯気を作ってみる ｜ Tips Note by TAM" class="entry-image" /></a></p><p>もう7年ほど前になりますがFlashでサイト製作をしていた時代に、表現に悩まされるものがありました。 それが『湯気』です。 イラストを使った可愛い表現なら問題ないですが、リアルな感じを作ろうと思うとこれがなかなか難しい。最近では動画やアニメGIFなどで代用されていたりすることも多いと思いますが、今回はそんな...</p><p><a href="https://b.hatena.ne.jp/entry/s/www.tam-tam.co.jp/tipsnote/html_css/post14400.html"><img src="https://b.hatena.ne.jp/entry/image/https://www.tam-tam.co.jp/tipsnote/html_css/post14400.html" alt="はてなブックマーク - SVGでリアルな湯気を作ってみる ｜ Tips Note by TAM" title="はてなブックマーク - SVGでリアルな湯気を作ってみる ｜ Tips Note by TAM" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/s/www.tam-tam.co.jp/tipsnote/html_css/post14400.html"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote>