webサイト制作の勉強|2017月7月クラスブログ

webサイト制作の勉強に関する解説ブログです。

CSS演習問題

演習1
f:id:yachin29:20160721091425p:plain

<body>
style要素
style element
HTML文書内にまとめて設定します。
</body>


解答例

<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>演習問題1</title>
<style>
html,body,h1,h2,p {
margin: 0;
padding: 0;
line-height: 1.0;
}
body {

}
h1 {
color:#0e8d87;
padding: 20px 0;
}
h2 {
background: #355584;
color: #FFF;
padding: 10px 0;
margin-bottom: 20px;
}
p {
color: #1577EC;
}
</style>
</head>
<body>
<h1>style要素</h1>
<h2>style element</h2>
<p>HTML文書内にまとめて設定します。</p>
</body>
</html>


演習2
f:id:yachin29:20160721091714p:plain

<body>
About wine

Chianti Classico Riserva

1435年創業の由緒あるワイン醸造メーカーの名家マッツェイが所有するぶどう園は、いたるところにローマ時代の遺跡が残る小さな集落にあります。
15世紀から現在に至るまで、キャンティワインの造り手たちの先導者であり続けるマッツェイの歴史は、キャンティワインの歴史といっても過言ではありません。
キャンティの最高峰と呼ばれるマッツェイは、もっぱら地元の人のために造られる量り売りを飲んでいたぼくにとって、憧れのワイナリーでした。
当時はおじいちゃんになったら飲めるかなと思っていましたが、こうして日本で、ましてや自分の店のリストに加えることができるなんて驚きです。
</body>

解答例

<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>演習問題2</title>
<style>
html,body,h1,h2,p {
margin: 0;
padding: 0;
line-height: 1.0;
}
#container {
background: #91BC86;
width: 600px;
padding:20px 10px 10px 10px;
box-sizing: border-box;
}
h1 {
color: #FFF;
margin-bottom: 20px;
}
h2 {
background: #BC908F;
color: #FFF;
padding: 5px 0 5px 5px;
margin-bottom: 20px;
}
p {
background:#F5F5DB;
line-height: 1.8;
padding: 10px;
}
</style>
</head>
<body>
<div id="container">
<h1>About wine</h1>
<h2>Chianti Classico Riserva</h2>
<p>1435年創業の由緒あるワイン醸造メーカーの名家マッツェイが所有するぶどう園は、いたるところにローマ時代の遺跡が残る小さな集落にあります。<br>
15世紀から現在に至るまで、キャンティワインの造り手たちの先導者であり続けるマッツェイの歴史は、キャンティワインの歴史といっても過言ではありません。<br>
キャンティの最高峰と呼ばれるマッツェイは、もっぱら地元の人のために造られる量り売りを飲んでいたぼくにとって、憧れのワイナリーでした。<br>
当時はおじいちゃんになったら飲めるかなと思っていましたが、こうして日本で、ましてや自分の店のリストに加えることができるなんて驚きです。</p>
</div>
</body>
</html>





演習3
f:id:yachin29:20160721092541p:plain

<body>
background-colorの設定

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


解答例

<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>演習問題3</title>
<style>
html,body,h1,h2,p {
margin: 0;
padding: 0;
line-height: 1.0;
}
#container {
width: 400px;
}
h1 {
color: #FFF;
background: #00F;
font-size: 20px;
padding: 1em 0 1em 1em;
}
p {
background:#B9D5EB;
line-height: 1.5;
padding: 1em;
}
</style>
</head>
<body>
<div id="container">
<h1>background-colorの設定</h1>
<p>見出しには濃いめの色を背景に指定し、文字を白抜きにします。段落には見出しよりも薄い色を指定します。さらに見出しと段落の上下のマージンを0にして、ボックスの上下をくっつけ、パディングを1em指定します。</p>
</div>
</body>
</html>

背景画像の指定

演習4

素材
f:id:yachin29:20160721103321g:plain


完成イメージ
f:id:yachin29:20160721103343j:plain


解答例

<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>演習問題4</title>
<style>
html,body,h1,h2,p {
margin: 0;
padding: 0;
line-height: 1.0;
}
body {
background: url(04.gif) repeat;
}
</style>
</head>
<body>

</body>
</html>

演習5
(水平方向に繰り返し)
素材
f:id:yachin29:20160721103444j:plain

<body>
Page Design
</body>

完成イメージ
f:id:yachin29:20160721103519j:plain

解答例

<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>演習問題5</title>
<style>
html,body,h1,h2,p {
margin: 0;
padding: 0;
line-height: 1.0;
font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "MS P明朝", serif;
}
body {
background: url(05.jpg) repeat-x;
}
h1 {
padding: 20px 0 0 5px;
}
</style>
</head>
<body>
<h1>Page Design</h1>

</body>
</html>

演習6
(垂直方向に繰り返し)
素材
f:id:yachin29:20160721103709j:plain

<body>
Page Design
</body>

完成イメージ
f:id:yachin29:20160721103735j:plain


解答例

