Thank you - Open CollectiveFirst and foremost, thank you to everyone who has contributed to styled-components over the years. Open Source is hard work, and many of the larger feature and/or refactoring drives probably would never have shipped without your support! As... styled-components のメンテナンスモードへの移行が発表された。 これは、CSS in JS 並びに styling library の歴史において、１つの節目となる出来事である。 社内のプロダクトでは styled-components が使
CSSのmarginを使わずにWebサイト構築してみた
はじめに 2023年の6月22日に開催された「Sendai Frontend Meetup #9」で「marginを使わずにWebサイト構築してみた」という内容でLTをしました。 もはや2年近く前の登壇なんですが、記事にしようと思ったけどめんどくさくなって放置した書きかけの記事が残ってました。Cursor使って技術記事を書くのに慣れたくてちょうど良かったので供養します。 CSSでレイアウトを組むとき、display: grid や display: flex の gap プロパティで余白を調整することが多くなりました。 それで、ふと「paddingとgapがあればWebサイト組めるのでは？」と半分ネタと半分本気で考えたのでやってみることにしました。 当日のLTで使ったスライドはこちら。 ルールと素材 ルールは以下 ＿人人人人人人人人人人人＿ ＞ marginを使わない ＜ ￣Y^Y^Y^Y
CSS-in-JSを作った話
モチベーション ReactのCSS選定はVueなどに比べ選択肢が非常に多く、選定が難しいところが課題だと思っていた。 自分で自炊したCSS-in-JSでストレスフリーでやっていきたい、そんな思いがあった中、 ゼロランタイムが成熟し始めてきていたのでそろそろやるか、という意気込みで開始した。 UIライブラリでもCSS-in-JSでも良かったが、ReactRSC以来パフォーマンスを気に掛ける必要があり実行時に解決されるEmotionやStyled-JSXはTailwindと通常のCSSの進化に淘汰されてしまったことを残念に思っていた。 興味のあったCSS-in-JS vanilla-extract・StyleX・Linaria・Kuma-UI 作成するにあたって ・ほぼゼロランタイム ・機能を沢山作るより最低限のapiの実装で行きたい ・設定を煩わしくしたくないのでバンドラー専用プラグインを作
はじめに <select>要素にはプレースホルダー属性がないですが、未入力の時に色を薄くするようなデザインは頻繁に使用します。 未入力の時のみテキストの色を変えるには、従来は <select>要素にrequiredを付与する <select required> <option value="">未選択</option> <option value="option1">Option 1</option> <option value="option2">Option 2</option> <option value="option3">Option 3</option> </select>
「div > p」などのように、親から子を特性するセレクタ用法は有名ですが、擬似クラスの:has()を使うと、その逆「子にp要素を持っているdiv」をセレクタにする事ができます。 擬似クラス:has()の使い方 今回は、書籍リストのようなサンプルでお話します。 Illustratorの本 Photoshopの本 HTML / CSSの本売り切れ <ul> <li>Illustratorの本</li> <li>Photoshopの本</li> <li>HTML / CSSの本<span class="soldOut">売り切れ</span></li> </ul> うち、「売り切れ」のカラムだけスタイルを変えたいとします。 :has()を使うと、次のように「span要素を持っているli要素」だけをセレクタにすることができちゃいます。 /* spanを持っているli要素のスタイルだけを変える *
実際にサイトを作る際、セクションごとにfont設定がバラバラということはまずないでしょうし、色についてもメインのテーマカラー、補色でサブカラー、反対色でアクセントカラーのように、数種類に絞って制作にあたると思います。 そうなるとCSSファイル内で、「同じプロパティに同じ値」を繰り返し使う場面が出てきます。 それを擬似クラス 「:root」と変数を使い一括で指定できるのがカスタムプロパティです。CSS変数という呼ばれ方もします。 とりあえず使い方から見ていきましょう。 カスタムプロパティの指定方法 「変数」というと急にプログラミング感が出て及び腰になりそうですが、何も臆することはありません。 まずCSSファイルの冒頭に 一括指定したいプロパティを記述していきます。例ではメインカラーを指定することにします。 :root{ --maincolor : rgb(255, 127, 80) ; }
ひらがな、またはカタカナのみ入力可能なフォームパーツのHTMLサンプルコードと表示例の紹介になります。 ひらがな、またはカタカナのみ入力可能なフォームパーツのサンプルコード HTMLでひらがな、またはカタカナのみ入力可能なフォームパーツを設置する際のサンプルコードです。 サンプルコードでは<input>タグに「pattern」属性で入力可能な文字列の範囲を正規表現パターンで指定しています。 この方法は名前の読み仮名を入力するフォームパーツなどにて利用可能です。 <p>ひらがなとカタカナのみ</p> <p><input type="text" name="name" pattern="^[ぁ-んァ-ヶー]+$" /></p> <p>ひらがなのみ</p> <p><input type="text" name="name" pattern="^[ぁ-ん]+$" /></p> <p>カタカナのみ<
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
styled-components の歴史、現在、これから
:has擬似クラスを使用して<select>要素にプレースホルダーを実装する方法
【CSS擬似クラスの:has()】つまり、子から親を探せるというコトです | デザログ
テーマ要素はCSS変数（カスタムプロパティ）で一括指定する | WEB制作の備忘録めも ミフネWEB
HTML | ひらがな、またはカタカナのみ入力可能なフォームパーツのサンプルコード