角度が変わらない斜めの背景の作り方（CSS） - arms inc. Engineers' Blog
こんにちは、ナカムラです。 今回はCSSで角度が変わらない斜めの背景の作り方をご紹介します。 ウィンドウ幅いっぱいに、なおかつ斜めになっているデザインはよく使われます。 やり方はいろいろあると思いますが、今回はclip-pathを使ってみたいと思います。 clip-path - CSS: カスケーディングスタイルシート | MDN 実現したい条件 背景はウィンドウ幅いっぱいに表示する 斜めの角度は変わらないようにする コンテンツのボリュームが変わっても高さが変動するようにする DEMO See the Pen 角度が変わらない斜めの背景 by Nakamura (@takayo-nakamura) on CodePen. HTML .sectionの中には.section_backgroundと.section_innerの要素があります。 .section__backgroundは背景用
Sass(SCSS) の stylelint ルールは stylelint-config-sass-guidelines に任せたい
こんにちは森田です。 Sass(SCSS) でスタイリングする場合、弊社では必ず stylelint を使いコードの一貫性を保ちます。 弊社には長年継ぎ足しで使われた秘伝のルールがあるのですが、Stylelintは更新性が高く使えなくなるルールが出てきたりとまれにメンテナンスが必要になります。 なので、今後は基本的なルールと更新性は stylelint-config-sass-guidelines に任せて使っていこうと考えています。 インストール方法npm インストールインストールは npm から stylelint 本体、postcss、stylelint-config-sass-guidelines を dev-dependency にインストールします。 postcss も必要になるみたいなのでインストールしましょう。
リスト項目のマーカーのリセットと復元
リスト項目のマーカーを非表示にするには、CSSでlist-style-typeプロパティの値にnoneを指定します。このとき指定する要素がol・ul要素でもli要素でも、表示結果は同じになります。 ol, ul { list-style-type: none; } /* または */ li { list-style-type: none; } ではどちらに指定しても良いかというと必ずしもそうではありません。list-style-type: noneをol・ul要素に指定すると、非表示にしたデフォルトのマーカーを「復元」するのが少し面倒なのです。とくにtype属性を持ったol要素でその違いが大きく影響します。 ol要素のtype属性を使う機会はあまり多くないかもしれません。しかし特定のリスト項目をその前後のテキストから参照したい場面で必要な属性です。例えばウェブサイトの利用規約やプライパシー
コンテナからの解放。
今年もCSSには大変お世話になりました。なかでも今年になってとくにお世話になる頻度が増えたのが「calc（キャルク）()関数」。プロパティの値に、計算式を使わせてくれるスゴいやつです。ここでは、そんなcalc()関数を使った便利ワザについて書いてゆきます。 この記事は「今年お世話になったCSS Advent Calendar 2016」の23日めの記事です:)。 ※2023年の11月に加筆・修正しています。 calc()関数を使った便利なスタイル 例えば下図みたいな、「サイト全体のコンテンツは横幅800pxで画面中央にレイアウトされていて、その中のあるセクションだけウィンドウ全幅まで広がってる」なんてデザインの場合。以前は、「サイト全体を包括するコンテナには横幅を指定しないで、セクションごとに横幅を指定」していたと思うんです。 HTMLとCSSは以下みたいな感じ。 main要素には何もスタ
インライン要素の長文テキストの表示は大丈夫？box-decoration-breakを使って整えよう！ - arms inc. Engineers' Blog
こんにちは、ユアサです。 以前、長文テキスト対策についての記事を書いたことがありました。その記事では紹介し忘れていましたが（というより最近知ったのですが）、テキストが改行・分割された時、テキストの改行位置にある文字のパディングや装飾を補間するプロパティbox-decoration-breakについて、今回の記事で具体的な使い方を交えて紹介したいと思います。 長文テキスト改行時に起こる現象について 以前の記事で紹介した長文テキスト対策について、親要素をはみ出さないように改行させる方法がありました。対策ができたのはいいですが、まだ解決できていない問題があります。「背景のついたテキスト」です。 テキストの背景に色や画像を実装させる際、テキストの背後にのみうまく表示したい時はブロック要素であるpタグではなくインライン要素のspanタグを使ったりするかと思います。しかしこれを実装しようとしたことのあ
CSSだけでスクリプトの有効・無効に合わせてスタイルを設定する | フロントエンドBlog | ミツエーリンクス
CSSだけでJavaScriptなどのスクリプトの有効・無効に合わせてスタイルを設定するには@mediaのscripting特性を使用します。 @mediaのscripting特性とは @mediaのscripting特性はW3C Working Draft の Media Queries Level 5となり、Firefox Nightly 113で追加になりました。 構文 scripting特性のキーワードにはnone initial-only enabledがあります。 none ... スクリプトが利用できない状態で有効です。 @media (scripting: none) { body { /* ... */ } } initial-only ... スクリプトが利用できる状態のページロード時に有効です。 例として、CSSだけでページロードの間だけローディング要素を表示し、ペー
CSSのfont-familyの書き方のまとめ、スマホ・デスクトップの各最新OSにインストールされているフォントを使用 -Modern Font Stacks
iOS, Android, macOS, Windows, Linuxの各最新OSにデフォルトでインストールされているフォントをCSSで使用するときに、font-familyにどのように定義するとよいのかが分かるModern Font Stacksを紹介します。 日本語フォントには残念ながら対応していませんが、英語フォントを使用する際のfont-familyの書き方がまとめられています。 Modern Font Stacks Modern Font Stacks -GitHub Modern Font Stacksの特徴 Modern Font Stacksは、スマホ・デスクトップ用のOSにデフォルトでインストールされているフォントを確認できるサイトです。CSSのfont-familyに定義すると、フォントは各OSで利用可能な最速のフォントで、フォントがダウンロードされる必要はなし、レイア
CSSで角丸を美しく実装する方法、相対角丸のテクニック
角丸を外側と内側のパネルに使用した際、違和感を感じたことはありませんか？ 数値的には同じ値の角丸を使用しても、内側の角丸の方が少し大きく見えて、不格好になってしまいます。 この外と内の角丸をバランスよく美しく、CSSで実装する相対角丸のテクニックを紹介します。 Relative rounded corners by Andy Bell 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 CSSで美しい角丸を実装する方法、相対角丸 CSSで美しい角丸を実装する方法、相対角丸 角丸は非常に人気が高いデザインです。しかし、外側と内側に同じ値の角丸があると、違和感があり、少し奇妙に感じます。 外側と内側に同じ値の角丸 この角丸に違和感を感じる理由は、値が同じ（たとえば、20px）であっても、それぞれの角丸の中心点が異なるからです。同じ値であ
Code Guide
Golden rule Enforce these, or your own, agreed upon guidelines at all times. Small or large, call out what’s incorrect. For additions or contributions to this Code Guide, please open an issue on GitHub. Every line of code should appear to be written by a single person, no matter the number of contributors. HTML Syntax Don’t capitalize tags, including the doctype. Use soft tabs with two spaces—they
CSSの三角関数（sin(), cos(), tan()）の基礎知識と基本的な使い方を解説
CSSで数式を使用するときには、今まではcalc()関数をはじめ、min(), max(), clamp()などの関数でしたが、ついに三角関数もChrome, Edge, Safari, Firefoxのすべてにサポートされました。 CSSの三角関数、sin(), cos, tan(), asin(), acos(), atan(), atan2()の基礎知識と基本的な使い方を紹介します。 Trigonometric functions in CSS by Bramus 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 CSSの三角関数が主要ブラウザにサポートされました CSSの三角関数とは: sin(), cos(), tan() CSSの三角関数とは: asin(), acos(), atan(), atan2() CSSの三
忘れていると想定外の表示崩れが・・・長文テキスト対策について考えよう - arms inc. Engineers' Blog
こんにちは、ユアサです。 業務の中で、動的ページ内で長文テキストを表示した際にデザインが崩れてしまうといった見落としが何度かあったので、今回は動的ページにおける長文テキスト対策について自分の備忘録も兼ねてまとめていきます。 ①コンテンツ範囲からはみ出す CMS管理のお知らせ記事の一覧ページやコーポレートサイトでよく見る店舗情報ページなど、動的ページではできる限りどんな内容が入力・登録されてもデザインが崩れないよう対応しておきたいですよね。注意しておきたいポイントの一つとしてよく挙げられるのが『長文テキスト』です。 しかし、長文テキストが入る想定をせずにコーディングを進行すると思わぬミスが生まれます。長文テキスト対応を忘れて起こるミスの筆頭としてまず挙がるものといえばコンテンツ範囲からはみ出す現象でしょう。 以下のコードをご覧ください。 See the Pen Untitled by fel
独立したCSS translate・rotate・scaleプロパティだからできる、豊かなアニメーションテクニック！ - ICS MEDIA
独立したCSS translate・rotate・scaleプロパティだからできる、豊かなアニメーションテクニック！ CSSのtransformプロパティはtranslate()やrotate()を1つの値として受け取るプロパティでした。そのため、同時にそれらを動かしたい場合、1つのプロパティに両方の記述が必要でした。これは記述の複雑化を生みます。 最新のCSSではtranslate、rotate、scaleをプロパティとして独立して指定できるようになりました。これにより複雑な記述をせずとも別々のタイムラインの指定やイージングの指定など柔軟なアニメーション表現が可能になりました。本記事では独立した特長とそれらを活かしたアニメーション表現を紹介します。 サンプルを別ウインドウで開く コードを確認する 独立したtranslate、rotate、scaleプロパティ 独立した各プロパティについて
誇りを被った仕様の針に意図を通す | blog.jxck.io
Intro Interop 2022 の目覚ましい成果の一つとして :has() の存在がある。 これまでの CSS の限界を突破する、革新的な仕様であり、多くの開発者が期待を寄せる機能の一つだろう。 こうした仕様策定の裏には、必ずと言って良いほど互換性の問題がつきまとい、時にそれはそこまでの作業の蓄積を無に帰すレベルで影響を与える場合がある。 一方それらは Web 開発者が使う時点では解決されており、基本的に気にされることはない。 だからといって、気にする必要がないわけではない。ということを象徴する事件が、今回も裏で起こっていた。 jQuery と :has() :has() は、従来の CSS Selector の常識を変え、子の状態を元に親をクエリすることが可能となった。親から子を見る場合と比べて探索範囲が爆発的に増えるため、非常に実装が難しいとされていた。 Igalia の詳細な調
色々書き比べた結果Tailwind CSSにしたという話 - Qiita
Twitterでこういう発言を見かけまして Tailwind CSSはデザインに凝ってるサイトでは使えない こだわりが無い場合に向いている は？何いってんの？ って思ったので、自分がいろいろ試した結果、Tailwind CSSを選んだ話を書きます。 はじめに 以前、Tailwind CSSは結構いいぞって話を書いたんですが、この記事の立ち位置的にはその続きみたいなものなので、以下の記事を始めにご参照いただけるとより分かりやすいかもしれないです。 この記事では、前回記事を書いた後、個人仕事でWebサイトをGatsbyで作り、その中で、どうやってCSSを書くのが良いのか模索した結果、自分はこれを選んだっていうのを、同じUIを色々な方法で書き比べたコードを並べつつ、どうのこうの筆者の考えを述べていきます。 その仕事はほとんど筆者が「まかせてくださいよーいい感じに作りますよー。デザインそろってない
コンテナクエリ @container が全ブラウザ対応。新時代のレスポンシブ対応を完全理解する
本日（2023/2/14）、ついに Firefox でコンテナクエリ（container query）に対応しました。Chrome・Edge・Safari はすでに現行ブラウザで対応済みのため、全ブラウザにてコンテナクエリが使えることになります💐 従来、レスポンシブ対応でレイアウトを変えるには @media を使ってウインドウサイズを基準にするかありませんでした。コンテナクエリ @containerを使うと任意の要素を基準にできるので、「A要素の横幅が 500px 以下のとき、子要素のレイアウトを変える」などが手軽に実現できます。 とくにコンポーネントベース開発が主流の現在においては、コンテナクエリをマスターすることで、より柔軟でラクなレスポンシブ対応が可能になります。 本記事では、コンテナクエリの基本、メリット、デモまでをできるだけ詳しく解説し、コンテナクエリを理解することを目標としま
HTML制作で気をつけたいスクロールバーの挙動 - ガタつきをCSSのscrollbar-gutterで防ぐ方法など - ICS MEDIA
HTML制作で気をつけたい スクロールバーの挙動 - ガタつきをCSSのscrollbar-gutterで防ぐ方法など - ブラウザのスクロールバーは、OSの種類によって挙動や見た目がさまざまです。環境によって挙動が違うため、自分の環境では問題なくても、ユーザーの環境から見ると問題が起きていることがあります。次のような問題を経験したことがある人も多いのではないでしょうか？ 不要なスクロール領域ができていた スクロールバーの切り替わりで画面がガタつく これらの問題を防ぐためには、対処法のほかにどんな環境で発生するのかを知っておく必要があります。本記事では、スクロールバーの簡単な説明と、2つのよくある問題と対処法について紹介します。 スクロールバーの簡単な説明と、制作時のポイント よくある問題を紹介する前に、スクロールバーの簡単な説明と、macOSで制作する時の注意点について触れておきたいと思
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Integrate Sass with Storybook | Storybook
container-type: inline-sizeを親に指定したら子や孫要素でposition: fixedが使えない - Qiita
2023年モダンCSSの最新トレンド
Custom propertiesのセレクタの省略と詳細度の分離 - kojika17
