WEBデザインの勉強

WEB制作初心者が1から勉強するブログ。

CSSの練習

スタイルシートの書きかた

外部のCSSファイルを読み込む方法とHTML内に直接書く方法があるが、
HTMLに直接書く場合は

<style>
~
</style>

の間に記述する。

リセットCSS

ブラウザの仕様で余計な余白や装飾がでるのを無くす為に記述する。
HTMLで使用している全ての要素を記入する。

/* reset */
html,body,h1,h2,p{
  margin: 0;
  padding: 0;
  line-height: 1.0;
  font-family:
    "Hiragino kaku Gothic ProN",
    Meiryo,
    sans-serif;
}

関連記事
mmmmofu.hatenablog.com

font-family

フォントの種類を指定
先に記述したものが優先でユーザーの環境によって利用可能なものが選択される。
sans-sefifはゴシック体のフォントで各デバイスが勝手にフォントを選んでくれる

line-height

行の高さを指定する。

background

背景色や画像を指定する。
その他にも背景画像の固定や、背景画像のポジション(開始位置)、背景画像のリピート、リピート方法などをショートハンドで記入できる。

1

f:id:mmmmofu:20160714111753p:plain

http://efu.sakura.ne.jp/web/0325/

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf8">
<title>CSSの練習</title>
<style>
h1{
  color: #118D95;
}
h2{
  color: #FFF; background: #355584;
}
p{
  color: #2E077E;
}   
</style>    
</head>
<body>
<h1>style要素</h1>
<h2>style element</h2>
<p>HTML文書内にまとめて設定します。</p>
</body>
</html>

2

f:id:mmmmofu:20160714111820p:plain

http://efu.sakura.ne.jp/web/0325/index2.html

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

3 背景色指定-background

f:id:mmmmofu:20160714112415p:plain

http://efu.sakura.ne.jp/web/0325/index3.html

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf8">
<style>
/* reset */
html,body,h1,h2,p{
  margin: 0;
  padding: 0;
  line-height: 1.0;
  font-family:
    "Hiragino kaku Gothic ProN",
    Meiryo,
    sans-serif;
}
body{
font-size: 16px;
}
h2{
  width: 470px;
  color: #FFF;
  background: #006AB8;
  margin: 0 auto;
  padding: 20px;
}
p{
  width: 470px;
  background: #BAD4EB;
  margin: 0 auto;
  padding: 20px;
  line-height: 1.5;
}

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

4 背景画像指定-background 画像リピート

f:id:mmmmofu:20160714111924p:plain

http://efu.sakura.ne.jp/web/0325/index4.html

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf8">
<style>
/* reset */

body{
  background: url(img/01.gif);
}

</style>
</head>
<body>

</body>
</html>

5 背景画像指定-background 画像横リピート(x軸)

f:id:mmmmofu:20160714111934p:plain

http://efu.sakura.ne.jp/web/0325/index5.html

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf8">
<style>
/* reset */

body{
  background-image: url(img/02.gif);
  background-repeat: repeat-x;
}

</style>
</head>
<body>
<h1>PageDesign</h1>
</body>
</html>

6 背景画像指定-background 画像縦リピート(y軸)

f:id:mmmmofu:20160714111943p:plain

http://efu.sakura.ne.jp/web/0325/index6.html

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf8">
<style>
/* reset */

body{
  background-image: url(img/03.gif);
  background-repeat: repeat-y;
}

</style>
</head>
<body>
<h1>PageDesign</h1>
</body>
</html>

7 ボーダー(ドット)指定-border

f:id:mmmmofu:20160714112134p:plain

