いろいろなプロパティ

1. CSSの書式
h2 {
font-size: 16px;
}
プロパティ 値
セレクター

2. 文字書式
font-size 文字の大きさ
color 文字の色
font-weight 文字の太さ
text-align 行揃え
text-decoration 文字装飾 リンク時の下線など
font-family フォントの指定
line-height 行間 ＊単位をつけない（文字の高さを１）

3. 色指定 color
16進数による色指定
color:#ff00ff;
rgbによる色指定
color:rgb(255,0,255);
color:rgba(255,0,255,0.5);
*不透明度

4. text-align:left;
行揃え text-align
aaa
text-align:center; aaa
text-align:right;
aaa

5. 左右を中央にする
aaa
上下を中央にするには！

6. 左右を中央にする text-align:center;
aaa
上下を中央にするには！

7. 左右を中央にする text-align:center;
aaa
上下を中央にするには！ height:30px;
line-height:30;

8. text-decoration:none;
文字装飾 text-decoration
＊リンク時の下線など
text-decoration:underline;

9. 背景
background-color 背景色
background-image 背景画像
background-image:url(“画像ファイル名“);
＊縦横に繰り返して表示される
background-repeat 背景画像の繰り返し
:repeat repeat-x repeat-y no-repeat
background-position 背景画像の表示位置
background-image : url(“oic.png”);
background-repeat: no-repeat;
background-position :left top;

10. background-image: url(../images/h1_right.gif);
background-repeat: no-repeat;
background-position: 550px 5px;
background-color: #fceae8;
①
①
②
③
④
③
④
②

11. サイズ、枠線
width 横幅
height 高さ
border 線種、太さ、色 を半角スペースで区切って指定
border: solid 1px #990000;
border-top 上の枠線
border-right 右の枠線
border-bottom 下の枠線
border-left 左の枠線

12. 枠線 border
border: 線種 太さ 色;
solid ・・・実線
dashed・・・破線
dotted ・・・点線
none
border: solid 1px #ff00ff;

13. 余白
padding 内部余白
margin 外部余白
パディング
内容内容内容内容
内容内容内容内容
内容内容内容内容マージン
＊パディングの部分も背景で
塗りつぶされる

14. 余白
内部余白
外部余白
内容（コンテンツ）

15. 余白
padding 内部余白
margin 外部余白
マージン
ボーダー
パディング
内容（コンテンツ）

16. ①内容
内容内容
内容内容
width
500px?
②
内容
内容
内容
width
480
Px?
10px 10px
*内容の上下左右のpadding:10px
*周りの線(border)は1px
980px
10px 10px
①のwidthは何px？
②のwidthは何px？

17. ①内容
内容内容
内容内容
width
478px
②
内容
内容
内容
width
458
Px
10px 10px
*内容の上下左右のpadding:10px
*周りの線(border)は1px
980px
10px 10px
①500-(10+10)-(1+1)=478px
②480-(10+10)-(1+1)=458px

18. 余白ワンポイント
✨box-sizing: bordor-box;
paddingとborderの幅を要素の幅と高さに含める

19. ①内容
内容内容
内容内容
②
内容
内容10px 10px
*内容の上下左右のpadding:10px
*周りの線(border)は1px
980px
10px 10px
✨box-sizing: bordor-box;
をcssで定義すると、
Paddingとborderを
幅(width)と高さ(height)
に含める
①のwidth
500px
②の
width
480px

20. 余白
padding: 10px 20px;
上下 左右
padding-top
padding-right
padding-bottom
padding-left
margin-top
margin-right
margin-bottom
margin-left
padding: 10px 20px 50px 30px ;
上 右 下 左

21. 余白ワンポイント
✨margin: 0 auto;
左右の外部余白が自動調整され、
要素が左右中央に配置される。

22. 半透明
opacity 半透明の指定
opacity: 0.7; 0〜1の数値を指定

23. 特定の文字列を指定する
<span>〜</span>
何回も出てくる時は、
spanタグにclassで名前をつける

24. <span>〜</span>
<p>猫の名前はくるみです</p>
猫の名前はくるみです

25. <span>〜</span>
<p>猫の名前は<span class=“name”>くるみ</span>です</p>
.name{
color: #f00;
font-weight: bold;
}
猫の名前はくるみです