CSSの”position”を使いこなそう！！
4月からガーディアンに入社した、新人の迫田です。
楽しい職場なので、毎日の仕事が楽しいです！
入社する前は、趣味でホームページ制作をしていました。
ホームページを制作する時には欠かせないCSS。
今回は、その中でも使用頻度が高いpositionについての紹介をします。
覚えておきたいCSSの「position」
positionを扱えるようになると、ホームページの様々な要素の配置が自由自在に出来ます。
これによって、ホームページのデザインの幅が広がるはずです。
positionは、全部で5種類 あります。
・static
初期値。何も指定していない場合はこれになる。
・relative
相対位置への配置。基準はstaticを指定した場合の位置。
・absolute
絶対位置への配置。基準は親要素。
・fixed
絶対位置への配置。基準は画面。スクロールしても位置はそのまま。
・sticky
先輩であるOWLetモンスター山本に教わりました。
要素を重ねて配置するためには、relativeとabsoluteを使います。
流れを解説！！
①画像を用意します。今回は「sample.png」として使用します。
②HTMLファイルを用意しましょう。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>サンプルページ</title>
<link href="style.css" rel="stylesheet">
</head>
<body>
<img src="sample.png" alt=”街並み”>
<h1>サンプルテキスト</h1>
</body>
</html>
③重ねたい要素を入れ子構造にして、CSSで編集ができるようにclassを指定しましょう。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>サンプルページ</title>
<link href="style.css" rel="stylesheet">
</head>
<body>
<div class="example">
<img src="sample.png" alt=”街並み”>
<h1>サンプルテキスト</h1>
</div>
</body>
</html>
④CSSファイルを用意しましょう。
body {
padding: 0;
margin: 0;
background-color: #808080;
}
img {
padding: 0;
margin: 0;
}
h1 {
padding: 0;
margin: 0;
}
.example {
position: relative;
width: 80vw;
height: 80vh;
}
.example img {
width: 100%;
height: 100%;
}
.example h1 {
position: absolute;
bottom:50px;
right: 50px;
color: #fff;
}
⑤htmlファイルをgoogle等で開きましょう。
↑こんな風に表示されているはずです。
いかがでしたでしょうか？
今回紹介したのは、やり方の1つに過ぎません。
僕自身もまだ完全に使いこなせているわけではありませんので、これから、もっともっと勉強していこうと思います！
