すべてのカテゴリ

【要素を縦並びにしたときに、順番を入れ替える】 スマホ画面のときなど 縦並びにするだけなら display: block; だけでOK。 さらに、順番を変えたいとき 親要素に display: flex; flex-direction: column; 子要素に order: 　;で順番を指定すると 要素の順番を意図的に変えれます

皆さんはCSSは何使っていますか？ ふつうにcssファイルやbootstrapとかでレイアウトなんかいろいろありますがやはりレイアウトも効率的にしたいですよね？ Tailwindcssはclassにそのままコードを書くことで簡単に反映できるのでおすすめです。 例　（<div><classname=container "mt-5 bg-color-500"></div>） 上記だとマージンと背景色を変更しています。 今回はnpmでインストールから使用可能までの手順を紹介していますのでこの記事を読んで是非Tailwind.cssを使ってみてください！ １　npm install tailwind でインストール。 ２　npx tailwindcss initでtailwindcssの設定ファイルを作成します。 ３　npx tailwindcss initで作成したtailwind.config.jsでcontentの中に "./src/**/*.{js,jsx,ts,tsx}",  を加えて適応ファイルを加えて下さい。 ４　index.cssにtailwindの基本スタイルを適応するため下記を記述 アットマークtailwind base; アットマークtailwind components; アットマークtailwind utilities;５　tailwindを適応させたいコンポーネントかjsファイルに import "./index.css"; をインポートすることでTailwindのスタイルを適応。 ６　スタイルを当ててみてnpm star

子孫タグ 子孫子タグ > 子親 親:has(子)兄弟 　直後 兄 + 弟 　すべての弟 兄 ~ 弟 　指定したタグのn番目 兄 弟:nth-of-type(n)任意のタグ *[属性="値"]

属性タグ[属性]　属性を持たないタグ:not([属性])属性+値　一致タグ[属性="値"]　　タグ不問*[属性="値"]　　and タグ[属性1="値1"][属性2="値2"]　　一致しないタグ:not([属性="値"])　含む タグ[属性*="値"]　　含まないタグ:not([属性*="値"])　単語を含むタグ[属性~=値] 　　単語を含まないタグ:not([属性~="値"])　始まる タグ[属性^=値] 　　始まらないタグ:not([属性^="値"])　終わる タグ[属性$=値]　　終わらないタグ:not([属性$="値"])

タグ名タグID#idクラス.クラス　OR.クラス1,.クラス2　AND.クラス1.クラス2複数タグ1, タグ2, ...n番目セレクタ:nth-child(n) 1～　先頭 セレクタ:first-child 　末尾 セレクタ:last-child