CSS– category –

サンプルコード <style> .bubble { position: relative; background: #ffffff; border: 4px solid #000000; border-radius: 12px; padding: 20px; width: 300px; ...

floatで画像を下に配置することは難しい点があります floatを使って画像の下にテキストを回り込ませる実装は、一見シンプルに見えて実は複雑です。以下のような課題があ...

リストを 左の書き出し位置は揃えつつ 画面中央位置に寄せたい場合 ▼ulの親要素、ulに下記のスタイルをあてる .list-center { text-align: center; } .list-center ul {...

カラム子要素　下揃え 各カラムでテキストの量に違いがあったりする場合、カラム下部子要素の高さ位置がバラバラになってしまうことがあると思いますが、CSSで下ぞろえ...

背景 background ＜一括指定の順番＞ background: url background-position / background-size background-repeat; background-position / background-size　の記述は決...

参考サイト https://digitalidentity.co.jp/blog/creative/gulp.html

下記のようにサイドバーを狭くしたもしくは、サイドバーを広くしたい場合 ▽CSSに下記の通り記述 /* サイドバーの横幅調整 */ /* 横幅「250px」の場合 */ @media (min-wi...

@charset “UTF-8”; @charset "UTF-8"; この表記によりhtmlやcssがどの文字コードで書かれているかをブラウザが判断（文字化けを防ぐ）→現在はブラウザ自動で判断するこ...

Inline Style export const App = () => { return ( <> <p style={{ color: "red" }}>こんにちは</p> </> ); }; 波カッコの一つはJavaScrip...

↑下の行を左寄せにしたい display: grid; display: flex;ではなくdisplay: grid;にする .grid { display: grid; grid-template-columns: repeat(auto-fit, 80px); justi...