だいたい知ってるので知らなかったやつだけ
3-1 HTMLとCSSの基礎
- 略
3-2 文書要素の制御
知らなかった言葉
- 終点側アンカー
- 始点側アンカー
<a href="終点側アンカーのURL">始点側アンカーとなる内容</a>
3-3 文字の装飾
-
絶対単位
- in
- cm
- mm
- pt
- pc
-
相対単位
- em
- ex
- px
- %
-
pxはcg検定的には「相対単位」
- dpiありきで長さの絶対値が変わるので
- 【補】mozilla的にはpxは「絶対単位」
1px = 1inの1/96
- 日本語フォントを指定する場合、「日本語フォント名のみ有効」「日本語フォント名無効」の場合があるので留意する
<div style="font-family:'MS P明朝';">あいうえお</div>
あいうえお
<div style="font-family:'MS PMincho';">あいうえお</div>
あいうえお
-
総称ファミリ
- serif
- san-serif
- cursive
- fantasy
- monospace
-
文字装飾
- none
- underline
- overline
- line-through
- blink
- 【補】blinkは現在どのブラウザでも実装されていない: mozilla
3-4 フォーム
-
inputとかtextareaとかは「コントロール」という
- 【補】HTML5.2仕様
3-5 CSSレイアウト
boxの語彙
コンテンツ領域にある子から見て、親のコンテンツ領域を包含ブロックとよぶ
上下マージンの相殺
<style>
#A {
width: 240px;
background-color: silver;
border: 1px solid orange;
}
#B,#C {
width: 200px;
height: 200px;
margin: 20px 20px 15px
}
#B {
background-color: yellow;
}
#C {
background-color: green;
}
</style>
<div style="text-align: center">
<div id="A">
<div id="B"></div>
<div id="C"></div>
</div>
</div>
矩形B(黄)と矩形C(緑)の間のマージンが15px + 25px = 35px
ではなくmax(15px,20px) = 20px
になる
【補】display: inline-block
だと起きない
<div style="text-align: center">
<div id="A">
<div id="B" style="display:inline-block"></div>
<div id="C" style="display:inline-block"></div>
</div>
</div>