CSSの”position”を使いこなそう!!

  • このエントリーをはてなブックマークに追加
こんにちは。
4月からガーディアンに入社した、新人の迫田です。
楽しい職場なので、毎日の仕事が楽しいです!
入社する前は、趣味でホームページ制作をしていました。

ホームページを制作する時には欠かせないCSS。
今回は、その中でも使用頻度が高いpositionについての紹介をします。

覚えておきたいCSSの「position」

positionを扱えるようになると、ホームページの様々な要素の配置が自由自在に出来ます。

これによって、ホームページのデザインの幅が広がるはずです。

 

positionは、全部で5種類 あります。

・static

 初期値。何も指定していない場合はこれになる。

・relative

 相対位置への配置。基準はstaticを指定した場合の位置。

・absolute

 絶対位置への配置。基準は親要素。

・fixed

 絶対位置への配置。基準は画面。スクロールしても位置はそのまま。

・sticky

 先輩であるOWLetモンスター山本に教わりました。

 

要素を重ねて配置するためには、relativeabsoluteを使います。

 

流れを解説!!

①画像を用意します。今回は「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等で開きましょう。

↑こんな風に表示されているはずです。


 

迫田 優矢/OEM制作班 フロントエンド・エンジニア

いかがでしたでしょうか?

今回紹介したのは、やり方の1つに過ぎません。

僕自身もまだ完全に使いこなせているわけではありませんので、これから、もっともっと勉強していこうと思います!

OWLet DEMOサイト利用状況

今、利用中のDEMOサイト数

site/
analyzer

OWLet イベントTOPIX

OWLetに関する旬のイベント情報をお届け!

EXPOバナーよくある御質問OWLetの改修要望募集WordPressの脆弱性≪ 既存サイトを撃退するひっくり返し営業法 ≫OWLetイベント情報はコチラ

【注目】OWLet動画

OWLet おもしろコンテンツ

OWLet無料相談センター

今なら無料で専門家がアドバイスします
OWLetでお悩みのことがあれば、OWLet
無料相談センターにご相談してみませんか?

今すぐ相談する

0120-307-555
受付時間 10:00~18:00 (月~金)

参考になった記事のランキング

【新着】OWLet製WEBサイト実績

OWLet製WEBサイト実績一覧へ>