[B! css] yahihiのブックマーク

令和のHTML / CSS / JavaScriptの書き方50選

Web制作の技術は日々進化しており、会社やプロジェクトによっては昨今の環境に適さない書き方をしているケースも時折見受けられます。そこで今回は﹁2024年のWeb制作ではこのようにコードを書いてほしい！﹂という内容をまとめました。質より量で、まずは﹁こんな書き方があるんだ﹂をこの記事で伝えたかったので、コードの詳細はあまり解説していません。なので、具体的な仕様などを確認したい方は参考記事を読んだりご自身で調べていただけると幸いです。 1. HTML 画像周りはサイトパフォーマンスに直結するので、まずはそこだけでも取り入れていただきたいです。また、コアウェブバイタルやアクセシビリティも併せて理解しておきたい内容です。 Lazy loading <img>にloading="lazy"属性を付けると画像が遅延読み込みになり、サイトの読み込み時間が早くなります。

yahihi 2024/05/15

リンク

紙っぽいかわいいWebサイト作りたい - Qiita

かわいいWebサイトが作りたい Web上でグラフィックデザインっぽい表現をしてるサイト大好き！思いついたら追加する「版ズレ」風版ズレ＝印刷の際に、色の版がズレて出力されてしまう現象。（アナログっぽい雰囲気を出すために、あえてズレているように見せるデザイン手法として使ってます）一番上のレイヤーに紙っぽいテクスチャを乗せて乗算かける後ろのテキストはaria-hidden="true"でスクリーンリーダーに読み上げられないようにする（疑似要素でやりたかったけど乗算上手くいかなかった・・） ▼ HTML <div class="hanzure"> <img src="紙っぽいテクスチャ" alt=""> <div class="hanzure01"> <p class="front">版ズレ風の表現</p> <p class="back" aria-hidden="true">版ズ

yahihi 2024/04/28

リンク

Tailwind CSS を使う時に一緒に入れたいライブラリ

