CSSレイアウト再入門:完全に理解してCSSを記述するために
フロントエンドカンファレンス北海道2024 で発表させていただきました。 スライド中のリンク一覧
フロントエンドカンファレンス北海道2024 で発表させていただきました。 スライド中のリンク一覧
「Tailwind CSSめっちゃ負債になりそう」はそうでもないのでは、と思っている Tailwind CSS 1 を一目見た人、特にCSS初学者のうちけっこうな割合が「これエグい負債になりそう」と思う気がする。なぜなら実際にそのような意見をちらほら見るからなんだけども、自分はあんまりそうは思っていないし、微妙に今のCSSについて誤解があるような空気も感じるのでその理由を説明したい2。JSXと同じで嬉しさを理解して使い慣れればなんてことはないのだけど、一方でその背景にある話はJSXより複雑なので単純に使って慣れればいいという話でもなさそう。 なお、この記事は私の以下の2ツイートを膨らませたものです。 Tailwind CSS、剥がすのは大変そうだけどそれをもって重大な負債になると評せるかは微妙に思っている https://x.com/aumy_f/status/18220941478532
2024年のブラウザならCSSの:has()疑似クラスが使えます。この:has()疑似クラスは非常に強力なポテンシャルをもっています。というのも:has()疑似クラスを使えば、どんな関係のセレクターも指定可能になります。これを使えば多彩なセレクターが記述できるようになり、より表現力豊かなCSSを実現できます。この記事では:has()疑似クラスを使ったCSSの表現手法やテクニックを紹介します。 サンプルを別ウインドウで開く コードを確認する :has()疑似クラスの基本的な使い方 :has()疑似クラスの使い方について簡単に説明します。:has()疑似クラスは渡したセレクターを持つ親要素を選択します。たとえば、次のようなHTMLとCSSがあるとします。 <p class="text"> <strong>メロス</strong>は激怒した。必ず、かの邪智暴虐の王を除かなければならぬと決意した。
テキストをホバーしたときの変化やアニメーションをつくることは、どのようなサイトをつくっていてもほぼ必ず行う工程ではないでしょうか。 テキストがリンクであることをユーザーに伝えるという点では、ブラウザのデフォルトスタイルのような下線のみで十分な場合もあると思います。 しかしそれだけではなく、変化をつけてよりわかりやすくしたい場合や、サイト全体の雰囲気に合わせたい場合にちょっとしたアニメーションが効果的です。 今回はHTMLとCSSのみで作成できる、シンプルながら少し目を引くアニメーションをテーマに実装例を紹介します。 ▼今回紹介する実装例一覧 とくに、以下のようなデザイナー／エンジニアにとって参考になれば嬉しいです。 HTMLとCSSのみでどのようなホバー時のアニメーションができるのか知りたい 透明度の変化や、下線のつけ外し以外の実装例の引き出しを増やしたい ※今回の実装例では主にヘッダー／
CSSの@propertyがFirefoxにサポートされ、デスクトップ・スマホのすべてのブラウザでサポートされました。 @propertyは次世代変数と呼ばれるもので、これまでの変数（カスタムプロパティ）の使い勝手が大幅に向上します。@propertyによるカスタムプロパティの記述方法、@propertyを使ったCSSのテクニックを紹介します。 @property: Next-gen CSS variables now with universal browser support by Una Kravets 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスに基づいて翻訳しています。基づいてというのは、貢献部分に関して同ライセンスも含みます。 はじめに @propertyのメリット @propertyによるカスタムプロパティの記述方法 @propertyの使い方: きらめくグ
CSSアニメーション屋さん
CSSアニメーション屋さん。 Webサイトの制作やデザインのご依頼などお気軽にお問い合わせください。 10月以降のお仕事を募集しております！
タイムラインを見ていると「flexとgridの使い分けがよく分からないよ」という人が多く散見されるので、今回は僕が普段意識していることを皆さんに紹介します。 これから紹介することはあくまで僕のやり方で、絶対的な正解とかではないので参考程度に留めておいてください。実装において頻出するレイアウトをサンプルに、どのように考えてレイアウトを組んでいけばよいかを自分なりに説明できたらなと思います。 はじめに僕がレイアウトを組む上で大事にしていること、および意識していること。それは、レイアウトに変化が起こった際に崩れが生じないことはもちろん、将来的な変更に対して柔軟に対応できることです。 極論を言ってしまえばgridは使わなくても大抵のレイアウトは組めてしまいます。Internet Explorerに苦しめられていたあの頃を思い出してみてください。現在でもgridは難解だからflexだけ使用するって方
フォームのテキストエリアにCSSのfield-sizingとlh単位を使用すると便利、入力された文字量に合わせてサイズを自動変更
CSSはどんどん便利になっていますね！ これまではJavaScriptを使用しないとできなかったことがCSSで簡単に実装できるようになっています。 CSSのfield-sizing: content;でフォームのテキストエリアのサイズを入力された文字量に合わせて自動変更したり、テキストエリアの高さを行の高さで設定するlh単位を使ったCSSのテクニックを紹介します。 フォームのテキストエリアに使用するCSSのテクニックは、2つあります。 field-sizing: content;で、コンテンツに合わせてテキストエリアを自動的にサイズ変更する。 lh単位で、テキストエリアの高さを行の高さで設定する。 HTMLは、textareaを用意するだけです。
売れるウェブの最新HTML/CSSテクニック40選
目まぐるしく変化するWebデザインの世界は、新しい技術やテクニックが毎日のように登場し、追いかけるだけでも大変。 「Webデザインの最新テクニックを知りたいけど、時間が足りない」という方へ。 この記事では、話題になった人気テクニックを中心に集めているので、効果的にWeb注目ニュースをインプットできます。 しかもスニペットはコピペで利用でき、CSSのみでスタイリングされたものも多数。 HTML/CSSやJSのコードをリアルタイムで編集、確認できるので、今後のデザイン制作に活用してみてはいかがでしょう。 こんなことできるの?!最新HTMLテクニック・スニペット Timed Cards Opening カード型の画像カルーセルのスライドに合わせて、背景のフルスクリーンが切り替わる、ヒーロー要素を想定したスニペット。 See the Pen Timed Cards Opening by Dilum
CSS変数を使用して、コードを減らしながらもUI要素やコンポーネントのバリエーションを作成するCSSのテクニックを紹介します。 CSSはclassを使用すると、個別の値のみをターゲットにスタイルを適用できます。CSS変数を使用すると、連続した値の範囲をカバーでき、特定のトークンを使用して特定のスタイルを適用できるようになります。 CSS変数（カスタムプロパティ）について詳しくは、下記をご覧ください。 CSSの変数（カスタムプロパティ）の基礎知識、便利な使い方を詳しく解説 HTMLは、buttonにclassとstyleを与えます。ポイントとなるのは、styleにインラインでCSS変数を設定することです。
ZOZOTOWNのフロントエンド開発にCSS in JSを導入して2年後の状況 - ZOZO TECH BLOG
はじめに こんにちは。ZOZOTOWN開発本部フロントエンドの菊地（@hiro0218）です。 現在、ZOZOTOWNではWebフロントエンド技術のリプレイスプロジェクトが進行しています。以前の記事ではCSS in JSの技術選定をした際の背景や課題について紹介しました。 techblog.zozo.com その後、「ZOZO Tech Meetup - Web フロントエンド」でおよそ1年後の状況を簡単に共有させて頂きました。 speakerdeck.com 今回はZOZO Tech Meetupでお話した内容に加えて、CSS in JS導入から2年後の現状を改めて紹介したいと思います。 CSS in JS導入後の運用状況 ZOZOTOWNの開発体制は、Webフロントエンドだけでも5つのチームが存在し、さらに外部の業務委託メンバーも加えると、開発に携わるメンバーは執筆時点でのべ50名を超
最近のWebサイトやスマホアプリでよく見かけるのが、メッシュグラデーションです。メッシュグラデーションとは複数のポイント間でカラーをさまざまな方向に流し込んだグラデーションで、動きや変化を表現する方法として人気があります。 この美しいメッシュグラデーションをCSSで簡単に作成できるツールを紹介します。メッシュグラデーションはスタティックの動かないものだけでなく、アニメーションで動くメッシュグラデーションも簡単に生成できます。 MSHR MSHRは、CSSで作成されたメッシュグラデーションのコレクションで、個人でも商用でもあらゆるプロジェクトで無料で利用できます。2024年8月現在、282種類のメッシュグラデーションが登録されており、そのまま利用するだけでなく、カスタマイズして独自のメッシュグラデーションを作成することもできます。
執筆 山内 直 有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ（代表 山田祥寛）に所属するテクニカルライター。出版社を経てフリーランスとして独立。ライター、エディター、デベロッパー、講師業に従事。屋号は「たまデジ。」。著書に『Bootstrap 5 フロントエンド開発の教科書』、『作って学べるHTML＋JavaScriptの基本』など。 監修 山田 祥寛 静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for Visual Studio and Development Technologies。執筆コミュニティ「WINGSプロジェクト」代表。 主な著書に「独習」シリーズ、「これからはじめるReact実践入門」、「改訂3版 JavaScript本格入門」他、
はじめに 今回のDeveloper Siteリデザインの目的は英語のコーポレートサイト（https://nulab.com/ ）とのUIを合わせることでした。旧Developer Siteのヘッダーやフッターなどの共通パーツは古いデザインのままだったため刷新する必要がありました。 旧Developer Siteのトップページ Developer Siteのトップページ 使用した技術 今回使用した技術は、静的サイトジェネレータであるAstroとユーティリティファーストのCSSフレームワークであるTailwind CSSです。 旧サイトはHugoとSCSSを用いて構成されており、今回はコンテンツはそのままで見た目のみを変更する制作だったため仕様の変更は不要でした。しかし、パフォーマンスの向上を目指し、かつ新しい技術に挑戦するためAstroとTailwind CSSを採用することにしました。 A
はじめに こんにちは。HRBrainでオウンドメディア・ランディングページの開発を担当している渡邉です。 先日、SVGの色をCSSで変更しようとした際に、なかなか色が変わらなくて困ってしまいました。 この記事では、SVGの色がCSSで変更できない場合の原因と、2つの解決策をわかりやすく解説します。 SVGの色を変更できない原因 fill属性に直接色が指定されていると、その色が固定されてしまい、CSSのcolorプロパティによる変更が適用されなくなります。 <div class="parent"> <svg> <rect width="100" height="100" fill="#000" /> </svg> </div> <style> .parent { color: red; // 効きません } </style> See the Pen svg_fill_bad by Tasuk
標準化されたCSSのzoomプロパティ
標準化されなかったzoom CSSのzoomプロパティをご存知でしょうか？ 有名（だった）なIE向けのハックとして *zoom: 1; などを記述したことがある人、または見たことがある人もいるかと思います。 zoom はIEの独自実装プロパティとして生まれいくつかのブラウザでサポートされたものの、長らく標準化されなかったことからサイトでの利用は推奨されることはありませんでした。 標準化されたzoomがNewly Availableに！ そんなzoomプロパティですが、標準化が進みBaseline 2024において「Newly Available」というステータスになりました👏 まだNewly Availableなので積極的な利用の推奨はできないものの、使い道を考えられるようになりました。 zoomに使い道がありそうな予感 CSSで要素を拡大する手段としてはtransform: scale
Chrome 127で追加された、CSSの新しい機能3つを紹介します。 今回のアップデートでは、使用するフォントに関係なく読みやすさを確保したり、生成コンテンツ内の代替テキスト、iframeでのビュー遷移のサポートなど、Web制作者は要チェックです！ New in Chrome 127 Chrome 127 beta 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスに基づいて翻訳しています。基づいてというのは、貢献部分に関して同ライセンスも含みます。 はじめに font-size-adjustプロパティ 生成コンテンツ内の複数引数の代替テキスト iframeでのビュー遷移のサポート はじめに 7/24にリリースされたChrome 127で3つのCSSの新しい機能が追加されました。対象となるChrome 127は、Android、ChromeOS、Linux、macOS、Win
Note reading-flow プロパティは 2024 年 8 月現在 Editor Draft として提案されている機能です。W3C によって標準化されておらず、将来仕様が変更される可能性があります。Chrome Dev または Canary バージョン 128 以降で試すことができます。 Flex や Grid などの CSS レイアウトを使っている場合や、ドラッグアンドドロップで自由に要素を配置できる UI を実装している場合、要素の見た目上の並び順と、DOM 上の並び順が異なることがあります。このような状態はキーボード操作やスクリーンリーダーなどの支援技術を使うユーザーにとって混乱を招く可能性があります。見た目とは異なる順番で要素にフォーカスがされるためです。 例えば、Flex コンテナ内の要素は flex-direction: column-reverse; を指定すると要素
デザイナーにもお勧め！ CSSもThree.jsもタイムライン編集を可能にするTheatre.jsが凄い ウェブサイトの演出を作る上でアニメーションの実装は欠かせません。一般的には、CSSアニメーションやJavaScriptのライブラリ（GSAPジーサップなど）を用いてコードベースで動きをつけることが多いと思います。ですが、完全にコードだけでアニメーションを調整するのは大変だと思ったことはないでしょうか？ 一度実装したことがある方は共感いただけるかもしれませんが、少し直そうにもコードに戻って調整し、反映されたブラウザ画面を確認して、もう一度コードを直して…と往復していると結構大変です。また、アニメーションさせるプロパティや要素が複数ある場合には、コードを解読する難易度も上がります。 本記事ではそんな悩みを解決できる、GUIからアニメーションを調整できるライブラリ「Theatre.jsシアタ
そのあたりをちょっと触れていきます。 しかしどちらにしても、なぜどのAIサービスも3000円台なんですかね。 もうちょっと安くしてくれればいいのに、なんて思ったりします。 claude.ai決して完璧ではない まず初めに、悪い点をいくつか書くと、claude.ai、決して完璧とは言えません。 ハードルを上げないようにしているとか決してそういうわけではなくて。 結構いくつか問題点があるように感じます。 1ヶ月使い続けていると、いくつかの問題点で腹を立てたりもします。 claude.aiに報告した問題 使い続けていく中で、どうしても許せない点があったので、claude.aiに報告したことがいくつかあります。 そのいくつかをピックアップ。 しかし、返信はキませんでした。 まるまる含めての指示に弱い いくつかの内容を作成してもらうときに、 一辺に作成してもらうのは大変だから、 何回かに分けて、 作
Chrome 128で追加された、CSSの新しい機能4つを紹介します。 今回のアップデートでは、ruby要素によるルビのレイアウト強化、ドロップダウン内のoptionの最小サイズ、zoomプロパティのスタンダード化など、Web制作者は要チェックです！ New in Chrome 128 Chrome 128 beta 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスに基づいて翻訳しています。基づいてというのは、貢献部分に関して同ライセンスも含みます。 はじめに CSSのruby-alignプロパティ ルビが改行可能に <select>ドロップダウン内の<option>の最小サイズ CSSのzoomプロパティのスタンダード化 はじめに 8/21にリリースされたChrome 128で4つのCSSの新しい機能が追加されました。対象となるChrome 128は、Android、Chr
【App Router時代のNext.jsスタイリング戦略】CSS Modules vs Tailwind vs Zero-Runtime
はじめに みなさん、App Router時代になってから、スタイリング戦略に悩んでいませんか？ App Router環境下では、JS実行を必要とするRuntime CSS-in-JSがサポートされなくなり従来のスタイリング戦略を見直す必要に迫られています。 本記事では、App Router時代におけるスタイリング戦略として、CSS Modules、 Tailwind CSS、 Zero-Runtime CSS-in-JSの3つのスタイリングアプローチを比較検討し、それぞれのメリット・デメリットを説明していきます！ （RutimeやZero-Runtimeについては別記事内で詳しく解説しています。） BuildからRuntime時までの流れの解説 本記事ではパフォーマンスについても説明していきます。 それにあたって、Server ComponentsとClient Componentsの流れ
It’s Time To Talk About “CSS5” — Smashing Magazine
Have you ever wondered what happened after CSS3? It’s common knowledge that we never saw CSS4 come after it, yet we have a plethora of new features that have no similar way of defining when they were introduced. The W3C CSS-Next community group is actively searching for better approaches for how we describe the evolution of CSS over time and identify feature sets as effectively as we did with CSS3
Most days, I’m writing vanilla CSS. Thanks to CSS variables and nesting, I have fewer reasons to reach for Sass or any other preprocessor. The times I reach for Sass tend to be when I need a @mixin to loop through a list of items or help keep common styles DRY. That could change for me in the not-so-distant future since a new CSS Functions and Mixins Module draft was published in late June after t
CSS チュートリアル CSS の基本 CSS の第一歩 CSS の第一歩の概要 CSS とは何か CSS 入門 CSS の全体像 CSS の働き 評価課題: 経歴ページのスタイル設定 CSS の構成要素 CSS の構成要素の概要 CSS セレクター Type, class, and ID selectors Attribute selectors Pseudo-classes and pseudo-elements Combinators カスケードと継承 Cascade layers ボックスモデル 背景と境界 書字方向の操作 内容のはみ出し CSS の値と単位 CSS における大きさの指定 画像、メディア、フォームの要素 表のスタイル付け CSS のデバッグ CSS の整理 評価課題: CSS の基本的な理解度 評価課題: 素敵なレターヘッドの便箋の作成 評価課題: かっこいいボック
WebKit have recently announced their intent to implement the blocking=render attribute for <script> and <style> elements, bringing them in line with support already available in Blink and generally positive sentiment in Firefox. The blocking=render attribute allows developers to explicitly mark a resource as render blocking, but… why on earth would you want to do that?! The short answer is: genera
【2024年版】Next.jsプロジェクトを始める前に押さえたい！CSS フレームワーク5選の総合比較
はじめに Next.jsを使用してアプリケーションを開発する際、適切なCSSフレームワークの選択は重要な決定の一つです。 私自身、仕事でNext.js + MUI(Material-UI)を使用した経験がありますが、改めて各CSSフレームワークを比較し、Next.jsプロジェクトに最適なフレームワークを探ってみます。 CSSフレームワークの候補 ネット上の技術記事やGithubのスター数を踏まえ、Next.jsと組み合わせるのに人気の高いCSSフレームワークとして、以下の5つを候補に挙げました。 Tailwind CSS CSS Modules Styled Components Chakra UI Material-UI (MUI) それぞれのフレームワークについて、特徴とコード例を見ていきましょう。 1. Tailwind CSS Tailwind CSSは、「ユーティリティファースト
目次・見出しのデザイン変更、マーカー機能、カテゴリーのタイル表示、実際に私のブログでのカスタマイズについて。CSSコードあり #CSS #ブログカスタマイズ #マーカー #CSSコード - サバのトランク
★★ はてなブログに関する記事です ★★ 前回の記事で、このブログのデザインを少しカスタマイズしていると書き、サンプル画像を載せました。 カスタマイズの「結果」だけ書いて「方法」を明かさないのも、なんだかイヤな感じ？なので😄、備忘録も兼ねてカスタマイズ方法を載せておきたいと思います。 わかっている方には冗長だと思うので、最初にCSSコードを載せ、その後に設定方法を書きます。 カスタマイズ内容 CSSコード 設定方法（簡単に） 設定方法（スクリーンショットと共にわかりやすく） オリジナルなカスタマイズ方法のヒント まとめ カスタマイズ内容 ・目次のデザインを変更 ・見出しのデザインをわかりやすく変更（オリジナルでは字の大きさの違いだけ） ・記事中の文字を「斜体」に設定することで「黄色のマーカー」を引く ・「カテゴリー」を「タイル」表示に変更 CSSコード CSSコード（ここをクリックすると
#TailwindCSS #CSS #Web制作 前回の動画「Tailwind CSS初心者が絶対ハマる落とし穴」の最後にちょっとだけ紹介したTailwind Variantsというライブラリについて話します。今までなぜこれを使っていなかったのか…と公開するほどの便利さ。ぜひ皆さんにも体験してみてほしいです！ Tailwind Variants公式サイト https://www.tailwind-variants.org/ 🛎️ 宣伝 : 本を書きました！ 「コードが動かないので帰れません!」 新人プログラマーのためのエラーが怖くなくなる本です。エラーログの読み方やデバッグの考え方、デバッガを使ったブレイクポイントの活用法を解説しています。 📖 https://www.amazon.co.jp/dp/479818067X ぜひ購入をお願いします！！！！！！！！！！！ 🧵 Z
要素が並んでいて、間に余白をつけるとき、あなたは何派ですか？ それぞれクラス名を別々につける gap :not:(first-child） 隣接セレクタ その他 今まで隣接セレクタを使う機会が少なかったので、練習しておきます。 See the Pen Untitled by Hiroyuki Doke (@hiroro-d) on CodePen. 隣接セレクタの説明 See the Pen Untitled by Hiroyuki Doke (@hiroro-d) on CodePen. ちなみにSassを使えば「＆ ＋ ＆」で実現できます。
ユーティリティーファーストなCSSフレームワーク「Tailwind CSS」のメリットとデメリットの克服方法
ユーティリティーファーストなCSSフレームワーク「Tailwind CSS」のメリットとデメリットの克服方法：フルスタックフレームワーク、T3 Stack入門（4） フロントエンドエンジニアに向けて、Webアプリケーション開発のためのフルスタックフレームワークT3 Stackを解説する本連載。第4回はユーティリティーファーストのCSSフレームワーク「Tailwind CSS」について解説する。
8月6日、海外メディアSMASHING MAGAZINEに、「It’s Time To Talk About “CSS5”」と題した記事が公開された。 CSSは、CSS3の成功以降、個別の進化を繰り返した結果、学習や理解が難しくなってしまった。また、「わかりにくい」というマーケティング上の問題もある。ここでは、こうした問題を解決するために「CSS5」という呼称を用いるアイデアと、そのアイデアの具体像、それを推進するCSS-Nextコミュニティグループについて詳しく紹介する。 CSS3とは何だったか？ CSS3は、タイポグラフィからセレクタ、背景までのレベル3の仕様を含む機能群を指している。CSS3は依然としてモダンなCSSの能力を定義するために最も一般的に使用されている用語であり、教育機関や求人情報などでも、CSS3ロゴが使われているのを広く見かけることができる。 CSS3やHTML5は、
The purpose of CSS’ contain property (“CSS containment”) is twofold: Optimization Styling possibilities When we apply contain to an element we’re isolating it (and it’s descendents) from the rest of the page, and this isolation what opens those possibilities. There are different types of containment which all do different things, and we’ll be getting into each of them. .element { contain: size; co
GitHub - happer64bit/style-eyes: a command-line tool for optimizing CSS files by combining related properties into shorthand forms 🔥
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
Letter Spacing Is Broken And There's Nothing We Can Do About It... Maybe | CSS-Tricks
This post came up following a conversation I had with Emilio Cobos — a senior developer at Mozilla and member of the CSSWG — about the last CSSWG group meeting. I wanted to know what he thought were the most exciting and interesting topics discussed at their last meeting, and with 2024 packed with so many new or coming flashy things like masonry layout, if() conditionals, anchor positioning, view
Twitter formerly known as X, a strange experience. It is the place where only the coolest of kids hang or so they say. The cool kids idle away their time smelling farts and fart like opinions. Sometimes I add my own to the mix but I usually lurk in the corners marinating in the warm miasma. Not all flatulence is created equal. Some, is rather nice, interesting even, and dare I say it can be quite
Transition to `height: auto` & `display: none` Using Pure CSS
Transition to `height: auto` & `display: none` Using Pure CSS Find out how to easily transition to intrinsic sizes and trigger transitions when an element receives its first style update using new CSS features.
先に結論 See the Pen いい感じに自動改行するやつ（完成形） by 松田美文 (@mifumi323) on CodePen. リサイズできるようにしたから横幅変えて挙動を確認してみてね。 ポイント 大きな塊単位で改行して、それで収まらなければ小さな塊で順次改行していくよ display: inline-block;のスタイルを当てたspanタグで囲った部分が一つの塊になるよ spanタグの入れ子でより細かい塊を作ってるよ スペース(特に全角スペース )はspan要素の端に来ないようにする必要があるよ overflow-wrap: anywhere;とword-break: normal;のスタイルの組み合わせで、最小の塊より幅が狭くなったときの改行を制御してるよ ここから下は、もうちょっと詳しく知りたいって人向けです。 前書き さて皆さん、映画『それいけ！アンパンマン ばいきん
WordPress の埋め込みブロックは、テーマに embed.php ファイルを配置することで自由度の高いカスタマイズを行うことが可能です。 これは WordPress 公式のドキュメント「テンプレート階層」にも記載されているので、詳しくはそちらを参考にしていただきたいのですが、embed.php の基本となる WordPress コアファイルの wp-includes/theme-compat/embed.php を確認してみると、多数フックできるポイントがあることがわかります。 ということは、テーマに embed.php ファイルを配置しなくても、function.php から、ある程度見た目をカスタマイズできるのではないか？という考えに至り、実際に色々と試してみました。 この記事では、テーマに embed.php を配置せず、フック と CSS を利用して埋め込みブロックの見た目を
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
「Tailwind CSSめっちゃ負債になりそう」はそうでもないのでは、と思っている
has()疑似クラスでコーディングが変わる！ CSS最新スタイリング - ICS MEDIA
HTMLとCSSでつくる！ リンクテキストのホバー時アニメーション11選 - ICS MEDIA
CSS変数がもっと便利になる新しい記述方法、CSSの次世代変数@propertyがすべてのブラウザにサポートされました
実例で学ぶFlexboxとCSS Gridの使い分け – TAKLOG
CSSの変数をインラインで使用した条件付きCSS、コードを減らしながらもバリエーションを作成するCSSのテクニック
CSSで美しいメッシュグラデーションを作成できる無料ツール、アニメーションで動くメッシュグラデーションも簡単 -MSHR
群雄割拠のCSSフレームワークのトレンドを理解する | レバテックラボ（レバテックLAB）
AstroとTailwind CSSを使ってDeveloper Siteをリデザインした話 | 株式会社ヌーラボ(Nulab inc.)
SVGの色が変わらない？CSSで色を操作する方法 - Qiita
Chrome 127で新しく追加された3つのCSSの機能、使用するフォントに関係なく読みやすくするなど
CSS の `reading-flow` プロパティで要素の読み上げ順を制御する
デザイナーにもお勧め！ CSSもThree.jsもタイムライン編集を可能にするTheatre.jsが凄い - ICS MEDIA
【claude.ai有料版1ヶ月レビュー】不満点もあるけどHTMLやCSS、礼儀の点で一番マシなAI
Chrome 128で新しく追加された4つのCSSの機能、ルビのレイアウト強化、optionの推奨最小サイズなど
CSS Functions And Mixins Module Notes | CSS-Tricks
@starting-style - CSS: カスケーディングスタイルシート | MDN
blocking=render: Why would you do that?! – CSS Wizardry
Tailwind CSSを使っているなら使いたいTailwind Variants
CSS｜要素の間に余白をつける - Qiita
CSS5について語ろう — CSSの進化を区分する"Era"（時代）というアイデア
The CSS contain property – Frontend Masters Boost
Amazon.co.jp: Tailwind CSSフロントエンド開発の教科書: 仮: 本
Can you convert a video to pure css?
見出しとかの日本語をいい感じの塊で自動改行するCSS - Qiita
WordPress 埋め込みブロックの見た目を Hook と CSS でカスタマイズする