【CSS】outlineの特徴・使い方とborderとの違いについて
「outiline」プロパティ一覧は以下です。 「outline」と「border」の一番の違いは
レイアウトを崩さないということです。 以下のコンテンツがあったとします。 「outline」の方にhoverをすると以下のようになります。 「border」の方にhoverすると以下のようになります これでわかっていただけましたでしょうか？ 「border」はborder-colorやborder-styleは上下左右別々にCSSを反映することができますが いかがでしたでしょうか？ また何かございましたらご紹介しますね。
今回は、CSSの「outline」をご紹介していきたいと思います。
様々な参考書などでは「border」の説明は書いてあっても「outline」の記載は見たことがないですね。
「outline」を使うことで、「border」では
出来なかったことも
そちらも合わせてご説明していきたいと思います。
outlineプロパティについて
outline-style
初期値 none、solid、dushoed…etc
outline-color
色変更のプロパティ
outline-width
線の幅を指定するプロパティ
outline-offset
外側に離す距離を指定するプロパティ
outlineとborderの違いについて
「border」の方をhoverすると隣にあるコンテンツもその分間延びしますが
「outline」の方は他のコンテンツに影響を与えずに済みます。outlineは上下左右でしか変更できない
「outline」だと上下左右同じCSSしかあてることができません。
今回は「outline」の特徴と「border」の違いについてご説明させて頂きました。
ご清覧くださいありがとうございました。
ちょこっとメンターサービス
HP無料診断
【実践マーケティング手法２２選】 無料ダウンロード
助成金・補助金・融資・M＆A等の総合経営支援サービス
「補助金パートナー」
月額定額制で、ホームページやECサイト運用、営業資料・チラシ・DMなどの製作代行から補助金や助成金など資金調達の情報を提供及び申請代行まで一手に支え会社の成長をサポートするコンサルティング型のサービスです。
ワードプレスでSEO対策をするなら【オリテン】
seoで高位置検証済みのオリジナルテンプレート制作
完全オリジナルの自社テンプレートを毎月3社様限定で制作を承っております。
