昨今のフロントエンド向けUIライブラリでは、コンポーネントの設計が重要です。この記事では、コンポーネントのスタイリング、その中でもとくにコンポーネントの大きさに関わるコンポーネント設計について考えます。 私の考える結論は、むやみに大きさを指定できるpropを生やさずに、CSSで外から大きさを制御できるようにしたほうがいいです。 コンポーネントの大きさを制御したい UIの一部分を再利用可能なコンポーネントとする場合、同じコンポーネントがさまざまな場面で使えるのが望ましいでしょう。コンポーネントが提供する機能にもよりますが、場面に応じてさまざまな大きさでコンポーネントを使用できたほうがよいこともあります。 具体例として、このようなコンポーネントを考えてみましょう。例はReactで示しますが、この記事の内容はReactとは関係ありません。 const Card: React.FC<React.P
昨今のフロントエンド向けUIライブラリでは、コンポーネントの設計が重要です。この記事では、コンポーネントのスタイリング、その中でもとくにコンポーネントの大きさに関わるコンポーネント設計について考えます。 私の考える結論は、むやみに大きさを指定できるpropを生やさずに、CSSで外から大きさを制御できるようにしたほうがいいです。 コンポーネントの大きさを制御したい UIの一部分を再利用可能なコンポーネントとする場合、同じコンポーネントがさまざまな場面で使えるのが望ましいでしょう。コンポーネントが提供する機能にもよりますが、場面に応じてさまざまな大きさでコンポーネントを使用できたほうがよいこともあります。 具体例として、このようなコンポーネントを考えてみましょう。例はReactで示しますが、この記事の内容はReactとは関係ありません。 const Card: React.FC<React.P
はじめに この記事は『CSS設計完全ガイド』という書籍の内容を元に、実際のホームページを見ながらCSS設計にふれてみよう!という内容になっております。 前回は、コンポーネントがmarginなどのレイアウトに関わるスタイルを持ってしまうと使いまわすことが難しくなるため、マルチクラスで対応するという「BEM」の「Mix」という書き方をご紹介しました。 今回はそのマルチクラスにおけるもう1つのメリット「詳細度を一定に保つ」というテーマで、そもそも詳細度ってなに?というお話からしていきたいと思います。 前回の振り返り 最初に軽く前回のおさらいをしておきます。 メディアが複数並んでいるレイアウトで、そのメディアコンポーネント自体にmargin-bottomを指定せず、.service-mediaというクラスを付与して、それにmarginを担当させよう、というお話でした。 詳細度について マルチクラス
How to use container queries now Stay organized with collections Save and categorize content based on your preferences. Recently, Chris Coyier wrote a blog post posing the question: Now that container queries are supported in all browser engines, why aren't more developers using them? Chris's post lists a number of potential reasons (for example, lack of awareness, old habits die hard), but there'
Webサイト制作において面倒で時間のかかる作業を効率化したい方へ。 この記事は、CSSコードを手軽に生成できる便利ツールをまとめた最新版リストで、Web制作を快適、楽にしてくれるツール68個が揃っています。 以前CSS便利ツールを集めた厳選リストの公開が2021年。あれからおよそ3年のあいだに話題となったツールを中心に紹介しています。 日頃のワークフローに活用して、ストレスのないクリエイティブな制作ライフを実現しましょう。 Web制作の面倒におさらば、CSS時短ツール厳選リスト CSS pattern backgrounds ジグザグやサークル円などシンプルな幾何学模様をつかったCSSパターンをコピペで利用できるオンラインツール。 CSS Polka Dot Generator ポルカドット柄を作成、カスタマイズできるCSSツールで、影を設定するとよりレトロな印象に仕上がります。 CSS
KDDIアジャイル開発センターのpiyonakajimaです。 突然ですが、あなたは登壇スライドの作成にどれぐらいの時間をかけていますか? 6/21-22に開催されたScrum Fest Osaka 2024に登壇した際、Markdown+生成AIを活用して登壇スライドを作成しました。その際、45分の登壇資料作成を75%効率化(自分比)できました。 普段からMarkdownで資料を作成している方からすると、これまで時間かけすぎやろ、というツッコミが聞こえてきそうですが、登壇資料の作成時間に悩まれる方は沢山いらっしゃるのではないかと思います。今回はこの時に実施した工夫をお話します。 以下がMarkdown(Marp)と生成AIを使って執筆した45分の登壇資料です。一部PowerPointで作図した過去資料から流用しています。 Marpでは、たとえば以下のようなmarkdownを書くと、 --
KDDIアジャイル開発センターのpiyonakajimaです。 突然ですが、あなたは登壇スライドの作成にどれぐらいの時間をかけていますか? 6/21-22に開催されたScrum Fest Osaka 2024に登壇した際、Markdown+生成AIを活用して登壇スライドを作成しました。その際、45分の登壇資料作成を75%効率化(自分比)できました。 普段からMarkdownで資料を作成している方からすると、これまで時間かけすぎやろ、というツッコミが聞こえてきそうですが、登壇資料の作成時間に悩まれる方は沢山いらっしゃるのではないかと思います。今回はこの時に実施した工夫をお話します。 以下がMarkdown(Marp)と生成AIを使って執筆した45分の登壇資料です。一部PowerPointで作図した過去資料から流用しています。 Marpでは、たとえば以下のようなmarkdownを書くと、 --
はじめに 意外と知らなかったCSSプロパティを3つ紹介します。 1. currentColor currentColor(CSS:カスケーディングスタイルシート) 特定の要素に指定されている色を参照するCSSプロパティです。 要素内の任意のプロパティで使用できますが、特にボーダーや背景などの色を親要素の色と同じにしたい場合に便利です。 currentColorの利点は、色の変更が親要素のcolorプロパティによって自動的に反映されるため、親要素のテキスト色を変更するとcurrentColorを使用している要素の色も新しい色に変更されることです。 使用例 .parent { color: red; border: 1px solid currentColor; /* テキストの色と同じ色(red) */ .child { color: currentColor; /* 親のテキストの色と同じ
anond:20240625171138 2009年11月のいわいる事業仕分けから、もう13年も経った。「2位じゃダメなんですか?」の質問の発言で非常に曰く付きとなったアレだ。 ところが最近、13年も経ってまだなおナゼ「2位」という言葉が出てきたかが理解できてない人がかなりいる事を知った。 それどころか、事業仕分けによって日本のHPC分野が衰退したなどという認識まで飛び出す始末である。 ただ、資料もなしにどこが変だと言っても仕方あるまい。何がどうして「2位」なのか、少し語ろうじゃないか。 アーキテクチャ初期の次世代スーパーコンピュータ (この時点では名前が付いていなかったが、以下わかりやすく京と呼ぶ) 計画 は、補助金を投入してのHPC産業育成に目を向けられていた[1]。世界一の性能を出していた海洋研究開発機構の地球シミュレータが、NECのSXシリーズをベースにしたベクトル型であり、ベクト
23 CSS features you should knowの動画でCSSの最近のテクニックが紹介されており、その中から特に注目すべき面白いテクニックを紹介します。 たった1行のCSSで、背景画像とテキストの間にグラデーションのオーバーレイを要素全体に適用するテクニックです。画像の一部を暗くしてその上にテキストを配置する際に非常に便利です。 実際の動作は、デモページでご覧ください。 See the Pen Gradient Overlay with border-image by coliss (@coliss) on CodePen. HTMLはシンプルです。 テキストのh1要素と背景を設定したdiv要素があるだけです。
コンテナークエリー(@container)は、CSSの新しいアットルールです。従来のメディアクエリー(@media)とは異なる手法で、レスポンシブウェブデザインができます。メディアクエリーはビューポート(ブラウザ幅)を条件にスタイルを適用できるのに対して、コンテナークエリーは要素の幅を条件にスタイルを適用できます。 コンテナークエリーを利用することで、再利用性の高いパーツを実装できます。とくに、カラム数が多いレイアウトや複雑な横並びの要素において、コンテナークエリーは有効な機能です。 この記事では、簡単な作例と使用上の注意点を紹介します。 コンテナークエリーの使い方 作例の紹介の前に、コンテナークエリーの使い方を簡単に説明します。 コンテナークエリーを使用するためには、使用したい親の要素にcontainer-typeプロパティを設定する必要があります。以下の2通りの指定ができます。 con
こんにちは、ちょっと株式会社デザイナーのモです。 挨拶から間髪入れずで申し訳ないのですが、まずはこちらをご覧ください。 何の変哲もないテキストとアイコンで構成されたボタンです。 今回はこちらのボタンに物申したく筆を執らせていただきました。思うところがあるんだよ今の私には。 ずれている、Noto Sans JPという訳で早速本題に入りますが、単刀直入に言ってこのボタンずれてるんですよね。「暑いね」って言ったら「水飲めば?」って言ってくる人くらいずれてる。私怨はさておき具体的に表すとテキストとアイコンが上下にガクンとずれているって訳です。 論に拍車をかけるためにボタンに分割線を引いてみました。 アイコンは上下真っ二つだがテキストはどうも下に寄っていますぞなぜずれる、Noto Sans JPこれが目の錯覚…なら良かったんですが(良くない)実際にずれていて、ではなぜそんなことになっちゃっているのか
The CSS WG resolved to add if() to CSS, but that won’t be in browsers for a while. What are our options in the meantime? A couple days ago, I posted about the recent CSS WG resolution to add an if() function to CSS. Great as it may be, this is still a long way off, two years if everything goes super smoothly, more if not. So what can you do when you need conditionals right now? You may be pleased
Last week, the CSS WG resolved to add an inline if() to CSS. But what does that mean, and why is it exciting? Last week, we had a CSS WG face-to-face meeting in A Coruña, Spain. There is one resolution from that meeting that I’m particularly excited about: the consensus to add an inline if() to CSS. While I was not the first to propose an inline conditional syntax, I did try and scope down the var
CSS設計を学びたい! どうもエンジニアになって数ヶ月のひよっこすらなっていない卵エンジニアです!🐣 この記事を見ているのはmarginなどのプロパティやレスポンシブ、flexを学んだばかりという方が意外と悩みがちなクラス名をどうつけるかについて記事にしました!参考にしたのは『技術評論社 CSS設計完全ガイド 半田淳志 第5版』です。有名な本なだけあってわかりやすく、分厚い本でしたがスラスラ読めました。 まず、クラス名をつける前に、みなさんはWebサイトを制作するときにどんなことを意識していますか?クラス名をつける前に、制作するWebサイトをどれだけ細分化と抽象化して見ることが出来ているかが大切です。では細分化と抽象化とは何か?それはWebサイトを見たときに、ブロックやパーツごとに分けることを細分化、デザインが共通してるパーツやブロックを見つけることを抽象化と言います。 細分化 細分化を
My name is Cory Rylan, Google Developer Expert, Speaker, Software Developer. Building Design Systems and Web Components. Follow @coryrylan With the introduction of the CSS Anchor Position API in Chrome 125, it's never been easier to position an element relative to another element. This is a great way to manage complex positioning use cases like popovers and tooltips. However, CSS Anchor Positition
ちょっと間が空いて、亀リプっぽくなっちゃいましたけど、HTML のルート要素では color と background-color をセットで指定すべきというお話について。 昔からブラウザには配色設定があり、テキスト色と背景色をユーザーが任意に指定できます。 ……という話は Web アクセシビリティとフェイルセーフの記事に以前書いたのでその詳細は省略しますが、WCAG 2.2 達成方法集の F24(W3C) において達成基準 1.4.3(レベルAA)などの失敗事例として掲載されているにも関わらず、このことは世間ではなぜか認知が薄いようです。 認知も薄いというか、私も言われるまで気づかなかったあたり、まあそういうことなんじゃないかなと*1。……という話だけはあまりにもアレなので、ざっくりとですが、ほんのちょっと深掘りしてみましょう。 WCAG 2.1 達成方法集のF24のタイトルは、「達成基
この記事の概要 デザイントークンとしてタイポグラフィスケールを定義する手法はかなり市民権を得てきました。 しかし、あくまでそれぞれのトークンは固定値であることが多く、Web デザインで言えばデバイスサイズごとの最適化はあまりなされていないように思います。 Figma の variables を使いビジュアルとして整理し、その後 CSS に移植するまでの流れを記事にしてみます。 Figma での定義 タイポグラフィスケール(グローバル) あくまで 1 つの基準ですが、Lighthouse にて「フォントサイズが 12px 以下だと読みづらい」といったメッセージが出ます。 そのため 12px を下限とし、スケールをつくってみたいと思います。 今回はこの式を用いて、n = 3 からスタートします。 すると、次のような結果が得られます。 12 13 15 17 19 21 24 27 30 34
There are a number of imperative methods for asking for permission to use powerful features like location access in web apps. These methods come with a number of challenges, which is why the Chrome permissions team is experimenting with a new declarative method: a dedicated HTML <permission> element. This element is in origin trial from Chrome 126, and ultimately we hope to standardize it. Imperat
フォントサイズをレスポンシブ対応にするときに、最近よく使用されている実装方法はclamp()関数による流体タイポグラフィです。CSSのclamp()関数を使用するとフォントサイズの最小値と最大値を定義してその間の値を流動的にすることができ、デバイスのスクリーンサイズが増えた現在に欠かせないテクニックです。 CSSでレスポンシブ対応のフォントサイズを超簡単に定義できるオンラインツールを紹介します。 Type Fluidity -GitHub Type Fluidityの特徴 Type Fluidityの使い方 Type Fluidityの特徴 流体タイポグラフィ(Fluid Typography)は、フォントサイズをレスポンシブ対応にする最新テクニックです。さまざまなスクリーンサイズに応じて固定値を定義する代わりに、CSSで単一の流体値を定義して、フォントの最小値と最大値の中でスクリーンサイ
シンプルなHTMLを使用して、レスポンシブ対応、ライト・ダークモード対応のモダンなWebページを簡単に作成できる超軽量CSSライブラリを紹介します。 シンプルなWebページやポートフォリオ、プロトタイプなどをすばやく作成したい時に便利で、ベースにしてリセットCSSの拡張版としても利用できます。 matcha.css matcha.css -GitHub matcha.cssの特徴 matcha.cssの使い方 matcha.cssのデモ matcha.cssの特徴 matcha.cssは、classレスでHTMLのあらゆる要素にシンプルで読みやすいスタイルを設定するように設計されたCSSライブラリです。ライト・ダークモード対応で、テキストはユーザー設定が尊重された適切なスペースで配置され、ナビゲーションやフォームなども非常に見栄えがします。 matcha.css HTMLで作成された静的ペ
2024年6月11日リリースのChrome126から、View Transitions APIがパワーアップし、別ページへの遷移でも使うことができるようになったので紹介したいと思います。 View Transitions APIとは View Transitions APIは、画面遷移をなめらかに行うことができる機能です。 この機能を使うと、以下の動画で紹介されているように、ページ遷移にアニメーションをつけることができます。 まずはView Transitions APIの特徴から紹介したいと思います。 特徴1:異なるDOM要素間でアニメーションできる アニメーション前後のDOM構造が異なっていても、アニメーションを行うことが可能です。 例えば、<div>がアニメーションで変化しつつ<img>要素になる、といったアニメーションが可能です。 特徴2:アニメーションがCSSで自由自在 アニメー
The times for CSS have probably never been more exciting than today. In this quick read, we’ve got some useful CSS tips and techniques for you that you can apply to your work right away. Let’s dive deeper into self-modifying CSS variables, hanging punctuation, and more. If you’ve been in the web development game for longer, you might recall the days when CSS was utterly confusing and you had to co
CapUnitA look at how I solved a design problem with CSS cap unit. Introduction While I was working on a recent article on the gap property, I needed to place a box between two words and keep it aligned. I thought about a way to size the box to be equal to the capital letter height. After some research, I found the cap unit and it worked as expected. In this article, I will demonstrate the problem
ここ数年、CSSの進化はとても早いと感じている人は少なくないと思います。当ブログでもCSSの新機能をたくさん紹介してきましたが、一昔前にはこんなことができるようになるとは驚くばかりです。 そんなCSSの新機能に対して、どのように向き合えばよいのか、実際にどのように使用すればよいのか、その手引きとなる記事を紹介します。 元記事の「Old Dogs, new CSS Tricks」は、わたし達は老犬であり、老犬のような年配者や頭の固い人には新しいことを学ぶのは難しい、というニュアンスです。 Old Dogs, new CSS Tricks by Max Böck 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 新機能による疲れ サポートを言い訳にする 目に見えない改善 実際の使用例とデザイントレンド 習慣を断ち切る 確立さ
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く