http://efu.sakura.ne.jp/web/0325/index7.html

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf8">
<style>
body{
  font-family: 
    "Hiragino Kaku Gothic ProN"
    Meiryo,
    sans-serif;
  background-image: url("img/04.gif") repeat-y;
}
h1{
  width: 400px;
  color: #901204;
  margin: 20px 0 20px 60px;
  paddong: 0 0 5px 20px;
  border-bottom: 4px dashed #AAA;
}
P{
  width: 400px;
  maegin-left: 61px;
  padding-left: 20px;
  line-height: 1.5;
}
</style>
</head>
<body>
<h1>Page Design</h1>
<p>背景に色数を減らした画像を用意します。背景画像は、縦方向び繰り返しを指定しています。<br>
また、見出しの文字は、大きく、インパクトの強い色を指定し、目を引くようにしています。<br>
このように、やり方次第でデザインの幅が広がります。いろいろ試してみましょう。</p>

</body>
</html>

8 背景画像指定(リピートなし)-background

f:id:mmmmofu:20160714112002p:plain

http://efu.sakura.ne.jp/web/0325/index8.html

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf8">
<style>
body{
  font-family:
    "ヒラギノ明朝 ProN",
    "HG明朝E",
    "MS P明朝",
    "MS 明朝",
    serif;
  background: url(img/05.gif) no-repeat left top;
}
h1,p{
  margin-left: 160px;
}
h1{
  margin: 40px 0 60px 160px;
  font-size: 28px;
}
p{
  width: 330px;
  line-height: 1.6;
  
}
</style>
</head>
<body>
<h1>古池や蛙飛び込む水の音</h1>
<p>芭蕉の「古池や蛙飛び込む水の音」の、連歌の発句として脇を予想したもとの形は「古池や蛙飛んだる水の音」でした。<br>
明らかに、「蛙飛んだる水の音」のほうが勢いがあり、連衆から脇句を引き出す挨拶の意味も込められていましたが、単独の文学作品としては、
「蛙飛び込む水の音」のほうが遙かに余情があるでしょう。<br>
明治以後、近代化された俳句が盛んになると共に、連歌は廃れてしまいました。しかし、近年連歌を巻く人が急激に増加しつつあるようです。<br>
発句には、何よりも連歌全体がそこから始まるという、共同製作の原点という面白さがあります。これまで、俳句だけを作ってこられた方に、是非とも、発句の面白さを経験して戴くために、発句の部屋を開設した次第です。</p>
</body>
</html>

9 線の囲み

f:id:mmmmofu:20160714112012p:plain

http://efu.sakura.ne.jp/web/0325/index9.html

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf8">
<style>
body{
  font-family:
    "ヒラギノ明朝 ProN",
    "HG明朝E",
    "MS P明朝",
    "MS 明朝",
    serif;
}
h1,p{
  margin-left: 160px;
}
h1{
  margin: 40px 0 60px 160px;
  font-size: 28px;
}
p{
  width: 330px;
  line-height: 1.6;
}
#box1{
  width: 500px;
  margin: 50px auto;
}
.border1,.border2,.border3,.border4,.border5,.border6{
  border: 1px solid #333;
  margin: 15px 0;
  padding: 10px;
}
.border2{
  border: 5px solid #999;
}
.border3{
  border: 1px solid #F00;
}
.border4{
  border: 1px dotted #333;
}
.border5{
  border-top: 5px solid #2D9A61;
  border-right: 1px dotted #2D9A61;
  border-bottom: 2px dotted #2D9A61;
  border-left: 12px solid #2D9A61;
}
.border6{
  border-top: 2px solid #21669D;
  border-right: none;
  border-bottom: 3px double #21669D;
  border-left: 1px solid #21669D;
}
</style>
</head>
<body>
<div id="box1">
<p class="border1">テキストの囲みを表現したい[標準]</p>
<p class="border2">テキストの囲みを表現したい[線の太さ]</p>
<p class="border3">テキストの囲みを表現したい[線のカラー]</p>
<p class="border4">テキストの囲みを表現したい[線のスタイル]</p>
<p class="border5">テキストの囲みを表現したい[複数の指定]</p>
<p class="border6">テキストの囲みを表現したい[複数の指定]</p>
</div>
</body>
</html>