福岡 SEO対策・ホームページ制作・広告運用代行なら
株式会社スゴヨク

HOME > ブログ > 【CSS】outlineの特徴・使い方とborderとの違いについて

SUGOYOKU BLOG

【CSS】outlineの特徴・使い方とborderとの違いについて

福岡に拠点を置いているホームページ制作・SEO対策の株式会社スゴヨクです。

今回は、CSSの「outline」をご紹介していきたいと思います。
様々な参考書などでは「border」の説明は書いてあっても「outline」の記載は見たことがないですね。
「outline」を使うことで、「border」では
出来なかったことも そちらも合わせてご説明していきたいと思います。

outlineプロパティについて

「outiline」プロパティ一覧は以下です。

outline-style 初期値 none、solid、dushoed…etc
outline-color 色変更のプロパティ
outline-width 線の幅を指定するプロパティ
outline-offset 外側に離す距離を指定するプロパティ

outlineとborderの違いについて

「outline」と「border」の一番の違いは レイアウトを崩さないということです。

以下のコンテンツがあったとします。

「outline」の方にhoverをすると以下のようになります。

「border」の方にhoverすると以下のようになります

これでわかっていただけましたでしょうか?
「border」の方をhoverすると隣にあるコンテンツもその分間延びしますが
「outline」の方は他のコンテンツに影響を与えずに済みます。

outlineは上下左右でしか変更できない

「border」はborder-colorやborder-styleは上下左右別々にCSSを反映することができますが
「outline」だと上下左右同じCSSしかあてることができません。

いかがでしたでしょうか?
今回は「outline」の特徴と「border」の違いについてご説明させて頂きました。

また何かございましたらご紹介しますね。
ご清覧くださいありがとうございました。

【実践マーケティング手法22選】 無料ダウンロード

マーケティング手法22選

助成金・補助金・融資・M&A等の総合経営支援サービス「あなたのアイボー」

月額定額制で、ホームページやECサイト運用、営業資料・チラシ・DMなどの製作代行から補助金や助成金など資金調達の情報を提供及び申請代行まで一手に支え会社の成長をサポートするコンサルティング型のサービスです。


補助金 お問い合わせ

ワードプレスでSEO対策をするなら【オリテン】

seoで高位置検証済みのオリジナルテンプレート制作
完全オリジナルの自社テンプレートを毎月3社様限定で制作を承っております。

補助金 お問い合わせ

ホームページの事でお困りならこちらから

お見積り・ホームページ制作・運用、広告に関するご質問まで、どんなことでもお気軽にご相談ください。
日・祝日・休業日以外は24時間以内に返信いたします。

スゴヨク ロゴ

TOP

//サムネイルを取得