<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>演習問題6</title>
<style>
html,body,h1,h2,p {
margin: 0;
padding: 0;
line-height: 1.0;
}
body {
background: url(06.jpg) repeat-y;
}
h1 {
font-family: sans-serif;
color: #FFF;
padding: 20px 0 0 5px;
}
</style>
</head>
<body>
<h1>Page Design</h1>
</body>
</html>


演習7

素材
f:id:yachin29:20160721104001j:plain

<body>
Page Design
背景に色数を減らした画像を用意します。背景画像は、縦方向び繰り返しを指定しています。
また、見出しの文字は、大きく、インパクトの強い色を指定し、目を引くようにしています。
このように、やり方次第でデザインの幅が広がります。いろいろ試してみましょう。
</body>


完成イメージ
f:id:yachin29:20160721104017j:plain

解答例

<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>演習問題7</title>
<link href="https://fonts.googleapis.com/css?family=Indie+Flower" rel="stylesheet">
<style>
html,body,h1,h2,p {
margin: 0;
padding: 0;
line-height: 1.0;
}
body {
background: url(07.jpg) repeat-y;
}
#container {
margin-left: 70px;
width: 500px;
}
h1 {
border-bottom: 4px dashed #999;
padding: 20px 0 10px 10px;
color: brown;
font-family: 'Indie Flower', cursive;
}
p {
padding: 20px 0 0 10px;
line-height: 1.5;
}
</style>
</head>
<body>
<div id="container">
<h1>Page Design</h1>
<p>背景に色数を減らした画像を用意します。背景画像は、縦方向び繰り返しを指定しています。<br>
また、見出しの文字は、大きく、インパクトの強い色を指定し、目を引くようにしています。<br>
このように、やり方次第でデザインの幅が広がります。いろいろ試してみましょう。</p>
</div>
</body>
</html>

演習8
背景画像(繰り返さない)

素材
f:id:yachin29:20160721104453g:plain

<body>
古池や蛙飛び込む水の音
芭蕉の「古池や蛙飛び込む水の音」の、連歌の発句として脇を予想したもとの形は「古池や蛙飛んだる水の音」でした。
明らかに、「蛙飛んだる水の音」のほうが勢いがあり、連衆から脇句を引き出す挨拶の意味も込められていましたが、単独の文学作品としては、
「蛙飛び込む水の音」のほうが遙かに余情があるでしょう。
明治以後、近代化された俳句が盛んになると共に、連歌は廃れてしまいました。しかし、近年連歌を巻く人が急激に増加しつつあるようです。
発句には、何よりも連歌全体がそこから始まるという、共同製作の原点という面白さがあります。これまで、俳句だけを作ってこられた方に、是非とも、発句の面白さを経験して戴くために、発句の部屋を開設した次第です。

完成イメージ
f:id:yachin29:20160721104505j:plain


解答例

<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>演習問題8</title>
<link href="https://fonts.googleapis.com/earlyaccess/sawarabimincho.css" rel="stylesheet" />
<style>
html,body,h1,h2,p {
margin: 0;
padding: 0;
line-height: 1.0;
font-family: "Sawarabi Mincho";
}
body {
background: url(08.gif) no-repeat;
}
#container {
width: 400px;
margin-left: 180px;
}
h1 {
font-size: 32px;
padding: 40px 0;
text-align: center;

}
p {
font-size: 16px;
line-height: 1.5;
}
</style>
</head>
<body>
<div id="container">
<h1>古池や蛙飛び込む水の音</h1>
<p>芭蕉の「古池や蛙飛び込む水の音」の、連歌の発句として脇を予想したもとの形は「古池や蛙飛んだる水の音」でした。<br>
明らかに、「蛙飛んだる水の音」のほうが勢いがあり、連衆から脇句を引き出す挨拶の意味も込められていましたが、単独の文学作品としては、「蛙飛び込む水の音」のほうが遙かに余情があるでしょう。<br>
明治以後、近代化された俳句が盛んになると共に、連歌は廃れてしまいました。しかし、近年連歌を巻く人が急激に増加しつつあるようです。<br>
発句には、何よりも連歌全体がそこから始まるという、共同製作の原点という面白さがあります。これまで、俳句だけを作ってこられた方に、是非とも、発句の面白さを経験して戴くために、発句の部屋を開設した次第です。</p>
</div>
</body>
</html>

演習9
各値は適宜

宮沢賢治作品
いてふの実
そらのてっぺんなんか冷たくて冷たくてまるでカチカチの灼きをかけた鋼です。
そして星が一杯です。けれども東の空はもう優しい桔梗の花びらのやうにあやしい底光りをはじめました。
その明け方の空の下、ひるの鳥でも行かない高い所を鋭い霜のかけらが風に流されてサラサラサラサラ南の方へ飛んで行きました。
実にその微な音が丘の上の一本いてふの木に聞える位澄み切った明け方です。いてふの実はみんな一度に目をさましました。そしてドキッとしたのです。
今日こそはたしかに旅立ちの日でした。みんなも前からさう思ってゐましたし、昨日の夕方やって来た二羽の烏もさう云いひました。


完成イメージ
f:id:yachin29:20160721104736j:plain


演習10(テキストは演習9のを使用)
素材
f:id:yachin29:20160721104759j:plain



完成イメージ
f:id:yachin29:20160721104827j:plain

広告を非表示にする