borderとoutline | 長期有給インターン生の日常|株式会社ガーディアン | 株式会社ガーディアン｜141億のデータで中小企業を勝たせるWEB戦略データ・カンパニー | 株式会社ガーディアン｜141億のデータで中小企業を勝たせるWEB戦略データ・カンパニー

こんにちは！

マーケティング部受託プロダクトチームのインターン生、村高歩夢です！

はい。今日はいきなりです。

HTML/CSSの難しいところは空間把握にあるのですが、先日borderとoutlineの違いという僕にとって革命的な記事を見つけたのでアウトプットしようかと思います。

borderとoutline

---

今回はborderとoutlineという似たような機能を持つプロパティについて違いを説明していきます。

まず、borderとは要素の枠線のことを操作するプロパティで、色・線の太さ・線の種類を指定することで枠線を作ることができます。

一方で、outlineは要素の外側に表示される境界線のスタイルを指定するCSSプロパティです。もちろん、線の太さ・色・種類を指定して境界線を作ります。

同じやん。

って思いますよね。僕も思ってました。

先ほど、HTML/CSSの空間把握について述べた..というかソフトタッチしました。

HTML/CSSには基本的に幅と高さという他の要素に影響する空間があります。

しかし、今回のoutlineプロパティには空間がありません。

ちょっと文面では分かりづらいと思うので、実演してみたいと思います。

左がborder、右がoutlineです。

みなさん上の図にマウスを当ててみてください。

borderの場合、マウスを当てるとborderの線の太さ分、サイトがずれたかと思います。

一方、outlineはマウスを当ててもサイトはずれません。

これあがoutlineに空間がないってことです。

まぁoutlineに空間がないというか

厳密にいうとoutlineはホームページと被らない並行な空間を持っているんです。

上の図はホームページを真横から見た時にborderとoutlineがどこに配置されているのかを示しています。

右上の緑の線がoutlineの線のある領域、左の緑の線はborderの線のある領域、黒い線がホームページの領域です。

この図からborderの線の太さ・長さはホームページに影響するが、outlineはホームページに干渉しないことが分かります。

上の実演を見て分かる通り、マウスオーバーするたびにサイトがずれるのはダサいじゃないですか。

今まではこれが起きないためにborderを頑張って弄くり回していましたが、これからはoutlinプロパティ１行だけで済みます。

なんと快適なことか。これが令和ですね。

---

■ガーディアン主力ソリューション→OWLet

■新サービスリリースのお知らせ

WEB業界を変える！育てて成果を上げるサブスク型HPサービス

→SCSC (スクスク)

ガーディアンのインターン制度→こちら

村高歩夢の紹介ページ→こちら