CSS 【入門編】 :disabled 疑似クラス – CSS実践ガイド
こんにちは！フロントエンドの世界へようこそ。CSSの設計やコードの海を毎日泳いでいるチーフアーキテクトの私ですが、今日は少し肩の力を抜いて、CSSを始めたばかりのあなたへ向けて、とっても身近で頼れる仲間を紹介したいと思います。今日スポットを...
属性セレクタと疑似クラス（状態：hover, focus, active, disabled等）
CSS CSS 【入門編】 :active 疑似クラス – CSS実践ガイド
こんにちは！フロントエンドの現場を長年歩んできたチーフアーキテクトの私ですが、今日はCSSの「ちょっとした隠し味」のような、でもめちゃくちゃ大切な存在についてお話しさせてください。CSSを勉強し始めると、`hover`（マウスを乗せたとき）...
CSS 【入門編】 :focus 疑似クラス – CSS実践ガイド
こんにちは！フロントエンドの現場を長年フラフラと……もとい、渡り歩いてきたチーフアーキテクトの私です。CSSを書き始めたばかりの頃って、次から次へと出てくる呪文のようなセレクタに「うわ、また新しいの覚えなきゃいけないの……？」って、めまいが...
CSS 【入門編】 :hover 疑似クラス – CSS実践ガイド
こんにちは！CSSの泥臭い現場を長年渡り歩いてきた、チーフアーキテクトの私です。Web制作の扉を開いたばかりの頃って、覚えることが山のようにあって圧倒されてしまいますよね。「あれもこれも動かしたいのに、なんだかホームページが冷たくて静止画み...
CSS 【入門編】 大文字小文字の区別なしフラグ [attr=value i] – CSS実践ガイド
こんにちは！フロントエンドの現場を長年フラフラと……もとい、最前線で駆け抜けてきたチーフアーキテクトの私です。CSSを書き始めてしばらく経つと、こんな壁にぶつかりませんか？「あれ？ さっき書いたCSS、ちゃんとセレクタを指定したはずなのに、...
CSS 【入門編】 部分一致 [attr*=value] – CSS実践ガイド
こんにちは！フロントエンドの現場を長年うろついている、いわゆる「CSSのおじさん」ことチーフアーキテクトです。CSSを書き始めた頃って、`class`や`id`ばかり使いがちですよね。「とりあえず困ったら `class="btn"` をつけ...
CSS 【入門編】 後方一致 [attr$=value] – CSS実践ガイド
こんにちは！フロントエンド・アーキテクトの私です。CSSを書き始めてしばらく経つと、「あ、こういう条件の時だけデザインを変えたいな」という細かいこだわりが出てきますよね。クラス名を追加すれば解決するけれど、HTMLがいっぱいで面倒くさい……...
CSS 【入門編】 前方一致 [attr^=value] – CSS実践ガイド
こんにちは！フロントエンドの現場を長年フラフラと……もとい、渡り歩いてきたチーフアーキテクトの私です。CSSを書き始めた頃って、セレクタの多さにめまいがしませんか？「クラス名」「ID」「子孫セレクタ」……。それに加えて、なんだか難しそうな名...
CSS 【入門編】 ハイフン区切りプレフィックス [attr|=value] – CSS実践ガイド
こんにちは！フロントエンドの現場を長年歩んできたシニアアーキテクトの私です。CSSを書き始めてしばらく経つと、「あれ、この要素だけにいい感じにスタイルを当てたいのに、クラス名がごちゃごちゃしててうまく狙い撃ちできない…！」なんて壁にぶつかる...
CSS 【入門編】 空白区切りリストの包含 [attr~=value] – CSS実践ガイド
こんにちは！フロントエンドの現場を長年うろついている、ちょっとお節介なCSSアーキテクトです。CSSを書き始めた頃って、セレクタの記号の多さにめまいがしませんか？「`.`はクラスだっけ？ `#`はIDだっけ？ じゃあ、この変なカギ括弧 `[...