ロゴ

ロゴを表示する

フレックスボックスの左側子要素に画像を挿入

サイトのロゴを表示する

<h1 class="header-logo"> ～ </h1> 内にロゴ画像を挿入する

<h1> タグに設定されているデフォルト CSS の一部をキャンセルする

ロゴに使用する画像は images フォルダにある heade-logo.svg （テキストの表記）

ロゴを表示させても、次節でのモバイル用のボタンやナビゲーションまで組み込まないと正しいレイアウトにならない

h1 のデフォルト CSS をリセット

<h1> タグはデフォルトで上下のマージンやフォントサイズが設定されている

ロゴを目論見通りに配置するために、<h1> の上下マージン、フォントサイズ、行間（line-height）をすべて 0 にする

CSS: <h1> のデフォルト CSS をキャンセルするスタイル

.header-logo {
margin: 0;
padding-left: 15px;
font-size: 0;
line-height: 0;
}

可能であれば画像は SVG で

テキストサンプルではロゴに SVG フォーマットの画像を使用している

SVG（Scalable Vector Graphic）は ベクター と呼ばれる、線や塗りが数式で表現されたグラフィックフォーマット

SVG ファイルは線や塗りをサイズに合わせて 計算 して表示するので、JPEG や PNG と違って拡大しても画質が劣化しない

写真など階調が複雑で輪郭線がハッキリしないグラフィックには向かない

表示したい画像がロゴや図など、線も塗りもハッキリしたグラフィックには、出来るだけ SVG ファイルを用意する

Adobe XD、Figma、Sketch などの Web デザインで使われているアプリケーションは、SVG の書き出しに対応している

テンプレートファイル