スタイルシートのサンプル集:ホームページ作成・基礎講座・HTML・CSS・javascript・SEO対策

超初心者でも簡単にできるホームページ作成,HTML基礎講座 EasyStudyHTML

ホームページ作成 HTML基礎講座 スタイルシート(CSS)サンプル集

ホームページ作成・HTML基礎・スタイルシート(CSS)・javascript・SEO対策



スタイルシート(CSS)サンプル集 clear.gif
【解説】ここでいうスタイルシートとはCSSを指します。
すぐに使えると思うスタイルシートサンプルをいくつか紹介させて頂きます。

下記のサンプルはいずれも<head></head>内に記述して下さい。

リンク文字の変更
<style type="text/css">
<!--
a:link {text-decoration:none ; color:#0000FF}
a:visited {text-decoration:none ; color:#0000FF}
a:active {text-decoration:none ; color:#0000FF}
a:hover {color:red}
-->
</style>


リンク文字の背景色を指定
<style type="text/css">
  <!--
    a:link {text-decoration:none ; color:#000000}
    a:visited {text-decoration:none ; color:#000000}
    a:active {text-decoration:none ; color:#000000}
    a:hover {color:white ; background:gray}
  -->
</style>


リンク文字を太字または斜体に変更
<style type="text/css">
  <!--
    a:link {text-decoration:none}
    a:visited {text-decoration:none}
    a:active {text-decoration:none}
    a:hover {font-weight:bold}
  -->
</style>
※斜体にするには最後の行を「A:hover {font:italic}」にする。


リンク文字を動かす
<style type="text/css">
  <!-- a:hover {position:relative; top:3; left:3} -->
</style>


リンク文字のアンダーライン(下線)の非表示
<style type="text/css">
  <!--
    a:link {text-decoration:none}
    a:visited {text-decoration:none}
    a:active {text-decoration:none}
  -->
</style>


リンク文字をラインで囲む
<style type="text/css">
  <!--
    a:link {text-decoration:none}
    a:visited {text-decoration:none}
    a:active {text-decoration:none}
    a:hover {border-width:1px; border-style:solid}
  -->
</style>


背景画像の制御
<style type="text/css">
 <!--
  body {background:#ffffff url(images/xxxxx.gif) repeat-y}
 -->
</style>
※制御方向はrepeat-y:縦、repeat-x:横で、repeat-xにする事によって左右に並ぶようになります。
※背景画像が指定した方向に並び、画像の余白はカラー指定した背景色になる。


文字列のサイズ指定
<style type="text/css">
 <!--
  p { font-size: 12px ; }
 -->
</style>

※p タグで記述した文字列は12pxで表示されます。


文字列の行間指定
<style type="text/css">
 <!--
  p { line-height: 150% ; }
 -->
</style>


文字列のフォント指定
<style type="text/css">
 <!--
  p { font-family:'MS 明朝' ; }
  span { font-family:HG丸ゴシックM-PRO' ; }
 -->
</style>


ページトップへ
TOP | 利用規約(免責) | お問合せ

Agora