スタッフブログ

みなさま、GWはいかがお過ごしでしたでしょうか？

私は、シフトに恵まれ、しっかりと連休をいただくことができたので、
完全に頭も体もリフレッシュしてきましたっ！

お久しぶりです。スタッフ「ほ」です。

さて、今日はCSSで、リンクの装飾に関するネタです。

通常、文字に対してリンクを張ると、文字の色は青くなり、下線が設定されます。

通常はリンクの線は一本線で、この種類を変更することはできないのですが、ちょっと変則的な方法を利用すると、線の種類を別の線種に変更できます。

先に手順だけを書くと

１．リンク文字の下線を消す
２．リンクのボックスが持つ下罫線を設定する

の２つです。

まずはHTMLのファイルでリンクを張った文字列を用意しましょう。

<p>
  詳細は
  <a href="http://www.vanfu-vts.jp">バンフーのサイト</a>
  をご覧ください
</p>

この段階では、以下のような状態ができているはずです。

※サンプル

まずはリンク文字が持つ下線を外します。

CSSに以下を記述します。

a {
	text-decoration:none;
}

リンクの<a>タグから「文字飾りを『無し』にする」という指定です。

この指定によって、まずは下線が外れます。

※サンプル

リンクの<a>タグは、以下のようなボックスを持っています。

このボックスは通常、無色透明なので、目で見ることができませんが、CSSを利用して上下左右に罫線をつけることができます。

今回は、上下左右のうち、下の罫線をCSSで表示させることで、リンク文字の下線代わりにしてしまおう、というものです。

先程のリンクに追加していきます。

a {
	text-decoration:none;
	border-bottom:1px dotted #000;
}

※サンプル

リンクの文字の色と下線を合わせるには、colorプロパティを指定して、罫線と同じ色を指定します。

a {
	text-decoration:none;
	border-bottom:1px dotted #000;
	color:#000;
}

※サンプル

訪問済みの色を指定したい場合は疑似クラスセレクタをさらに追加します。

a {
	text-decoration:none;
	border-bottom:1px dotted #000;
	color:#000;
}

a:visited {
	border-bottom:1px dotted #ccc;
	color:#ccc;
}

※サンプル

マウスポインタを乗せた時に色を変えたい場合は、さらにさらに追加します。

a {
	text-decoration:none;
	border-bottom:1px dotted #000;
	color:#000;
}

a:visited {
	border-bottom:1px dotted #ccc;
	color:#ccc;
}

a:hover {
	border-bottom:1px dotted #f80;
	color:#f80;
}

※サンプル

今回指定した「dotted」は点線を意味します。

これを「dashed」に変更すると破線になります。

また、線の太さが3px以上必要になりますが、
「double」という指定をすることで二重線の表現も可能です。

とある限定キャンペーンのため、一晩で某コンビニを約50軒まわったというちょっと痛い記録を更新したスタッフ「ほ」です。

最近、急に涼しくなりましたが、みなさまお風邪など召されてませんでしょうか？
私は思い切り風邪ひきました…orz

さて、今日はWebネタでいきたいと思います。

CSSで装飾を行う際に個別の装飾を担当してくれるクラス。

実は１つの要素に対して、複数のクラスを適用できたりします。

例えば、以下のような４つのクラスを作ったとします。

.hot {
   color: #FFF;
   background-color: #F90;
   border: 3px solid #F00;
}
.cool {
   color: #00F;
   background-color: #9FF;
   border: 3px solid #00F;
}
.wide {
   padding: 20px;
   width: 500px;
}
.narrow {
   padding: 10px;
   width: 200px;
}

クラス「hot」は、赤やオレンジを基調にしたカラーリングの指定。
クラス「cool」は水色やブルーを基調にしたカラーリングの指定。

クラス「wide」は広めの幅の指定。
クラス「narrow」は狭い幅の指定。

そして以下の４つのボックスを用意しました。

<div>
  クラス「hot」＋クラス「wide」
</div>

<div>
   クラス「hot」＋クラス「narrow」
</div>

<div>
   クラス「cool」＋クラス「wide」
</div>

<div>
   クラス「cool」＋クラス「narrow」
</div>

これらのボックスにクラスを２つずつ適用してみます。

<div class="hot wide">
　クラス「hot」＋クラス「wide」
</div>

<div class="hot narrow">
　クラス「hot」＋クラス「narrow」
</div>

<div class="cool wide">
　クラス「cool」＋クラス「wide」
</div>

<div class="cool narrow">
　クラス「cool」＋クラス「narrow」
</div>

こちらにサンプルページを用意しました。

このように、１つのDIVボックスに２つのクラスを適用する場合、
クラス名を半角スペースで区切って入力します。覚えておくと何気に便利なテクニックですので、試せそうなところがあったらぜひ試してみてください。

「クラスってか、そもそもCSSがよくわかんないんだよね」って方は、バンフートレーニングスクールのWeb講座にてお待ちしております。