position: fixedを使ってスクロールしても常に表示される文字を作成する

はじめに

自身のコーヒーショップのHPを作成する際、参考にさせていただいたサイトのUIが格好良かったのでトレースしてみました。（鯛のないたい焼き屋）

簡単にファーストビューへの文字列固定ができたので自らの備忘録としてこちらに記載いたします。

完成図

ファーストビューの左下と右下に文字を固定表示させます。
ユーザーに特に伝えたいメッセージを記載すると、より伝えたいことを表現できるHPに仕上がるでしょう。

コーディング

index.html

<!-- ヘッダー -->
    <header id="header">
      <div class="logo">
        <h1>N coffee</h1>
      </div>

<!-- 文字位置を固定 -->
      <div class="fixed_bottom hashtext01">
        <p># コーヒーは果物</p>
      </div>
      <div class="fixed_left hashtext02">
        <p># ひとりひとりに合ったコーヒー</p>
      </div>

style.css

/* 文字位置を固定 */
.fixed_bottom{
    position: fixed;
    bottom: 0;
    right: 0;
    width: 300px;
}

.fixed_left{
    position: fixed;
    bottom: 0;
    left: 0;
}


/* 文字のスタイルを成形 */
.hashtext01{
    font-size: 25px;
    font-weight: bold;
    text-align: end;
    margin: 20px 20px;
    color: #EB9015;
}

.hashtext02{
    font-size: 15px;
    font-weight: bold;
    text-align: start;
    margin: 20px 20px;
    writing-mode: vertical-rl; 
    color: #159FEB;
}

position: fixedで位置を固定して、topやbottomなどでポジションを指定しています。また、縦向きに文字を並ばせたかったのでwriting-mode: vertical-rlを使用して文字の向きを変えています。

これでスクロールしても常に画面左隅と右隅に文字が表示されるビューの完成です！