■

2012-11-28
文字を囲む


<!DOCTYPE html>
<html lamg="ja">
<head>
<meta charset="UTF-8">
<title>枠線の設定</title>
<style>
body {
	font-size: 1.0em;
　　　　　↑文字サイズ
}
.border,.border2,.border3,.border4,.border5,.border6{
 margin: 12px 0;
 padding: 12px;
}
.border1 {
	   border: 1px 　　solid #666;
       　　↑カッコの枠　　　↑カッコの色　
}
.border2 {
	   border: 4px solid #666;
　　　　　↑PXを増やすことでカッコ太さが大きくなる
}
.border3 {
	   border:1px solid #f00;
　　　　　　　　　　　↑カラー色をかえる。
}
.border4 {
	    border:1px dotted #666;
　　　　　　　　　　　　↑線の囲み
}
.border5 {
	    border-top:4px solid #296;
	　　border-right:1px dotted #296;
	　　border-bottom: 1px solid #296;
	　　border-left: 12px solid#296;
　　　　　　　　↑ノートを見ろ！
}
.border6{
	    border-top:2px solid #269;
	　　border-bottom: 4px 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>
</div>
</body>
</html>



2012年11月29日
CSS練習問題：擬似クラスと背景画像
リンクの文字色（擬似クラス）

<!DOCTYPE html>
<html lamg="ja">
<head>
<meta charset="UTF-8">
<title>擬似クラスの練習</title>
<style>
ul {
 list-style-type: none;
　　　↑マークを使用しない
}
li {
	font-size: 2.0em;
	font-weight: bold;
　　　　　　　　　　　↑タグで文字を太字
	margin: 0 0 10px 0;
}
li a:link {
	color: #00f;
	text-decoration: none;
　　　　　↑リンクの下線を消すには、対象のリンクに対して
}
li a:visited {
	color: #60f;
}
li a:hover {
	color: #f60;
}
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>

↑上に少し変更した。

<style>
ul {
 list-style-type: none;
}
li {
	font-size: 2.0em;
	font-weight: bold;
	margin: 0 0 10px 0;
	float: lef;
}
li a{
	display: block;
	padding: 5px 1em;
	width: 200px;

}
li a:link, li a:visited {
	color: #fff;
	text-decoration: none;
	background-color: #36f;
}
li a:hover {
	color: #fff;
	background-color: #f60;
}
li a:active {
	color: #f00;
}
</style>



【CSS05】
背景色と余白

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>background-color</title>
<style>
*{
	margin: 0;
	padding:0;
}
|* h2に対してカラー文字サイズバック色*|
h2{
	color: #fff;
	font-size: 1.0em;
	background-color: #1565b5;
}
|*pに対して文字と*文字のサイズ上下の空きバックの色*|
p{
	font-size:0,875em;
	line-height:1.2;
	background-color:#bdd4ed;
}
|*h2,p上下左右の（内側の余白）を一括で指定する*|
h2,p{
	padding: 1.0em;
}
</style>
</head>
<body>
<h2>background-colorの設定</h2>
<p>見出しには濃いめの色を背景に指定し、文字を白抜きにします。段落には見出しよりも薄い色を指定します。さらに見出しと段落の上下のマージンを0にして、ボックスの上下をくっつけ、パディングを1em指定します。</p>
</body>
</html>


【CSS10】
背景画像（繰り返さない）

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>background-attachment</title>
<style>
body {
	background-image: url("img/05.gif");
	background-repeat: no-repeat;
  background-attachment: fixed;
}
h1 {
 font-size: 1.85em;
 font-family: serif;
}
p {
 width: 320px;
}
h1,p {
	margin: 40px 40px 0 160px;
}
</style>
</head>
<body>
<h1>古池や蛙飛び込む水の音</h1>
<p>芭蕉の「古池や蛙飛び込む水の音」の、連歌の発句として脇を予想したもとの形は「古池や蛙飛んだる水の音」でした。<br>
明らかに、「蛙飛んだる水の音」のほうが勢いがあり、連衆から脇句を引き出す挨拶の意味も込められていましたが、単独の文学作品としては、
「蛙飛び込む水の音」のほうが遙かに余情があるでしょう。<br>
明治以後、近代化された俳句が盛んになると共に、連歌は廃れてしまいました。しかし、近年連歌を巻く人が急激に増加しつつあるようです。<br>
発句には、何よりも連歌全体がそこから始まるという、共同製作の原点という面白さがあります。これまで、俳句だけを作ってこられた方に、是非とも、発句の面白さを経験して戴くために、発句の部屋を開設した次第です。</p>
</body>
</html>