css

appearance-noneはOS レベルのスタイル制御するもの ウェブフォームのスタイル設定はOSレベルで設定されている。 そのため、コントロールの見た目のカスタマイズの問題の一部となっていた。 appearance-noneは適用したコントロールがシステムレベルのスタイルを使用することを可能な限り止め、 CSS を使用して自分でスタイルを構築できるようにするプロパティ。 フォームへの高度なスタイル設定ほぼこれに書いてあること、そのまま。 CSSの上書きと何が違うのか appearance-noneでは ボタンやフォーム要素のデフォルトスタイルを即座に取り除き、開発者がカスタマイズするベースを作ることができる。上書きだと個別に上書きするのは手間がかかかるので、その点便利なプロパティとのこと。 なんとなく使っていたので、はじめてその有用性に気が付いた。 ポエム 木こりのジレンマ 最近というか今更というか、木こりのジレンマなる寓話を思い出した。 ある日、森で一生懸命に木を切っている木こりがいました。彼は朝から晩まで休むことなく木を切っており、疲れ果てています。それでも、木を切るのにとても時間がかかっているため、彼はさらに焦っていました。 そこへ通りがかった旅人が木こりに話しかけました。 「あなたの斧はとても鈍くなっているようですね。少し休んで、斧を研いだ方がいいですよ。」 木こりはその言葉にイライラして答えました。 「そんな時間はない！見ての通り、木を切らなければならないんだ！斧を研ぐ暇なんてないんだ！」 旅人は木こりにもう一度諭しました。 「でも、斧が鋭くなれば、木をもっと早く、もっと簡単に切れるはずですよ。少し休んで斧を研いだ方が、結果的に仕事が早く終わるでしょう。」 木こりは依然として目の前の仕事に集中しすぎて、斧を研ぐことの重要性に気づかず、疲れ果てたまま非効率に仕事を続けました。 この寓話は、効率的に物事を進めるためには、短期的な忙しさに囚われず、道具や方法を改善する時間を取ることの重要性を説いている。 そしてこれの話がとても心に響いた。 プログラミング中、忙しい時は特にその場しのぎの解決策に飛びつき、特に考えることなく実装する。 結果的にその案件は完遂するけど、身につくものをいくつか取りこぼしている。 なのでこれからは、気になったことはどんどん調べ、ここに備忘録として残していく。

nth-child 親要素内のすべての子要素に対して適用され、その中から条件に一致する要素が選択される。 そのため要素の種類に関係なく、すべての子要素が考慮される。 nth-of-type 親要素内の特定の要素タイプ（タグ名）に対して適用され、その中から条件に一致する要素が選択される。 そのため要素の種類に基づいて選択がされる。 具体例 例えば以下のコードがあった時、 <div class="example"> <div>Item 1</div> <p>Item 2</p> <div>Item 3</div> <p>Item 4</p> <div>Item 5</div> </div> nth-child .example div:nth-child(3) { color: red; } この場合、.example内の直下のdiv要素の中から、3番目の要素（“Item 3”）が赤くなる。 nth-of-type .example div:nth-of-type(3) { color: blue; } この場合、.example内の直下のdiv要素の中から、同じ種類の要素の中で3番目の要素（“Item 5”）が青くなる。

React NativeでTailwind CSSを使用したいということで調べてみると下記２つが該当した。 tailwind-rnとnativewindの比較 tailwind-rn ☆4.1k nativewind ☆3k スターはtailwind-rnが上回っているけど、活動の多さではnativewindが上回っているようなので、nativewindを採用した。 nativewindの導入 ドキュメントも丁寧なのでなぞって行っていく。 npm i nativewind npm i --dev tailwindcss 上記コマンドで該当パッケージをインストールする。 npx tailwindcss init 次に上記コマンドでtailwind.config.jsを作成し、下記のように記載する。 // tailwind.config.js module.exports = { - content: [], + content: ["./App.{js,jsx,ts,tsx}", "./<custom directory>/**/*.{js,jsx,ts,tsx}"], theme: { extend: {}, }, plugins: [], } <custom directory>は自身のディレクトリに編集する。 次にbabel.config.jsを下記のように編集していく。 // babel.config.js module.exports = function (api) { api.cache(true); return { presets: ["babel-preset-expo"], + plugins: ["nativewind/babel"], }; }; 以上とのことなので、起動してみる。 無事に開発環境は動いている。 次にnativewindの記述を反映することができるか確認してみる。 <View style={styles.container}> <Text>Hello World!...