HTML

CSS
指定したセレクタに一致しない要素に対して、スタイルを適用(:not())

特定の要素に対してのみスタイルを適用する方法は、nth-child()などを含め、色々と存在するが、:not()という疑似要素を使用することでも実現することが可能。 今回は、:not()の使用方法についてまとめてみる。 […]

続きを読む
CSS
マウスでクリックやドラッグし、選択した要素へスタイルを適用させる(::selection)

とある要素をクリックもしくはドラッグした際に、デザインを変更したい時がある。 cssの疑似要素で実装することも可能なため、今回はその方法についてまとめていく。 HTMLソースの準備 以下のようなHTMLソースを準備する。 […]

続きを読む
CSS
CSS : テキストが設定した幅を超えた場合、「...」を表示させる (text-overflow)

テキストを設定する要素に限らずではあるが、その要素に設定した横幅よりもテキストの長さの方が長い場合に、末尾に「...」(エリプシス)を表示させる方法についてまとめる。 HTMLファイル 以下のようなHTMLコードを用意す […]

続きを読む