MENU

【HTML&CSS】課題サイト2①メインビジュアルを作る

2020 7/01
【HTML&CSS】課題サイト2①メインビジュアルを作る

2つ目の課題サイト制作が始まったので、学んだことをまとました。今回のテーマは「メインビジュアルを作る」です。
また、HTMLとCSSについても学んだ内容について書いていきます。

目次

CSSでメインビジュアルを入れる

以下の画像をメインビジュアルとして配置して、キャッチコピーも入れます。

CSSで画像を読み込む

【style.css】
.header {
 height: 80vh; ←★画面8割の高さ
 background-image: url(../image/top/mv.png);
 background-repeat: no-repeat;
 background-position: center; ←★画像を中央に
 background-size: 60%; ←★画面の大きさに応じて画像も変わる
 background-color: #8bb3c6;
}

80vhの理由
100vhにすると画面一杯画像になり、圧迫感がある&スクロールできることがわかりにくいため。

キャッチコピーを画像の上に配置する

【style.css】
.header_title {
 (※)
 display: flex;
 align-items: center;
 flex-direction: column;
 justify-content: center;
 width: 100%;
 height: 100%;
 font-size: 6.4rem;
 line-height: 1;
 color: #fff;
 background-color: rgba(0, 0, 0, 0.4);
 font-family: ‘Work Sans’, sans-serif; ←★Googleフォント
 letter-spacing: 0.1em; ←★文字間
 text-transform: uppercase; ←★英字を大文字に
 text-shadow: 3px 3px 10px rgb(0, 0, 0, 0.2); ←★文字に影
}

※)ベンダープレフィックスを入れることもある
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;

ベンダープレフィックス
古いPCでもCSSが動くようにするための記述。付けないこともある。以下のサイトを参考。

Google Fontsの入れ方
①「Google Fonts」で検索(https://fonts.google.com/
②入れたいフォントを選んでクリック
③下の画像のように「Embed」のlinkをHTMLに、font-familyをCSSに記載

【HTML】
<link href=”https://fonts.googleapis.com/css2?family=Work+Sans:wght@600&display=swap” rel=”stylesheet”>

文字間の調整=pxよりemがおすすめ。文字の大きさに応じて文字間を変えてくれるから。

グローバルナビを固定する

メインビジュアルの下にグローバルナビがありますが、スクロールで一番上に固定するようにします。

★スクロールすると特定の位置に固定される(今回はこちら)
【style.css】
.gNav {
 position: sticky;
 top: 0;
} 

また、よくある他の方法も2つメモしておきます。

★画面に固定してスクロールしても動かないようにする
【style.css】
.gNav {
 position: fixed;
 top: 0;
} 

★relativeの親要素を基準⇒absoluteの子要素で指定する
例)親要素 {   
    position: relative;
  }
   子要素 {
      position: absolute; 
      left: 30px;
      top: 30px;
  }

HTMLと3つのCSS

HTMLのheadタグの中に追加しておくべきもの

【HTML】
<head>
 <meta charset=”utf-8″ />
 <meta http-equiv=”x-ua-compatible” content=”ie=edge” /> ←★1
 <title>Webデザイナー YourName ポートフォリオ</title></p> ←★2
<meta name=”description” content=”ポートフォリオの説明文が入ります” /> ←★3
<meta name=”viewport” content=”width=device-width,initial-scale=1.0,minimum-scale=1.0″>
link rel=”icon” href=”image/favicon.ico”>
<link href=”https://fonts.googleapis.com/css2?family=Work+Sans:wght@600&display=swap” rel=”stylesheet”>←★4
<link rel=”stylesheet” href=”css/reset.css” /> ←★5
 <link rel=”stylesheet” href=”css/base.css” /> ←★5
 <link rel=”stylesheet” href=”css/style.css” /> ←★5
</head>

★1:IEのバグを伏せぐために入れておく
★2:SEOに影響する。titleタグの中身は魅力的な名前にすること
★3:検索エンジンと検索ユーザーにページの概要を伝えるためのタグ
★4:Google Fontsを使用する場合入れる
★5:この並び順が必須。詳しくは次で説明

“reset.css”と”base.css”と”style.css”の関係

順番は”reset.css”→”base.css”→”style.css”の順に入れます。それぞれの役割は、スクールの先生が説明していた『メイク前の下準備』というのが個人的にわかりやすくてツボだったので、イラストにしてみました。

何のために入れるのか
“reset.css”であらかじめ設定されていたCSSを無効化して、
“base.css”で全体に関わるCSSを設定して、
“style.css”でその他のCSSを設定するため。

base.cssでフォントのサイズを指定する

【base.css】
html {
 font-size: 62.5%;
}

なぜ62.5%なのか
1.0rem=10px、1.6rem=16pxに相当する。remを計算しやすくなる(必須ではない)。
font-size: 62.5%;のパーセンテージを変えると、全体のフォントサイズを一気に変更できるため、レスポンシブ対応で便利。現場でよく使われているそう。

線の太さが図形の内側にくるように設定する

base.cssに以下のプロパティを入れます。borderで線を入れるときに線がどの範囲に入るのかを設定しますが、線も含めたサイズになるようにするには以下のCSSを設定します。

【base.css】
*,
*:before,
*:after {
 -webkit-box-sizing: border-box;
 box-sizing: border-box;
}

border-boxは上のイメージだと「図形の内側に線」があるということになります。

この記事が気に入ったら
フォローしてね!

シンプル美と機能性を両立させた、国内最高峰のWordPressテーマ『SWELL』

ブロックエディター完全対応のWordPressテーマ。
圧倒的な使い心地を追求し、日々進化しています。

この記事を書いた人

コメント

コメントする

CAPTCHA


目次
閉じる