【CSS】使える有用なCSS Tips：リンクをクリックした時に表示される点線を消す方法

下記のように、リンクがかかったテキストや画像をクリックした際に出てくるアウトライン(輪郭線)の点線をなくす簡単な方法を紹介します。

下記のサンプルのように、outlineプロパティを使ってa要素に「outline:none」を追加するだけです。

a { outline:none; }

<style> 
 　a {outline:none;} 
 　a:hover {color:#FFF;background-color:#666;} 
</style>

<body> 
　<a href="#">KOKOをクリック！</a>
</body>

CSSでボックスを中央寄せする

ホームページの全体レイアウトとか、小ボックスの位置を中央寄せにするときに、margin(マージン)プロパティで設定できます。

マージンは要素の一番外側の余白のことを言います。

margin-top、argin-right、margin-bottom、margin-leftの上下左右の4方向のうち、ボックスの左右の幅を均一に保つことで中央寄せできます。

２つのCSS記述方法があります。

まず下記のように、marginの左右プロパティを使ってそれぞれの値を「auto」に指定します。marginの上下の値は記述していないですが、「0」になります。

＜１＞ marginの左右をそれぞれ指定する

<style> 
  #box {
       width:80%;
       margin-right: auto;/*右をautoに指定*/
       margin-left : auto;/*左をautoに指定*/
       }
</style>

２つ目はmarginプロパティを使って上下左右の値をまとめて指定する方法です。

＜２＞ marginの上下左右をまとめて指定

<style> 
  #box {
       width:80%;
       margin:0 auto;/*上下:0、左右をautoに指定*/
       }
</style>

全体

中央寄せ