CSS簡単なガイド（２）

1. CSS勉強会 第2回
2016/6/30

2. （静的）ウェブページ出来上がるまでの流れ
7月MVP
○○本部
○○さん
ーーーーーーーー
ーーーーーーーー
ーーーーーーーー
ーーーーーーーー
<h1>７月MVP</h1>
<h2>○○本部</h2>
<h3>○○さん</h3>
<img src=“…”>
<p>
ーーーーーーーー
ーーーーーーーー
ーーーーーーーー
ーーーーーーーー
</p>
h1 {
color: red;
font-style: italic;
}
img {
width: 500px;
height: 300px;
border: 3px dotted
green;
}
7月MVP
○○本部
○○さん
ーーーーーーーー
ーーーーーーーー
ーーーーーーーー
ーーーーーーーー
テキスト HTML WebページCSS

3. Border-radius (1)
• ボックス４つのコーナーをそれぞれの角丸を指定するプロパティ
• border-top-left-radius: 100px 50px;
border-top-right-radius: 25px 25px;
border-bottom-right-radius: 50px 50px;
border-bottom-left-radius: 50px 25px;
• border-radius: 100px 25px 50px 50px / 50px 25px 50px 25px;
水平方向 垂直方向

4. Border-radius (2)
• border-radius: 値１ 値２;
• border-radius: 値１ 値２ 値３;
• border-radius: 値１ 値２ 値３ 値４;
※値はpx, em, %等

5. Border-radius (3)
border-radius: 50%;

6. Scroll
div {
width: 500px;
height: 300px;
overflow: scroll;
}
※横スクロール：overflow-x, 縦スクロール：overflow-y

7. リンクテキストの範囲
• aタグの中であればリンクです！
ここは違う<a href=“http://ebookjpan.jp”>ここはリンク</a>ここも違う
ここは違うここはリンクここも違う

8. ページ内で移動する (1)
クリック

9. ページ内で移動する (2)
<h1 id=“title1”>見出し1</h1>
<p>
ここ普通の段落です。
</p>
<h1 id=“title2”>見出し2</h1>
<p>
ここに飛びたいです。
</p>
<a href=“#title2”>見出し2に行く！</a>

10. 画像や文字の配置等(1)
margin padding text-align
（文字の場合）
すべてできます！

11. 画像や文字の配置等(2)
a
IMG 1 IMG 2
margin-top
margin-left
margin-right
margin-right 1
margin-left 2
padding-left

12. 画像や文字の配置等(3)
margin-left
padding-top
どれをいつに使うの？

13. 背景の設定(1)
• background-color
• background-image
• background-repeat
裏の
エレメント
表の
エレメント

14. 背景の設定(2)
background-
color
(background-
image) background-
color: white;

15. 背景の設定(3)
http://lea.verou.me/css3patterns/