When it comes to positioning elements on a page, including text, there are many ways to go about it in CSS — the literal position property with corresponding inset-* properties, translate, margin, anchor() (limited browser support at the moment), and so forth. The offset property is another one that belongs in that list. The offset property is typically used for animating an element along a predet
View Transitions APIを使うと、シンプルでスムーズな連続性のあるアニメーションを実装できます。 ウェブ技術でのアニメーションはさまざまな手段が存在します。CSSのtransitionやanimation、JavaScriptでのWeb Animations APIなど利用されている方も多いでしょう。View Transitions APIは、これらのアニメーション手段だけでは実現が困難だった新しい遷移アニメーションを実現できます。 本記事では「どのようなことができるか」「使い方」「使用上の注意点」を紹介します。 本記事で紹介すること View Transitions APIで実現できるのは新しい遷移アニメーション JavaScriptとCSSの指定で容易に利用できる（SPA向け） JSフレームワークでの対応も進んでいる JavaScriptなしでも利用可能である（MPA向
游ゴシックではプロポーショナルメトリクスは効果的 WindowsやmacOSに搭載されている游ゴシック体は、仮名が漢字に対してかなり小さめにデザインされています。游ゴシック体ではヒラギノ書体より字間が開いて見えてしまうため、プロポーショナルメトリクスを活用する効果は大きいです。 Webフォントにもプロポーショナルメトリクスは効果的 デバイスフォントだけでなく、Webフォントでもプロポーショナルメトリクスに対応したOpenTypeフォントがたくさんあります。Webフォントに関しては記事『Webフォントサービスの徹底比較！ 和文フォントが使える5つのサービスの利点まとめ』を参考ください。 ▲左側は未指定（和文等幅）の状態でカタカナの開きが大きい。右側はプロポーショナル字形を適用した状態で、カタカナが詰まっている。 対応環境：ほぼすべてのブラウザで利用可能 font-feature-settin
アンカーリンクのジャンプ先の余白を調整する当サイトではWordpressプラグインの「Easy Table of Contents」を使って目次を自動生成し、記事の上部に設置しています。 この目次は記事の見出し（Hタグ）からアンカーリンク（ページ内リンク）を生成するので、クリックすれば見出しまでジャンプすることが出来ます。 ただこのジャンプ後の画面で、見出し上部の余白。つまり画面上部の余白が少し狭いと感じることがありました。 ということでCSSの「scroll-padding」というプロパティをhtml全体に当ててみたところ、想定通りこの余白を広くすることが出来ました。 CSSのscroll-padding:topで余白を調整する「scroll-padding」というプロパティは、要素の周りにスクロール時のパディング（余白）を設定するものです。 初期値はautoとなっており、ブラウザに任さ
先日の記事（2022年、注目しておきたいCSSの新機能のまとめ）の中でもすぐに使えたら便利な機能の一つが、コンテナクエリです。 コンテナクエリがすべてのモダンブラウザで動作するポリフィルがGoogleからリリースされたので、紹介します。 A New Container Query Polyfill That Just Works by Chris Coyier 今まではメディアクエリを使用していましたが、ビューポートベースのメディアクエリでは限界が見えてきました。そこでコンテナクエリの登場です。コンテナクエリは、親コンテナのサイズに応じて要素のスタイルを設定できます。 たとえば、コンポーネントを1カラムに配置する時と2カラムに配置する時、そしてサイドバーに配置する時それぞれに適したスタイルを与えることができます。詳しくは、以前の記事をご覧ください。 CSS コンテナクエリの基礎知識と便利な
コンテナクエリは今までのメディアクエリのスクリーンベースではなく、親コンテナをベースにして子要素のスタイルを定義できます。レイアウトやコンポーネントをはじめ、レスポンシブ対応のフォントサイズにも大活躍する新機能です。 そんなコンテナクエリが安定版のブラウザにサポートされ、ポリフィルも大幅にアップデートされたので、基礎知識、基本的な使い方、便利な新単位、ポリフィルの使い方と注意事項を紹介します。 CSSの新機能でネックになるのが、ブラウザのサポート。しかし、CSSの新機能コンテナクエリは、違います。サポートされていないブラウザ用にポリフィルも同時に開発されており、2年くらい前のブラウザでもサポートされています。 Container queries begin to land in stable browsers while the polyfill gets a big update by
ウェブサイトのフォントは何を指定すればよいのでしょうか？ CSSのfont-familyプロパティーに指定可能なフォントは選択肢が多く、HTMLコーダーなら誰もが一度は迷ったことがあるはずです。 font-familyの組み合わせを紹介している記事は多々あります。しかし、必要のない指定や、考察不足なまま紹介している記事を見かけることは少なくありません。それもそのはず、フォント事情は日々変化するもので、古い情報は役立たないことが多いためです。 本記事ではフォントに関わるここ最近の出来事を取り上げつつ、教訓から学んだ変化に強い「無難」なフォント指定を紹介します。 結論 いきなり結論ですが、以下のフォントの組み合わせがオススメです。CSSのbodyセレクターなどにコピー＆ペーストして利用ください。 body { font-family: "Helvetica Neue", Arial, "Hir
CSS設計で本当に難しいのは「ルールを理解すること」ではなく「ルール通りに自分でコードを書くこと」だと思います。 実際にコードを書いていると「あれ、ここってどうすればいいんだろう？」「こういう場合はどうすべき？」といったことが頻発し、結局よくわからないまま勘でゴリ押すということがよくあります。 本書はそんな人へ向けて、FLOCSSをベースにしつつオリジナル要素を加えてより体系的にまとめた設計「PDFLOCSS（ピーディーフロックス、Page Divided FLOCSS）」を紹介します。 「CSS設計のルールはなんとなくわかるけど、いざ自分でコードを書こうとすると手が止まってしまう」という人に読んでもらいたい一冊です。 （追記：おかげさまでCSS設計のドキュメントとして採用している制作会社様も増えているみたいです！ありがとうございます🙏）
2022年に注目しておきたいCSSの新機能を紹介します。いくつかの機能はすでに1つ以上のブラウザでサポートされており、他のブラウザもそれに続く予定です。 ビューポートではなく親コンテナに応じてスタイルを定義できる「コンテナクエリ」、詳細度とスタイルの順序を明示できる「カスケードレイヤー」、相対色構文が追加された「カラー関数」、Safariの100vhを解決する新しいビューポート単位「svh」など、今すぐにでも使用したい機能ばかりです。 Photo by Jr Korpa on Unsplash CSS in 2022 by Bramus 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 注目の新機能（クロスブラウザでサポート） まだ先の新機能（実験的/シングルブラウザでサポート） 停滞している新機能 Safariは「新し
現在の実装でよく使用されるCSSの機能をはじめ、まもなく使用できるようになる新機能まで、現在とこれからのCSSを紹介します。 CSS3が登場した2015年以降の新機能、2022年これから登場するCSSの新機能、最近のCSSについてWeb制作に携わる人は要チェックです。 What's New Since CSS3 by Chris Coyier 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに CSS3以降の新機能 CSSワーキンググループ これから登場する新機能 はじめに 「CSS3」はCSSにとって大成功でした。たくさんの新機能がリリースされ、素晴らしいものばかりでした。CSSグラデーション、CSSアニメーション、border-radius、box-shadow、transform、などたくさんあります。さらに、CSS
俺流レスポンシブコーディングの覚書。「人には人のレスポンシブ」があるのでこれが正解だってわけではないのですが、レスポンシブコーディングで悩んでいる人にとって参考になる記事になってくれたら嬉しいです。 ブレイクポイントは特定のデバイスの画面サイズを基準にしない 以前アンケートを取った時にデバイスのサイズを意識して決める人が半数以上を占めていた。 アンケート結果を抜きにしても「2021 年のブレイクポイント決定版はこれだ！」的な記事がバズっているのを定期的に目撃し、主流のデバイスのサイズを比較するアプローチがほとんどであるが、僕はデバイスの端末のサイズを基準にブレイクポイントを決めることには否定的である。 主流のデバイスのサイズなんてものは時間が経てば変化する。 昨年 iPhone 12 が発表された時に従来の画面サイズとは違うバリエーションになることが分かるやいなやタイムラインが慌てふためい
コーディングしていると、縦横比(アスペクト比)を保持しながら、レスポンシブ対応させたい場合があります。 昔はpaddingを使ったテクニックで対応していましたが、今はaspect-ratioを使うともっと簡単です。 この記事ではaspect-ratioの使い方を具体例を交えて紹介します。 👇 メンターやってます 👇 模写修行やこのメディアを作ったメンバー中心に、Web制作業界を目指す方のための学習支援サービス 『Hello Mentor』 を運営しています。
Google Fontsは英語フォントだけでなく日本語フォントもあり、すでに使用している人、もしくは使用を検討している人も多いと思います。その際に懸念されるのが、フォントファイルのサイズです。 フォントファイルのサイズを劇的に軽減できる機能があります。 パラメーターで使用する文字のみフォントファイルを読み込め、これによりフォントファイルのサイズを大幅に削減できます。 タイトルや見出しのみにGoogle Fontsを使いたい時にぴったりです。 Google Fonts -Optimizing your font requests Google Chromeのエンジニア マネージャーであるAddy Osmani氏によると、CSSファイルにパラメーターを付けるだけで簡単にできる、とのことです。 日本語フォントにも対応しています！ Tip: Shave up to 90% off the size
こんにちは。ZOZOTOWN部フロントエンドチームの菊地（@hiro0218）です。 2021年3月、ZOZOTOWNは10年ぶりのリニューアルをしました。この記事では、そのリニューアルで再考したCSS設計について紹介します。 背景 今回のリニューアルでは、ウェブとアプリが部分的に共通のデザインになりました。 アプリ ウェブ このデザイン刷新には、CSSの大規模変更が必要です。チーム内で検討を重ね、最終的に、大きく書き換えるのであればコンポーネント駆動開発1ができるようにCSS設計を見直すべきという結論に至りました。 CSS設計で特別に考慮する点 現在、ZOZOTOWNのフロントエンドは、「Classic ASP」から「React」へのリプレイスを進めています。新規開発や変更のタイミングで、Classic ASPに依存した実装をReactへ改修します。 ただ、今回のリニューアルではClas
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
