フリーランスのためのネットビジネス専門学校 ネットで独立開業を目指す人を応援
フリーランスのためのネットビジネス専門学校 ネットで独立開業を目指す人を応援

positon:absoluteのときに、横幅可変の要素を作る

CSSのborderプロパティで枠線を描くとき、隣り合う2辺で異なるスタイルを指定すると、角の部分はどのように描画されるのでしょうか。
試してみましょう。

See the Pen box-border by snocchy (@snocchy) on CodePen.

恐らく、角の部分は斜めに分割されてそれぞれの枠線が描かれたかと思います。
実はCSSの仕様は角の部分の処理を規定しておらず、ブラウザの実装依存となっているようなのですが、手元のいくつかの環境で確認したところ、いずれも斜めに分割されて表示されました。
昔はブラウザによる違いがもっとあったみたいですが、一応統一されてきたのかもしれません。

4.2. Line Patterns: the border-style properties
Note: This specification does not define how borders of different styles should be joined in the corner.

それでは、もし次のような枠線を付けたいと思ったら、どのようにマークアップすればよいでしょうか。
box-border--ordered.png
divを入れ子にしたりすれば出来そうな気はしますが、装飾だけのためにHTMLの構造に手を加えるのは避けられるに越したことはないですよね。
ということで、疑似要素を使ったマークアップを紹介します。

See the Pen box-border–ordered by snocchy (@snocchy) on CodePen.

::beforeでも::afterでもいいので疑似要素を重ね、はみ出させたい枠線をそちらに付けることで意図どおり表示させることができました。
参考になれば幸いです。

[紹介元] CSSタグが付けられた新着投稿 – Qiita positon:absoluteのときに、横幅可変の要素を作る

コメント

記事に戻る

コメントを残す