Webサイト制作関連/スタイルシートの基礎知識
Last-modified: 2022-05-05 (木) 09:23:32
スタイルシート(cssデザイン)の基礎知識†
ブロック要素(ブロックレベル要素)†
その要素で指定された情報が、一つのまとまりとなる、文書を構成する上での基本的な要素。
ブロック要素は、ブラウザでの表示に際してもひとつの「ブロック」として扱われる。
(改行を伴い、明示的に横幅を指定しない限り、ページの横幅一杯に領域が確保される。)
ブロック要素の内容には、別のブロック要素やインライン要素を含むことができるが、逆にインライン要素の中にブロックレベル要素を置くことはできない。
ブロック要素の基本的なタグ†
<h1> ~ </h1> ・・・ <h6> ~ </h6> | 見出し |
<p> ~ </p> | 段落 |
<ul> ~ </ul> | 箇条書き |
<dl> ~ </dl> | 定義リスト |
<blockquote> ~ </blockquote> | 引用文 |
<address> ~ </address> | 問い合わせ先 |
<div> ~ </div> | 範囲の指定(改行あり) |
インライン要素†
インライン要素は、主にブロック要素の内容として用いられるもので、文書の構造を構成するというよりは、ブロック要素内の特定の部分になんらかの意味を持たせる要素。
ブラウザで表示した場合に、その要素の前後で改行されない。
インライン要素の基本的なタグ†
<a> ~ </a> | リンク |
<img /> | 画像 |
<em> ~ </em> | 強調 |
<strong> ~ </strong> | より強い強調 |
<br /> | 改行 |
<span> ~ </span> | 範囲の指定(改行なし) |
CSSの優先順位†
制作者/ユーザー/ブラウザ間での優先順位†
- ユーザ指定のCSS(!important指定アリ)
- 制作者指定のCSS
- ユーザー指定のCSS
- ブラウザ毎に指定されたデフォルトスタイル
CSS内での優先順位†
- !important指定アリのCSS
- idでの指定
- classでの指定
- 要素名での指定
- IEでは!important指定が効かないらしい
CSSで使用する単位†
絶対的な単位 | |
mm | ミリメートル 10mm = 1cm |
cm | センチメートル 1cm = 10mm |
in | インチ 1in = 2.54cm |
pt | ポイント 1pt = 1/72in |
pc | パイカ 1pc = 12pt |
相対的な単位 | |
em | エム 1em = 1文字分のサイズ(その時点のフォントサイズを1とする 「M」文字が基準) |
ex | エックスハイト 1ex = 「x」文字の高さ(飛び出し部分のない小文字 hとかgが飛び出しアリ) |
px | ピクセル 1px = 画面上の画素1ピクセル |
割合 | |
% | 割合 |
- 0 の場合は単位を指定しなくてもよい
- よく使うのは % em px
「id」と「class」†
id属性の値は「その要素につけられた固有の名前」、1つのHTML文書内に同じid属性の値を持つ要素は2つ以上存在してはいけない。対して、class属性の値は「その要素が属しているグループの名前」なので同じ文書内に同じclass属性の値を持つ要素が2つ以上あっても問題ない。