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

ホームページ作成　ＨＴＭＬ基礎講座 スタイルシート（CSS）サンプル集

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

リンク文字の変更
<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:'ＭＳ 明朝' ; }
　　span { font-family:HG丸ゴシックM-PRO' ; }
　-->
</style>