働く女性エンジニア道

働く女性の未経験エンジニア道♯3~CSS始めようposition編〜

こんにちは。
以前は朝は人より早く出社してましたが最近はギリギリ出社の、もふもふです。
転職前後で何が変わったのかと改めて考えてみたところ、以前は役職があったけど今はない。そのくらいですが私の様に意思が弱いタイプは何かしらのポジションがあると、外から見られてると意識し多少気が引き締まるのでしょう。(はい、自由すぎるとだらけるダメなタイプです。)

position(場所、位置、地位)外からの見え方や立ち位置を意識するって大切なんですね。

さて、今回はそんな「位置」をテーマに書いていきたいと思います。

第2回目ではHTMLでは見えない部分と見える部分、両方の命令が必要ということを書きましたが(headとbody)、今回からHTMLに加えcssの登場です!
<<第一回と第二回の復習はこちらから>>

前回同様、ピンクのマーカー部分の言葉は最後の「おさらいワード」で補足説明があるのでそちらもご参照ください。それでは始めます。

CSSの書き方

HTMLのbodyで記述したタグ(=要素)に対して、 大きさや高さ・幅の指定、文字のフォントの指定や色などを加えて見た目を整えます。HTMLファイルとは別にCSSファイルを作成しデータを読み込ませますが、CSSの書き方はとても簡単。

①「セレクタ(どのHTMLタグに)」
②「プロパティ(どういうデザインを)」
③「値(どれくらい)」という順番で、
{ }や;で仕切りながら書いていきます。

例えば、headerの色を黒にしたければ

/* セレクタ */
header{
/* プロパティ:値; */
    background-color:black;
}

これだけで、下の画像の様にヘッダーの色が黒になります。(画像1)
そして、 

header{
  background-color: pink;
}

とすれば、ピンクに代わります。(画像2)

値の部分の色についてはカラーコードというもので指定もできますし、基本的な色だったら直接英語で記載することもできます。

(画像1)
(画像2)

ヘッダーの色が黒かピンクか、それだけでタイトルの白文字が目立ちが大きく変わります。色での見せ方もとても大切ということがわかります。
また、すでにお気づきの方もいるかもしれませんが、実はHTMLやCSSのタグは英語表記でほぼそのままの意味なので、調べればわかるありがたい言語。
現在勉強中の私は作業の時は常に英語辞書アプリを開いておき、聞きなじみのない言葉が出てきたらまずは日本語に変換し自分の頭の中に入れて理解する様にしています。

positionタグの使い方

冒頭でも書いたposition。位置を指定をするプロパティです。
使う値は「relative・absolute・fixed」。
(もう一つstatic(=初期値、未設定)という値がありますが、私は1度も使ったことがありません。(^^;))

relative・・・現在の位置を基準に“相対的”な位置を指定
absolute・・・親要素を基準に“絶対的”な位置を指定
fixed・・・画面を基準に“絶対的”な位置を指定
static・・・初期値。位置指定無効な要素とも言われているがほぼ使わない

そして値で決めた基準から上下左右どれくらいの場所に置くか調整します。調整方法は、position専用プロパティtop、bottom、left、rightで指定。(※staticではこれらの指定が一切出来ません。)

position: fixed;(画面基準の指定方法)

「CSS position」で検索をすると上位に情報が出てくる値。
imgという名前をつけたお店の写真を、画面上から100px下、左から500px離れた場所に固定したい場合は、以下の様に書きます。(画像3)

img{
    position: fixed;    /* 画面基準に位置を固定 */
    top: 100px;    /* 上から100px下 */
    left: 500px;    /* 左から500px右へ */
}

画面基準の指定補法なので、どんなにスクロールしてもimgはこの位置で固定されます。

画像3

fixedはヘッダーやフッター・サイドバーなどでよく使用されているのでイメージしやすかったのですが、私が一番悩んだのはrelativeabsoluteでした。

position:relative;(本来の位置基準・相対位置)

img(画像)を本来の表示位置を起点にして、上から100px、左から500pxずらした位置を指定してみました。(画像4)

img{
    position: relative;    /* 本来の表示位置を起点に指定 */
    top: 100px;    /* 本来の表示位置を起点に上から100px */
    left: 500px;    /* 本来の表示位置を起点に左から500px */
}
画像4

私はrelativeを使用したことがあまりなく、どのような場面で活躍できるのか解らずまだ使いこなせていません。
個人的には画面が起点のfixedや、親要素を起点とするabsoluteの方が理解しやすいです。

position:absolute;(親要素基準・絶対位置)

こちらは親要素を起点に位置を指定します。画像に文字をかぶせたい時などによく使用されます。
今回用意している画像ではわかりにくいので、次回「画像への文字のかぶせ方」をテーマに書きたいと思います。

人もCSSでも自分の立ち位置をよく理解し、そこからどのくらいの距離感でどう見せるかが大切ということなのでしょう。

今回のおさらいワード

◆Position:体育会系の会社にいたころは、“ポシションは与えられるものではなく自分で作るもの”と教わったものです。webページ作りでもポジションは自分で調整するもの。
◆css:Cascading Style Sheets、カスケーディング・スタイル・シートの略。HTMLにとっての洋服。これを始めると楽しくてサイト作りが止まらなくなる。
◆カラーコード:Webページ上で表現される色を指定するために用いられるコード。#と6桁の英数字で指定をする。2桁ごとに赤・青・緑の濃淡を表すが、black、redなど直接英語入力でも指定可能。
◆relative:自分の今の場所を基準に位置を指定。
 (ページを学校に例えると⇒今自分が座っている座席から2つ左の席に移動)
◆absolute:親要素を基準に位置を指定。
 ( ページを学校に例えると ⇒自分の教室の前から2列目の右から3番目の席)
◆fixed:画面を基準に位置を指定。
 ( ページを学校に例えると ⇒校庭)
◆static:指定しないことを指定する、禅問答のような値。未だ解けず
◆top:上からの配置位置を指定するプロパティ
◆bottom:下からの配置位置を指定するプロパティ
◆left:左からの配置位置を指定するプロパティ
◆right:右からの配置位置をしていするプロパティ
◆距離感:近すぎても遠すぎてもよくない。人もCSSもバランスが難しい。

作者情報

プライベートは温泉と美味しいご飯そして面白いネタを求め、仕事ではWEBエンジニアを目指し冒険中。
そのままライブに行ける好きな服で仕事をしたい、リモートワークに憧れるエンジニア女子(LV.1)