20200917 【要復習】 CSS positionについて・定義リストとは
○positionについて
「position」は、CSSで使うプロパティの一つです。特に要素の「配置」を決めるのが「position」の役割です。基本的な使い方として、以下のように書きます。
|
1
2
3
|
.要素セレクタ{ position: static/relative/absolute/fixed/stickyをここに配置する。;} |
ここで、英語のカタカナ表記に苦手意識を持つ人もいるかもしれませんね。そこで、簡単におさらいしておきましょう。プロパティとは、以下のCSSの要素を指します。
「配置」を決めるプロパティ
ところで「配置」を決めるプロパティは、「position」だけではありません。今回は「position」を説明しますが、「position」以外にも「floatプロパティ」や「displayプロパティ」があることを知っておいてください。デザインの目的に沿って使い分ける必要があります。
| メリット | デメリット | |
| positionプロパティ | 配置の細かな指定に向いている。要素を重ねたりする場合には特に向いている。 | 画面サイズの変更による調整が難しい。設計に失敗すると画面の大きさの違いにより要素同士が重なることもある。 |
| floatプロパティ | 横並びなど単純なレイアウト作成、小さな変更などに向いている。要素の重なりなどの心配はない。 | レイアウトやページの構成に影響する複雑な配置には向かない。 |
| displayプロパティ | 横並び、縦並びなど単純なレイアウト作成、小さな変更などに向いている。floatに比べて、様々な値のオプションが用意されており、使用の幅がある。 | 複雑な配置には向かない。 |
「position」で取れる値の種類
「position」を理解する上で、以下の区別は重要です。まず、「position」は、何もしなければ、「static」という値をとりますが、これは、位置の指定ができない値です。「position」という割に、何もできない値もあることは覚えておいてください。つまり、実務上は、特別な理由がない限り、「static」以外の値を取ります。
| 位置指定の有無 | 区別 | 値 |
| 位置指定無効 | – | static |
| 位置指定有効 | 相対配置 | relative |
| 絶対配置 | absolute | |
| fixed | ||
| sticky |
値の特徴
「position」の理解をややこしくするのは、値が多様であり、その値ごとに特徴を正確に把握していないと、思い通りの挙動にならない点です。そこで、「relative」と「absolute」はよく使うプロパティですので、全部は無理という方は、最低限、ここだけ読んでおいてください。この場合、positionでは、「配置の種類（相対か絶対か）」と「どの程度距離をとるか」の2つを考えます。まず、以下は「配置の種類」です。
| 値 | 特徴 | 説明 |
| static | 位置指定ができない。 | top,right,bottom,left,z-indexgが使えない。位置を変えたいときはrelativeやabsoluteにしなければならない。 |
| relative | 現在の位置を起点に要素の位置が動く。 | relativeの指定だけではなく、同時に、この時、top、right bottom、leftという値も指定する。つまり、値の組み合わせで配置を行うことに注意する。 |
| absolute | 最も近い「relative」(親や先祖の要素)を起点に要素の位置が動く。 | absoluteだけでは具体的な位置が指定できないため、「relatvie」同様にtop、bottom、left、rightプロパティを指定する。relativeを指定していなければ起点はページ全体となる。 |
| fixed | 基準位置は常にブラウザウィンドウ領域（一旦はbody要素と考える） | どこかの要素が基準にはならない。relativeと同様に、top、bottom、left、rightプロパティが使われる。navbarやmenuバーなど常に画面に固定したいものがある場合に使う。 |
| sticky | スクロールに応じて要素を固定する。 | 指定した値を超えるまではrelative、その後はfixedの特徴となる。位置や重なり順の指定も可能。 |
positionプロパティと一緒に使う位置指定のプロパティ「top」「right」「bottom」「left」
次に、「どの程度距離をとるか」ですが、左右上下で距離の設定ができます。
| top | 基準となる位置の上からの距離を指定する。 |
| right | 基準となる位置の右からの距離を指定する。 |
| bottom | 基準となる位置の下からの距離を指定する。 |
| left | 基準となる位置の左からの距離を指定する。 |
以下が起点から指定する値のイメージです。
○定義リストとは
<dl>タグの使い方
<dl>タグを使ってQ&Aページをつくってみましょう。
<dl>
<dt>質問1</dt>
<dd>答え1</dd>
<dt>質問2</dt>
<dd>答え2</dd>
<dt>質問3</dt>
<dd>答え3</dd>
</dl>
<dd>タグでかこまれた答えの部分がインデント（字下げ）され、質問に対する答えのリストができました。
他に、<dl>タグを使って用語集をつくることもできます。
例えばこのように書きます。
<dl>
<dt>HTML</dt>
<dd>Webブラウザに文字を表示させるための言語</dd>
<dd>文書の構造を示すために書かれる</dd>
<dt>CSS</dt>
<dd>文書の見た目を決めるために書かれるもの</dd>
<dd>デザインを決める役割をもつ</dd>
</dl>
すると、<dd>タグで囲まれた部分がインデント（字下げ）されました。
ブラウザ上の見た目は「項目名に、字下げされた内容が表示されたもの」ですが、コンピューター上では<dl>タグでかこまれた部分がまとまりを持った一つのコンテンツとして意味を持つものになります。
見た目が変わらないからといって<p>タグや<br>タグを使ってリストをつくるよりも、タグを正しく使い分けたほうが、ページがすっきりして管理がしやすくなる上に、Web上でもきちんと整理された質の高いページだと認識されます。
項目(dt)と内容(dd)がセットになっているリスト(dl)として覚えておきましょう。
