column

2012-11-29|擬似クラスと背景画像〜backgroundの設定

CATEGORY CSS PC & Web お勉強 TAG, ,

投稿日:2013年4月27日 更新日:

執筆者:

2012-11-29

 

擬似クラスと背景画像

  • マウスで反応させる

    • 順番に・・・
      • 「link(未訪問)」
      • 「visited(訪問済み)」
      • 「hover(カーソルがリンクに重なったとき)」
      • 「active(リンクに対してアクティブな瞬間)」
    • activeは押した瞬間。なので今となってはほとんど使われない。
  • 疑似クラスの練習(文字リンクの色を変える)

    • 「ul」はリセットする

    • 文字の色を指定する
li {
	font-size: 2.0em;
	font-weght: bold;
	margin: 0 0 10px 0;
}
li a:link {
	color: #00F;
}
li a:visited {
	color: #60f;
}
li a:hover {
	color: #f60;
}
li a:active {
	color: #f00;
}
    • 文字リンクのアンダーラインを消す
li a:link {
	color: #00F;
	text-decoration: none;
}
    • 文字の周りもリンクに指定する
li a {
	display: block;
	padding: 5px 1em;
	width: 300px;
}
    • 横帯リンクに変える
li {
	font-size: 1.5em;
	font-weght: bold;
	margin: 0 0 10px 0;
	float: left;
}
    • 「li」にpaddingやmarginを持って行っても意味が無い
    • 枠に色を付けてhoverで色の変化を付ける




疑似クラスの練習






    • フォントを指定する、適切なフォントファミリー

body {
	font-family:
	 "Hiragino Kaku Gothic Pro",
	 "ヒラギノ角ゴ Pro W3",
	 Meirio,
	 "メイリオ",
	 Osaka,
	 "MS P Gothic",
	 "MS Pゴシック"
}

backgroundの設定






background-color



background-colorの設定

見出しには濃いめの色を背景に指定し、文字を白抜きにします。段落には見出しよりも薄い色を指定します。さらに見出しと段落の上下のマージンを0にして、ボックスの上下をくっつけ、パディングを1em指定します。

  • 背景画像を設定

f:id:Tokiyo:20121129225606p:image:w640



  • 背景画像を設定(水平方向に繰り返し)

f:id:Tokiyo:20121129225605p:image:w640



  • 背景画像を設定(垂直方向に繰り返し)

f:id:Tokiyo:20121129225607p:image:w640



  • 背景画像と枠線

f:id:Tokiyo:20121129225608p:image:w640



  • 背景画像(繰り返さない)

f:id:Tokiyo:20121129225609p:image:w640




コメントを残す

関連記事

PREV

2012-11-29|情報を「線形化」する

NEXT

2012-11-30|CSS外部リンク

2012-11-29|擬似クラスと背景画像〜backgroundの設定

side bar

メニューはこちら

メニューはこちら