入門Webデザイン ch3 Webページを実現する技術

CG検定勉強メモ資格勉強

だいたい知ってるので知らなかったやつだけ

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とかは「コントロール」という

3-5 CSSレイアウト

boxの語彙

img

コンテンツ領域にある子から見て、親のコンテンツ領域を包含ブロックとよぶ

上下マージンの相殺

<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>