CSS基礎 - ★演習

演習

  • CSSの記述は、内部参照(embed)で記述
問題 CSS1

  • #1B888D
  • #355584
<body>
<h1>style要素</h1>
<h2>style element</h2>
<p>HTML文書内にまとめて設定します。</p>
</body>
問題 CSS2
  • 幅の指定は不要


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


  • #006AB8
  • #BAD4EB
<body>
<h1>background-colorの設定</h1>
<p>見出しには濃いめの色を背景に指定し、文字を白抜きにします。段落には見出しよりも薄い色を指定します。さらに見出しと段落の上下のマージンを0にして、ボックスの上下をくっつけ、パディングを1em指定します。</p>
</body>
問題 CSS4
  • 背景画像の指定


 ↑この画像をダウンロード


問題 CSS5
  • 背景画像の指定
  • X軸に繰り返し


 ↑この画像をダウンロード

f:id:lesson3:20170821021509p:plain

問題 CSS6
  • 背景画像の指定
  • Y軸に繰り返し


 ↑この画像をダウンロード

問題 CSS7


 ↑この画像をダウンロード


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


 ↑この画像をダウンロード


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


body {
  background-color:#8FBC8B;
}
h1 {
  font-size: 2.2em;
  color: #FFFFFF;
}
h2 {
  font-size: 1.2em;
  color: #FFFFFF;
  padding-left: 10px;
  background-color: #BC8F8F;
}
p {
  font-size: 0.85em;
  line-height: 2.0;
  padding: 10px;
  color: #333;
  background-color: #F5F5DC;
}


h1 {
  color: #FFFFFF;
  font-size: 1.0em;
  background-color: #1565B5;
}
p {
  font-size: 0.875em;
  background-color: #BDD4EB;
}
h2,p {
  margin: 0;
  padding: 1.0em;
}


body {
  background-image: url(img/bee.gif);
}


body {
  background-image: url(img/line1.jpg);
  background-repeat: repeat-x;
}
h1 {
  color: #30647A;
  font-family: serif;
}


body {
  background-image: url(img/line2.jpg);
  background-repeat: repeat-y;
}
h1 {
  color: #FFFFFF;
}


body {
  margin: 0;
  background-color: #FFFFFF;
  background-image: url(img/mono.gif);
  background-repeat: repeat-y;
}
h1 {
  color: darkred;
  border-bottom: dashed 4px #999999;
}
p {
  color: #333333;
}
h1, p {
  padding: 5px 20px;
  margin-left: 70px;
}


body {
  background-image: url(img/frog.gif);
  background-repeat: no-repeat;
  background-attachment: fixed;
}
h1 {
  font-size: 1.85em;
  font-family:
    "ヒラギノ明朝 ProN",
    "HG明朝E",
    "MS P明朝",
    "MS 明朝",
    serif;
}
p {
  width: 320px;
}
h1, p {
  margin: 40px 40px 0 160px;
}

求職者支援訓練 フェリカテクニカルアカデミー