<header class="header">
<div class="logo">
<h1><img src="img/logo.png" alt="ロゴ画像"></h1>
</div>
<ul class="menu">
<li class="menu-item"><a href="https://forms.gle/dKHLvPUtbcNNEAfR6">見学・申し込みはこちらから</a></li>
</ul>
</header>h1タグの使い方
h1タグはページの大見出しに使われるタグです。
本来はテキストを囲んだ方がよいですが、画像をh1で囲むこともあります。
imgタグの使い方
imgタグは画像を表示させるためのタグです。
src属性に表示させたい画像のパスを指定します。また、alt属性の値は画像が表示されないときや音声読み上げに使われる画像の説明文となるため、必ず指定しておきましょう。
@charset "utf-8";
body{
font-family: Helvetica, 游ゴシック, "Yu Gothic", YuGothic, HiraKakuProN-W3, メイリオ, Meiryo, sans-serif;
}
p{
line-height: 1.5;
}
/* header */
.header{
display: flex;
align-items: center;
justify-content: space-between;
height: 70px;
padding-left:30px;
background: #ffF;
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 1;
}
.logo img{
width: 230px;
height: auto;
}font-familyの使い方
bodyにfont-familyを指定することで、ページ全体のフォントを指定できます。
font-family – MDN Web Docs
フレックスボックスの使い方
「display: flex;」を指定した要素の子要素は横並びになります。横並びのレイアウトを実現するための非常に便利なCSSです。
justify-content: space-between;」で両端に要素を配置し、「align-items: center;」で上下の位置関係を中央にできます。
フレックスボックス – MDN Web Docs
position: fixed;の使い方
「position: fixed;」は画面上の任意の場所に要素を固定して表示できるプロパティです。
top、left、right、bottomと組み合わせて使います。今回のヘッダーでは、top、left、rightを0にすることで画面上部に横幅いっぱいで固定できます。
position – MDN Web Docs