https://b.hatena.ne.jp/u310/css/ cssに関するu310のはてなブックマーク (7) https://ics.media/entry/221208/ u310 2022-12-21T13:28:53Z css ux 338 <blockquote cite="https://ics.media/entry/221208/" title="リンク/ボタン/フォームをより良くするHTML・CSS 17選 - ICS MEDIA"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fics.media%2Fentry%2F221208%2F" alt="" /> <a href="https://ics.media/entry/221208/">リンク/ボタン/フォームをより良くするHTML・CSS 17選 - ICS MEDIA</a></cite><p><a href="https://ics.media/entry/221208/"><img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/6a4bc7667668d8766c1f0adda04149de22f02e9d/backend=imagemagick;height=90;version=1;width=120/https%3A%2F%2Fics.media%2Fentry%2F221208%2Fimages%2Feyecatch.png" alt="リンク/ボタン/フォームをより良くするHTML・CSS 17選 - ICS MEDIA" title="リンク/ボタン/フォームをより良くするHTML・CSS 17選 - ICS MEDIA" class="entry-image" /></a></p><p>ウェブサイト制作において見た目がきちんと実装されているのは大事なことですが、コードのちょっとした違いでユーザーの不便につながることもあります。本記事では見た目だけでなくユーザーの使い勝手にも気をつけたコーディングテクニックについて解説してます。今回はユーザーが特に使い心地を感じやすいインタラクシ...</p><p><a href="https://b.hatena.ne.jp/entry/s/ics.media/entry/221208/"><img src="https://b.hatena.ne.jp/entry/image/https://ics.media/entry/221208/" alt="はてなブックマーク - リンク/ボタン/フォームをより良くするHTML・CSS 17選 - ICS MEDIA" title="はてなブックマーク - リンク/ボタン/フォームをより良くするHTML・CSS 17選 - ICS MEDIA" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/s/ics.media/entry/221208/"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> https://zenn.dev/tonkotsuboy_com/articles/svh-dvh-lvh-for-all-browser u310 2022-12-04T09:09:48Z css 180 <blockquote cite="https://zenn.dev/tonkotsuboy_com/articles/svh-dvh-lvh-for-all-browser" title="CSSのsvh・dvhが全ブラウザ対応。iOS・Androidの画面いっぱいに要素を広げる最適解"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fzenn.dev%2Ftonkotsuboy_com%2Farticles%2Fsvh-dvh-lvh-for-all-browser" alt="" /> <a href="https://zenn.dev/tonkotsuboy_com/articles/svh-dvh-lvh-for-all-browser">CSSのsvh・dvhが全ブラウザ対応。iOS・Androidの画面いっぱいに要素を広げる最適解</a></cite><p><a href="https://zenn.dev/tonkotsuboy_com/articles/svh-dvh-lvh-for-all-browser"><img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/8a6b41e4a636b6324aef7cc661a2c6a62aeddb8e/backend=imagemagick;height=90;version=1;width=120/https%3A%2F%2Fres.cloudinary.com%2Fzenn%2Fimage%2Fupload%2Fs--_GDfjxKv--%2Fc_fit%252Cg_north_west%252Cl_text%3Anotosansjp-medium.otf_55%3ACSS%2525E3%252581%2525AEsvh%2525E3%252583%2525BBdvh%2525E3%252581%25258C%2525E5%252585%2525A8%2525E3%252583%252596%2525E3%252583%2525A9%2525E3%252582%2525A6%2525E3%252582%2525B6%2525E5%2525AF%2525BE%2525E5%2525BF%25259C%2525E3%252580%252582iOS%2525E3%252583%2525BBAndroid%2525E3%252581%2525AE%2525E7%252594%2525BB%2525E9%25259D%2525A2%2525E3%252581%252584%2525E3%252581%2525A3%2525E3%252581%2525B1%2525E3%252581%252584%2525E3%252581%2525AB%2525E8%2525A6%252581%2525E7%2525B4%2525A0%2525E3%252582%252592%2525E5%2525BA%252583%2525E3%252581%252592%2525E3%252582%25258B%2525E6%25259C%252580%2525E9%252581%2525A9%2525E8%2525A7%2525A3%252Cw_1010%252Cx_90%252Cy_100%2Fg_south_west%252Cl_text%3Anotosansjp-medium.otf_37%3A%2525E9%2525B9%2525BF%2525E9%252587%25258E%252520%2525E5%2525A3%2525AE%252Cx_203%252Cy_121%2Fg_south_west%252Ch_90%252Cl_fetch%3AaHR0cHM6Ly9saDMuZ29vZ2xldXNlcmNvbnRlbnQuY29tL2EtL0FPaDE0R2hwRUMxbUtjVjZsX01lT2R6N1Nsejk1SXR4WUZoYjB2LTNOdzNjV3c9czI1MC1j%252Cr_max%252Cw_90%252Cx_87%252Cy_95%2Fv1627283836%2Fdefault%2Fog-base-w1200-v2.png%3F_a%3DBACAGSGT" alt="CSSのsvh・dvhが全ブラウザ対応。iOS・Androidの画面いっぱいに要素を広げる最適解" title="CSSのsvh・dvhが全ブラウザ対応。iOS・Androidの画面いっぱいに要素を広げる最適解" class="entry-image" /></a></p><p>iOS SafariやAndroid Chromeの画面の高さいっぱいにヒーローイメージを表示するという表現は、よく見かけます。 高さをいっぱいに広げるのに100vhを使うと、不要なスクロールが発生し、意図通りに表示されません。 この問題を解決するために、特殊なCSSを使ったりJSを使ったりと、開発の現場では多くの苦労がありました...</p><p><a href="https://b.hatena.ne.jp/entry/s/zenn.dev/tonkotsuboy_com/articles/svh-dvh-lvh-for-all-browser"><img src="https://b.hatena.ne.jp/entry/image/https://zenn.dev/tonkotsuboy_com/articles/svh-dvh-lvh-for-all-browser" alt="はてなブックマーク - CSSのsvh・dvhが全ブラウザ対応。iOS・Androidの画面いっぱいに要素を広げる最適解" title="はてなブックマーク - CSSのsvh・dvhが全ブラウザ対応。iOS・Androidの画面いっぱいに要素を広げる最適解" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/s/zenn.dev/tonkotsuboy_com/articles/svh-dvh-lvh-for-all-browser"><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/ui-components-based-on-tailwind-css-preline.html u310 2022-06-16T10:32:18Z Tailwind css 188 <blockquote cite="https://coliss.com/articles/build-websites/operation/css/ui-components-based-on-tailwind-css-preline.html" title="Tailwind CSSの入門に！ コピペで簡単に実装できるUIコンポーネントとページレイアウトのまとめ -Preline UI"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fcoliss.com%2Farticles%2Fbuild-websites%2Foperation%2Fcss%2Fui-components-based-on-tailwind-css-preline.html" alt="" /> <a href="https://coliss.com/articles/build-websites/operation/css/ui-components-based-on-tailwind-css-preline.html">Tailwind CSSの入門に！ コピペで簡単に実装できるUIコンポーネントとページレイアウトのまとめ -Preline UI</a></cite><p><a href="https://coliss.com/articles/build-websites/operation/css/ui-components-based-on-tailwind-css-preline.html"><img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/2ccfc6316cb80a839ddc0f61746fc4374a3391ab/backend=imagemagick;height=90;version=1;width=120/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-202202%2F2022061601%402x.png" alt="Tailwind CSSの入門に！ コピペで簡単に実装できるUIコンポーネントとページレイアウトのまとめ -Preline UI" title="Tailwind CSSの入門に！ コピペで簡単に実装できるUIコンポーネントとページレイアウトのまとめ -Preline UI" class="entry-image" /></a></p><p>Webサイトでよく使用されるさまざまなUIコンポーネントとページレイアウトをTailwind CSSで実装したコンポーネント集を紹介します。 Tailwind CSSをこれから始めるという人にも簡単で、デフォルト構成のまま機能し、各UIコンポーネントとページレイアウトはHTMLをコピペするだけで簡単に実装できます。 Preline UI Preli...</p><p><a href="https://b.hatena.ne.jp/entry/s/coliss.com/articles/build-websites/operation/css/ui-components-based-on-tailwind-css-preline.html"><img src="https://b.hatena.ne.jp/entry/image/https://coliss.com/articles/build-websites/operation/css/ui-components-based-on-tailwind-css-preline.html" alt="はてなブックマーク - Tailwind CSSの入門に！ コピペで簡単に実装できるUIコンポーネントとページレイアウトのまとめ -Preline UI" title="はてなブックマーク - Tailwind CSSの入門に！ コピペで簡単に実装できるUIコンポーネントとページレイアウトのまとめ -Preline UI" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/s/coliss.com/articles/build-websites/operation/css/ui-components-based-on-tailwind-css-preline.html"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> https://zenn.dev/ixkaito/articles/advanced-tailwindcss u310 2022-05-23T14:27:46Z Tailwind css 103 <blockquote cite="https://zenn.dev/ixkaito/articles/advanced-tailwindcss" title="Tailwind CSS の一歩進んだ書き方"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fzenn.dev%2Fixkaito%2Farticles%2Fadvanced-tailwindcss" alt="" /> <a href="https://zenn.dev/ixkaito/articles/advanced-tailwindcss">Tailwind CSS の一歩進んだ書き方</a></cite><p><a href="https://zenn.dev/ixkaito/articles/advanced-tailwindcss"><img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/195b160655c785a93836ee3515f0347b42f0ce13/backend=imagemagick;height=90;version=1;width=120/https%3A%2F%2Fres.cloudinary.com%2Fzenn%2Fimage%2Fupload%2Fs--ftVz5pzQ--%2Fc_fit%252Cg_north_west%252Cl_text%3Anotosansjp-medium.otf_55%3ATailwind%252520CSS%252520%2525E3%252581%2525AE%2525E4%2525B8%252580%2525E6%2525AD%2525A9%2525E9%252580%2525B2%2525E3%252582%252593%2525E3%252581%2525A0%2525E6%25259B%2525B8%2525E3%252581%25258D%2525E6%252596%2525B9%252Cw_1010%252Cx_90%252Cy_100%2Fg_south_west%252Cl_text%3Anotosansjp-medium.otf_37%3AKite%252Cx_203%252Cy_121%2Fg_south_west%252Ch_90%252Cl_fetch%3AaHR0cHM6Ly9saDMuZ29vZ2xldXNlcmNvbnRlbnQuY29tL2EtL0FPaDE0R2dVd0RFM2dGcXRNYjJpUmRMLWxEaHNwdjgzaVBjSG9ZZEpRX0hKWlE9czI1MC1j%252Cr_max%252Cw_90%252Cx_87%252Cy_95%2Fv1627283836%2Fdefault%2Fog-base-w1200-v2.png%3F_a%3DBACAGSGT" alt="Tailwind CSS の一歩進んだ書き方" title="Tailwind CSS の一歩進んだ書き方" class="entry-image" /></a></p><p>-## Just-in-Time 改め arbitrary values +## Just-in-Time 改め arbitrary values (任意の値) -上記例にある `text-3xl` などのスタイルは予め Tailwind CSS が用意しているものですが、`tailwind.config.js` を編集することで簡単に変更・追加できます。ただし、1 回しか使わないスタイルでもいちいち `tailwind.confi...</p><p><a href="https://b.hatena.ne.jp/entry/s/zenn.dev/ixkaito/articles/advanced-tailwindcss"><img src="https://b.hatena.ne.jp/entry/image/https://zenn.dev/ixkaito/articles/advanced-tailwindcss" alt="はてなブックマーク - Tailwind CSS の一歩進んだ書き方" title="はてなブックマーク - Tailwind CSS の一歩進んだ書き方" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/s/zenn.dev/ixkaito/articles/advanced-tailwindcss"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> https://zenn.dev/ikenohi/articles/596594edebb76f u310 2022-03-09T15:35:08Z react ライブラリ css 67 <blockquote cite="https://zenn.dev/ikenohi/articles/596594edebb76f" title="【React】daisyUIを触ってみた！かなり楽しいw"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fzenn.dev%2Fikenohi%2Farticles%2F596594edebb76f" alt="" /> <a href="https://zenn.dev/ikenohi/articles/596594edebb76f">【React】daisyUIを触ってみた！かなり楽しいw</a></cite><p><a href="https://zenn.dev/ikenohi/articles/596594edebb76f"><img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/ecc7951c69b353209f5e69b91c78d912e75f3316/backend=imagemagick;height=90;version=1;width=120/https%3A%2F%2Fres.cloudinary.com%2Fzenn%2Fimage%2Fupload%2Fs--YW3L-fQF--%2Fc_fit%252Cg_north_west%252Cl_text%3Anotosansjp-medium.otf_55%3A%2525E3%252580%252590React%2525E3%252580%252591daisyUI%2525E3%252582%252592%2525E8%2525A7%2525A6%2525E3%252581%2525A3%2525E3%252581%2525A6%2525E3%252581%2525BF%2525E3%252581%25259F%2525EF%2525BC%252581%2525E3%252581%25258B%2525E3%252581%2525AA%2525E3%252582%25258A%2525E6%2525A5%2525BD%2525E3%252581%252597%2525E3%252581%252584w%252Cw_1010%252Cx_90%252Cy_100%2Fg_south_west%252Cl_text%3Anotosansjp-medium.otf_37%3Ahajimism%252Cx_203%252Cy_121%2Fg_south_west%252Ch_90%252Cl_fetch%3AaHR0cHM6Ly9zdG9yYWdlLmdvb2dsZWFwaXMuY29tL3plbm4tdXNlci11cGxvYWQvYXZhdGFyLzliNjQyOTZhM2EuanBlZw%3D%3D%252Cr_max%252Cw_90%252Cx_87%252Cy_95%2Fv1627283836%2Fdefault%2Fog-base-w1200-v2.png%3F_a%3DBACAGSGT" alt="【React】daisyUIを触ってみた！かなり楽しいw" title="【React】daisyUIを触ってみた！かなり楽しいw" class="entry-image" /></a></p><p>daisyUIとは The most popular, free and open-source Tailwind CSS component library Tailwind CSSをベースとしたCSSライブラリで、No JavaScriptでかわいくて機能的な見た目を実現できるスグレモノ。 Bootstrapのような使い勝手でいろんなコンポーネントを実現できる。実態はTailwind CSSなので拡張も簡単。 今回はこ...</p><p><a href="https://b.hatena.ne.jp/entry/s/zenn.dev/ikenohi/articles/596594edebb76f"><img src="https://b.hatena.ne.jp/entry/image/https://zenn.dev/ikenohi/articles/596594edebb76f" alt="はてなブックマーク - 【React】daisyUIを触ってみた！かなり楽しいw" title="はてなブックマーク - 【React】daisyUIを触ってみた！かなり楽しいw" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/s/zenn.dev/ikenohi/articles/596594edebb76f"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> https://kachibito.net/useful-resource/pollen u310 2021-02-08T04:35:05Z css 18 <blockquote cite="https://kachibito.net/useful-resource/pollen" title="ユーティリティファーストなCSSを設計するためのCSS変数を提供する・「Pollen」 - かちびと.net"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fkachibito.net%2Fuseful-resource%2Fpollen" alt="" /> <a href="https://kachibito.net/useful-resource/pollen">ユーティリティファーストなCSSを設計するためのCSS変数を提供する・「Pollen」 - かちびと.net</a></cite><p><a href="https://kachibito.net/useful-resource/pollen"><img src="" alt="ユーティリティファーストなCSSを設計するためのCSS変数を提供する・「Pollen」 - かちびと.net" title="ユーティリティファーストなCSSを設計するためのCSS変数を提供する・「Pollen」 - かちびと.net" class="entry-image" /></a></p><p>Pollenは一貫したスタイルやユーティリティファーストなCSSを設計するためのCSS変数を提供するスタイルシートです。 中身は全てCSS変数のみで構成されており、既に定義付けられていますので、classを変えることなく既存のCSSにも利用する事が可能です。 ファイルはTypography、Colors、Layout、UIの4つに分けられていま...</p><p><a href="https://b.hatena.ne.jp/entry/s/kachibito.net/useful-resource/pollen"><img src="https://b.hatena.ne.jp/entry/image/https://kachibito.net/useful-resource/pollen" alt="はてなブックマーク - ユーティリティファーストなCSSを設計するためのCSS変数を提供する・「Pollen」 - かちびと.net" title="はてなブックマーク - ユーティリティファーストなCSSを設計するためのCSS変数を提供する・「Pollen」 - かちびと.net" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/s/kachibito.net/useful-resource/pollen"><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/why-tailwind-css-is-not-for-me.html u310 2021-01-29T11:44:01Z css 134 <blockquote cite="https://coliss.com/articles/build-websites/operation/css/why-tailwind-css-is-not-for-me.html" title="Tailwind CSSが私には合わなかった理由"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fcoliss.com%2Farticles%2Fbuild-websites%2Foperation%2Fcss%2Fwhy-tailwind-css-is-not-for-me.html" alt="" /> <a href="https://coliss.com/articles/build-websites/operation/css/why-tailwind-css-is-not-for-me.html">Tailwind CSSが私には合わなかった理由</a></cite><p><a href="https://coliss.com/articles/build-websites/operation/css/why-tailwind-css-is-not-for-me.html"><img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/c7e8e460f91e55ba7ea5bb5af4a9f134385c827d/backend=imagemagick;height=90;version=1;width=120/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-202101%2F2021013001%402x.png" alt="Tailwind CSSが私には合わなかった理由" title="Tailwind CSSが私には合わなかった理由" class="entry-image" /></a></p><p>ここ1,2年で、Tailwind CSSを使用する人が増えてきました。Tailwind CSSはユーティリティファーストのフレームワークで、いくつかのclassを組み合わせることでUIコンポーネントやレイアウトを簡単に実装できます。 Webデベロッパーによる、Tailwind CSSが私には合わなかった理由を紹介します。 Why Tailwind Isn&#39;t for M...</p><p><a href="https://b.hatena.ne.jp/entry/s/coliss.com/articles/build-websites/operation/css/why-tailwind-css-is-not-for-me.html"><img src="https://b.hatena.ne.jp/entry/image/https://coliss.com/articles/build-websites/operation/css/why-tailwind-css-is-not-for-me.html" alt="はてなブックマーク - Tailwind CSSが私には合わなかった理由" title="はてなブックマーク - Tailwind CSSが私には合わなかった理由" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/s/coliss.com/articles/build-websites/operation/css/why-tailwind-css-is-not-for-me.html"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote>