【ロゴ】タイトル部分のレスポンシブ化【ヘッダー】

タイトル部分は、サイトやブログの窓になる重要な部分です。

ですので、できればカッコ良いものを、いや、かっこ良くはなくても、お客さんから覚えてもらいやすいものをと言うのが人情だったります。

PC専用サイトやブログの場合は、ヘッダーの部分にロゴとヘッダー用の画像を入れればOKだったんですが、レスポンシブではそう簡単には行きません。

このように、スマホではタイトル画像が横にはみ出してしまいます。
ですので、タイトル画像を横にピッタリフィットさせてあげる必要があります。

 <div class="title"> <a href="https://***.***"> <img src="https://***.***.***.png" width="●●●" height="●●●"> </a> </div>

# CSSファイルに記入 @media screen and (min-width:●●px) and (max-width:▼▼px){ .titile img{ width:100%; height:auto; padding:0; margin:0; } }

こうすることで、横幅は一応ぴったりに治まったのですが、これだとタイトルが横長すぎてスマホではきびしいです。

ですので、そもそものタイトル画像自体をスマホとPCで共用化できるよう、考えてあげる必要があります。

うちの場合、スマホのタイトルはロゴ部分のみ、タブレットのタイトル画像とPCのタイトル画像はヘッダー画像付きのロゴと言う具合に分けています。

【スマホ用のロゴ】
ロゴのみ

【タブレット用のロゴ】
ヘッダー画像＋ロゴ
（ヘッダー画像は途中で切れてもいいように作った）

【PC用のロゴ】
ヘッダー画像＋ロゴ

ロゴはリンク付きの画像ファイル。
タイトル画像はCSSを使った背景画像で行います。

こうすることで、ロゴをタップしたりクリックしたらホームページへジャンプさせることができます。
（背景画像をタップしたりクリックしてもホームページにジャンプしない）

HTMLタグは↓のようになっています。
DIVタグのクラス名を入れ（ここでは仮にtitleにしてある）、その中にリンク付きの画像用のHTMLタグを入れます。
（HTMLタグの構造自体はすごくシンプルです）

 <div class="title"> <a href="https://***.***"> <img src="https://***.***.***.png" width="●●●" height="●●●"> </a> </div>

HTMLタグの方はかなりシンプルですが、CSSの方は端末によって３つの表示方法を指定します。
（スマホ・タブレット・PC端末用）

スマホの場合

/* スマホ用CSS */ @media screen and (min-width:0px) and (max-width:459px){ .title{}/* 空欄 */ .title img{ width:100%; height:auto; padding:0; margin:0; } }

スマホ用のCSSでは、タイトルの背景画像は空欄にします。
空欄になると、タイトル部分の背景画像は何も表示されなくなります。

ロゴのサイズは width:100%; にします。
こうすることで、ロゴが画面一杯に広がり、左右に空白ができるのを防止できます。

height が auto になっているのは、横幅に合わせて縦幅を調節しないといけないからです。

もし、これが固定の px で指定されていると、横幅が広がるにつれて横長に間延びしたロゴになってしまいます。

こちらのケースの場合、ロゴは460pxの設定にしてありますので、@media screen and (max-width:459px) にします。

今回は、横に空白を作らないで表示するように作ったロゴと言う設定ですので、paddingとmargin は 0 にしてあります。

左右・上下に空白があった方が良くなる場合は、padding と margin で左右・上下の空白を作ってあげて下さい。

タブレットの場合

/* タブレット用CSS */ @media screen and (min-width:460px) and (max-width:899px){ .title{ width:100%; height:●●●px; padding:0; margin:0; background:url(ヘッダー画像のファイル名) no-repeat; } .title img{ margin:0; } }

タブレット端末の場合は、ロゴ＋ヘッダーの背景画像で組み合わせます。
（ロゴのみでもOKな場合は、背景画像のCSSは不要です）

このケースの場合、ロゴは460pxの設定にしてありますので、@media screen and (min-width:460px) にします。

画面サイズが 900px 以上になると、PC用のCSSを適用させたいので、max-width は、899px にしました。
（これは、実際にうちで使っている数字です。(´∀｀　)）

タイトルの背景画像用のCSSの width は 100% にします。
こうすることで、タイトルの背景画像が画面サイズに応じて広がります。

height は固定値 ( px ) を指定します。
こうすることで横幅だけが広がり、高さが固定されます。

タイトル背景用の画像は、途中で切れてもそれほど問題がないデザインにします。
途中で切れたら尻切れトンボに見えるデザインだと、このやり方はできません。

ロゴは左右の隙間なしに配置したいので、margin:0; とします。
隙間があった方が良い場合には、margin か padding で上下・左右に隙間を入れます。

スマホ用のCSSであった .title img { width:100%; } を入れてしまうと、タブレットの横幅一杯にロゴが広がってしまうので、タブレット端末・PC端末用のロゴのCSSには、width:100%; は書かないようにします。

PCの場合

/* PC用CSS */ @media screen and (min-width:899px) { .title{ max-width:●●●px; height:●●●px; width:100%; padding:0px; margin:0px; background:url(ヘッダー画像のファイル名) no-repeat; } .title img{ margin:0; } }