Tag CSS

CSS: Absolute で上下左右の中央配置

久しぶりに、CSS の Absolute で縦横中央配置するときに少々手こずってしまったのでメモしておきます。 目次 Absolute 中央配置 まとめ Absolute 中央配置 外側の div (wrapper) と、中央配置したい div (inner) を用意します。 HTML 外側の div (wrapper) に position: relative と縦横サイズ、中央配置したい div (inner) に position: absolute にし、top, left, right, bottom プロパティに同一の値(ここでは 0)を指定し、margin: auto にします。 CSS 結果 wrapper クラスの div(薄いグレー)の中の inner クラスの div(濃いグレー) が上下左右中央に配置されました。 まとめ absolute のような決め打ちのスタイルはあまり使いたくはないのですが、どうしても使用を避けられない場面もあるかと思います。 flex でも同様のことが実現できますが、モダンブラウザでの互換性を考慮する場合、ある程度使える方法なのではないでしょうか。 この記事がみなさんのお役に立ちましたら、下記「Share it」よりブックマークやSNSで共有していただければ幸いです。

CSS: リンク擬似クラス :link, :visited, :hover, :active の記述順

CSS の記述順が間違っているため、リンクタグ擬似クラスが効いていない時があります。 リンクテキストのカラーならサイトの動作に問題がないため、ついついそのまま放置してしまうケースもあるかと思いますが、あまりよろしくはありません。ちゃんと直しましょう。 今回はこの CSS 記述順をいつも忘れるのでメモしておきます。 目次 リンクタグの擬似クラス :link, :visited, :hover, :active 記述順 まとめ リンク擬似クラス :link, :visited, :hover, :active の記述順 記事のタイトルそのままですが、:link -> :visited -> :hover -> :active の順に記述します。 サンプル CSS 覚え方 擬似クラスの頭文字をとって lvha -> l(o)v(e) & h(over)a(ctive)te -> love & hateと覚えます。多少無理矢理な感じがしますが、それでもないよりはマシかと思います。 まとめ 覚え方は love & hate でしたが、この love & hate を忘れてしまっていました。 CSS の継承とリンクタグの性質をしっかり理解していれば、こう言った試験前の一夜漬けのような覚え方をしなくても自然と書けるはずなのですが、一度記事にしましたので、もう忘れることはないと思います。 この記事がみなさんのお役に立ちましたら、下記「Share it」よりブックマークやSNSで共有していただければ幸いです。