はてなブログの自動生成アイキャッチでおみくじをひけるようにした - k-murakami0609の日記

2024/09/05 16 users おみくじ k-murakami0609 omikuji 日記

はてなブログの新機能が出てた。 staff.hatenablog.com htmlとcssを書けるんだから何か変なことできるでしょって思って、おみくじ以外を思いつかなかったのでとりあえずやってみることにした。 実装は chatgpt に聞いたらすぐ答えてくれた。animationで頑張れば良いらしい。 .omikuji { font-size: 36px; font-weight: b... 続きを読む

HTML/CSSでできる、押したくなる最新Webボタンエフェクト集

2024/09/04 75 users コピペ HTML ひと カスタマイズ ウェブサイト

この記事では、ウェブサイトを訪れたひとが思わず押したくなるボタンデザインをまとめてご紹介します。 どのボタンも基本、HTMLとCSS（JSもすこし）で作成されているので、手軽にコピペで利用でき、カスタマイズも自由自在。 ボタンをデザインするときに気をつけたいポイントをチェックしておけば、より効果的なボタンの... 続きを読む

デザイナーにもお勧め！ CSSもThree.jsもタイムライン編集を可能にするTheatre.jsが凄い - ICS MEDIA

2024/08/28 176 users ICS MEDIA three.js デザイナー ゴー 実装

デザイナーにもお勧め！ CSSもThree.jsもタイムライン編集を可能にするTheatre.jsが凄い ウェブサイトの演出を作る上でアニメーションの実装は欠かせません。一般的には、CSSアニメーションやJavaScriptのライブラリ（GSAPジーサップなど）を用いてコードベースで動きをつけることが多いと思います。ですが、完全にコー... 続きを読む

CSSレイアウト再入門:完全に理解してCSSを記述するために

2024/08/24 210 users

フロントエンドカンファレンス北海道2024 で発表させていただきました。 スライド中のリンク一覧 続きを読む

フォームのテキストエリアにCSSのfield-sizingとlh単位を使用すると便利、入力された文字量に合わせてサイズを自動変更

2024/08/20 21 users content テキストエリア JavaScript 文字量

CSSはどんどん便利になっていますね！ これまではJavaScriptを使用しないとできなかったことがCSSで簡単に実装できるようになっています。 CSSのfield-sizing: content;でフォームのテキストエリアのサイズを入力された文字量に合わせて自動変更したり、テキストエリアの高さを行の高さで設定するlh単位を使ったCSSのテ... 続きを読む

Googleスプレッドシートを自動化するGoogle Apps Script（GAS）の始め方

2024/08/15 64 users GAS Gmail 関数 Googleスプレットシート ベース

Google Apps Scriptを使うには Googleスプレッドシートには、Microsoft Excelのマクロのような機能拡張機能としてJavaScriptやHTML、CSSといったWeb言語をベースとする「Google Apps Script（GAS）」が提供されている。GASを利用することで、関数では実現が難しい処理などが可能になる。また、Gmailと連携させることなど... 続きを読む

「Tailwind CSSめっちゃ負債になりそう」はそうでもないのでは、と思っている

2024/08/10 192 users 誤解 Tailwind CSS 割合 意見 うち

「Tailwind CSSめっちゃ負債になりそう」はそうでもないのでは、と思っている Tailwind CSS 1 を一目見た人、特にCSS初学者のうちけっこうな割合が「これエグい負債になりそう」と思う気がする。なぜなら実際にそのような意見をちらほら見るからなんだけども、自分はあんまりそうは思っていないし、微妙に今のCSSについ... 続きを読む

has()疑似クラスでコーディングが変わる！　CSS最新スタイリング - ICS MEDIA

2024/08/08 136 users Has セレクター ＨＡ コーディング ポテンシャル

2024年のブラウザならCSSの:has()疑似クラスが使えます。この:has()疑似クラスは非常に強力なポテンシャルをもっています。というのも:has()疑似クラスを使えば、どんな関係のセレクターも指定可能になります。これを使えば多彩なセレクターが記述できるようになり、より表現力豊かなCSSを実現できます。この記事では:ha... 続きを読む

CSS変数がもっと便利になる新しい記述方法、CSSの次世代変数@propertyがすべてのブラウザにサポートされました

2024/08/08 55 users property カスタムプロパティ CSS変数 ブラウザ

CSSの@propertyがFirefoxにサポートされ、デスクトップ・スマホのすべてのブラウザでサポートされました。 @propertyは次世代変数と呼ばれるもので、これまでの変数（カスタムプロパティ）の使い勝手が大幅に向上します。@propertyによるカスタムプロパティの記述方法、@propertyを使ったCSSのテクニックを紹介します。 ... 続きを読む

CSSで美しいメッシュグラデーションを作成できる無料ツール、アニメーションで動くメッシュグラデーションも簡単 -MSHR

2024/08/07 12 users グラデーション アニメーション スマホアプリ 方向 ツール

最近のWebサイトやスマホアプリでよく見かけるのが、メッシュグラデーションです。メッシュグラデーションとは複数のポイント間でカラーをさまざまな方向に流し込んだグラデーションで、動きや変化を表現する方法として人気があります。 この美しいメッシュグラデーションをCSSで簡単に作成できるツールを紹介します。メ... 続きを読む

CSSの変数をインラインで使用した条件付きCSS、コードを減らしながらもバリエーションを作成するCSSのテクニック

2024/08/05 22 users 変数 class コンポーネント トークン CSS変数

CSS変数を使用して、コードを減らしながらもUI要素やコンポーネントのバリエーションを作成するCSSのテクニックを紹介します。 CSSはclassを使用すると、個別の値のみをターゲットにスタイルを適用できます。CSS変数を使用すると、連続した値の範囲をカバーでき、特定のトークンを使用して特定のスタイルを適用できるよ... 続きを読む

HTMLとCSSでつくる！ リンクテキストのホバー時アニメーション11選 - ICS MEDIA

2024/08/01 92 users ICS MEDIA HTML リンクテキスト

テキストをホバーしたときの変化やアニメーションをつくることは、どのようなサイトをつくっていてもほぼ必ず行う工程ではないでしょうか。 テキストがリンクであることをユーザーに伝えるという点では、ブラウザのデフォルトスタイルのような下線のみで十分な場合もあると思います。 しかしそれだけではなく、変化をつ... 続きを読む

Chrome 127で新しく追加された3つのCSSの機能、使用するフォントに関係なく読みやすくするなど

2024/07/29 7 users iframe フォント 代替テキスト 要チェック アップデート

Chrome 127で追加された、CSSの新しい機能3つを紹介します。 今回のアップデートでは、使用するフォントに関係なく読みやすさを確保したり、生成コンテンツ内の代替テキスト、iframeでのビュー遷移のサポートなど、Web制作者は要チェックです！ New in Chrome 127 Chrome 127 beta 下記は各ポイントを意訳したものです。... 続きを読む

CSS でランダムな値を扱う `random()` と `random-item()` 関数

2024/07/28 19 users random 引数 関数 数値 最小値

CSS でランダムな値を扱う `random()` と `random-item()` 関数 2024.07.28 `random()` と `random-item()` 関数は CSS でランダムな値を扱うための関数です。`random()` 関数は最小値と最大値を引数に取り、その範囲内のランダムな数値を返します。`random-item()` 関数は引数に渡したリストの中からランダムに 1 つの... 続きを読む

Webサイトを使いやすく改善する、知っておくと便利なCSSのテクニック

2024/07/25 14 users テクニック almost Webサイト エクスペリエンス 一行

Webサイトのエクスペリエンスを改善するCSSの便利なテクニックを紹介します。 基本的には一行のCSSですが、より良くするためにCSSを追加して複数行のものもあります。 CSS One-Liners to Improve (Almost) Every Project by Álvaro Montoro 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様に... 続きを読む

日本語におけるtext-wrapプロパティの運用

2024/07/21 84 users text-wrap Balance テキスト 折り返し方

CSSのtext-wrapプロパティを使うと、テキストの行の折り返し方を変更できる。text-wrap: balanceを適用すると、適用しない場合と比べて次のように変化する。 CSS text-wrap: balance  |  CSS and UI  |  Chrome for Developers text-wrap: balanceが適用された下の例では、すべての行の長さが均等になるように制御されて... 続きを読む

CSSのclass名やJavaScriptの関数名を付けるときに役立つ単語リストのまとめ -Classnames

2024/07/11 129 users class名 関数名 単語リスト BEM OOCSS

CSSのclass名やJavaScriptの関数名を付けるときに悩んだり、ネタ切れになったことはありませんか？ BEM, OOCSS, SMACSSで命名する場合はそれを使用すればよいのですが、特定のテーマ別にグループ化された単語のリストが必要になるときもあります。そんなときに役立つ単語リストをまとめたClassnamesを紹介します。 Class... 続きを読む

UIコンポーネントの大きさは外から制御しよう - Qiita

2024/07/03 50 users Qiita prop UIコンポーネント コンポーネント 昨今

昨今のフロントエンド向けUIライブラリでは、コンポーネントの設計が重要です。この記事では、コンポーネントのスタイリング、その中でもとくにコンポーネントの大きさに関わるコンポーネント設計について考えます。 私の考える結論は、むやみに大きさを指定できるpropを生やさずに、CSSで外から大きさを制御できるよう... 続きを読む

【React】useMediaQuery は最終手段にしよう

2024/07/03 15 users React matchmedia React Hooks

こんにちは、エンジニアです。 本記事ではuseMediaQueryを使うべきではない理由を説明します。 useMediaQueryとは window.matchMediaの判定結果を取得するカスタムフックを指します。 window.matchMediaはCSSでできるメディアクエリの判定をJavaScriptでも可能にするブラウザAPIです。それをReact Hooksと組み合わせるこ... 続きを読む

UIコンポーネントの大きさは外から制御しよう - Qiita

2024/07/02 8 users Qiita prop UIコンポーネント コンポーネント 昨今

昨今のフロントエンド向けUIライブラリでは、コンポーネントの設計が重要です。この記事では、コンポーネントのスタイリング、その中でもとくにコンポーネントの大きさに関わるコンポーネント設計について考えます。 私の考える結論は、むやみに大きさを指定できるpropを生やさずに、CSSで外から大きさを制御できるよう... 続きを読む

UIコンポーネントの大きさは外から制御しよう - Qiita

2024/07/02 25 users Qiita prop UIコンポーネント コンポーネント 昨今

昨今のフロントエンド向けUIライブラリでは、コンポーネントの設計が重要です。この記事では、コンポーネントのスタイリング、その中でもとくにコンポーネントの大きさに関わるコンポーネント設計について考えます。 私の考える結論は、むやみに大きさを指定できるpropを生やさずに、CSSで外から大きさを制御できるよう... 続きを読む

CSS のカスケードレイヤー `@layer` を使ってスタイルを階層化して管理する

2024/06/30 18 users Layer カスケードレイヤー 階層 階層化 記述順

CSS のカスケードレイヤー `@layer` を使ってスタイルを階層化して管理する 2024.06.30 CSS の `@layer` ルールは、カスケードレイヤーを宣言するために使用されます。カスケードレイヤーとは、スタイルの優先度をレイヤー（階層）に分けて管理する仕組みです。`@layer` ルールを使用することでスタイルの記述順や詳細度... 続きを読む

知らなかったCSSプロパティ 3選 - Qiita

2024/06/29 48 users Qiita CSSプロパティ Cur プロパティ ボーダー

はじめに 意外と知らなかったCSSプロパティを3つ紹介します。 1. currentColor currentColor（CSS:カスケーディングスタイルシート） 特定の要素に指定されている色を参照するCSSプロパティです。 要素内の任意のプロパティで使用できますが、特にボーダーや背景などの色を親要素の色と同じにしたい場合に便利です。 cur... 続きを読む

CSSで画像にオーバーレイを与えるときは、border-imageプロパティを使うと簡単で美しく実装できます

2024/06/24 15 users グラデーション テクニック テキスト 面白いテクニック 一部

23 CSS features you should knowの動画でCSSの最近のテクニックが紹介されており、その中から特に注目すべき面白いテクニックを紹介します。 たった1行のCSSで、背景画像とテキストの間にグラデーションのオーバーレイを要素全体に適用するテクニックです。画像の一部を暗くしてその上にテキストを配置する際に非常に便... 続きを読む

CSS で条件分岐を行う `@when/@else` ルール

2024/06/22 12 users when Media true else support

CSS で条件分岐を行う `@when/@else` ルール 2024.06.22 `@when/@else` アットルールは条件付きスタイルをまとめて記述するためのルールです。`@media` や `@support` の条件を `@when` にわたすことで、`true` の場合には `@when` ブロック内のスタイルが、`false` の場合には `@else` ブロック内のスタイルが適用され... 続きを読む