第5回は、STUDIOでより立体的なレイアウトを組むことが出来るよう、要素の配置に関わるプロパティ=position（Relative配置、Fixed配置、Absolute配置）と、要素の重なり順を指定するプロパティ=z-indexについて学びましょう。
最初に
STUDIOでWeb制作を行うにあたり、CSSのプロパティを理解しておけば、より複雑で立体的なデザイン性の高いWebサイトを制作することができます。
CSSプロパティとは、どのような見た目、装飾にしたいかを決めるためのものです。CSSプロパティ自体について、より詳しく知りたい方は以下の記事も参考にしてください。
Position、z-indexを効果的に活用している参考サイト
Positionプロパティについて
プロパティとはその要素の外見に関する設定です。その中でも、positionプロパティは要素の配置に関する設定となります。STUDIOで指定できるpositionプロパティの値は、以下の3種類です。
- Relative(相対的)配置←STUDIOでは基本的はこちらが設定されています
- Fixed(固定ボックス)配置
- Absolute(絶対固定)配置
Relative(相対的)配置
現在の位置を起点とし、位置を動かすと周囲の要素にも影響します。
Fixed(固定ボックス)配置
ブラウザの画面を基準に、左上を起点として固定配置が可能です。
Absolute(絶対固定)配置
最も近い親要素relativeを起点として固定配置が可能です。
absoluteだけでは具体的な位置指定が出来ない為、親要素にrelativeを指定する必要があります。
STUDIOではグループ親要素の中身である子要素の配置変更を行う場合、relativeとabsoluteの2つからしか選択できません。Web制作の知識としてabsoluteを設定するためには親要素が必要と覚えておきましょう。
z-indexについて
z-indexは要素の重なり順を指定するCSSのプロパティで、position プロパティと一緒に使います。STUDIOで指定できる値は0,1,2,3,4,5,-1,-2,-3であり、何も指定していない場合は0になっています。
マイナスの値を指定すると、何も指定していない要素よりも下に配置されます。机上に重なった用紙をイメージしてください。イラストレーターやフォトショップに慣れた人であれば、レイヤーの階層構造を想像してもらえるとより理解できると思います。
