3 行まとめ 特定の要素(アンカー)を基準にして、その要素から位置を指定できる CSS Anchor Positioning JavaScript を使わなくても tooltip などの実装ができるように Chrome Canary で試せる CSS Anchor Positioning とは CSS Anchor Positioning は特定の要素(アンカー)を基準にして、その要素から別の要素の位置を指定できる API です。 Chrome114 で実装された Popover APIと CSS Anchor Positioning を使うと、Floating UIのような tooltip が JavaScript を使用せずに実装できます。 CSS Anchor Positioning を使って tooltip を実装してみよう 実際に Popover API と CSS Anchor

今年も残すところあと1月を切り、CSSもこの1年でさらに進化を遂げましたね。 CSSは普段、SCSSを使ってコーディングしている方も多いますが、 CSSの進化により、SCSS不要論も今年チラチラ見られるようになりました。 本当にSCSSがなくても問題ないのか、新しいCSSネストについて調べてみました。 CSSネストの基本 まずはCSSネストがなんなのかというおさらいをしておきましょう。 2つのクラスparentとchildがあり、parentより子の階層にchildクラスが含まれているときだけスタイルづけしたい時、普通のCSSだとこのように書きます。 .parent { min-height: 100dvh; width: 100%; } .parent .child { background: white; }

今までJavaScriptを使用しないと実装できなったことが、CSSだけで実装できるようになったものが増えてきました。たとえば、表示・非表示をdisplayプロパティでアニメーションできるようになったり、スクロールをトリガーにしたアニメーションなど、新機能が登場しました。 今回紹介するのは、height: 0;からheight: auto;へのトランジションです。高さが固定値であれば簡単にアニメーションできますが、コンテンツ量が不明で成り行きの場合はJavaScriptで高さを取得する必要がありました。 height: 0;からheight: auto;へのトランジションをCSSで実装する方法を紹介します。元記事を読んで、CSS Gridをここで使用するのか！ と驚きました。 🧙‍♂️ CSS trick: transition from height 0 to auto! by Fra

はじめに 最近のCSSのアップデートは目覚ましいものがありますが、 みなさんは、CSSの値と単位がここ1年くらいで大きく変わっていることはご存知ですか？ Dynamic viewport が追加されたり、math 関数が追加されたりなどの大きな変更は、ご存知かもしれないですが、calc()で ネイピア数 e や 円周率 πなどが使えるようになったり、 フォントに相対的な長さ単位が追加されていたりと細かい変更も多くあります。 そのため、この記事では、CSS Values and Units Module Level 3 から CSS Values and Units Module Level 4の変更点を中心に紹介しようと思います。 Viewport単位 CSS Values and Units Module Level 3 から CSS Values and Units Module Le

Windows10でのIE11サポート終了とともに、IE11対応HTML/CSSとさよならした皆さん、お疲れさまでした！ （Windows8.1終了までIE11頑張るみなさん、お疲れ様です） 今更ですが、ぎりぎりまでIE11対応したので、最近のHTML/CSS事情が追い切れていません！ ということで！　主にIE11対応なしなら、iOS13以降で（iOS14以降のCSSも最後に紹介しています）使えるHTML/CSSの中から、筆者が気になるものをまとめました！ 数が多いため詳しい使い方は説明省きます！ 利用する際は各自対応ブラウザ再確認をお願いしますJavaScript関連は紹介していません deep-space.blue は IE11→Edgeのリダイレクトリストに載せてしまっており、IE11（IE11モード）でデモを確認することは困難なのでIE11の場合の表示のスクリーンショットも記録とし

気がつけばCSSの@layerが全てのモダンブラウザに実装完了している今日この頃、みなさまはいかがお過ごしでしょうか。 CSSでは、@layerに次ぐ新機能として @scope が検討されています。最近これについて勉強したのですが、これを取り扱う日本語記事が見当たらなかったので今回ご紹介します。 この記事では、CSS Cascading and Inheritance Level 6のFirst Public Working Draftの内容を紹介します[1]。これは去年12月のバージョンで、より新しいEditor's Draftとして今年4月のものがありますが、特に大きな変更はありませんでしたので、この記事の内容が執筆時点の最新情報だと思って差し支えありません。

CSS Flexboxも、margin: auto;も、よく使用していると思います。 しかしよく使用し、なんとなく知っているけれど、本当は理解できていないことがあるかもしれません。 CSS Flexboxとmargin: auto;の自動マージンがどのように相互作用するかを紹介します。ヘッダやナビゲーションなど、微調整が必要なレイアウトに役立つテクニックです。 The peculiar magic of flexbox and auto margins 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 しっかりと理解しておく CSS Flexboxとmargin: auto; しっかりと理解しておく フロントエンドの制作をしていると、知らないことが何なのかを分かっていることがあります。必要とするCSSは十分知っているので、それをど

