文章の折り返し指定のCSS最新版 - ICS MEDIA
文章の折り返しはウェブ制作において意外と難しいものです。URLが文章に含まれている場合、URLがレイアウトを突き抜けてしまった、という経験をみなさんはお持ちではないでしょうか？ この記事では、国内のウェブ制作において「開発者が考えることが少なくてよくなる」安全なCSS指定を紹介します。 結論から説明すると、以下の指定を提案します。 body { overflow-wrap: anywhere; /* 収まらない場合に折り返す */ word-break: normal; /* 単語の分割はデフォルトに依存 */ line-break: strict; /* 禁則処理を厳格に適用 */ } この記事では上記の指定にいたった理由と、折り返しの理解について必要なoverflow-wrapとword-breakプロパティを中心に解説します。 overflow-wrap overflow-wrapは
CSSのlight-dark()関数の実践的な使い方、ライトテーマとダークテーマの作成方法
Webサイトをライトテーマとダークテーマ対応にするには、CSSのlight-dark()関数を使用すると今までより簡単に実装できます。現在のところ、サポートブラウザはChrome, Firefoxですが、Safari TPに実装されており、次のバージョンでサポート予定となっています。 CSSのlight-dark()関数の基礎知識と実践的な使い方を紹介します。 CSS color-scheme-dependent colors with light-dark() by Bramus! 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスに基づいて翻訳しています。基づいてというのは、貢献部分に関して同ライセンスも含みます。 はじめに CSSにおけるシステムカラー light-dark()関数の基礎知識 light-dark()関数の使い方 はじめに システムカラーには、現在使用され
CSSでボタンを実装するときに記述しておくと便利なスタイルのまとめ
Webサイトやスマホアプリの実装に、ボタンは欠かせない要素の一つです。そんなボタンの実装に設定しておくと便利なCSSのスタイルを紹介します。 スマホでボタンをタップした際にズームなどの誤動作が起きないようにするCSS、ボタンのテキストが選択されてハイライトにならないようにするCSS、フォーカス時のアウトラインをより見やすくするCSS、ボタンの論理サイズを設定するCSSなど、デフォルトのスタイルとして設定しておくと便利です。 CSS Button Styles You Might Not Know by David Bushell 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに スマホでボタンをタップした際の誤動作を防止 ボタンのテキストの意図しない選択 ファイル選択のボタン ボタンをフォーカス時の視覚的なアウトライン
Modern CSS Solutions
12 Modern CSS One-Line Upgrades Sometimes, improving your application CSS just takes a one-line upgrade or enhancement! Learn about 12 properties to start incorporating into your projects, and enjoy reducing technical debt, removing JavaScript, and scoring easy wins for user experience. How Custom Property Values are Computed Review behaviors to be aware of regarding how the browser computes final
CSSでの実装が大きく変わる！ Scroll-driven Animations スクロールをトリガーにしたアニメーションを実装する方法
まもなくリリースされるChrome 115で実装されるScroll-driven Animationsにより、スクロールをトリガーにしたアニメーションの実装方法が大きく変わります。 スクロールすると要素がアニメーションで表示されたり、スクロール量で変化するインジケーター、背景が変化するパララックスなど、実装がそれなりに手間がかかりましたが、数行のコードで実装できるようになります。スクロールをトリガーにしたアニメーションを実装するこれからの方法を紹介します。 Animate elements on scroll with Scroll-driven animations by Bramus 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスに基づいて翻訳しています。基づいてというのは、貢献部分が同ライセンスも含みます。 はじめに Webのアニメーション、ちょっとだけおさらい アニ
CSSの三角関数を理解しよう！ sin()とcos()でできる表現 - ICS MEDIA
2023年3月にリリースされるChrome 111ではCSSの三角関数がサポートされます。FirefoxやSafariではすでにサポートされている機能のため、2023年3月からは主要なブラウザでCSSの三角関数が使えるようになります。 とはいえ、「CSSで三角関数をどうやって使えばいいの？」「そもそも三角関数で何ができるの？」という方も多いのではないでしょうか。この記事では三角関数のうちサイン関数とコサイン関数の作例を交えながら解説します。 三角関数のおさらい まずはサイン関数とコサイン関数のそれぞれの使い方を少しおさらいしてみましょう。下図は角度をθ、半径をrとした時のx座標とy座標を表したものです。 たとえば角度が60°で半径が200だった場合、CSSのサイン関数とコサイン関数を使うと、x座標はcos(60deg) * 200、y座標はsin(60deg) * 200で求められます。つ
よりよいCSSを書くための、CSS / Sass (SCSS) 30のルールとその理由
Webエンジニアを始めて丸2年が経ちました。 複数プロジェクトを進める中で、CSSコーディングを行うときの「こうしておくと便利」「このほうが管理しやすい」といった知見が溜まってきたのでまとめます。 はじめに 長くなってしまった細かい説明はところどころ折りたたんでいます。概要だけで理解できたら飛ばしていただき、詳しい話が気になったら開いて読んでください。 これらは「自分がよく取り入れている手法」であって、必ずしもどのプロジェクトにも当てはまるものではないと思います。 各項目について、自分がその判断に至った 「理由」 を説明していますので、 理由を読んだ上で自分のプロジェクトに取り入れるか判断いただくと良いと思います。 この記事は、すでにCSSコーディングをしていてアイデアがほしい人に向けた記事で、 CSSをこれから学び始めるような 初学者向けではない ことご了承ください。 一般的と思われるキ
明日から使えるCSS設計【PDFLOCSS】
CSS設計で本当に難しいのは「ルールを理解すること」ではなく「ルール通りに自分でコードを書くこと」だと思います。 実際にコードを書いていると「あれ、ここってどうすればいいんだろう？」「こういう場合はどうすべき？」といったことが頻発し、結局よくわからないまま勘でゴリ押すということがよくあります。 本書はそんな人へ向けて、FLOCSSをベースにしつつオリジナル要素を加えてより体系的にまとめた設計「PDFLOCSS（ピーディーフロックス、Page Divided FLOCSS）」を紹介します。 「CSS設計のルールはなんとなくわかるけど、いざ自分でコードを書こうとすると手が止まってしまう」という人に読んでもらいたい一冊です。 （追記：おかげさまでCSS設計のドキュメントとして採用している制作会社様も増えているみたいです！ありがとうございます🙏）
will-changeで目指す60fpsのぬるぬるCSSアニメーション - Qiita
こんにちは、CSSとVue.jsでアニメーション使いまくりのポートフォリオ作ったり、シューティングゲーム作ったりして遊んでいるゆきです。 今日はCSSアニメーションで無茶しすぎてMacBookがカイロになった反省からの「負荷をかけずにぬるぬるのCSSアニメーションを実現するための試行錯誤」の顛末をまとめます。それでもCSSでアニメーションしたいんだ 今回の目的とサンプルケース この記事では、WebでCSSを使ってゲームやアート的な表現にゴリゴリのアニメーションを使いたい！というケースを想定します。 全体を通してCSSのwill-changeプロパティを使ったGPUレンダリングによる最適化のお話です。will-changeってなに？って方はこの後でてくる参考記事リストを先に見ていただくのが良いと思います。 https://css-anime.firebaseapp.com/ 今回検証するアニ
The New CSS Reset
Skip to the content. The New CSS Reset This new CSS reset is using the new CSS features: The global CSS reset keywords, ‘unset’ and ‘revert’ keywords. The new property of ‘all’ which can reset all properties combined. The :where() pseudo-class to remove specificity. The :not() pseudo-class with multi arguments. What the-new-css-reset is resetting? This CSS reset is built from the understanding we
Web Font のメトリクス上書きによる CLS の改善 | blog.jxck.io
Intro WebFont を読み込む際に、取得完了までのラグを、システムが持つフォールバックフォントで代替する場合がある。 このとき、フォールバックフォントと読み込んだ Web フォントで、高さに関する情報が異なる場合、 Layout Shift が発生してしまう。 これを防ぐ方法として、 CSS からフォントメトリクスの上書きを行う仕様の提案が行われているため、本サイトへの適用を目指し検証を行った。 なお、この仕様は Layout Shift ではなく、単純にテキストレイアウトスタイル用途での利用も考えられるが、そこはスコープ外としている。 Font metrics override これらの値を @font-face で指定する。 @font-face { font-family: "helvetica-override"; src: local("Helvetica"); asce
CSS size-adjust for @font-face | Articles | web.dev
CSS size-adjust for @font-face Stay organized with collections Save and categorize content based on your preferences. As a web font loads, you can now adjust its scale, to normalize the document font sizes and prevent layout shift when switching between fonts Consider the following demo where the font-size is a consistent 64px, and the only difference between each of these headers is the font-fami
色々書き比べた結果Tailwind CSSにしたという話 - Qiita
Twitterでこういう発言を見かけまして Tailwind CSSはデザインに凝ってるサイトでは使えない こだわりが無い場合に向いている は？何いってんの？ って思ったので、自分がいろいろ試した結果、Tailwind CSSを選んだ話を書きます。 はじめに 以前、Tailwind CSSは結構いいぞって話を書いたんですが、この記事の立ち位置的にはその続きみたいなものなので、以下の記事を始めにご参照いただけるとより分かりやすいかもしれないです。 この記事では、前回記事を書いた後、個人仕事でWebサイトをGatsbyで作り、その中で、どうやってCSSを書くのが良いのか模索した結果、自分はこれを選んだっていうのを、同じUIを色々な方法で書き比べたコードを並べつつ、どうのこうの筆者の考えを述べていきます。 その仕事はほとんど筆者が「まかせてくださいよーいい感じに作りますよー。デザインそろってない
私のゴールは世界中の言語でCSSを使えるようにすること EPUB3で縦書きを実現した、fantasai（エリカ・エテマッド）に聞く
はじめに この原稿は2013年に8割ほど書いたまま放置していたものを、Advanced Publishing Laboratory（APL）の「fantasaiの業績を日本でも知ってもらいたい」という意志に促され、サルベージして完成させたものです。したがって文中の「現在」は2013年中頃であることをお断りします。 原稿を放置したまま今日に至ったのは、私の怠慢以外に理由はありません。取材を受けてくださったfantasai、通訳をはじめ、さまざまな便宜を図ってくださった村上真雄・由美ご夫妻には、大変なご迷惑をおかけしたことを改めて深くお詫び致します。 このような中途半端な原稿ですが、多少なりとも読めるものになっているとすれば、それはfantasaiの努力や達成が本物だったからではないでしょうか。そのことをお伝えできれば良いのですが。（2018年9月5日 筆者識） ▼EPUB 3における陰の
より良いタイポグラフィのための知られざるCSS
CSS組版 Vivliostyle ユーザーと開発者の集い 2020秋 https://vivliostyle.connpass.com/event/189940/
Webで縦書きなどを実現する「CSS Writing Modes Level 3」、ついにW3Cの「勧告」に
Webで縦書きなどを実現する「CSS Writing Modes Level 3」、ついにW3Cの「勧告」に HTMLで構造化された文書に対してスタイルを与える「Cascading Style Sheet」（CSS）は「CSS 2」から、directionプロパティでテキストの表示方向を左から右か、右から左かを指定可能でした。 今回勧告になった「CSS Writing Modes Level 3」では、従来の横書きの左から右への記述（英語やヒンディ語など）、横書きの右から左への記述（ヘブライ語やアラビア語など）に加えて、日本語やモンゴル語などで使われるような縦書きなどを指定することができます。 また、縦書きでは、右から左への行送り（中国語、日本語、韓国語など）と、左から右への行送り（モンゴル語など）も指定可能。 これらは同一ページ上で混在でき、さらに双方向混在の記述における分離、字形の方向
メルセデス・ベンツ日本 オフィシャルサイト
メルセデス・ベンツ 公式サイト。メルセデス各車種の動画映像やカタログ詳細情報、正規販売店・サーティファイドカー（認定中古車）の検索、試乗車検索・試乗リクエスト・カタログの詳細・見積シミュレーション、イベントやプレスリリースなどのニュース、ご購入時のサポートや3年間無料保証のメルセデスケア、ファイナンスプランのご紹介など、メルセデス車に関するさまざまな情報をご紹介しています。
CSSで実装した斜めのラインがギザギザになってしまうのを回避し、滑らかなラインで実装するテクニック
CSSで斜めのラインを実装する時は、ちょっとした工夫が必要です。 画像やSVGでなく、CSSで実装すると角度やカラーを変更できる利点がありますが、斜めのラインがジャギってギザギザになってしまうことがあります。 CSSグラデーションで実装した斜めのラインがギザギザになってしまうのを回避し、すっきりとした滑らかなラインで実装するテクニックを紹介します。 Avoiding jagged edges on gradients. by Mandy Michael 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 斜めのラインがギザギザになってしまうのを回避する方法 よく見かけるデザインの一つに、コンテナの下部に斜めのカラーブロックを配置したものがあります。下記の画像のようなデザインです。 斜めのカラーブロック このデザインがたまたま、わたし
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
2023年モダンCSSの最新トレンド
cyanharlow - Overview
