結論 半角スペースを半角スペースとして表示するにはwhite-space: pre;を使います。 preはおそらくpre要素のpreですね。 white-spaceはCSSプロパティです。 つまり、表示したいスペース入りのテキストを含む要素のCSSルールとしてwhite-space: pre;を指定します。 例

Xの初学者のポストにて古の手法を教わっている方をよく見かけるので、2024年現在そのCSSテクニックはもう古いってものをいくつか列挙しました。 ブロックのセンタリングに margin を使うなら margin-inline:auto を使いなさいmarginを使ってブロックのセンタリングを行う際によく教わるのはmargin:0 autoあるいはmargin:autoでしょう。

A simple online pattern generator to create repeatable SVG patterns. Perfect for website backgrounds, apparel, branding, packaging design and more.

CSS Background Patterns is fun little free tool that lets you create cool CSS patterns for your website background. We've curated and parameterized this collection of pure CSS patterns to help you generate & customize the most cool CSS seamless patterns around the web. The collection is being updated regurarly! Patterns are everywhere! From your website to your favorite book cover. There're severa

ウェブサイト制作時。初心者のかたにありがちですが、「知らないうちに横スクロールバーが発生したけど消し方がわからない！」という問題があります。 そんな意図しない横スクロールが発生しているとき、問題となっている要素を一瞬で特定するテクニックを紹介します。 「CSSを使う方法」と「JavaScriptを使う方法」の2種類があります。 「JavaScriptを使う方法」は具体的にはブラウザのデベロッパーツールのConsoleを使う方法になります。 問題の原因と解決方法は？ そもそもブラウザで意図していない横スクロールが発生するのは、CSSで横幅の計算を間違えて表示領域を超えてしまうことが原因です。 多くはwidthをpxで指定していたり、marginとpaddingの兼ね合い、table要素の横幅問題のいずれかでしょう。 各要素のアウトラインを視覚的にわかりやすく表示させれば問題となっている要素を

CSSの:has()疑似クラスは便利そうだけどブラウザのサポートがまだ、と見送っていた人に朗報です。12/19にリリースされたFirefox 121（リリース情報）でサポートされ、これで:has()疑似クラスがすべてのブラウザにサポートされました。 そんな:has()疑似クラスの便利な使い方を紹介します。 :has()疑似クラスのサポート状況 ※まだFirefox 121の分がアップデートされていないようです。 Chrome, Edgeは105から、Safariは15.4からサポートされているので、来年は:has()疑似クラスを使用する機会も増えるでしょう。 また、12/20にアップデートされたTailwind CSS v3.4（リリース情報）でも:has()疑似クラスがサポートされました。 :has()疑似クラスの基礎知識 CSSの:has()疑似クラスとは、指定した要素がある場合にのみ

2023年も終わりに近づき、この1年間に収集したツールを振り返りながら、Web制作に役立つお気に入りを見つけてみましょう。 素晴らしい新ツールや素材がたくさんリリースされ、選定にはたっぷり時間がかかりましたが、カテゴリ別に幅広くセレクションできました。 本当に役立つかどうかだけを考え、「これ、神ツール。」と思えるものをピックアップ。 話題の的だったAIをうまく活用すれば、ワークフローを格段にスピードアップさせ、面倒な作業もストレスなくこなすことができます。 この記事では、そんなあなたの役に立つ2023年公開のWebデザイン制作ツールや素材をまとめてご紹介します。 整理したカテゴリは以下の通り。

CSSのこの機能を待っていた人も多いと思います！ CSSで、句読点括弧のカーニングが自動でできたり、フレーズの途中で改行されないようにしたり、日本語と英語が混在したテキストでスペーシングが自動調整されたり、10px以下でも指定サイズ通りに表示されたりなど、日本語が読みやすくなる最近サポートされた・近日サポートされるCSSの機能を紹介します。 Introducing four new international features in CSS by Jack J 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスに基づいて翻訳しています。基づいてというのは、貢献部分に関して同ライセンスも含みます。 はじめに word-break: auto-phrase;によるフレーズで自動改行 text-autospaceによる文字間のスペーシング text-spacing-trimによる句読

Goodpatchエンジニアの池澤です。デザインツール「Figma」のスタイルや値を、テキストエディタ「VS Code」上で閲覧できる「Figma for VS Code」機能拡張が2023年6月よりFigma公式から提供されています。 この記事ではその「Figma for VS Code」について、実際に試して感じたことをまとめてみました。 ※ Figma Dev ModeやFigma for VS Codeはまだベータ版で動作保証されておりません。また本記事の内容は個人が趣味で検証したことをご理解の上、自己責任にてご利用ください。 Figma for VS Codeとは 主な使い方 使用時のワンポイント Point1： Figmaのトークンの名前と値が確認できる Point2： FigmaのSectionやReady for devマークの有無はあまり気にしなくて良い Point3：

