CSS一覧

NO IMAGE

【CSS】リストにhoverしたときにhoverしていない要素のスタイルも変更する方法【コピペOK】

ことばでうまく説明できないので、まずは実際に動作してるのを見てください。 See the Pen ZEGQggj by yinouet (@yinouet) on CodePen. HTMLの構造としてはemmet記法でいうとul>(li>a)*...

記事を読む

NO IMAGE

【CSS】カードやボックスのデザインが野暮ったく見えたときに試したい小技3つ

特に非デザイナーの開発者やWeb制作の初心者によくあるとおもうのですが、自分でデザインしたページをいざコーディングしてみたら、思ってたのと違う印象になってしまうこと、ありますよね。 そんな、ちょっと野暮ったいな、とか、もう少し洗練された印象にしたいな、というときに試してみ...

記事を読む

NO IMAGE

【CSS】要素のスタッキング方法3種

Webサイトを制作していれば必ず出てくる、要素のスタッキング。 初歩的ではありますが、marginの相殺などで思ったようにスタッキングできないこともあるのではないでしょうか。 場当たり的に要素ごとに余白を設定してしまうと、実際に表示されている余白がどの要素に設定され...

記事を読む

【CSS】フクロウセレクタ便利じゃん

お恥ずかしながらフクロウセレクタ(owl selector)というのを最近知りました。 フクロウセレクタとは全称セレクタ * を連ねて、連続する要素の場合にスタイルが当たるようにするものです * + * このように見た目がフクロウの顔に見えるからフクロウ...

記事を読む

NO IMAGE

【CSS】属性セレクタの書き方メモ

無駄に詳細度を上げない属性セレクタですが、けっこう便利な指定方法があるようなのでメモ。 うまく使えばコードも少なくできそうだし単純に便利。 属性が指定されている要素を指定 {property: value;} 使い所がちょっと想像つかないんだけど特定...

記事を読む