日本語におけるtext-wrapプロパティの運用
CSSのtext-wrapプロパティを使うと、テキストの行の折り返し方法を変更できる。text-wrap: balanceを適用すると、適用しない場合と比べて次のように変化する。 CSS text-wrap: balance | CSS and UI | Chrome for Developers text-wrap: balanceが適用された下の例では、すべての行の長さが均等になるように制御されている。 しかし正確に言えば、すべての行の長さが必ずしもまったく同じになるわけではない。文字の適切な折り返し位置を考慮した上で、おおよそ同じくらいの長さになるように分配される、というのが正しい。その際、一つの英単語の途中で行が分割されるようなことは通常起こらない。これは、英語では単語の区切りに空白文字を挟んで記述されるが（わかち書き）、それが改行位置を決めるためのヒントとなるからである。
CSS Gridの便利な無料ツールが登場！ レイアウトを確認しながら、コードを生成できる -CSS Grid Generator
最近のWebサイトやスマホアプリでよく使用されるお弁当箱のようなBento UIやカード型、ヘッダ・サイドバー・メイン・フッタなどのレイアウトを確認しながら、CSS Gridのコードを生成できる無料オンラインツールを紹介します。 使い方は非常にシンプルで簡単、生成されるコードもシンプルでさまざまなプロジェクトで利用できます。 CSS Grid Generator Bento UIの実装については、Bento UIとはパネルが伸び縮みしながら配置が入れ替わるお弁当箱みたいなUIをご覧ください。 CSS Grid Generatorは、CSS Gridで実装するレイアウトのコードを簡単に生成できるオンラインツールです。このジェネレーターを使用すると、列数・行数・ギャップサイズを設定し、自由にレイアウトを構築できます。
開発者にとっていかに早くWeb制作を進められるかは、永遠のテーマと言えます。 この記事ではWebサイト制作を効率化、爆速にするTailwind CSSのUIコンポーネント集、便利ツールをまとめてご紹介します。 表現したいレイアウトをコピペのみで実現でき、これまでかかっていたサイト制作時間を劇的に削減します。 おしゃれなWebサイトを素早く開発できるUIコンポーネント素材、あなたはいくつ知っていますか。 Tailwind CSSの便利UIコンポーネントまとめTailwind UIDyna UIAnimataPrelineMamba UIFlowbiteDaisy UISailboat UIMeraki UITail-KitReact AriaWicked BlocksTailwind Starter KitWindstaticMyna UITailwind StampHyper UITail
別タブへのリンク記述「target=”_blank”とrel=”noopener noreferrer”」の見直しを 2024 7/23 Webサイトにてリンク先を別タブで開く用途で、a要素へのtarget="_blank"の指定に加えてrel="noopener noreferrer"が指定されていることがあります。 しかし現時点では、リンクを別タブで開く目的にて「target="_blank"とrel="noopener noreferrer"をセットで記述」というのは不要です。そのような無思考な運用になっていれば見直した方が良いでしょう。特にrel="noreferrer"の指定はアクセス解析に影響を及ぼします。 主要ブラウザーでnoopenerは対応済み、noreferrerは特定用途で利用を 2024年現在、主要ブラウザーはa要素へのtarget="_blank"の指定でrel=
これはすごい便利！ WebサイトやスマホアプリのUIに今時のアニメーションやインタラクションを簡単に実装できる -Animata
WebサイトやスマホアプリのUIにアニメーション、エフェクト、インタラクションを簡単にコピペで実装できるコードをまとめたAnimataを紹介します。 112種類のアニメーション化されたUIコンポーネントが揃っており、見ているだけでもインスピレーションが刺激されます。 Animata Animata -GitHub Animataの特徴 Animata化されたUIコンポーネント animataの使い方 Animataの特徴 Animataは、WebサイトやスマホアプリのUIに使用されるアニメーション、エフェクト、インタラクションを簡単にコピペで実装できるコードを提供しています。 MITライセンスで、個人でも商用プロジェクトでも無料で利用できます。 AnimataはUIライブラリではありません。UIに動きを与えるためのコード集なので、他のUIライブラリやデザインシステムと一緒に使用できます。カ
とある企業の面談で、「reactは運用コスト高いと思うんですけどなんで選定したんですか？」って聞かれてめちゃくちゃ困った話→Web開発の運用コストに関する様々な意見が集まる
Tonosaki @seino914 この間、とある企業の面談で、「reactを使用したWeb開発をしております」って言ったら「reactは運用コスト高いと思うんですけどなんで選定したんですか？」って聞かれてめちゃくちゃ困ったんだけど、reactって運用コスト高いんすか？？しかも末端エンジニアのワイに選定理由聞かれてもわからん。 Tonosaki @seino914 エージェントにモダンWeb開発してる企業って事で進められて面談したんだけど、面談担当者、reactアンチだったから色々とケチつけられたり、詰められたんだけど。
Webサイトのエクスペリエンスを改善するCSSの便利なテクニックを紹介します。 基本的には一行のCSSですが、より良くするためにCSSを追加して複数行のものもあります。 CSS One-Liners to Improve (Almost) Every Project by Álvaro Montoro 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 1. ビューポート内のコンテンツの幅を制限する 2. テキストのサイズを大きくする 3. 行間のスペースを広げる 4. 画像のサイズを制限する 5. コンテンツ内のテキストの幅を制限する 6. 見出しをよりバランスよくする 7. ページスタイルに合わせたフォームのカラー 8. テーブルの表を分かりやすくする 9. テーブルのセルとヘッダのスペース 10. アニメーションと動
コンテナークエリーは、要素の幅を条件にする機能だけでなく、CSS変数を条件にスタイルを適用する、コンテナースタイルクエリーという機能があります。活用することで、ひとつのクラスに異なるバリエーションのスタイルを定義できます。 前回の記事『要素の幅でレスポンシブ対応を行える！コンテナークエリーの使い方』では、コンテナークエリーの基本的な使い方を紹介しました。本記事では、コンテナースタイルクエリーの使い方を紹介します。 ※本記事のデモは、ChromeまたはEdgeでご覧ください。ブラウザのサポート状況は、後述する「対応ブラウザ」を参照ください。 コンテナースタイルクエリーの使い方 @containerの条件をstyle()関数で定義することで、コンテナースタイルクエリーを利用できます。関数の引数には、条件とするCSS変数と値を設定します。CSS変数は、親要素に定義された値を参照します。 また、前
CSS Grid Areas
A fresh look at the CSS grid template areas and how to take advantage of its full potential today. Jul 20, 2024 CSS Grid support has been widely available since March 2017 in all major browsers. Yet, here we are in 2024, and I still see few people using the grid template areas feature. It’s no surprise that many avoid template areas as making sense of the grid is challenging enough. In this intera
CSSだけで作る！クールなノイズアニメーション - コハム
Make some hacky noise with CSS gradients 記事は上記記事を意訳したものです。 ※当ブログでの翻訳記事は元サイト様に許可を得て掲載しています。 偶然見つけたエフェクトで、かなりクールだと思いました。繰り返しの放射状グラデーションのリングのサイズを@propertyを使って非常にゆっくりと0pxにアニメーションさせていたところ、0に近づくと狂い始めることに気づきました。 そこで、私は考え始めました。 セットアップ トリック アニメーション化 最後に セットアップ 最初に作業していたマスクは、適度な5pxと5pxの間隔の放射状の繰り返しマスクです： .noise { --lines: 4px; mask: repeating-radial-gradient( circle at center, #000, var(--lines), #000, 0, /*
(Re-published from the Smashing Magazine newsletter.) I don’t know if you’ve noticed it. It certainly snuck up on me. Somehow at some point in time, CSS got smart. Like really, really smart. The language for styling the web with a quirky cascade is evolving from a standard paintbrush into a full-fledged design application. The shift is significant, but not totally unexpected. CSS has always been q
A hand-picked collection of the best 20 CSS animations curated from various sources around the web. Most of them will generate pure CSS code without requiring any external libraries. If you want to explore more frontend tools and resources, visit our page 180+ Best Frontend Development Tools to find out more. 1. Animate.css A library of ready-to-use, cross-browser animations for you to use in your
Sass: Node Sass is end-of-life
The time has finally come to retire Node Sass. This Node.js wrapper for LibSass was the first official Sass compiler available in the JavaScript ecosystem and was a huge part of Sass growing beyond the scope of the Ruby community where it originated, but it hasn't received a new release in a year and a half and the most recent set of maintainers no longer have the bandwidth to continue updating it
CSSのposition: stickyでテーブルのヘッダー行・列を固定してborderもいい感じに - Qiita
これは何 CSSのposition: sticky;だけででテーブルヘッダを固定できると聞いて感激し border-collapse: collapse;だと枠線が変になることに絶望して collapseぽく使えるようにした ブツ table.sticky-header { border-collapse: separate; border-spacing: 0; /* ここ */ } table.sticky-header:not(.not-vertical-sticky) > thead > tr > th { position: sticky; top: 0; z-index: 2; } table.sticky-header:not(.not-horizontal-sticky) > thead > tr > th:first-child { position: sticky; l
CSS Gridの便利な無料ツールが登場！ レイアウトを確認しながら、コードを生成できる -CSS Grid Generator
最近のWebサイトやスマホアプリでよく使用されるお弁当箱のようなBento UIやカード型、ヘッダ・サイドバー・メイン・フッタなどのレイアウトを確認しながら、CSS Gridのコードを生成できる無料オンラインツールを紹介します。 使い方は非常にシンプルで簡単、生成されるコードもシンプルでさまざまなプロジェクトで利用できます。 CSS Grid Generator Bento UIの実装については、Bento UIとはパネルが伸び縮みしながら配置が入れ替わるお弁当箱みたいなUIをご覧ください。 CSS Grid Generatorは、CSS Gridで実装するレイアウトのコードを簡単に生成できるオンラインツールです。このジェネレーターを使用すると、列数・行数・ギャップサイズを設定し、自由にレイアウトを構築できます。
The New !important 記事は上記記事を意訳したものです。 ※当ブログでの翻訳記事は元サイト様に許可を得て掲載しています。 とある人気のWordPressテーマで使用されているこんなCSSを見つけました： .wp-block-theme-button .button:not(.specificity):not(.extra-specificity) .specificityと.extra-specificityというクラスが目を引きますね。いったい何をするのでしょうか。作者に直接聞くのが一番良い方法ですが、事実よりも自分の意見を押し付けたい人もいるでしょう。結局のところ、それがインターネットの基本ですからね！ おそらく:not()は、.wp-block-theme-buttonラッパー内の.button要素を選択しつつ、特定のコンテンツでより積極的にスタイリングされた.but
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
コピペで時短、Tailwind CSSおすすめUIコンポーネント、UIキット集、便利ツール【まとめ】
別タブへのリンク記述「target=”_blank”とrel=”noopener noreferrer”」の見直しを - 株式会社真摯
Webサイトを使いやすく改善する、知っておくと便利なCSSのテクニック
CSSのコンテナースタイルクエリーstyle()の使い方 - ICS MEDIA
Unconditional Love for Conditional CSS - Geoff Graham
20 Super Useful CSS Animation Libraries
まだ!importantで消耗してるの？@scopeによる詳細度管理で脱!important - コハム