スタイルの適用範囲を限定する CSS の `@scope` ルール
スタイルの適用範囲を限定する CSS の `@scope` ルール 2024.07.07 `@scope` アットルールは特定のセレクタの範囲に限定したスタイルを適用するためのルールです。`@scope` のルールセットに 1 つの CSS セレクタを指定すると、そのセレクタがスコープのルートとなります。`@scope` ルール内のスタイルはそのセレクタの範囲内でのみ適用されます。
スタイルの適用範囲を限定する CSS の `@scope` ルール 2024.07.07 `@scope` アットルールは特定のセレクタの範囲に限定したスタイルを適用するためのルールです。`@scope` のルールセットに 1 つの CSS セレクタを指定すると、そのセレクタがスコープのルートとなります。`@scope` ルール内のスタイルはそのセレクタの範囲内でのみ適用されます。
【CSS】z-index管理の3指針
要素の重なりを制御する時に使うCSSと言えばz-indexですが、単純にその値が上下関係になるとは限らない、少しクセのあるプロパティです。Webサイト上の重なりにはスタッキングコンテキストと呼ばれる仕組みがあり、その関係性によってz-indexの値が1でも9999の上にくることがあり得ます。 z-indexとスタッキングコンテキストの関係については次の記事にて解説されています。 この記事では自分の考えたz-index管理についての指針を紹介します。 グローバルな重なりとローカルな重なり Webサイトでの重なり表現には大きく分けて2つあります。ページ全体で重なりを管理したいものと、一部の領域で重なりを管理したいものです。この記事では前者をグローバルな重なり、後者をローカルな重なりと呼ぶことにします。 グローバルな重なりに含まれるのは、追従ヘッダーやモーダル、ハンバーガーメニュー、トースト通知
Railsフロントエンド: ViewComponent+Tailwind CSS+Hotwireの便利技8つ（翻訳）｜TechRacho by BPS株式会社
概要 元サイトの許諾を得て翻訳・公開いたします。 英語記事: Quicktips for ViewComponent with Tailwind CSS/Hotwire | Rails Designer 原文公開日: 2024/01/22 原著者: Rails Designer -- Railsフロントエンド関連記事に加えて、ViewComponentとTailwind CSSを用いた美しいUIコンポーネントを販売しています 日本語タイトルは内容に即したものにしました。 フロントエンドのコードは、歴史的に少々軽く見られていました。「HTMLは本物の言語じゃない！」「CSSはサイテー！」「JavaScriptもそうだ！」。嘆かわしい話です。Railsは1個人だけの開発チームに、すべてが完全に揃った製品を構築できる本物のスーパーパワーを与えてくれるのですから。 Railsアプリ作成がさらに楽し
Tailwind CSS 独自のプロパティ名覚えるの大変だな → Master CSS にしようかな - Qiita
import React from 'react' import ReactDOM from 'react-dom/client' import App from './App.tsx' import './index.css' + import '@master/css' ReactDOM.createRoot(document.getElementById('root')!).render( <React.StrictMode> <App /> </React.StrictMode>, ) import { useState } from 'react' import reactLogo from './assets/react.svg' import viteLogo from '/vite.svg' import './App.css' function App() { const
はじめに 下記画像のように、「Aボタン」をクリックすると「A画面」が、 「Bボタン」をクリックすると「B画面」が表示されるような 画面切り替えをJavaScript、HTML、CSS を使って作成していきます。 JavaScript、HTML、CSS ファイルの作成 ますはJavaScript、HTML、CSS のファイルを同じ階層に作成します。 HTML の作成 ヘッダーの作成 次に index.html のヘッダーを作成していきます。ヘッダーの内容については今回詳しくお伝えしませんが、先程作成したCSSファイルとJavaScriptファイルに連携できるようにしています。 <link rel="stylesheet" href="./style.css" /> で style.css に連携。 <script src="./script.js" defer></script> で scr
Chrome チームは、メーソンリー タイプのレイアウトをウェブで実装したいと考えています。しかし、WebKit の最近の投稿で提案されているように、CSS グリッド仕様の一部として実装するのは間違いだと考えられます。また、WebKit の投稿は、誰も提案しなかったメイソン バージョンに反論しているとも考えられます。 そこでこの投稿では、Chrome が CSS グリッド レイアウト仕様の一部としてメーソンリーを実装することに懸念を抱いている理由を説明し、代替案で何が可能になるかを明確にすることを目的としています。要するに、 Chrome チームは、メーソンリーの課題を解消したいと考えています。 グリッドの仕様にメーソンリーを追加する際には、メーソンリーがグリッドであるかどうか以外の理由で問題が生じます。 グリッドの仕様の外部でメーソンリーを定義しても、メーソンリーの複数のトラックサイズ、
コピペで使えるTailwind.cssとReactによるアニメーション、エフェクト、インタラクションのコレクション・「Animata」
Animata Animataはコピペで使えるTailwind.cssとReactによるアニメーション、エフェクト、インタラクションのコレクションです。タイトル通りで、既存のReactアプリ等にコピペでアニメーションコンテンツを追加可能なコンポーネントを手作業でコレクション化したそうです。 いわゆるUIライブラリの類ではなく、既存のプロジェクトにアニメーション要素を加えるスパイス的な役割となっています。尚、基本的にはTailwindベースですが、細かなスタイルは利用者の采配に任せているそうで特に完成度が高かったりスタイルに一貫性があるようなものではありません。 用意されているのは背景や弁当グリッド、ボタン、カード、ナビゲーション、チャートなどで今のところ40程度のコンポーネントが集められています。Reactアプリにエフェクト等を追加する際はご利用になってみては如何でしょうか。ライセンスはM
clip-pathで要素を斜めに切り抜く まずはデモページをご覧ください。 デモページはこちら ⇒ デモページ セクションを斜めに区切る方法は、borderを使った方法、transform: skewY()を使った方法などいくつかの方法がありますが、clip-pathで要素を切り抜く方法が一番簡単でおすすめです。 ※もうIE11は諦めてください、、、 今回も三角形と同じで、polygonを使います。 座標の取り方は下記ツールに頼ります。 簡単に切り抜くことができるオンラインツール Clippy CSS clip-path maker https://bennettfeely.com/clippy/ マウスで好きな形に変更すると、画面下の方にコードが出てきます。 右上がり斜めに区切る <div class="sec-wrap1"><!--sec-wrap1--> <section id="s
:root { --header-height: 2.5rem; } .page { position: relative; border: 1px solid #999; height: 10rem; overflow-y: scroll; overflow-x: hidden; scroll-behavior: smooth; } header { position: sticky; top: 0; left: 0; background-color: rgba(0, 0, 0, .5); color: white; height: var(--header-height); line-height: var(--header-height); width: 100%; padding-left: .5rem; } main { position: absolute; top: 0;
（＊価格は掲載時のものです。購入時にご確認ください。）
すると,http://localhost:3000/にアクセスできるようになります。 実装の紹介 今回は、サンプルアプリなので、Pico CSSやhtmxはCDNで導入しています。本番環境などでは、非推奨なので気をつけてください。 index.tsxは以下のように、割とシンプルに書くことがで来ました。 パッとみてFastAPIと似てる気がしました。 import { Hono } from "hono"; import "typed-htmx"; import TodoApp from "./components/TodoApp"; import Task from "./components/Task"; import Todo from "./components/Todo"; const app = new Hono(); let todos: Todo[] = []; app.ge
はじめに この記事は『CSS設計完全ガイド』という書籍の内容を元に、実際のホームページを見ながらCSS設計にふれてみよう！という内容になっております。 前回は、コンポーネントがmarginなどのレイアウトに関わるスタイルを持ってしまうと使いまわすことが難しくなるため、マルチクラスで対応するという「BEM」の「Mix」という書き方をご紹介しました。 今回はそのマルチクラスにおけるもう１つのメリット「詳細度を一定に保つ」というテーマで、そもそも詳細度ってなに？というお話からしていきたいと思います。 前回の振り返り 最初に軽く前回のおさらいをしておきます。 メディアが複数並んでいるレイアウトで、そのメディアコンポーネント自体にmargin-bottomを指定せず、.service-mediaというクラスを付与して、それにmarginを担当させよう、というお話でした。 詳細度について マルチクラス
HTML CSS javascript のまとめ | HTML CSS javascriptでWebサイトを作ろう
このWebサイトでは、HTML CSS javascriptの使い方をまとめています。 HTMLについては要素ごとに属性・サンプルなどをまとめています。 CSSについてはプロパティをテーマに、設定値毎の見え方などをまとめています。 javascriptについては、動くサンプルをメインに考え、それに必要な関数などをまとめています。
Do You Still Need Sass? 記事は上記記事を意訳したものです。 ※当ブログでの翻訳記事は元サイト様に許可を得て掲載しています。 2006年にSassがリリースされて以来、ネイティブCSSは長い道のりを歩んできました。Sassを置き去りにするほど十分に進化したのでしょうか？ Sassは長年、フロントエンド開発の定番でした。最初から、CSSに機能を追加し、開発者体験を向上させ、フロントエンドコードをより保守しやすくするのに役立ちました。 しかし、まだ必要なのでしょうか？2006年にSassがリリースされて以来、ネイティブCSSは長い道のりを歩んできました。 2024年のネイティブCSSは何ができるのか？ カスタムプロパティ（またはCSSカスタム変数） ネイティブCSSでの計算 カラー関数 ネスティング PostCSSを使用して今後の機能を実装する 将来のCSS構文を持つプラ
Reactのアニメーション効果：CSSトランジションからReact Springまで - yoko's memo
Reactアプリケーションでのアニメーションは、ユーザーエクスペリエンスを向上させ、アプリケーションの魅力を高める重要な要素です。ここでは、CSSトランジションからReact Springまでのさまざまなアニメーション効果の実装方法について紹介します。 moun45.hatenablog.com 1. CSSトランジション CSSトランジションは、Reactでアニメーションを実装する最も基本的な方法の1つです。transitionプロパティを使用して、要素のスタイルの変化をアニメーション化します。 .transition-example { transition: all 0.3s ease; } .transition-example:hover { transform: scale(1.2); } 2. CSSアニメーション CSSアニメーションは、複雑なアニメーションを実装するための
デザイナーやWeb担当者であれば、HTML・CSSを一度は耳にしたり目にしたことがあると思います。 たとえば、HTML・CSSが必要になるのは以下のような場面です。 なかには読み書きの仕方がわからず、エンジニアやコーダーに追加や変更を依頼する方もいるのではないでしょうか。 依頼する際に意思疎通がうまくいかず、時間を無駄にしてしまうということもあるかもしれません。 しかし基本的なHTML・CSSの知識があれば、エンジニアさんとの会話や意思疎通がスムーズになったり、簡単なLPを自ら制作できたり、自分で対応できる幅が広がります。 本記事では「簡単な追加・変更の対応は自分でできるようになりたい」という方に向けて、HTML・CSSの基礎知識を解説していきます。 HTMLとCSSの役割 HTMLとは、「Hyper Text Markup Language（ハイパーテキストマークアップランゲージ）」の頭
（＊価格は掲載時のものです。購入時にご確認ください。）
【CSS】FlexboxとGridの使い分けについて解説
この記事では「FlexboxとGrid Layoutの使い分け」について解説します。 FlexboxもGrid Layoutも要素を縦横好きなように配置できるので便利です。それぞれ向き、不向きがあるので、特徴を理解して使い分ける必要があります。 それぞれの特徴について解説していきます！ Flexboxとは FlexboxはCSS3で追加されたもので、柔軟性のある（フレキシブル）なレイアウトを実現することができます。 Flexboxでは、display: flex;と組み合わせて要素を左右中央寄せしたり、右寄せにしたりできます。ポイントとしては横並びさせたい要素の「親要素」にdisplay: flex;を指定することです。 Flexboxでは下図のように、子要素をFlexアイテム、親要素をFlexコンテナという概念で考えます。 コードで確認すると、下記のようになります。 このように要素を横並
JavaScript、jQueryを使わずにcssだけでズームしながら表示が切り替わるスライドショーってどうやって作るのでしょうか？一緒に見ていきましょう。 The post CSSのみでズームしながら切り替わるスライドショーの作り方【クロスフェードスライダー】 first appeared on ゴリゴリコード.
リーディングビューのときだけ非表示で。 プロパティ CSSが載っていたので参考にしました。 簡単な方法では下記CSSを使うだけです。 body { --metadata-display-reading: none; } 設定の仕方 Owlfiles - File Manager 12.5.2 分類: ユーティリティ,仕事効率化 価格: 無料 (Skyjos Co., Ltd.) iOSでは隠しフォルダにアクセスできないのでOwlfilesを使います。 「もっと」から設定を開き「ファイルマネージャ」の「隠しファイルを表示」をONにします。 それから稲妻ボタンの「新い接続＞外部の場所」でObsidianフォルダを追加。 Obsidianフォルダが Document という名になります。 これを開くと.obsidianフォルダがあるので、その中のsnippetsフォルダを開く。 「新しい空のファ
アニメーションCSSをもっと簡単に！@starting-styleとtransition-behaviorの実践テクニック - コハム
Using @starting-style and transition-behavior for enter and exit stage effects 記事は上記記事を意訳したものです。 ※当ブログでの翻訳記事は元サイト様に許可を得て掲載しています。 @starting-styleを使って遊んでいたら、transition-behaviorと組み合わせることで、display: noneの切り替えや初回レンダリングのための純粋なCSSトランジション戦略を完成させるのに役立つかもしれないと思いました。 ダイアログとポップオーバーは、どちらもブラウザによってdisplayが切り替えられます。 中断可能なトランジション > キーフレームアニメーション これから説明する内容の完全なデモをCodepenで試してみてください： 結果は？ display: noneを使用した要素の表示/非表示の共
『CSS～ オープンフリースペース（仮）とコラボの場』
★ 志のあるクリエーターを集めて オープンソースをつかった新しい試みの創作活動 まずは九州・福岡で動きはじめました。 ちなみにその活動は 1991～2003年 東京でアートの社会貢献を目的にした活動でした 現在は九州で環境とエンターテイメントの融合をコンセプトで活動中。またアメリカなどでおこっているオープンソースやシェアリングなどでの新たな活動スタイルがいずれ日本にもおきることを想定して それを実験的におこなっているアート活動です。 現在参加または協力しているのは 地域活性化プロデューサー 漫画プロデューサー 昔アニメの仕事をしてたイラストレーター 陶芸家など 創作といえども いろいろな分野があります それらがアートの社会貢献という志で集まり デジタル技術とオープンソースの仕組みなどをつかって よりよい社会と未来を創作していくプロジェクト。それが CSS（クリエーション・スーパー・スペ
はじめに 初めまして。最近昼夜逆転してきた yakiniku0220です。 今回は前回書いた記事の続編で、実際にVS Codeの拡張機能の開発でも採用しているTailwind CSSの導入に関して執筆しようと思いました。 前回の記事を読んでいない方はぜひ読んでいただけると幸いです。 VS CodeのセットアップやReact.jsの導入はこの記事では省きます。 Tailwind CSSのSetup 今回はTailwind CLIを使用した手順を記載します。 Tailwind CSSのInstall まずはTailwind CSSをinstallしてtailwind.config.jsファイルを生成します。
カスタムCSS - 汎用掲示板ビューアSikiまとめ Wiki*
タブのカスタマイズ タブのタイトルを複数行表示する タブの固定幅は変えずに、スレタイを1行表示から数行表示に変更 user.cssにて、この場合2行表示 .thread-tabs .title { white-space: initial; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; padding-bottom: 0; } 「-webkit-line-clamp」で、最大行数指定 white-spaceのみ設定すると、タイトル全て表示 「.tab .title」指定だと、板タブ含む スレタブの各種数値表示を縦並びにする 上記の複数行表示を適用した上でこちらも設定することでスレタイ表示の幅を稼げる。 .thread-tabs .tab { flex-shrink: 0; display
（＊価格は掲載時のものです。購入時にご確認ください。）
Understanding new CSS at-rule @scope 記事は上記記事を意訳したものです。 ※当ブログでの翻訳記事は元サイト様に許可を得て掲載しています。 テンプレートを作成する際、開発者は特異性と柔軟性のバランスを取るのに苦労することがよくあります。一方では、選択する要素について具体的であることを目指し、他方では、セレクタが簡単にオーバーライドでき、DOM構造に密接に結びついていないことが望まれます。 時間とともに、開発者はさまざまな解決策や回避策を編み出し、発見してきました。例えば： 特定のライブラリは、セレクタを完全に排除し、スタイリングのトリガーを直接マークアップに埋め込むことを要求します。 SMACSS、BEMなどのCSSメソドロジーを使用することで、明確で一貫した命名構造を作成し、コードの異なる部分の関係を理解しやすくし、大規模プロジェクトの保守を容易にします
CSS シークレット
28チェックボックスのカスタマイズ35兄弟要素の個数にもとづくスタイル指定 推薦の言葉推薦の言葉 古き良き時代は去りました。前の千年紀には、CSSに対応したブラウザは2つしかありませんでした。しかもこれらのブラウザは、当時は機能がかなり限られていた仕様の中の、さらにかなり限られた部分にしか対応していませんでした。どんな機能を利用でき、どれが利用できないかをすべて覚えてしまうのも容易でした。それぞれの実装にはさまざまなバグや見落としがあり、お笑いも同然のひどいものもありましたが、このような誤りについても我々は把握していました。あまりにも根本的な一部のバグのせいで、各ブラウザでのレイアウトのふるまいにはまったく互換性がありませんでした。この問題を回避するために、HTMLパーサーのバグにつけ込んだハックを大量に用意するといったことまで行われました。 そう考えると、かつてはひどい時代だったのかもし
WordPressを使い始めて、動くマーカーが気になったので設定してみました。 CSSをちょっと追記して、コードをAddQuicktagというプラグインに登録するだけで複数色が使用可能です。 僕は基本的に2色使ってます。 動くマーカーの青色 動くマーカーの赤色 Diverだと簡単に設定できるので、良ければ公式サイトもご覧ください。
こんにちは！静岡県浜松市でホームページ制作をしているフリーランスWEBデザイナーのこたです。 皆さんはWeb制作でコーディングをする際にCSSでフォントサイズを設定されると思いますが、その際に設定するフォントサイズの単位は何を使っていますか 「px」「rem」「pt」「em」「%」「vw」「vh」など様々な単位があります。 昔はPCサイトがメインだったため「px」単位指定をしていましたが、時代は変わりました。 今ではスマホでのWebサイト視聴が主流になったことで、レスポンシブ対応が当たり前になりました。 その流れにより、「px」単位で指定をするとデザインを崩さないためにメディアクエリでのフォントサイズが複数設定しなければいけなくなります。 これは手間になりますよね。 そこで今回はレスポンシブでも調整をしなくていいように、ラクにコーディングできるフォントサイズについてご紹介します。 レスポン
ブログやサイトのテキスト強調の1つとして、蛍光ペン風のマーカーを引く手法が最近では多くのサイトで取り入れられています。 以前にcssで蛍光ペン風のマーカーを引く方法という解説をしていますが、そこではこういう感じの単色での蛍光ペン風マーカーでラインを引くというやり方でした。 CSSでテキストに蛍光ペン風マーカーを付ける方法（サンプルデモあり）色々なブログ記事を見ていると、誰がスタートで広めたかはわからないのですが、多くのブログで協調したいところに、蛍光ペンのようなマーカー（←これです）で装... ただ少し凝ったものが求められたり、デザインなどによってはグラデーションカラーを使いたいという要望をたまーにいただくことがあり、今回はそんな蛍光ペン風マーカーをグラデーションカラーで引く方法についてまとめています。
HTML & CSSとは？ ウェブデザインの基盤を解説
デジタル時代において、ウェブデザインは不可欠な要素となり、我々の日常に深く浸透しています。ウェブサイトやアプリケーションは、情報提供からコミュニケーション手段まで、多くの分野で使用されています。そして、ウェブデザインの基盤を構築するのがHTML（HyperText Markup Language）とCSS（Cascading Style Sheets）です。この記事では、HTMLとCSSとは何か、そしてその役割について解説してみましょう。 HTML & CSSとは？ ウェブデザインの基盤を解説 HTMLとは？ HTMLは、ウェブページの構造を記述するためのマークアップ言語です。要するに、ウェブページの「骨組み」を定義する言語と言えます。HTMLを用いて、テキスト、画像、リンクなどの要素を配置し、ページの構造を表現します。例えば、以下のようなHTMLコードが考えられます。 <!DOCTYPE
（＊価格は掲載時のものです。購入時にご確認ください。）
この記事を書いている僕はプログラミング歴2年5ヶ月です。webエンジニアとして”社内転職”に成功しました。 ページ内リンクとは、同じページ内の特定部分にジャンプ(移動)するリンクのことです。 ※目次をクリック → 該当する見出しまでジャンプ！ aタグのhref属性には”#1″、ジャンプ先の特定部分にはid=”1″というように設定します。つまり、href属性の#(シャープ)以降の文字列と、特定部分のidの文字列を完全一致させることでページ内リンクをつくることができます。コンテンツの多いWebページには必須の動作だと言えるでしょう。 設定するファイルはHTMLだけです。ただし、HTMLだけでは一瞬でジャンプするのみでスムーススクロールの挙動が起こりません。スムーススクロールさせるにはCSSもしくはJavaScriptで設定する必要があります。 実際にどうやるのか。CSSから説明していきます。と
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
JavaScript、HTML、CSSを使って画面切り替えをつくろう！ - Qiita
CSS メーソンリーの代替案 | Blog | Chrome for Developers
【CSS】clip-pathを使って斜めにセクションを区切る
CSS - scroll-margin-* - とほほのWWW入門
HTML5/CSS3のニュースやTIPSなどのまとめ (2024年7月5日)
htmx & Hono & Bun & Pico CSSで爆速TODOアプリを作ってみた - Qiita
ホームページを眺めながらCSS設計について学ぼう【詳細度編】 - Qiita
CSSのネストがネイティブになった今、Sassはまだ使うべきか？Sassを使うメリットとデメリット - コハム
デザイナーやWeb担当者も知っておきたい、HTML・CSSの基礎知識｜アナグラム株式会社
HTML5/CSS3のニュースやTIPSなどのまとめ (2024年7月3日)
CSSのみでズームしながら切り替わるスライドショーの作り方【クロスフェードスライダー】
Obsidian：プロパティを非表示にするCSS - Jazzと読書の日々
VS Codeの拡張機能開発でTailwind CSSを導入してみる - Qiita
HTML5/CSS3のニュースやTIPSなどのまとめ (2024年7月6日)
@scopeマスターへの道：1日で習得するCSSの次世代テクニック - コハム
【Diver】動くマーカーの色変更はプラグインとCSS追記で解決！
【CSS】clamp()でフォントサイズ設定（推奨値の計算方法/簡単計算Min-Max Calculator）
CSSの蛍光ペン風マーカーをグラデーションカラーで設定する方法 - 裏方ワークス
HTML5/CSS3のニュースやTIPSなどのまとめ (2024年7月4日)
【CSSとJavaScriptのみ】ページ内リンクでスムーススクロールさせる方法