Tailwind CSS はすべてをユティリティクラスで書くという特性上、HTML にはクラスがたくさん書かれることになります。1 つの要素に対してクラスがたくさん並んでいると、視覚的にどのようなスタイルが適用されているのかを把握するのが難しくなります。条件によってクラス名を付け替える処理を行っていると更に複雑になります。 <button className={` ${variant === "primary" && "border border-blue-500 bg-blue-500 text-white"} ${ variant === "secondary" && "border border-gray-500 bg-gray-500 text-white" } ${variant === "default" && "border border-gray-500 bg-white

yahihi 2024/02/04

Tailwind
css

リンク

商用利用無料！コピペで簡単に実装できる、Tailwind CSSで実装されたUIコンポーネントが150種類以上！ -Mamba UI

Webサイトやスマホアプリでよく使用されるUIコンポーネントとテンプレートをTailwind CSSベースで実装したコレクションを紹介します。コードはHTMLとVueとJSXに対応しており、Tailwind CSSを用意しておけばコピペで簡単に利用できます。 Mamba UIMamba UI-GitHub Mamba UIの特徴 Mamba UIの使い方 Mamba UIのコンポーネント Mamba UIの特徴 Mamba UIは、Webサイトやスマホアプリによく使用されるUI要素をTailwind CSSベースで実装したオープンソースのコレクションです。すべてのコンポーネント・テンプレートはHTMLとCSSで実装されており、Tailwind CSSのおかげで複雑なCSSルールを記述する必要はありません。 Tailwind CSSはユーティリティファーストのCSSフレームワークなので

yahihi 2024/01/16

css

リンク

指示したUIをAIがTailwindベースで実装してくれるv0が凄い

v0とは v0は自然言語で作りたいUIをAIに指示するとそのUIをTailwind (shadcn/ui)ベースで作ってくれるサービスです。 shadcn/uiとは shadcn/uiはRadix UIというUIをもたないヘッドレスUIに対してスタイルを当てたコンポーネント集で、TailwindというCSSライブラリを使ってRadix UIに対してスタイルを当てています。 shadcn/ui 本体のライブラリがあるわけではなく、自身のプロジェクトにコンポーネントを直接コピーして使うことが特徴です！ Tailwindが好きな人にはたまらないコンポーネント集ですね！ shadcn/uiに最適に作られていますが、Tailwindユーザーであれば作られたUIをほぼそのまま使うことができます。下の画像のようなチャット風のUIが特徴なサービスになっていて、このチャットに指示を出すことでUIを作ってくれ

yahihi 2023/12/04

リンク

【Three.js】DOMを3D表示できるCSS3DRendererを触ってみた! | 東京・新宿のWEB制作会社・ホームページ制作会社 | 有限会社Bit Beans

Warning: Trying to access array offset on value of type null in /home/bitbeanscom/bitbeans.com/public_html/bb_corporate/wp-content/plugins/codepen-embedded-pen-shortcode/codepen.php on line 16 Warning: Trying to access array offset on value of type null in /home/bitbeanscom/bitbeans.com/public_html/bb_corporate/wp-content/plugins/codepen-embedded-pen-shortcode/codepen.php on line 17 Warning: Tryin

yahihi 2023/10/03

リンク

https://tail-animista.vercel.app/play/basic/scale-up/scale-up-center

yahihi 2023/08/15

CSS

リンク

Radix UI

An open source component library optimized for fast development, easy maintenance, and accessibility. Just import and go—no configuration required.

yahihi 2023/08/15

react.js
css

リンク

https://flowbite.com/

yahihi 2023/08/11

リンク

【CSS】まだホバー時のスタイルを :hover だけで指定してるの？

はじめに結論からホバースタイルは、 :hover だけで指定するのではなく、次のように指定しましょう！ @media (hover: hover) { /* リンクの場合 */ a:any-link:hover { } /* ボタンの場合 */ button:enabled:hover { } /* 特定できない場合 */ .button:where(:any-link, :enabled, summary):hover { } } ポイント 1 マウスのときだけホバースタイルを当てる :hover 擬似クラスで指定したスタイルは、タッチデバイスの場合フォーカス状態で適用されてしまいます。つまり、タッチしたあとのスタイルがずっとホバースタイルのままになってしまいます。これは意図と合わないため、マウスで操作しているかどうかを区別してスタイルを当てる必要があります。マウス（正確には、ホ

yahihi 2023/08/08

css

リンク

便利なのが登場！最近見かけるさまざまなUI要素600種類以上をシンプルなHTMLとCSSで簡単に実装できる -UIverse

button { --border-radius: 15px; --border-width: 4px; appearance: none; position: relative; padding: 1em 2em; border: 0; background-color: #212121; font-family: "Roboto", Arial, "Segoe UI", sans-serif; font-size: 18px; font-weight: 500; color: #fff; z-index: 2; } button::after { --m-i: linear-gradient(#000, #000); --m-o: content-box, padding-box; content: ""; position: absolute; left: 0; top: 0; wi

yahihi 2023/01/18

html
css

リンク

デジタル庁公開のデザインをhtml/cssに落とし込んでみた。 - Qiita

はじめにデジタル庁が公開したデザインシステムがよさそうなデザインでしたので、適当に遊ぼうかと思いました。 html/cssで公開してくれればすぐに使いやすいと思ったんですが、どうやらFigmaでしか配っていない。。ということでhtml/cssに落とし込んでみました。注意事項趣味程度に作ったものを、使いたい人がいればどうぞというものです。細かい部分は間違っていることもあるかと思います。(ラジオボタン難しかったので、何とか再現した感じです。) 自分用に目的もなくつくっていましたので、命名等のポリシーもめちゃくちゃです。許してください。大変つかれましたので、厳しいコメントは受け付けません。気が向いたら、もう少しきれいにするかもしれません。ソースコード以下、に載せています。完成概要ページとしてはこんな感じ

yahihi 2022/11/15

リンク

Tailwind UI - Official Tailwind CSS Components & Templates

Build your next idea even faster.Beautifully designed, expertly crafted components and templates, built by the makers of Tailwind CSS. The perfect starting point for your next project.

yahihi 2022/11/05

css
UI

リンク

これなら簡単で便利！ Tailwind CSSのチートシートをすばやく表示できるChromeの機能拡張

簡単にすばやく表示できる、Tailwind CSSのチートシートを紹介します。Chromeの機能拡張で、ツールバーから1クリックでチートシートを表示できます。チートシートは、Tailwind CSS v.3対応。Tailwind CSSの各クラスセレクタとそのプロパティと値が一覧でき、コピペで簡単に利用できます。 Tailwind Cheat Sheet inside Chrome Extension -GitHub Tailwind CSSのチートシートの特徴 Tailwind CSSのチートシートのインストール Tailwind CSSのチートシートの使い方 Tailwind CSSのチートシートの特徴 Tailwind Cheat Sheet inside Chrome Extensionは、Tailwind CSSのセレクタに簡単にアクセスするためのChromeの拡張機能です。

yahihi 2022/08/01

css

リンク

CSSの新しい単位「lvh」「svh」これでiOSのSafariで100vhがビューポートの高さではない仕様に対応できる

Safari 15.4（最新は15.5）で新しいビューポート単位「lvh」「svh」がサポートされました。ビューポートを基準にした単位で、この単位を使用することで、iOSのSafariで100vhがビューポートの高さではないという仕様に対応できます。今まではCSSの-webkit-fill-availableがその対応方法でしたが、ネストされた要素やcalc()内では使用できません。新しいビューポート単位を使用すると、そういった問題もなくなります。 The Large, Small, and Dynamic Viewports by Bramus 2021年の記事ですが、Safari 15.4でこれらの新しいビューポート単位がサポートされたので、このタイミングで紹介します。下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。はじ

yahihi 2022/05/26

css

リンク

これは覚えておきたい！コンテナ・ラッパーを定義するCSSの古い書き方とモダンCSSを使用した書き方

モダンCSSは今までJavaScriptが必要だったことやできなかったことを可能にしてきましたが、今までの記述をよりシンプルにすることもできます。コンテナ・ラッパーを定義する際に記述するCSSの古い書き方とモダンCSSを使用した書き方を紹介します。 CSSの古い書き方モダンCSSを使用した書き方 CSSの古い書き方まずは、CSSの古い書き方。ぱっと見で、何が設定されているのか分かるのがよいところです。コンテナの幅を100%にし、最大幅をmax-widthで設定し、paddingが上下左右に2remあって、margin: 0 auto;で中央に配置します。

yahihi 2022/03/15

css

リンク

サンプル付コピペOK！すごいCSSアニメーションライブラリ30選【2022年版】

ウェブサイトの印象を大きく左右する「動き」。現役Webデザイナーがこれは外せない！というCSSアニメーションライブラリをまとめてご紹介。任意の要素にクラスを付与するだけで、用途に応じたアニメーションを実装できる便利なライブラリを整理しています。フワフワやユラユラ、ポヨンといった弾む系の動きから、背景アニメーションなどWebサイトの印象づくりに欠かせない動きが揃います。GitHubレポジトリのスター数が多いものを中心にセレクト。コンテンツ目次 1. 万能CSSアニメーション 2. 文字エフェクト向け 3. ホバーエフェクト向け 4. 画像、背景向け 5. ふわふわ、ゆらゆら、面白系 6. ハンバーガーメニュー向け 7. クリエイティブなアニメーション 8. よりなめらかな動きを表現するには 9. アニメーションの参考リソース一覧万能CSSアニメーション Animista 基本となる

yahihi 2022/03/03

リンク

How to Make an Animated Back to Top Button Using Only CSS

yahihi 2022/01/06

css

リンク

CSSで複数の色を組み合わせたメッシュグラデーションを作成する方法

2022年2月1日 CSS メッシュグラデーションとは、複数のポイントで色を指定したグラデーションのことです。あえて統一感をなくすことで、遊び心のあるふわふわした印象となります。このメッシュグラデーションをCSSで作成してみましょう！ ↑私が10年以上利用している会計ソフト！基本の円形グラデーションまずは基本的な円形グラデーションの指定方法です。background-image プロパティーで radial-gradient() のカッコ内に開始色と終了色をカンマで区切って指定します。 background-image: radial-gradient(開始色, 終了色); この時、色を transparent とすると、透明色が指定でき、後述する複数の色を重ねる時に利用できます。ついでに background-attachment: fixed; を合わせて指定すれば要素いっぱいに色