CSSの書き方は千差万別です。 コーディングを学べる教材やスクールでは、CSSの基本的な書き方（横並びならflexを使うなど）はもちろん解説されていますが、実務でコーディングをする際に「気をつけるべきこと」はあまり解説されていない印象です。 なので今回は、実務でコーディングをする際に気をつけることを解説していきます。この記事に書いた内容を意識すれば実務でも通用するコードを書けるようになるはずです。 transition を指定する時はプロパティも指定する hoverなどのアニメーション対象の要素にtransitionを指定する際、transition: .2s;のような書き方はNGです。以下のようにアニメーションさせるプロパティのみを指定しましょう。 /* Bud... */ a { transition: .2s; } /* Good!! */ a { transition: opaci

iPhoneやAndroidのスマホやタブレットなどのタッチデバイスでCSSのhoverアニメーションをつけていると、タップ（クリック）動作にいろいろと支障がでることがあります。 CSSで指定するhover動作をスマホやタブレットでは無効にさせてPCのみで実行させるために、JavaScriptでデバイスの判定をしたりすることもありますが、CSSのメディアクエリーだけでも制御ができるのでメモとして紹介します。 mediaクエリーのhoverとpointer PCデバイスのみにCSSのhover動作を実行させるには、CSSメディアクエリーで判定できる以下の2つを使用します。 ・使用デバイスがhoverを使えるかどうか ・使用デバイスのポインターの種類 この2つを組み合わせることでPCのみを判定させた状態を作り、その中にhover動作の指定を記述します。 実際の記述方法については以下です。 a

JavaScriptを用いてウェブサイトのUIを構築する際によく利用されるのが「React」というFacebook製のライブラリです。ReactではJSXという記法を用いてコンポーネントを構築していきますが、その際にどういう方法でスタイリングを行うかはユーザーの手に任されています。その中でも比較的多く用いられているのが「普通のCSSを利用する方法」と、スタイル設定もJavaScript内で完結させる「CSS in JS」の2つなのですが、この2つについてパフォーマンスへの影響はどれくらい違うのかをフロントエンドエンジニアのトーマス・プストニクさんが計測してブログにまとめています。 Real-world CSS vs. CSS-in-JS performance comparison - Tomas Pustelnik's personal website https://pustelto.

ウェブデザインにおけるline-heightってけっこう曲者で、CSSを理解してデザインしないと「空き」の設計が破綻したりコーディングで苦労することになります。FigmaやAdobe XD、Affinity Designerなどのグラフィックアプリでline heightの扱いが異なるので、使うツールの挙動を理解するのも大切です。 ということで、今回はCSSのline-heightについてまとめてみます。 実は調べれば調べるほど奥が深いCSSのline-heightの世界ですが、まずは基礎からまとめていこうと思います。 目次 以下はページ内のセクションへのリンクです。 CSSのline-heightでは文字の上下にスペースができる ウェブで使われるハーフ・レディングとは 印刷とウェブにおけるレディングの違い デザインツールでのline heightの扱いの違い 上下のハーフ・レディングを帳

棒グラフや折れ線グラフ、どうやって実装していますか？ Charts.cssなら簡単です。データをtableタグで実装し、CSSのクラスをtableに加えるだけで横棒グラフ、棒線グラフ、折れ線グラフ、エリアグラフなどを簡単に実装できるCSSのフレームワークを紹介します。 HTMLは普通の表組みなのでアクセシブル、グラフやチャートはレスポンシブにも完全対応した優れものです。 Charts.css Charts.css -GitHub Charts.cssの特徴 Charts.cssのデモ Charts.cssの使い方 Charts.cssの特徴 Charts.cssはtableで実装した表組みにシンプルなCSSのクラスを加えるだけで、さまざまなグラフやチャートを実装できるフレームワークです。カスタマイズも簡単で、ユーティリティのクラスも豊富に用意されています。 HTMLとCSSだけで実装 セマ

CSS Transformの仕様は意外にも複雑です。思った通りの場所に表示できず、その場凌ぎにmarginやpaddingの目分量で位置合わせをしてしまった……。そんな経験をもつ方もいるのではないでしょうか？ この記事では、CSS Transformの基礎をおさらいした上で、陥りやすいミスの回避方法や最新の機能を紹介します。 CSS Transformとは？ CSS Transformはwebページで高度な表示やアニメーションを高速に描画するための仕様として生まれました。 往年のwebユーザーの方であれば、Google検索のイースターエッグのひとつ『do a barrel roll』をご存知かもしれません。このイースターエッグは当時（2010年代初頭）最先端であったCSS Transformをデモする意味もありました。 2021年現在では、発展系の3D変形も含め、ほぼすべての機能がIE(I

CSSの新しいプロパティがブラウザでサポートされると、使いたくなりますが、その時ネックになるのがサポートしていないブラウザへの対応方法です。 サポートしているブラウザにはその新しい機能を、サポートしていないブラウザには理想的ではないけれど情報をしっかり提供できるように実装する方法を紹介します。 いわゆる「プログレッシブ エンハンスメント」の実装事例ですが、元記事では「タイニー エンハンスメント」としてより簡単にできる実装です。 The Beauty Of Tiny Enhancements In CSS by Ahmad Shadeed 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 1. fit-contentをサポートしていないブラウザへの対応方法 2. clip-pathをサポートしていないブラウザへの対応方法

CSSは使いようによっては様々な表現が可能な奥深い言語です。しかし、アニメーションなど凝った動きをするものに関してはコードは見れても実装方法を詳しく解説している記事は多くないように思えます。 この記事では、私（さかっちょ）がTwitterで過去にツイートしたCSSの技術をCodePenで改めて実装し、Twitterでは解説しきれなかった実装方法をより詳しく説明しています。CSS初学者の方にもわかりやすいように解説していますので、ぜひ参考にしてみてください。 その1. 一文字ずつ登場するテキストアニメーション See the Pen [CSS Tips] Text Show-up Motion by Takuro Sakai (@sakaccho) on CodePen. 一文字ずつtransformで移動させています。文字が途切れることなく流れるようにtransition-delayを調整

CSSのclip-pathプロパティは、非常に便利です。 セクションの区切りを斜めにしたり、ボタンに波紋のエフェクトをつけたり、スクロールして要素がビューポートに入った時にアニメーションで表示されたり、最近のWebページやスマホアプリで見かけるエフェクトはclip-pathプロパティを使用すると、簡単に実装できます。 clip-pathプロパティの基礎知識と便利な使い方、実装のポイントなどを詳しく解説します。 Understanding Clip Path in CSS by Ahmad Shadeed 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに clip-pathプロパティにおける座標 clip-pathプロパティに使用できる値 clip-pathプロパティを使用した実装 終わりに はじめに clip-pathプ

ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog こんにちはお久しぶりです。Web標準黒帯（ヤフー内のスキル任命制度）の岡部和昌（@kzms2）と申します。 今回の記事はありがちな「たくさんの良さげなCSSのプロパティなどを羅列してひたすらまとめる」だけではなく以下の考えのもと、まとめた記事です。 岡部が「使うケースがある・覚えておくべき」と感じたオススメできる、または有用と判断したCSS 可能な限り2020年からブラウザに実装された、またはこれから実装されるCSS 比較的新しいまたはあまり使われている印象がないCSS 実際のコードや挙動、対応ブラウザを掲載 自分目線でみたコメントや使えそうな場面をできる限り丁寧に説明 つまり2020年に実装されたものを中心に、有益でオススメでき

未経験からコーダーとして仕事をし始めて2年が経過しました。 最初の頃はとにかくスピードややりやすさ、デザインの再現などを重視し、保守性は特に考えていませんでしたが、ページが多くなってきたり自分以外の人と一緒にコーディングする機会が増えるにつれ、当初とはまるで違う意識で書くようになった気がします。 自分のコーディング手法もまだまだ発展途上だとは思いますが、自分なりに保守しやすいであろうコーディング手法が確立されつつあるので、コーディングルールも兼ねて記事に残しておこうと思いました。 デザインが再現できればOKというコーディングから一歩進んだコーディングを目指す方の参考になれたら嬉しいです。 この記事の前提 コーディングに付随するいろんな用語が出てくるかと思いますが、詳しくは説明していません...。なので、今コーディングを勉強中であったり仕事でコーディングしたことない人にとっては、理解しづらい

TAK(@tak_dcxi)です。今回もCSSに関する投稿です。 以前このようなツイートをしました。 メインビジュアルなど、画面いっぱいに要素を表示するためにheightやmin-heightに100vhを指定する。そして、iOSで表示確認した時に以下のような問題が起こるわけです…。 iOSのSafariでの100vhが気に食わない問題 iOSのSafariでは100vhの計算にアドレスバーが考慮されていないため、アドレスバー分押し出されて格好悪く表示されます。ちなみにiOSのGoogle Chromeは中身SafariなのであれもSafariです。 この問題に立ち向かうために、実装者はJavaScriptを利用して高さを指定したり、height: 100%;のバケツリレーを行ってアドレスバーまで考慮した画面いっぱいの表示を実現するために頑張ってきたわけです。 そんな中、先程のツイートから

これまではJavaScriptを用いて実装するしかありませんでしたが、ついにimgやiframe要素であればloading="lazy"を付与するだけで、簡単に実装できます。 <!-- 画像に適用する場合 --> <img src="pic.png" alt="画像の詳細" loading="lazy"> <!-- iframeに適用する場合 --> <iframe src="external.html" loading="lazy"></iframe>画面外では読み込みが発生しないので、必要になった時（画面内に要素が入りそうになった時）に読み込みが発生するのでパフォーマンスが向上します。 また画像についてはsrcsetを用いたレスポンシブな画像に対しても指定できますし、picture要素を用いてfallback形式でも記述できます。 <img src="normal.png" srcse