borderとの違いも徹底解説2022年9月15日こんにちは。今回はCSSの「outline」について解説したいと思います。「線を引くことができるborderと同じなんじゃ?」と思っている方も多くいると思います。多くの参考書はborderの説明だけで終わっていてoutlineまでは説明されていません。実際によく似たプロパティなのです。実は、borderでは表現できないこともoutlineなら表現できます。この記事ではoutlineの特徴とborderとの違いを解説していきます。違いも含めてoutlineを理解しましょう!outlineで使えるプロパティ一覧と値まずはoutlineのプロパティを確認しましょう。上記のショートハンド(outline-offset以外)outlineは要素の輪郭線の太さ・色・スタイルを指定できるプロパティです。borderとほとんど一緒です。outlineプロパティの指定方法はスタイルも太さも色指定も、borderプロパティとほぼ同じですね。outlineはborderと違いレイアウトを崩さないoutlineとborderの一番の違いは、outlineは表示のためのスペースを考慮しなくてもいいと言う点です。下記の2つの水色のブロックにそれぞれホバーしてください。「outline」の方は緑の輪郭が出てくるだけで、他の要素に影響が出ません。これはborderがボックスモデルの一つで、要素感の距離を調整する必要があるからです。一方のoutlineはボックスモデルではなく、要素の外に輪郭を描くだけです。いったoutlineの特徴からフォームで必ずといっていいほど実装されています。入力欄をクリックすると薄く青枠が出てくるやつですね。(擬似クラスの:focusで設定していることが多いです)このようにCSSのoutlineで実装することでレイアウトをガタつかせることなく綺麗に表現できます。outlineは上下左右で同じ指定しかできないもう一つborderとの違いは、上下左右での概念がないと言うことです。borderは上下左右で太さ、色、線の種類を指定できますが、outlineは全部同じ、太さ、色、線の種類でしか指定できません。←上下左右全部に適応されます。#000;}</style>実装結果は下記です。繰り返しになりますが、borderであれば上下左右で色を変えたりできますがoutlineではできません。いかがでしたでしょうか?borderの方が使う機会は確かに多いですが、今回の例のようにoutlineはホバーアクションを入れるときに他の要素を気にしなくていいので使いやすいです。皆さんも一度使ってみてください。子孫セレクタ、子セレクタ、隣接、複数など忘れがちなセレクタをまとめました<前編>「*」「+」「>」「,」これらについて書きます。セレクターを自由に使える様になると、コーディングスピード、可読性、更新性がアップします。スキルアップ【HTML】9つの重要タグの理解でSEO対策(セマンティック要素)セマンティックコーディングを理解することで、コード自体の可読性を上げ、SEOにも効果的なHTMLの記述が可能になります。スキルアップ【CSS】:first-childと:first-of-typeの違いは?last-childとlast-of-typeも同じ考え方first-childとfirst-of-typeの違いです。この二つは似ているのでときどき混乱しますので詳しく解説します。last-childとlast-of-type、nth-childとnth-of-typeの違いもこの考え方と同じです。スキルアップ【HTML】アップルのコード見たら優しさが溢れていた。アップルのサイトのソースコードを見てみると、いろんな学びがあったので記事にまとめました。スキルアップreturnについて今回はJavaScriptでよく出てくるreturnについて書きます。【CSS】テキストにマスク掛け。画像をテキストの形にクリッピング。(background-clip)【CSS】子要素を親要素内で上下左右中央寄せさせる方法フロントエンドエンジニアYamato(やまと)7年目のフロントエンドです。サンフランシスコ留学の際にITの素晴らしさに触れエンジニアになると決心。独学で未経験からアルバイトで採用され入社。経験し2022年8月に独立しました。HTML/CSS・JS・WordPress・Shopifyを触っています。YAMATOdevlog。