カードやパネルの外側と内側に角丸を使用したときに、なんだかバランスが悪いなと思ったことはありませんか？ 角丸を二重にするときに外側の角丸と内側の角丸の値を同じに設定すると、内側の方がすこし大きく見えて、不格好になってしまいます。 外側の角丸と内側の角丸を美しいバランスで実装する相対角丸のテクニックを紹介します。 まずは、ネストされた角丸を美しいバランスで実装したデモをご覧ください。 See the Pen Inner Radius Design Tip with CSS Custom Properties by coliss (@coliss) on CodePen. 外側の角丸と内側の角丸を美しいバランスで実装するポイントは、「外側の半径 = 内側の半径 + パディング」に設定することです。こうすることで、外側の角丸と内側の角丸の中心点が同じになり、美しいバランスになります。 ちなみに、

先日リリースされたChrome 114でPopover APIがサポートされ、HTMLのpopover属性が使用できるようになりました。 今まではポップオーバーを実装するのにはJavaScriptを使用し、ポップオーバーの開閉・フォーカス・アクセスフックなど面倒でしたが、popover属性で実装すると驚くほど簡単で、さまざまなUIコンポーネントに利用できます。 Introducing the popover API by Una Kravets 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスに基づいて翻訳しています。基づいてというのは、貢献部分に関して同ライセンスも含みます。 はじめに HTMLのpopover属性とは ポップオーバーのデフォルト、オーバーライド 自動ポップオーバーと手動ポップオーバー popover属性とdialog要素の違い 近日公開予定の便利な2つの機

覚えておくと便利なCSSデザインTipsを9つ集めてみたUpdate2023.05.18Release2023.05.18Coding HatenaにシェアするTwitterにツイートするPocketにストックするFeedlyに登録する これまでは画像で表現していたデザインを今ではCSSのみで実装できるものが多くなってきました。今回は覚えておくと便利な現場で使えるCSSデザイン Tips を9個紹介します。いざという時に使えるものばかりですので、ストックしておくことをおすすめします。 見出しの改行位置をCSSで調整する見出しの改行位置を調整する見出しの文章が中央揃えである程度の文字数があると、スマホで見た場合意図したところで改行ができていないことがあります。上の動画をご覧ください。上側の文章は改行されると2行目3行目も中央寄りになるため、画面サイズによっては最終行が1〜3文字になってしまい

すべての新しい色空間を完全にサポートする新しいグラデーションツールを紹介します。UIデザイン向けの美しいグラデーションのプリセットも豊富に用意されており、カスタマイズも簡単です。 CSSの色指定に何を使用していますか？ #FFFFFFのようなHEX値だったり、whiteのようなキーワードだったり、rgb(255, 255, 255)のようなRGB色空間の人も多いと思います。最近では色相・彩度・輝度で指定できるhsl(0, 0%, 100%)もすべてのブラウザにサポートされており、増えてきたと思います。 さらに今までよりも広色域のP3カラーに対応したoklch()もChrome 111, Safari 15.4でサポートされ、注目されています。 CSS HD Gradients CSS HD Gradientsは、Google ChromeのデベロッパーであるAdam Argyle氏（@ar

AIは、Web制作にもすごい速さで浸透しそうですね。今までも似たツールがいくつかあったのですが、かなり出来がよいので紹介したいと思います。 テキストを入力、たとえば「シンプルでモダンなナビゲーション　アイテムは日本語」と入力すると、そのUI要素を実装するHTMLとCSSを生成してくれるAIツールを紹介します。 AI CODE 実際に試してみましたが、ナビゲーション、ボタン、カード、フォームなど、UI要素やUIコンポーネントやレイアウトが数秒で簡単に実装されました。 また、次のバージョンではJavaScriptにも対応して、UIライブラリも追加する予定とのことです。 AI CODEの使い方 AI CODEの使い方は簡単、登録など面倒なことは一切不要です。 サイトにアクセスし、テキストを入力して「Generate」ボタンを押すだけです。 テキストは英語だけでなく、日本語でも大丈夫です。たとえば

CSSの:is()疑似クラスが各ブラウザにサポート（参考: Can I use）されるようになって、1年が過ぎました。使用率も97%を超え、通常の案件に使用している人も多いと思います。 :is()疑似クラスは複数のセレクタを1つにまとめられて便利ですが、セレクタの末尾に使用すると、予想よりも多くの一致が発生するかもしれません。どんな場合にそうなるのかを紹介します。 たとえば、下記の.a .b .cと.a :is (.b . c)は同じように見えるかもしれませんが、実は異なります。 Using :is() in complex selectors selects more than you might initially think by Bramus CSSの:is()疑似クラスやセレクタの読む順番について詳しくは、以前の記事をご覧ください。 CSSの新しい疑似クラス:is()と:wher

button { --border-radius: 15px; --border-width: 4px; appearance: none; position: relative; padding: 1em 2em; border: 0; background-color: #212121; font-family: "Roboto", Arial, "Segoe UI", sans-serif; font-size: 18px; font-weight: 500; color: #fff; z-index: 2; } button::after { --m-i: linear-gradient(#000, #000); --m-o: content-box, padding-box; content: ""; position: absolute; left: 0; top: 0; wi