UIデザインで中央配置がずれてしまう理由と解決方法
UIデザインには、至る所に中央揃えが使用されます。 しかし、アイコンとテキストが美しく揃わない、テキストがボタンの中央からずれている、そんなことはありませんか？ UIデザインで中央配置がずれてしまうときの理由、実装時にデベロッパーができること、デザイナーができること、数字的そして視覚的な調整方法などを紹介します。すぐに実装で試したくなることばかりです。 Hardest Problem in Computer Science: Centering Things by Niki Tonsky 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに フォントにおける中央揃え line-heightにおける中央揃え アイコンにおける中央揃え アイコンフォントにおける中央揃え 中央配置がずれているのは、スキルの問題 水平方向の中央揃え
line-heightのハーフ・レディングを打ち消す`calc((1em - 1lh) / 2)`をCSS変数に定義しておくとよい – TAKLOG
lhという単位に見慣れない方もいるかと思われますが、これは現在のline-heightと同じ長さを表す新しく登場した単位です。この例ではline-heightはフォントサイズの1.5倍なので、もし1remが16pxであれば1lhは24pxとなります。 この場合、行の高さと文字の高さの負の差は1em - 1lh、つまり16px - 24pxで-8pxです。それを片方の値を算出するために2で割ると-4pxになります。したがって、margin-block: calc((1em - 1lh) / 2)は、書式のブロック方向（横書き時：上下）にそれぞれハーフ・レディングの大きさ（今回では4px）分のネガティブマージンを設定するということになります。 従来の上下の余白を打ち消す方法との比較lhが登場するまではSassの@mixinなどを使用して以下のような関数を定義し、ハーフ・レディングを打ち消す方法
CSSはどんどん進化している！ マグネットのようにくっつくエフェクトを実装するテクニック -CSS Anchor Positioning
ナビゲーションのアイテムをホバーした時にマグネットのようにくっついてスライドさせるエフェクトをCSSで実装するテクニックを紹介します。 これまでは、JavaScriptがないと実装できないエフェクトでした。レスポンシブにも完全対応、アイテムが二段・三段と複数になっても、水平・垂直になってもエフェクトは追従します。 Anchor Magnet Slide Menu 実際の動作は、デモページでお楽しみください。 右上の矢印アイコンをクリックすると、アイテムの並びが垂直・水平になります。また、右下のアイコンをクリックすると、ダーク・ライトモードになります。 ※CSSのみで動作するのは、Chrome 125+です。それ以外のブラウザはポリフィルが使用されています。 See the Pen Anchor Magnet Slide Menu by coliss (@coliss) on CodePen
ウェブの最新情報 | Blog | web.dev
Google I/O で、昨年の I/O での発表以降、ベースラインがどのように進化しているかについてニュースを共有しました。ウェブ プラットフォーム ダッシュボード、RUM Archive との統合、RUMvision との今後の統合についても発表しました。この投稿では、講演で取り上げたすべてのリソースを 1 か所にまとめます。 ウェブ プラットフォーム ダッシュボードは、ウェブ プラットフォーム全体と個々の機能の相互運用性の過程を確認するための新しい方法です。これにより、ベースラインに含まれるようになります。詳細については、ウェブ プラットフォーム ダッシュボードの発表をご覧ください。 Baseline を日常的に使用するツールと統合することは、このプロジェクトのビジョンの一つでした。Google は、ユーザーがブラウザの互換性への対応について、あまり時間をかけて考える必要がないように
new.css
Write modern websites using only HTML. This site is made from vanilla HTML and the default new.css theme. View Source new.css is a classless CSS framework to write modern websites using only HTML. It's ~4.5kb. It's perfect for- A dead-simple blog Collecting your most used links Making a simple "about me" site Rendering markdown-generated HTML The web was made for semantic HTML—let's start using it
令和のHTML / CSS / JavaScriptの書き方50選
Web制作の技術は日々進化しており、会社やプロジェクトによっては昨今の環境に適さない書き方をしているケースも時折見受けられます。 そこで今回は「2024年のWeb制作ではこのようにコードを書いてほしい！」という内容をまとめました。 質より量で、まずは「こんな書き方があるんだ」をこの記事で伝えたかったので、コードの詳細はあまり解説していません。なので、具体的な仕様などを確認したい方は参考記事を読んだりご自身で調べていただけると幸いです。 1. HTML 画像周りはサイトパフォーマンスに直結するので、まずはそこだけでも取り入れていただきたいです。また、コアウェブバイタルやアクセシビリティも併せて理解しておきたい内容です。 Lazy loading <img>にloading="lazy"属性を付けると画像が遅延読み込みになり、サイトの読み込み時間が早くなります。
OBSのブラウザソースで動くものを作るあなたへ
MacOSのみ一部バージョンが異なるのは26.1.1リリースのタイミングでブラウザソースがクラッシュする問題が発生し、hotfixとして26.1.2リリースのタイミングでMac版のみアップデートがなされたためです。 このようにバージョンアップのタイミングはまちまちで、XSplitに関しては最近までChrome 68系、OBSについても最新版の30.xでもChrome 103系と執筆現在(2024/04/22)での最新バージョンであるChrome 124から21バージョン遅れをとっている状況です。 これらのアップデートが進まないことの背景には、OBSがCEF経由でページの表示をテクスチャとして使用するためにテクスチャ共有を利用しながら、ゲームなどの他のソフトウェアやキャプチャを使用するためにもテクスチャ共有を利用していることと、CEFがOffscreen Rendering(OSR)時にハー
Panda CSS - The Origin Story
Building Panda CSS was one of the most inspiring moments of my career; it reminded me of the period before launching Chakra UI. I knew it would be very "Node" heavy, and I needed to learn more about Abstract Syntax Trees (ASTs). I was familiar with using basic modules like fs, path, and small bits of express to build APIs, but that was about it. Creating a CSS framework that delivers a similar DX
文章の折り返し指定の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の知っておくと便利な実装テクニック！ 相対カラー構文を使用して、1つのカラーに対して濃く薄くを簡単に設定できます
異なるカラーを濃くしたり薄くしたりするとき、個別にカラーを設定してもできますが、CSSの相対カラー構文（color: rgb(from green r g b);）を使用すると簡単に実装できます。 下記はそれぞれ元のカラーに対して相対カラー構文1つでそのカラーを濃くしたり薄くしたりしています。1つのカラーに対して複数の濃さが必要な場合に便利です。 CSSの相対カラー構文とは CSSの相対カラー構文のデモ CSSの相対カラー構文とは CSSの相対カラー（CSS Relative colors）構文を使用すると、他のカラーのパラメータを変更してカラーを定義できます。相対カラー構文は設定した色を相対色に変換します。変換には、fromキーワードを使用します。ブラウザはベースのカラーを変換して分解し、新しいカラーの定義で使用する変数として使用できます。
ついにChromeで使えるようになったCSSの便利機能！ light-dark()関数、field-sizingプロパティ、句読点括弧のカーニングができるtext-spacing-trimプロパティ
今回のアップデートでは、かなり便利なCSSのプロパティが追加されました。 ライトモードとダークモードのスタイルを簡単に定義できるlight-dark()カラー関数、垂直方向の中央に配置するalign-contentプロパティ、フォームのサイズを入力された文字量に合わせて自動変更するfield-sizingプロパティ、CSSで句読点括弧のカーニングができるtext-spacing-trimプロパティ、これらがブラウザにサポートされるのを待っていた人も多いと思います。 Chrome 123 beta New in Chrome 123 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスに基づいて翻訳しています。基づいてというのは、貢献部分に関して同ライセンスも含みます。 はじめに CSSのlight-dark()カラー関数 CSSのdisplay-modeでpicture-in-p
Yu Gothic UIに text-spacing-trim を適用するとバグる
以下のツイートを見て、自分の環境でも再現したので気になって調べてみた。 現象 text-spacing-trim プロパティを Yu Gothic UI のテキストに適用すると、一部の括弧類が重なってしまう。これは値に space-all を設定すると解消される。 halt と hmtx を見る Windows に標準搭載される Yu Gothic UI や游ゴシックには、GPOS テーブルに halt 機能タグが含まれている。 halt 機能タグの正式名称は「字幅半角メトリクス」であり、全角の約物を半角として扱う際などに位置を補正する役割を持つ。text-spacing-trim プロパティの実装においても、この halt の値を見て文字詰めを決定している。 TTX（fontTools が提供する解析ツール）を用いて、Yu Gothic UI／游ゴシック の halt と hmtx（水平
それでも私が<wbr>でなくinline-blockで改行調整をする、たった1つの理由
inline-block を使う理由、それは 入れ子構造を作れることにより、改行位置の優先順位をつけられるから！ 詳しくは以降で説明します。 （前提）そもそも改行調整ってなんの話？ このタイトルを見て記事を開いた方であれば知っていると思いますが、一応説明です。 スペースで単語が区切られる欧文とは違い、日本語は単語の区切りがないので、改行すべき位置を機械的に判断できず、不自然な位置で改行されてしまうことがあります。そこで、見た目を整えるため、改行すべき位置を指定するための手法が必要になります。 他に詳しい記事がいくつもありますので、詳細はそちらを参照してください。 代表的な改行調整の手法 <wbr> 要素 <wbr>要素は、改行してよい位置を表す要素です。 親要素に対して word-break: keep-all; を指定して基本的には改行されないようにすることで、<wbr>要素がある位置で
How To Center a Div
IntroductionFor a long time, centering an element within its parent was a surprisingly tricky thing to do. As CSS has evolved, we've been granted more and more tools we can use to solve this problem. These days, we're spoiled for choice! I decided to create this tutorial to help you understand the trade-offs between different approaches, and to give you an arsenal of strategies you can use, to han
previs: 面倒なマークアップは AI にやらせる
自分はフロントエンドのロジックを考えるのは得意なんですが、CSS は苦手です。 なので 自分は AI にコード変更を依頼して実行結果を目視でプレビューしつつ、その生成結果を受けいれるかどうかの判断だけすればよくね？と考えて、それを CLIとして実装してみました。 ボタンの色を書き換えるという簡単な例ですが、こんな感じで動きます。 主に React Component の修正をターゲットにしていますが、class(Name) を書き換えることを優先するプロンプトを与えているので、ロジックを保ちつつ、見た目を綺麗にするためのツールになっています。 実装した背景 vscode ターミナル上で画像を表示できる OpenAI API はgpt-4-vision-preview のモデルで画像をアップロードして認識させることができる これらを使って、vscode terminal で実行することを前提
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
HTMLタグにデフォルトスタイルを付けるCSSライブラリ
GitHub - propjockey/css-sweeper: MineSweeper implemented in CSS + HTML using the Space Toggle trick (no JavaScript!)
MistCSS
あなたが教わってるそのCSSテクニックはもう古い ｜ TAKLOG
CSS で絶対に最前面に表示したい要素には z-index:calc(infinity) を指定する
