ウェブデザインをスタイルシートでおこなおう!

ホームページ作成スタイルシート編!スタイルシート倶楽部@ウェブマイスター
ホームページ作成総合支援ウェブマイスター
スタイルシート倶楽部トップ戻る
スタイルシートを使えばウェブデザインは思いのまま!
ページ管理も楽になり、大幅なデザイン変更も楽になっちゃうよ!
スタイルシートを使いこなして脱入門者になろう!

サイト作りの基礎を学びたい方は >> 本館 ウェブマイスター
さくらインターネット
たった125円という破格の値段で高機能なレンタルサーバー。業界最大手で安心して使えるよ。
3ヶ月無料キャンペーン実施中!! レンタルサーバーのSpeever
一番高いプランも今なら無料だよ

リンク文字は、他の文字とは違う見た目にして目立たせる。
これに従えば何やってもいいと思って、色んなことが可能だ。

下線を破線にしてみる。

a {
border-bottom-width: 1px;
border-bottom-style: dashed;
border-bottom-color: #0066CC;
text-decoration: none;
}
a:hover {
border-bottom-width: 1px;
border-bottom-style: dashed;
border-bottom-color: #0066CC;
text-decoration: none;
}

通常のリンク下線表示を消して(t-decoration: none;)、枠の下線のみを破線で表示させている。
hoverはマウスカーソルが上にきたときの指定だ。

バックに色をつけてみる。

a {
background-color: #FFCCCC;
}
a:hover {
background-color: #FFCCCC;
}

 

これらを実際に使用するときは、通常のとhoverとで別の内容にすれば良いだろう。
たとえば、これらを組み合わせ、通常は破線表示、マウスを乗せると背景色を変える方法がある。

マウスをのせてみてね。

a {
border-bottom-width: 1px;
border-bottom-style: dashed;
border-bottom-color: #0066CC;
text-decoration: none;
}
a:hover { border-bottom-width: 1px;
border-bottom-style: dashed;
border-bottom-color: #0066CC;
text-decoration: none;
background-color: #FFCCCC;
}

 

アイディア次第で、このように遊べることを覚えておこう。

| ウェブマイスタートップ | ホームページの作り方 | スタイルシート入門 | PHP Tips | CGI/PHPソフト配布 | 掲示板 | ブログ | ショッピング | リンク集 |
(C) 2005 - 2007 ウェブマイスター