9回目授業内容 　スタイルシート borderを理解する〜擬似クラスと背景画像〜脱線話

授業 HTML CSS Dreamweaver

スタイルシート　borderを理解する

<!doctype html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>枠線の設定</title>
<style>
<!--
body {
	font-size: 1.0em;
}
.border1, .border2, .border3, .border4, .border5, .border6{
	margin: 12px 0;
	padding: 12px;
}
.border1{
	border: 1px solid #666;
}
.border2{
	border: 4px solid #666;
}
.border3{
	border: 1px solid #f00;
}
.border4{
	border: 1px dotted #666;
}
.border5{
	border-top: 4px solid #296;
	border-right: 1px solid #296;
	border-bottom: 1px solid #296;
	border-left: 12px double #296;
}
.border6{
	border-top: 1px solid #269;
	border-right: 12px double #269;
	border-bottom: 10px double #269;
	border-left: 1px solid #269;
}
-->
</style>
</head>
<body>
<div id="box1">
<p class="border1">テキストの囲みを表現したい[標準]</p>
<p class="border2">テキストの囲みを表現したい[線の太さ]</p>
<p class="border3">テキストの囲みを表現したい[線のカラー]</p>
<p class="border4">テキストの囲みを表現したい[線のスタイル]</p>
<p class="border5">テキストの囲みを表現したい[複数の指定]</p>
<p class="border6">テキストの囲みを表現したい[複数の指定]</p>
</body>
</div>
</html>


<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>破線枠で囲む</title>
<style>
<!--
body {
	font-size: 1.0em;
}
.box1, .box2 {
	margin-bottom: 18px;
	padding:12px;
	border: 1px solid #999;
}
.box2 p {
	background-color:#acf;
}
.border1, .border2, .border3, .border4 {
	border-bottom: 1px dashed #000;
}
.border1 {
	margin: 0;
	padding: 12px;
}
.border2 {
	margin: 0;
	padding: 12px 0;
}
.border3 {
	margin: 0;
	padding: 12px 0 2px 0;
}
.border4 {
	margin: 0;
	padding: 2px 0;
}
-->
</style>
</head>
<body>
<div class="box1">
<p class="border2">テキストの破線を表現したい[padding:12px 0]</p>
</div>
<div class="box1">
<p class="border3">テキストの破線を表現したい[padding:12px 0 2px 0]</p>
</div>
<div class="box1">
<p class="border4">テキストの破線を表現したい[padding:2px 0]</p>
</div>
<div class="box2">
<p class="border1">テキストの破線を表現したい[padding:12px]</p>
</div>
<div class="box2">
<p class="border2">テキストの破線を表現したい[padding:12px 0]</p>
</div>
<div class="box2">
<p class="border3">テキストの破線を表現したい[padding:12px 0 2px 0]</p>
</div>
<div class="box2">

<p class="border4">テキストに破線を表示したい[padding:2px 0]</p>
</div>
</body>
</html>
  • 情報を「線形化」する



  • グループ名をつける



擬似クラスと背景画像

  • マウスで反応させる
    • 順番に・・・
      • 「link（未訪問）」
      • 「visited（訪問済み）」
      • 「hover（カーソルがリンクに重なったとき）」
      • 「active（リンクに対してアクティブな瞬間）」
    • activeは押した瞬間。なので今となってはほとんど使われない。
  • 疑似クラスの練習（文字リンクの色を変える）
    • 「ul」はリセットする
<style>
ul {
	list-style-type:none;
}
</style>
    • 文字の色を指定する
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で色の変化を付ける
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>疑似クラスの練習</title>
<style>
ul {
	list-style-type:none;
}
li {
	font-size: 1.5em;
	font-weght: bold;
	margin: 0 1px 1px 0;
}
li a {
	display: block;
	padding: 5px 1em;
	width: 200px;
}
li a:link {
	color: #FFF;
	text-decoration: none;
	background-color: #906707;
}
li a:visited {
	color: #60f;
}
li a:hover {
	color: #C00;
	background-color: #CC9900;
}
li a:active {
	color: #f00;
}
</style>
</head>
<body>
<ul>
<li><a href="#">リンク：Link</a></li>
<li><a href="#">リンク：visited</a></li>
<li><a href="#">リンク：hover</a></li>
<li><a href="#">リンク：active</a></li>
</ul>
</body>
</html>
    • フォントを指定する、適切なフォントファミリー
body {
	font-family: 
	 "Hiragino Kaku Gothic Pro",
	 "ヒラギノ角ゴ Pro W3",
	 Meirio,
	 "メイリオ",
	 Osaka,
	 "MS P Gothic",
	 "ＭＳ Ｐゴシック"
}

background-colorの設定

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>background-color</title>
<style>
<!--
h2 {
	color: #FFF;
	font-size: 1.0em;
	background-color: #1565b5;
}
p {
	font-size: 0.875em;
	line-hight: 1.2;
	background-color: #bdd4eb;
}
h2, p {
	padding:1.0em;
}
-->
</style>
</head>
<body>
<h2>background-colorの設定</h2>
<p>見出しには濃いめの色を背景に指定し、文字を白抜きにします。段落には見出しよりも薄い色を指定します。さらに見出しと段落の上下のマージンを0にして、ボックスの上下をくっつけ、パディングを1em指定します。</p>
</body>
</html>
  • 背景画像を設定

<style>
<!--
body {
	background-image: url("20120415202748.jpg");
}
-->
</style>
  • 背景画像を設定（水平方向に繰り返し）

<style>
body {
	background-image:url(20120415205559.jpg);
	background-repeat:repeat-x;
}
</style>
  • 背景画像を設定（垂直方向に繰り返し）

<style>
body {
	background-image:url(20120415205600.jpg);
	background-repeat:repeat-y;
}
h1 {
	color: #FFF;
	padding: 10px;
}
</style>
  • 背景画像と枠線

<style>
body {
	margin: 0;
	background-color: #fff;
	background-image:url(20120415210237.jpg);
	background-repeat:repeat-y;
}
h1 {
	color: darkred;
	border-bottom: dashed 4px #999;
}
p {
	color: #333;
}
h1, p {
	padding: 5px 20px;
	margin-left: 70px;
}
</style>
  • 背景画像（繰り返さない）

<style>
body {
	background-image:url(20120415210656.gif);
	background-repeat:no-repeat;
	background-attachment:fixed;
}
h1 {
	font-size: 1.85em;
	fontfamry:serif;
}
p {
	width: 320px;
}
h1, p {
	margin: 40px 40px 0 160px;
}
</style>

脱線話

  • クリックはOn Release（クリックが終わった）の状態
  • TEamViewerで遠隔操作できる
  • 背景で使う画像は斜めにすることで文字が読みやすくなる


四十路男Tokiyoの人生再スタートblogもやってます。