働く女性エンジニア道

働く女性の未経験エンジニア道♯4~CSS position:absolut〜

季節は春になり気持ちのよい天気が続きますが、新型コロナウイルス感染のニュースは世界中で日を追うごとに増えています。
各種イベントの自粛で桜を見る間もなく散ってしまい少し悲しい気持ちの、もふもふです。今年中止になったさまざまな予定はその分来年上乗せ にして楽しみたいと思います。
さて、前回まではCSSについて書いていきましたが、色やレイアウトを加えるだけでだいぶソレっぽくなってきた気がします!(笑)
しかし、ただ画像や文字を平たんに並べていくだけじゃさみしい。
もう少し重ねたり上乗せして遊びたいな~とそんな欲がでてきたので、今回は前回の続き position:absolutを使い、画像に文字を重ねる方法をテーマに書いていきます。
前回同様、ピンクのマーカー部分の言葉は最後の「おさらいワード」で補足説明があるのでそちらもご参照ください。それでは始めます。

BREEZE内にpositionについての詳細な解説記事もございます!

「position:absolute;(親要素基準の絶対的な指定方法)」

こちらは親要素を起点に位置を指定します。
※positionタグのその他の種類や詳細については、前回記事を参照ください。

absoluteは今自分がいる箱(親要素)の始まりから上下左右(top、bottom、left、right)どのくらい離れた場所に留まるかを指定する値です。
自分がその箱(親要素)の中にいる限り、常にその箱を始点に指定された場所に位置し続けます。もし親要素のサイズが自分がいる場所よりも小さく変わたとしてもはみ出した状態で指定場所に留まり続けます。

<例>
枠に囲まれた部屋(親要素)の大きさは縦幅(height)300px、横幅(width)500px。
※判りやすくするため縦幅は100pxごとに色を変えています。
自分がいる位置を「子要素”.jibun”」で指定します。
色んなパターンを実際に画像で見てみましょう。

例①/親要素の上から80px、左から100pxの位置を指定

.jibun{	
	position: absolute;
	top: 80px;
	left: 100px;
	margin: 0;
}	

②親要素の上から180px、左から180pxの位置を指定

.jibun{	
	position: absolute;
	top: 180px;
	left: 180px;
	margin: 0;
}

先ほどの位置よりも、100px下、80px右側に移動しているのが判ります。

最後に、自分の位置は②と変わりませんが、箱の高さが300px→80pxに変わった場合です。箱(親様相)からはみ出していますが、あくまでも親要素の始点から指定された位置にいつづけます。
これらを利用して以下の様なことができます。

positionタグを使った応用

挿入した画像に文字をかぶせる方法

次の例では中央にある1列3枚並んだ画像の2枚目に「new!」の文字をかぶせています。
「new!」という文字を入力するだけでは1列に4つの要素が入っていることになりレイアウトが崩れてしまいます。
ここで、position: absoluteを使って画像の上ににアイコンの様に文字を被せています。

ここで私が苦戦したのが、画面を拡大縮小したときのズレでした。
今自分が見ているPC100%表示では綺麗に表示されているのに、表示サイズを80%にしたら3枚目の画像にかぶってしまう・・・等。
これを解決するには親要素にposition: relativeをかけてから、子要素にabsoluteを使用する。(relativeのみで、top等の記述は不要です)
これだけで解決です!!

<div class="oyayouso">
	<img src="image/Sample1.jpg" alt="">
	<img src="image/Sample2.jpg" alt="">
	<div class="koyouso">new!</div>
	<img src="image/Sample3.jpg" alt="">
</div>

<div class="oyayouso">
	<img src="image/Sample4.jpg" alt="">
	<img src="image/Sample5.jpg" alt="">
	<img src="image/Sample6.jpg" alt="">
</div>
.oyayouso{
	display: flex;
	position: relative;
	width: 100%;
}
.oyayouso img{
	width: 30%;
	margin: 5px;
}
.koyouso{
	background-color: red;
	color: white;
	width: 8%;
	position: absolute;
	left: 32%;
	top: 4%;
}

これだけで解決です!

★番外編★マネしちゃだめ!アレンジの落とし穴

ページ作成にも慣れはじめ、Google Chromeのデベロッパーツール(検証モード)もいじるようになり、次の欲望は“実際に自分が作ったページを公開したい!”と思うようになりました。

そこで無料ドメインが取得できるサービスを利用していたのですが、費用がかからない分、企業広告の掲載が多いんです!(TT)
サイトのTOPに入る広告はただ雰囲気が壊れて嫌だな~と思うようになりました。
そんなとき、文字や画像を上乗せできることを覚えた私は、あるずる賢い考えが浮んだんです。

「ヘッダーの位置を上げて固定にしちゃえば広告隠せるかも・・・」

ドキドキしながら試しにやってみました。
下の図では、赤枠内が本来自分が作成したページ。その上に自動で高さ:60pxほどの広告が表示されていたので、ヘッダーの指定をtop-60pxにして固定(fixed)しました。
そうです、top:◯◯;で上からどれくらい下げるのかを指定できるのだから、逆にマイナスにすれば上に上げることができることに気づいたのです。
つまり、ページ全体を上にあげて、更にヘッダーを広告の上にかぶせる方法で、サイトのデザインを壊すことなく公開がすることができました。

header{
	background-color: #ecd98a;
	color: #b71012;
	text-align: center;
	position: fixed;
	top: -60px;
}

しかし、そんな初心者の私が思いつくような浅はかな考えが、なぜ広まっていないのか?「広告を消す裏技!」という記事が出回ってもいいものなのに・・・?
その答えは、会社の先輩の一言で解決しました。

先輩:「規約次第で違反行為になっちゃうよ(^^;)」
もふもふ:「え?!そうなんですか?Σ(゚д゚lll)ガーン」

よく見ると無料サーバの規約等には「適切な表示を阻害する行為があった場合は、規約違反として対象アカウントの停止を行うことがあります。」とあり、その中の1つに「他のコンテンツを広告の上に重ねて見えなくさせる行為」とありました。
まさに私が行おうとしていた行為そのものでした。
かくして、閃いた!と思った“top-●px”は使用することなく闇に消えたのでした。いつか正しい使い方で良いアレンジができるように、そして今後規約はしっかり読まなければと思いました。

まだまだ使用していないタグや覚えることは沢山ありますが、このようにpositionタグだけでも色々な使い道があることがわかりました。
できることが増えると閃きやも増えて楽しいですね!

「今回のおさらいワード

◆上乗せ:前に示した条件の上にさらに付け加えること。お金の上乗せはいいけど体重の上乗せだけはしたくないですね。
◆position:absolut:親要素を基準に位置を指定。親からみたらどれだけ離れても子供は子供です。
◆親要素:そして子の子は孫。HTMLの世界でも「祖先要素」「子孫要素」が存在します。
◆position: relative:自分の今の場所を基準に位置を指定。自分の位置をしっかり把握してから使おう。
◆公開:公に開放すること。制作物を公開する時には重大なミスがないかよく確認を!
◆デベロッパーツール:Googlechromeを開いて「F12」を押す。自分で作ったサイトのHTMLやCSSをテスト書き換えが試せる他、人が作ったサイトのコードをみることもできる検証ツール。自分で調べながら学びたいタイプの人にはたまらないツール。
◆規約:団体内で協議して決めた規則。細かい文字で沢山記載があるので読み飛ばしがちだが、規約の内容によっては違反をすると違約金の支払い等が発生する場合もあるので要注意。

作者情報

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