css6〜10背景画像の設定 - Web関連あれこれ

背景画像を設定【CSS06】

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-style-Type" content="text/css" />
<title>【CSS06】背景画像を設定</title>
<style type="text/css">
<!--
body {
  background-image: url(01.gif);
  background-repeat: repeat-x,y;
}
-->
</style>
</head>
<body>
</body>
</html>

背景画像を設定（水平方向に繰り返し）【CSS07】

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-style-Type" content="text/css" />
<title>【CSS07】背景画像を設定（水平方向に繰り返し）</title>
<style type="text/css">
<!--
body {
  background-image: url(01.jpg);
  background-repeat: repeat-x;
}
h1 {
  color: #20677B;
  font-family: serif;
  font-size: 2.2em;
  font-weight: bold;
}
-->
</style>
</head>
<body>
<h1>Page Design</h1>
</body>
</html>

【CSS08】背景画像を設定（垂直方向に繰り返し）

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-style-Type" content="text/css" />
<title>【CSS08】背景画像を設定（垂直方向に繰り返し）</title>
<style type="text/css">
<!--
body {
  background-image: url(01.jpg);
  background-repeat: repeat-y;
}
h1 {
  color: #fff;
  font-size: 2.3em;
  font-weight: bold;
}
-->
</style>
</head>
<body>
<h1>Page Design</h1>
</body>
</html>

【CSS09】背景画像と枠線

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-style-Type" content="text/css" />
<title>【CSS09】背景画像と枠線</title>
<style type="text/css">
<!--
 * {
  margin: 0;
  padding: 0;
}
body {
  font-family:
  "Hiragino Kaku Gothic Pro",
  "ヒラギノ角ゴ Pro W3",
  Meiryo, 
  "メイリオ", 
  Osaka, 
  "MS P Gothic", 
  "ＭＳ Ｐゴシック", 
  sans-serif;
  background-image: url(01.jpg);
  background-repeat: repeat-y;
}
h1 {
  color: #940700;
  border-bottom: dashed 4px;
  border-color: #999;
}
h1, p {
  margin: 0 0 0 70px;
  padding: 20px 0 0 20px;
}
-->
</style>
</head>
<body>
<h1>Page Design</h1>
<p>背景に色数を減らした画像を用意します。背景画像は、縦方向び繰り返しを指定しています。<br />
また、見出しの文字は、大きく、インパクトの強い色を指定し、目を引くようにしています。<br />
このように、やり方次第でデザインの幅が広がります。いろいろ試してみましょう。</p>
</body>
</html>

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-style-Type" content="text/css" />
<title>【CSS10】背景画像（繰り返さない）</title>
<style type="text/css">
<!--
 * {
  margin: 0;
  padding: 0;
}
body {
  font-family:
  "Hiragino Kaku Gothic Pro",
  "ヒラギノ角ゴ Pro W3",
  Meiryo, 
  "メイリオ", 
  Osaka, 
  "MS P Gothic", 
  "ＭＳ Ｐゴシック", 
  sans-serif;
  background-image: url(01.gif);
  background-repeat: no-repeat;
}
h1 {
  font-size: 1.8em;
  font-family: sans-serif;
}
h1,p {
  margin: 40px 0 0 170px;
}
-->
</style>
</head>
<body>
<h1>古池や蛙飛び込む水の音</h1>
<p>芭蕉の「古池や蛙飛び込む水の音」の、連歌の発句として脇を予想したもとの形は「古池や蛙飛んだる水の音」でした。<br />
明らかに、「蛙飛んだる水の音」のほうが勢いがあり、連衆から脇句を引き出す挨拶の意味も込められていましたが、単独の文学作品としては、
「蛙飛び込む水の音」のほうが遙かに余情があるでしょう。<br />
明治以後、近代化された俳句が盛んになると共に、連歌は廃れてしまいました。しかし、近年連歌を巻く人が急激に増加しつつあるようです。<br />
発句には、何よりも連歌全体がそこから始まるという、共同製作の原点という面白さがあります。これまで、俳句だけを作ってこられた方に、是非とも、発句の面白さを経験して戴くために、発句の部屋を開設した次第です。</p>
</body>
</html>