１月２８日授業内容
設定
①右上の検索マーク左のところからコーダーを選ぶ
②サイト→サイト管理→新規作成（ドキュメントタイプはHTML5を指定する。）→名前を指定して自分のファイルをを選び、保存を押す。
＊dreamweaverのファイル管理はdreamweaverの中だけで管理する（ファイル、アセット、スニペットのファイル覧）
新規ファルダを作成するときは大元のフォルダを右クリックして作る。
③編集→環境設定（ctrl + U）
＊この設定以外のカスタマイズは基本的にしない。使うもののみ出す。
＊背景は黒にしない。文字黒もしくはグレーと背景白がベスト。
⑤フォルダに使っているファイルを保存する。
表示→コードビューオプション→でワードラップ、行番号、非表示の文字にチェックを入れる。
今日使ったタグ
paddig
line-height
margin
*ブラウザ画面で表示されるのは１００パーセント表示（ブラウザ設定なので変えたいときは幅、高さの指定が必要）
パディングとマージンを変えるときに編集→検索置換で全て置き換えることが出来る。
- HTML、CSS入力内容
参照：文字色と背景の囲み 演習
①
<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>文字色と背景色</title>
<style>
h1{color:green;}
h2{color:white;
background-color:rgb(0,0,102);
}
p{color:#000033;}
</style>
</head>
<body>
<h1>style要素</h1>
<h2>style element</h2>
<p>HTML文書内にまとめて設定します。</p>
</body>
</html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>文字色と背景色</title>
<style>
h1{color:green;}
h2{color:white;
background-color:rgb(0,0,102);
}
p{color:#000033;}
</style>
</head>
<body>
<h1>style要素</h1>
<h2>style element</h2>
<p>HTML文書内にまとめて設定します。</p>
</body>
</html>
②
<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>無題ドキュメント</title>
<style>
body{background-color:rgb(0,102,0);}
h1{color:white;
}
h2{color:white;
padding:10px;/*上下左右のパッデイングの設定*/
background-color:rgb(204,0,0);}
p{background-color:rgb(255,204,102);
padding: 10px 20px 15px 18px;/*パディングを４箇所指定するときは、上から時計回り順に記載すること*/
line-height:1.6;/*行間の設定のことで、単位はつけないこと*/}
h3{padding:10px 20px;/*表示が２つだけのときは１つ目が上下、２つ目が左右のパディング*/
background-color:aqua;
}
h4{padding:10px 20px 30px;/*パディングが３つの時は、一つ目が上、２番目が左右、３番目が下になる*/
background-color:pink;}</style>
</head>
<body>
<h1>about wine</h1>
<h2>Chianti Classico Riserva</h2>
<p>1435年創業の由緒あるワイン醸造メーカーの名家マッツェイが所有するぶどう園は、いたるところにローマ時代の遺跡が残る小さな集落にあります。<br>
15世紀から現在に至るまで、キャンティワインの造り手たちの先導者であり続けるマッツェイの歴史は、キャンティワインの歴史といっても過言ではありません。キャンティの最高峰と呼ばれるマッツェイは、もっぱら地元の人のために造られる量り売りを飲んでいたぼくにとって、憧れのワイナリーでした。当時はおじいちゃんになったら飲めるかなと思っていましたが、こうして日本で、ましてや自分の店のリストに加えることができるなんて驚きです。</P>
<h3>おはよう</h3>
<h4>こんばんわ</h4></body>
</html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>無題ドキュメント</title>
<style>
body{background-color:rgb(0,102,0);}
h1{color:white;
}
h2{color:white;
padding:10px;/*上下左右のパッデイングの設定*/
background-color:rgb(204,0,0);}
p{background-color:rgb(255,204,102);
padding: 10px 20px 15px 18px;/*パディングを４箇所指定するときは、上から時計回り順に記載すること*/
line-height:1.6;/*行間の設定のことで、単位はつけないこと*/}
h3{padding:10px 20px;/*表示が２つだけのときは１つ目が上下、２つ目が左右のパディング*/
background-color:aqua;
}
h4{padding:10px 20px 30px;/*パディングが３つの時は、一つ目が上、２番目が左右、３番目が下になる*/
background-color:pink;}</style>
</head>
<body>
<h1>about wine</h1>
<h2>Chianti Classico Riserva</h2>
<p>1435年創業の由緒あるワイン醸造メーカーの名家マッツェイが所有するぶどう園は、いたるところにローマ時代の遺跡が残る小さな集落にあります。<br>
15世紀から現在に至るまで、キャンティワインの造り手たちの先導者であり続けるマッツェイの歴史は、キャンティワインの歴史といっても過言ではありません。キャンティの最高峰と呼ばれるマッツェイは、もっぱら地元の人のために造られる量り売りを飲んでいたぼくにとって、憧れのワイナリーでした。当時はおじいちゃんになったら飲めるかなと思っていましたが、こうして日本で、ましてや自分の店のリストに加えることができるなんて驚きです。</P>
<h3>おはよう</h3>
<h4>こんばんわ</h4></body>
</html>
③
<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>背景色と余白</title>
<style>
body{margin:0;
padding:0;/*ブラウザの設定でbodyにmargin,paddingの設定があるので隙間をなくすために、両者の設定を0にする*/}
h2,p{width:500px;
margin:0 auto;/*上下0px左右はオート*/}
h2{
/*width:calc(500px-34px(左右のpaddingが34ｐｘなので幅はその引いた値を指定する。)*/
width:466px;
padding:10px 10px 7px 24px; /*0のときは単位はいらない*/;
/*ショートハンドで書くときは時計回りで書く*/
background-color:#03f;
color:#fff;}
p{background-color:rgb(153,255,204);
padding:16px;
border:1px solid #03f;
width:466px;/*h2とpの幅５００pxからpの左右パディング３２px左右ボーダーの2pxを引くと466pxになる*/
}
</style>
</head>
<body>
<h2>background-colorの設定</h2>
<p>見出しには濃いめの色を背景に指定し、文字を白抜きにします。段落には見出しよりも薄い色を指定します。さらに見出しと段落の上下のマージンを0にして、ボックスの上下をくっつけ、パディングを1em指定します。</p>
</body>
</html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>背景色と余白</title>
<style>
body{margin:0;
padding:0;/*ブラウザの設定でbodyにmargin,paddingの設定があるので隙間をなくすために、両者の設定を0にする*/}
h2,p{width:500px;
margin:0 auto;/*上下0px左右はオート*/}
h2{
/*width:calc(500px-34px(左右のpaddingが34ｐｘなので幅はその引いた値を指定する。)*/
width:466px;
padding:10px 10px 7px 24px; /*0のときは単位はいらない*/;
/*ショートハンドで書くときは時計回りで書く*/
background-color:#03f;
color:#fff;}
p{background-color:rgb(153,255,204);
padding:16px;
border:1px solid #03f;
width:466px;/*h2とpの幅５００pxからpの左右パディング３２px左右ボーダーの2pxを引くと466pxになる*/
}
</style>
</head>
<body>
<h2>background-colorの設定</h2>
<p>見出しには濃いめの色を背景に指定し、文字を白抜きにします。段落には見出しよりも薄い色を指定します。さらに見出しと段落の上下のマージンを0にして、ボックスの上下をくっつけ、パディングを1em指定します。</p>
</body>
</html>
④
<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>背景画像を設定</title>
<style>
body{background-image:url(img/07.gif);}
</style>
</head>
<body>
</body>
</html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>背景画像を設定</title>
<style>
body{background-image:url(img/07.gif);}
</style>
</head>
<body>
</body>
</html>
⑤
<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>背景画像を設定（水平方向に繰り返し）</title>
<style>
body{
background-image:url(img/08.jpg);
background-repeat: repeat-x;}
h1{color:green;}
</style>
</head>
<body>
<h1>Page Design</h1>
</body>
</html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>背景画像を設定（水平方向に繰り返し）</title>
<style>
body{
background-image:url(img/08.jpg);
background-repeat: repeat-x;}
h1{color:green;}
</style>
</head>
<body>
<h1>Page Design</h1>
</body>
</html>
⑥
<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>背景画像を設定（垂直方向に繰り返し）</title>
<style>
body{background-image:url(img/09.jpg);
background-repeat:repeat-y;}
h1{color:white;}
</style>
</head>
<body>
<h1>Page Design<h1>
</body>
</html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>背景画像を設定（垂直方向に繰り返し）</title>
<style>
body{background-image:url(img/09.jpg);
background-repeat:repeat-y;}
h1{color:white;}
</style>
</head>
<body>
<h1>Page Design<h1>
</body>
</html>
⑦
<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>背景画像と枠線</title>
<style>
body{margin:0;
padding:0;
background:#FFF url(img/10.jpg) repeat-y;/*backgroundのカラー、イメージ、リピートをショートカットで書いている*/}
h1,p{width:400px;
font-family:メイリオ;
margin-left:70px;
padding-left:20px;}
h1{
color:#903;
border-bottom:#999 dashed 6px;
padding-bottom:10px;}
p{line-height:1.5;}
</style>
</head>
<body>
<h1>Page Design</h1>
<p>背景に色数を減らした画像を用意します。背景画像は、縦方向び繰り返しを指定しています。<br>
また、見出しの文字は、大きく、インパクトの強い色を指定し、目を引くようにしています。<br>
このように、やり方次第でデザインの幅が広がります。いろいろ試してみましょう。</p>
</body>
</html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>背景画像と枠線</title>
<style>
body{margin:0;
padding:0;
background:#FFF url(img/10.jpg) repeat-y;/*backgroundのカラー、イメージ、リピートをショートカットで書いている*/}
h1,p{width:400px;
font-family:メイリオ;
margin-left:70px;
padding-left:20px;}
h1{
color:#903;
border-bottom:#999 dashed 6px;
padding-bottom:10px;}
p{line-height:1.5;}
</style>
</head>
<body>
<h1>Page Design</h1>
<p>背景に色数を減らした画像を用意します。背景画像は、縦方向び繰り返しを指定しています。<br>
また、見出しの文字は、大きく、インパクトの強い色を指定し、目を引くようにしています。<br>
このように、やり方次第でデザインの幅が広がります。いろいろ試してみましょう。</p>
</body>
</html>
⑧
<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>背景画像（繰り返さない）</title>
<style>
body{background-image:url("img/12.gif");
background-repeat:no-repeat;
font-family:"Hiragino kku Gothic ProN",
"Meiryo",
"sans-serif";
margin:0;
padding:0;}
h1,p {width:360px;
margin-left:168px;}
h1{font-family:"ヒラギノ明朝",
"HG明朝",
"MS P明朝",
"MS明朝";}
</style>
</head>
<body>
<h1>古池や蛙飛び込む水の音</h1>
<p>芭蕉の「古池や蛙飛び込む水の音」の、連歌の発句として脇を予想したもとの形は「古池や蛙飛んだる水の音」でした。<br>
明らかに、「蛙飛んだる水の音」のほうが勢いがあり、連衆から脇句を引き出す挨拶の意味も込められていましたが、単独の文学作品としては、
「蛙飛び込む水の音」のほうが遙かに余情があるでしょう。<br>
明治以後、近代化された俳句が盛んになると共に、連歌は廃れてしまいました。しかし、近年連歌を巻く人が急激に増加しつつあるようです。<br>
発句には、何よりも連歌全体がそこから始まるという、共同製作の原点という面白さがあります。これまで、俳句だけを作ってこられた方に、是非とも、発句の面白さを経験して戴くために、発句の部屋を開設した次第です。</p>
</body>
</html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>背景画像（繰り返さない）</title>
<style>
body{background-image:url("img/12.gif");
background-repeat:no-repeat;
font-family:"Hiragino kku Gothic ProN",
"Meiryo",
"sans-serif";
margin:0;
padding:0;}
h1,p {width:360px;
margin-left:168px;}
h1{font-family:"ヒラギノ明朝",
"HG明朝",
"MS P明朝",
"MS明朝";}
</style>
</head>
<body>
<h1>古池や蛙飛び込む水の音</h1>
<p>芭蕉の「古池や蛙飛び込む水の音」の、連歌の発句として脇を予想したもとの形は「古池や蛙飛んだる水の音」でした。<br>
明らかに、「蛙飛んだる水の音」のほうが勢いがあり、連衆から脇句を引き出す挨拶の意味も込められていましたが、単独の文学作品としては、
「蛙飛び込む水の音」のほうが遙かに余情があるでしょう。<br>
明治以後、近代化された俳句が盛んになると共に、連歌は廃れてしまいました。しかし、近年連歌を巻く人が急激に増加しつつあるようです。<br>
発句には、何よりも連歌全体がそこから始まるという、共同製作の原点という面白さがあります。これまで、俳句だけを作ってこられた方に、是非とも、発句の面白さを経験して戴くために、発句の部屋を開設した次第です。</p>
</body>
</html>
