ページ全体

2-1 リンクテキストの色の変更

通常は、リンクしているテキストは未訪問が青、訪問済みが紫となっていますが、ここではそのリンクテキストの色を変更するCSSの記述の仕方をお教えします。
制作したデザインの雰囲気に合わせてリンク色が変えることができ、デザインの幅が広がります。
サンプル ソースコード
このテキストはリンクしてます
上記のテキストをクリックして色の変化を確認してください
  1. リンク色の指定
  2. デザインの雰囲気に合わせて効果的に使用
  a:link { color: #CC3366; }
a:visited { color: #669900; }
a:hover { color: #FF9900; }
a:active { color: #0066CC; }
サンプルのリンク色は以下のように設定してあります。
■未訪問のリンクテキスト色（a:link { color:#CC3366 }）
■カーソルを合わせた時のリンクテキスト色（a:visited { color:#669900 }）
■訪問済みのリンクテキスト色 （a:hover { #FF9900 }）
■選択時のリンクテキスト色（a:activ { color:#0066CC}）
 
ソースコードの記述する順序を上記の通りにしないと、正常に動作しない可能性があります。
関連
リンクテキストの背景色を指定

2-2 背景に色をつける・枠をつける

ページの背景全体に色をつける方法、またコンテンツ表示領域に枠をつける方法をお教えします。
サンプル 1 ソースコード 1
サンプルページが別ウィンドウで開きます
bodyに関する記述
  1. ページ全体・背景色に淡いグリーンを指定
  2. ページ全体・マージンとパディングの指定0px指定
div1に関する記述
  1. コンテンツ表示領域の背景色に白を指定
  2. マージンとパディングに10pxの余白指定
 
body {
background-color: #D6FDCE;
margin: 0px;
padding: 0px; }

.div1{
margin: 10px;
padding: 10px;
background-color: #ffffff;
}
サンプル 2   ソースコード 2
サンプルページが別ウィンドウで開きます
bodyに関する記述
  1. ページ全体・背景色にグリーンを指定
  2. ページ全体・マージンとパディングの指定0px指定
div2に関する記述
  1. コンテンツ表示領域の背景色に白を指定
  2. マージン0pxとパディング20pxの余白指定
  3. 罫線指定に実線・グレー
  body {
background-color: #D6FDCE;
margin: 0px;
padding: 0px; }

.div2{
margin: 0px;
padding: 20px;
background-color: #ffffff;
border-color: #cccccc;
border-style: solid;
}

2-3 段落の余白について（div）

段落をインデントさせる、段落の上下に余白をもうけるなどは下記のように記述します。
margin: 2px; …上下左右すべてを2px
margin: 2px 4px; … 下2px,左右4px
margin: 2px 4px 6px; …上2px,左右4px,下6px,
margin: 2px 4px 6px 8px; …上 2px, 右4px,下6px,左 8px

わかりやすく指定、変更するためには下記のように個別の属性名にわける方法もあります。
上のマージン margin-top: **px;
右のマージン margin-right: **px;
下のマージン margin-bottom: **px;
左のマージン margin-left: **px;
サンプル ソースコード
サンプルページが別ウィンドウで開きます
bodyに関する記述
  1. ページ全体・マージンとパディングの指定0px指定
div1に関する記述
  1. コンテンツ表示領域の背景色に淡いグリーンを指定
  2. マージンは左右天地に余白指定
  3. パディングは0pxの余白指定
div2に関する記述
  1. コンテンツ表示領域の背景色に淡いブルーを指定
  2. マージンは左右天地に余白指定
  3. パディングは0pxの余白指定
 
body {
margin: 0px;
padding: 0px;
}
.div1{
margin: 2px 0px 20px 30px;
padding: 0px;
background-color: #E3FEC9;
}
.div2{
margin: 0px 40px 10px 10px;
padding: 0px;
background-color: #DBF4FB;
}
 
余白をもうけてテキストを読みやすくすることはデザイン面においても重要です。
全体的にきつきつのレイアウトより、すっきり美しいレイアウトを心がけてください。