line-clampで複数行の文の省略がちょっと便利（最近便利なCSSおれおれAdvent Calendar 2023 – 14日目） | Ginpen.com
最近便利なCSSおれおれAdvent Calendar 2023 – 14 日目 text-overflow ってあるじゃないですか、文章が長いときに省略するやつ。でもあれ 1 行（横がはみ出したとき）しか使えないんですよね。line-clamp なら複数行の文章でも省略できます。 ただし問題もあります。 例 デモ：https://codepen.io/ginpei/pen/RwvmERN .box { -webkit-box-orient: vertical; -webkit-line-clamp: 3; display: -webkit-box; overflow: hidden; } 名前 使うのは line-clamp じゃなくて -webkit-line-clamp です。仕様書にもそう載っていて現在 Webkit 以外でも使えます。 line-clamp も仕様には載ってはいて
:is()と:where()で複数セレクターが便利（最近便利なCSSおれおれAdvent Calendar 2023 – 13日目） | Ginpen.com
最近便利なCSSおれおれAdvent Calendar 2023 – 13 日目 例えば td と th とか。似たような位置にある似たようなセレクターをまとめて書けるので楽ちんです。 例 デモ：https://codepen.io/ginpei/pen/yLZWJrz .TheTable > :is(thead, tbody) > tr > :is(th, td) { border: 1px solid lightgray; } :is() の詳細度に注意 :is() はその引数で与えられるセレクター群の中で最も詳細度が高いものになります。 例えば :is(a, .b, #c) と書いた場合、詳細度はそれぞれ a が 0,0,1 、 .b は 0,1,0 、 #c は 1,0,0 で、:is() 全体の詳細度は 1,0,0 になります。 これはちょっと注意が必要です。合致する対象ごとじゃ
CSSのサブグリッド（subgrid）の基礎知識と使い方、たった一行のCSSで複数カードの水平グリッドを簡単に揃えられる！
CSSのサブグリッド（subgrid）がChrome 117でサポートされ、Safari, Firefoxではすでにサポートされていたので、これで主要ブラウザのすべてで利用できるようになりました。 先日の記事でもお伝えしたように、subgridを使用するとカード内の見出しやテキストの水平グリッドを簡単に揃えることができます CSSのサブグリッド（subgrid）の基礎知識と使い方、プログレッシブエンハンスメント、デベロッパーツールによるデバッグ方法などを紹介します。 CSS Subgrid by Adam Argyle 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスに基づいて翻訳しています。基づいてというのは、貢献部分に関して同ライセンスも含みます。 はじめに サブグリッド（subgrid）の基礎知識 ページレベルの「マクロ」グリッドを共有する サブグリッドのサポートをチェ
CSSの新機能！ テキストの行のバランスを自動調整する「text-wrap: balance;」の基礎知識と使い方
テキストが複数行のときに、行ごとの文字数を同じにしてバランスを自動調整するCSSの新機能「text-wrap: balance;」が、Chromeでサポートされました。 日本語だと複数行の文字数を同じにしたいということは少ないと思いますが、見出しやコピーなどで文字数を揃えたいときに使えます。まぁ使ってもかなりピンポイントになるでしょう。 text-wrap: balance;の基礎知識と使い方、注意点を紹介します。 CSS text-wrap: balance by Adam Argyle 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスに基づいて翻訳しています。基づいてというのは、貢献部分に関して同ライセンスも含みます。 text-wrap: balance;とは テキストのバランスを見つける 制限事項 ブラウザが使用している技術の簡単な説明 text-wrap: bala
知っておくと便利なCSSのセレクタ！ :has()疑似クラスを使用すると、子の数に基づいて親要素のスタイルを定義できる
CSSはどんどん便利になってますね！ :has()もその一つで、指定した要素がある場合にのみスタイルを適用できます。その機能を利用して、子の数に基づいて親要素のスタイルを定義することができます。たとえば、子要素が3個以下の場合、ちょうど5個の場合、7～9個の場合などに親要素に異なるスタイルを設定するのが簡単です。 Style a parent element based on its number of children using CSS :has() by Bramus :has()について詳しく知りたい人は、以前の記事をご覧ください。 CSSの:has()疑似クラスの便利な使い方を徹底解説 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに :has()を使用して、子の数に基づいて親要素のスタイルを設定 :has()
Web Animations APIのcompositeが凄過ぎてすごいからみんな見てくれ - Qiita
この記事はようやくSafariでもフルサポートされそうなWeb Animations APIのcomposite（効果の組成）って機能がすごいよ！！って、ただそれだけを伝えたい記事です。平たくいうと複数のアニメーションを簡単キレイに合成できる機能なのですが、通常のWebのコーディングでもよく出てくる辛さを解決してくれる結構すごいヤツなのです。 ▼ こういうアニメーション作るのもだいぶん楽になります Web Animations APIで星空パーティクル 単にCSSのアニメーションをJSで描けるよってだけではあるんだけど、ライブラリなしでそこそこ簡単にインタラクティブなもの作れるって意味ではうれしい。主要ブラウザ全部で使える。https://t.co/8H8zXfc5NL pic.twitter.com/bfTERJPxIX — ゆき＠ティアF47a (@yuneco) October 11
CSSで複数の色を組み合わせたメッシュグラデーションを作成する方法
2022年2月1日 CSS メッシュグラデーションとは、複数のポイントで色を指定したグラデーションのことです。あえて統一感をなくすことで、遊び心のあるふわふわした印象となります。このメッシュグラデーションをCSSで作成してみましょう！ ↑私が10年以上利用している会計ソフト！ 基本の円形グラデーション まずは基本的な円形グラデーションの指定方法です。background-image プロパティーで radial-gradient() のカッコ内に開始色と終了色をカンマで区切って指定します。 background-image: radial-gradient(開始色, 終了色); この時、色を transparent とすると、透明色が指定でき、後述する複数の色を重ねる時に利用できます。ついでに background-attachment: fixed; を合わせて指定すれば要素いっぱいに色
早く言ってよ〜！CSSのtransformは同じ関数を複数回つかってもOKだった | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、エンジニアのつっちーです。 .foo { transform: translateX(-50%) translateX(10px); } みなさんは、このCSSが有効であること、ご存じだったでしょうか。CSSのtransformプロパティでは、このように同じ関数を複数回使用できます。transformにはもう何年もお世話になってきたというのに、このことは最近になって初めて気が付きました……。「そんなことも知らなかったの？」という方がほとんどだとは思いますが、忘れてしまわないように記事に残しておきます。 たとえばこんなときに 複数の単位で移動距離を指定 See the Pen Multiple Transform Functions 1 by dsktschy (@dsktschy) on CodePen. See the Pen Multiple Transform Funct
CSSの新しいセレクタが便利！複数のセレクタを1つにまとめられる:is()、さらに詳細度を0にする:where()の使い方
CSSの新しいセレクタが、主要なすべてのブラウザにサポートされました（ただし、IEは除く）。複数のセレクタを1つにまとめられる:is()、同機能でさらにセレクタの詳細度を0にする:where()をどのように使い分ければよいのか紹介します。 :where() has a cool specificity trick, too. by Chris Coyier 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 最近、:is()疑似セレクタがよく話題になっている 複数のセレクタを1つにまとめられる:is() 同じ機能で、詳細度を0にする:where() :is()と:where()のどちらを使用すればよいか 最近、:is()疑似セレクタがよく話題になっている 最近、:is()疑似セレクタがよく話題になっています。おそらく、Safari
CSSの新しい疑似クラス関数「:is()」複数のセレクタを1つにまとめることができて、これは便利
CSSの新しい疑似クラス関数「:is()」が便利すぎるので紹介します。 :is()については、以前の記事で紹介した時はプレビュー版のみのサポートでしたが、ブラウザのサポートも進み、来年には普通に使用できるようになるかもしれません。 画像はツイートより 元ツイートは、こちら。 How slick :is(this CSS!?) 😏 removes the margins on all headers with a .tight class h1.tight, h2.tight....... 🤢 :is(h1,h2).tight { 🤓 } pic.twitter.com/y01f7uKPmA — Adam Argyle (@argyleink) October 13, 2020 ツイートは、hx要素のマージンをまとめて削除するスタイルシートが紹介されています。
2024年に最適なfont-familyの書き方 - ICS MEDIA
ウェブサイトのフォントは何を指定すればよいのでしょうか？ CSSのfont-familyプロパティーに指定可能なフォントは選択肢が多く、HTMLコーダーなら誰もが一度は迷ったことがあるはずです。 font-familyの組み合わせを紹介している記事は多々あります。しかし、必要のない指定や、考察不足なまま紹介している記事を見かけることは少なくありません。それもそのはず、フォント事情は日々変化するもので、古い情報は役立たないことが多いためです。 本記事ではフォントに関わるここ最近のビッグニュースを取り上げつつ、教訓から学んだ変化に強い「無難」なフォント指定を紹介します。 結論 いきなり結論ですが、以下のフォントの組み合わせがオススメです。CSSのbodyセレクターなどにコピー＆ペーストして利用ください。 body { font-family: "Helvetica Neue", Arial,
やめよう、CSSのシステムデフォルトフォント指定 - Chienomi
序 ウェブをブラウジングしていると、嫌というほど見る 無意味にひたすらシステムフォントを列挙している 同じシステム上に存在すると予想される和文フォントのあとに欧文フォントを指定する という苦痛極まりないフォント指定をしているCSSをよく見かける。 ひどい思考停止だと思うのだが、実際には行われているばかりか、ウェブデザイナーを自称する者が平気でそのような指定を推奨していたりする。 それについては散々言及したつもりでいたのだが、実際にChienomiでそのこと全体を指摘した記事はなかったので、ここでしっかりと述べておこうと思う。 ここではそれがなぜ、どのように問題なのか、どのようにすべきかということを述べていこう。 起 話の大本としては、MSNのフォント指定がひどくて、Linux上で見るために気を遣ったaliasを書かねばならないが、それ以上に無意味な指定である、ということを指摘した。 それ以
fallback - JavaScript/スタイルシートを外部CDNからダイナミックに読み込み MOONGIFT
最近はCDNサービスが多数あり、JavaScriptやスタイルシートを外部サイトから読み込むのも当たり前になっています。しかし他サービスとあって、ずっと存在し続けるのかも安定性も若干の不安が残ります。 しかしだからといってローカルにファイルを用意するのも面倒です。そこで使ってみたいのがfallbackです。 fallbackの使い方 fallbackはスタイルシート、JavaScriptファイルをダイナミックにローディングしてくれるライブラリです。使い方は見ての通りで、一つのライブラリに対して複数のURLを指定できます。 // Here we actually invoke Fallback JS to retrieve the following libraries for the page. fallback.load({ // Include your stylesheets, th
[CSS]フォームの各ブラウザ間の相違を整え、好みのデザインで美しく表示させるスタイルシート -FormHack
デモページ: フィールドセット FormHackの使い方 FormHackはSassベースで、フォームのデザイン（フォント、幅、高さ、カラー、ボーダー、角丸など）を簡単に好みのスタイルに変更できます。 カスタマイズは、Sassファイルの上部にまとめられています。 /* FormHack v1.0.0 (formhack.io) */ // Config ----------------------------- // Font $fh-font-family: 'Raleway', sans-serif $fh-font-size: 16px $fh-font-color: rgb(40, 40, 40) // Borders $fh-border-radius: 5px $fh-border-width: 1px $fh-border-style: solid $fh-border-co
![[CSS]フォームの各ブラウザ間の相違を整え、好みのデザインで美しく表示させるスタイルシート -FormHack](https://cdn-ak-scissors.b.st-hatena.com/image/square/db8b9840475a6890e8fd894a96d4d6cf1d2d7f90/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201502%2F2015060801.png)
[JS]日本語もOK、行単位でスタイルを適用できるようにするスクリプト -Lining.js
demo 5 一行ごとにさまざまなアニメーションで表示します。 「rolling」のエフェクトかっこいいです。 Lining.jsの使い方 Step 1: 外部ファイル 当スクリプトを外部ファイルとして記述します。 <head> ... <script src="build/lining.min.js"></script> </head> デモにあるエフェクトを使用する時は、エフェクト用のスクリプトも加えます。 <head> ... <script src="build/lining.min.js"></script> <script src="build/lining.effect.min.js"></script> </head> Step 2: HTML 適用する要素に「data-lining」を加えます。 <p class="poem" data-lining>洋酒といえば、誰でも
![[JS]日本語もOK、行単位でスタイルを適用できるようにするスクリプト -Lining.js](https://cdn-ak-scissors.b.st-hatena.com/image/square/94a5e0fe3568ecb41b259e96c1bc62f0c1f09601/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201404%2F2014112501-01.png)
複数ページにも対応とは！ページに分かりやすいプロダクトツアーを加えるフレームワーク -Hopscotch
ページに分かりやすく、プロダクトツアーを加えるフレームワークを紹介します。 似たようなスクリプトはたくさんありますが、これはツアー移動のアニメーション、ツアーを戻る、そして複数ページにも対応しています。 1ページ内でのツアーでけではなく、複数ページを横断するツアーも作成できます。 Hopscotch Hopscotch -GitHub Hopscotchの特徴 Hopscotchのデモ Hopscotchの使い方 Hopscotchの特徴 イベントのコールバック ツアー中のさまざまなイベントのコールバックを装備。 マルチページ対応 HTML5のストレージやクッキーを利用して、複数ページにまたがるツアーも可能。 i18n対応 さまざまな言語での実装をサポート。 快適なレスポンス 一つひとつは軽量なインスタンス。 Hopscotchのデモ ページ自体がデモになっています。 中央下の「Tale
[JS]ブラウザとそのバージョンだけでなくOSもデバイスもスクリーンサイズも判定し、CSSのセレクタで利用できる便利なスクリプト -CSS Browser Selector+
IE6/7/8/9, Firefox, Chrome, Safari, Operaは当たり前、Win, Mac, LinuxなどのOS、iPhone, Android, iPod, iPadなどのデバイス、スクリーンのサイズ、言語などを判定し、それらをCSSのセレクタで利用できるスタンドアローンのスクリプトを紹介します。 CSS Browser Selector+ CSS Browser Selector+の特徴 CSS Browser Selector+の使い方 CSS Browser Selector+の特徴 CSS Browser Selector+はハック無しで、さまざまなUAをCSSのセレクタで指定できるスクリプトです。ブラウザごとに異なるスタイルシートの適用、スマフォやタブレット用のレスポンシブなスタイルにも利用できます。 CSS Browser Selector+が判別するの
JavaScriptとCSSファイルのHTTPリクエストを最小限にし圧縮・キャッシュする -BoxJSとBoxCSS
ウェブサイトで使用する複数のJavaScriptとCSSファイルのHTTPリクエストを少なくし、圧縮・キャッシュするサービスを紹介します。 [ad#ad-2] 複数のJSファイルをまとめる -BoxJS 複数のCSSファイルをまとめる -BoxCSS 複数のJSファイルをまとめる -BoxJS BoxJSは一つのJSファイル（box.js）を利用し、モジュール式のローディングシステムで複数のJSファイルをロードできます。 BoxJS BoxJSの使い方 最初に、box.js(1.4kb)を外部ファイルとして指定します。 <script src="http://www.boxjs.com/box.js"></script> ロードするJSファイルを指定します。 Box('http://mywebsite.com/scripts/', [ 'plugins/jquery.js', 'plugi
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
#
zencode.in