みくじょーブログ

エンジニア転職を目指す24歳の日常

Ruby on Rails 綺麗なヘッダーを作るためのCSS【背景画像の設定】

こんにちは!エンジニア転職を目指す24歳みくじょーです!

 

私は新卒で入った会社を7月に退職し、現在、エンジニア転職を目指してTECHCAMPに通っています!

こちらのブログではそんな私の考えていること、プログラミングのことなど、想いのまま書いています!

ぜひ読んで一度読んでみてください!

 

 

目次はこちらです↓ 

 

 

 

はじめに

本日は「綺麗なヘッダーを作るためのCSS」というテーマで書かせていただきます!

ヘッダーの背景に画像を挿入する簡単な方法 - Qiita

※Qiitaにも別記事を投稿しました!

 

 

現在、私はTECHCAMPのカリキュラムを終え、

オリジナルアプリ作成をしております!

 

オリジナルアプリでは、シェアサイクリングの比較サイトを作っておりますが、

そこでのトップページ作りの際に、

 

非常にいい感じのヘッダーが作れました!!

 

今日はそれについて書いていきます!

 

 

 

作成したヘッダー

このような見た目に作れました!

 

f:id:mikujo:20200930213852p:plain

 

どうですかね?

我ながら非常に綺麗な見た目のヘッダーにできたと思っております。

 

それでは実際のコードの記述に関してです。

 

 

HTML

①ロゴの作成

まずは左上のロゴを作ります。

 

ロゴは全体をリンクにしたいので、

 

<%= link_to do %>

<% end %>

 

で囲んで記述します!

<%= link_to root_path, class:"header-title" do %>
<div>sharecling</div>
<div class="header-sub-title">〜移動に選択肢を〜</div>
<% end %>
 

 

 

②ログイン/新規登録 ボタン

続いてボタンの作成です。

こちらはif文の条件分岐を使用し、

ログインの有無によって表示を変えるよう記述しました。

 

 

f:id:mikujo:20200930214712p:plain

 

 

③中心にくる文章

こちらはそのまま記述するだけです。

<div class="header-center">
<div class="header-center-top">シェアサイクリング比較レビューサイトなら</div>
<div class="header-center-bottom">sharecling</div>
</div>
 
 
HTML全体ではこのようになりました。
 

f:id:mikujo:20200930215009p:plain

 
 
 

CSS

ここから肝心のCSSに移って行きます。
 

①ロゴとログイン/新規登録ボタンの位置指定

まずロゴの位置を指定します。

 

.top-page-header {
width: 100vw;
padding: 10px 0 20px 0;
position: fixed
top: 0;

 

続いてヘッダーの要素を横並びに変えて、ボタンをロゴの左隣に配置します。

.header-top-content{
width: 100vw;
display: flex;
align-items: center;
justify-content: space-between;
margin: 10px 0 30px 0;
}

 

ul内も横並びに。

.lists-right {
display: flex;
list-style: none;
margin: 0 30px 0 auto;
}

 

 

②ロゴとログイン/新規登録ボタンのレイアウト

font-size, color, font-familyなどを指定して行きます。

.header-title {
font-size: 40px;
text-decoration: none;
color:#4b4b4b;
font-family: 'YuGothic','Yu Gothic','Hiragino Kaku Gothic ProN','ヒラギノ角ゴ ProN W3','メイリオ', 'Meiryo','MS ゴシック',sans-serif;
margin-left: 4%;
}
 
.header-sub-title{
font-size: 17px;
padding-left: 15px;
font-family: 'YuGothic','Yu Gothic','Hiragino Kaku Gothic ProN','ヒラギノ角ゴ ProN W3','メイリオ', 'Meiryo','MS ゴシック',sans-serif;
}

 

.login {
text-decoration: none;
margin-right: 3vw;
color: whitesmoke;
}

.sign-up {
text-decoration: none;
color: whitesmoke;
}

 

 

③センターの文字列

同様に記述し、配置とレイアウトを整えます。

.header-center{
padding-top: 10px;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
color: whitesmoke;
font-family: 'YuGothic','Yu Gothic','Hiragino Kaku Gothic ProN','ヒラギノ角ゴ ProN W3','メイリオ', 'Meiryo','MS ゴシック',sans-serif;
}

.header-center-top{
font-size: 18px;
color: whitesmoke;
}

.header-center-bottom{
font-size: 40px;
color: whitesmoke;
}

 

  

 

ここまででこのような表示になってます。

(白で見にくいですが、各要素の作成ができました)

 

f:id:mikujo:20200930220200p:plain

 

画像を背景に設定

最後に画像を背景に設定します。

 

画像の設定には

background: ○○;

の記述を利用します。

 

.top-page-header{}内に以下のコードを追記します

height: 65vh;
background-image: url('sharecling.jpg');
background-repeat: no-repeat;
background-position: right bottom;
background-size: cover;
opacity: 0.8;

 

background-image から background-sizeまでの記述は以下のようにも記述できます

background: url('sharecling.jpg') right bottom / cover no-repeat;

 

 

※この時気をつけるべき箇所がbackground-position

これは、画像のどこの部分を切り取るか大体の位置を指定するもの!

 

今回は元の画像の右下部分に寄りたかったため、

background-position: right bottom;

という指定ですが

 

左上に寄りたければ

background-position: left top;

 

真ん中なら

background-position: center center;

という記述になります!

 

 

これにてヘッダー完成です!!

 

 

完成のコード

最後にコードを貼っておきます

CSSが画面の関係で分割になってしまいます。

 

HTML

f:id:mikujo:20200930215009p:plain

 

CSS

f:id:mikujo:20200930222010p:plain

f:id:mikujo:20200930222024p:plain

f:id:mikujo:20200930222038p:plain

 

 

今日の実装は以上です!