Felica Study Site

Lesson Data Down Load

CSS演習

css

CSS演習

CSS演習

CSSの練習をしてみましょう。

演習１

画像

  • #1B888D
  • #355584
<h1>style要素</h1>
<h2>style element</h2>
<p>HTML文書内にまとめて設定します。</p>

演習２

下の画像を使用して背景画像の練習をしてみましょう

画像

演習２

画像

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

演習３

背景画像の配置

画像

上の画像をダウンロードして下記のように配置

画像

演習４

背景画像の配置：ｘ軸に繰り返し

画像

上の画像をダウンロードして下記のように配置

画像

演習５

背景画像の配置：Ｙ軸に繰り返し

画像

上の画像をダウンロードして下記のように配置

画像

演習６

画像

上の画像をダウンロードして下記のように配置

画像

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

演習７

背景画像を繰り返さない

画像

上の画像をダウンロードして下記のように配置

画像

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

11月17日授業データ

index01.html


<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>CSS演習１</title>
  <style>
  html,body,h1,h2,p{
  margin:0;
  padding: 0;
  }
  h1{
   padding: 20px 10px;
   color:#1B888D;
  }
  h2{
   padding: 0 10px;
   margin-bottom: 20px;
   background-color: #355584;
   color:#fff;
  }
  p{
   padding-left: 10px;
   color:#355584;
   font-weight:bold;
  }
  </style>
</head>
<body>
<h1>style要素</h1>
<h2>style element</h2>
<p>HTML文書内にまとめて設定します。</p>
</body>
</html>

index02.html


<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>CSS演習２</title>
<style>
html,body,h1,p{
 margin:0;
 padding: 0;
}
.box{
 width:300px;
 margin:auto;
}
h1{
 padding:10px 20px;
 background-color: #006AB8;
 color:#fff;
 font-size:18px;
}
p{
 background-color: #BAD4EB;
 padding: 20px 16px;
 font-size:12px;
}
</style>
</head>
<body>
<div class="box">
<h1>background-colorの設定</h1>
<p>見出しには濃いめの色を背景に指定し、文字を白抜きにします。段落には見出しよりも薄い色を指定します。さらに見出しと段落の上下のマージンを0にして、ボックスの上下をくっつけ、パディングを1em指定します。</p>
</div>
</body>
</html>

index03.html


<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>CSS演習３</title>
<style>
html,body{
 margin: 0;
 padding:0;
}
.container{
 width:500px;
 height: 500px;
 margin: auto;
 background: url(img/bee.gif);
}
</style>
</head>
<body>
<div class="container"></div>
</body>
</html>

index04.html


<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>CSS4演習</title>
<style>
html,body,h1{
 margin:0;
 padding:0;
}
.container{
 padding: 20px 10px;
 height: 177px;
 background: url(img/border.jpg) repeat-x;
}
h1{
 color:#068068;
}
</style>
</head>
<body>
<div class="container">
<h1>Page Design</h1>
</div>
</body>
</html>

index05.html


<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>CSS5演習</title>
<style>
html,body,h1{
 margin:0;
 padding: 0;
}
body{
 background:url(img/border2.jpg) repeat-y;
}
h1{
 padding:20px 10px;
 color:#fff;
}
</style>
</head>
<body>
<h1>Page Design</h1>
</body>
</html>

index06.html


<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>CSS6演習</title>
<style>
html,body,h1,p{
 margin: 0;
 padding:0;
}
body{
 background:url(img/wall.jpg) repeat-y;
}
.container{
 width:400px;
 padding-left: 70px;
}
h1{
 padding:30px 0 5px 20px;
 color:#8B0E00;
 border-bottom: 4px dashed #9B9B9B;
}
p{
 padding:20px 0 0 20px;
}
</style>
</head>
<body>
<div class="container">
<h1>Page Design</h1>
<p>背景に色数を減らした画像を用意します。背景画像は、縦方向び繰り返しを指定しています。<br>
また、見出しの文字は、大きく、インパクトの強い色を指定し、目を引くようにしています。<br>
このように、やり方次第でデザインの幅が広がります。いろいろ試してみましょう。</p>
</div>
</body>
</html>

index07.html


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