【CSS】ロゴ画像をレスポンシブに表示する

 

こんにちは。のっくんです。

 

今日の記事では自分の作ったウェブサイトにロゴ画像をレスポンシブに表示する方法をご紹介します。

 

 

やりたいこと

 

ロゴ画像があるとサイトの名称を覚えてもらいやすくなるので大事です。

 

ネコ
はい、質問でーす。レスポンシブって何ですかー?
のっくん
レスポンシブって言うのは、画面の幅によってサイトの見た目や配置が変わることを言うんだ。サイトがレスポンシブな作りになっていると、PCでもスマホでも見やすく表示されるんだよ。

 

・PCで見た時

 

 

・スマホで見た時

 

 

ネコ
おお!PCでもスマホでもしっかり見れるにゃー!

 

レスポンシブと言えばBootstrapを使うのが定石ですが、今回は画像の表示だけなのでスタイルシートを使って自分で調整する方法をご紹介します。

 

ロゴ画像の作成

 

まず、ロゴ画像を作りましょう。

 

PhotoScapeXを使って作るのがオススメです。macだとApple Storeから無料でダウンロードできますよ。

 

 

色んなフォントを選べますのでお好きな物を選びましょう。私は「Hannotate TC」フォントを使っています。

 

PhotoScapeXだと、画像のサイズ変更や切り抜きも簡単に出来るので好きなサイズでロゴ画像が作れます。

 

私は、535 × 100 の以下のロゴ画像を作りました。

 

作成したロゴ

 

背景を透明にしたい方は以下のサイトなどを利用して下さい。PhotoScapeXだと背景を透明にできません。

https://www.peko-step.com/tool/alphachannel.html

 

ロゴ画像の配置

 

header.html

 

こんな感じで、<h1> <a> <img> タグの順番で記載します。それぞれのタグの意味は以下の通り。

 

・<h1> 大見出しタグです。ページの文章の見出しを記載します。
・<a> リンク先を指定するタグです。
・<img> 画像を指定するタグです。

 

ロゴ画像をクリックしたときにサイトのトップページに行くように、aタグを使います。

 

私は、Djangoを使っているのでリンク先を{% url ~~%}で指定していますが、そうでない方は’path/top.html’のように記載します。

 

imgタグを使うときは、width=100%を指定することでロゴ画像全体が表示されるようになります。

 

ただし、これだけだとPCで見たときに必要以上にロゴ画像が拡大されて見辛くなってしまうのでスタイルシートを使って調整していきます。

 

スタイルシート

 

style.css

 

max-widthでロゴ画像の最大幅を決めます。元画像のサイズと同じにするとちょうど良いです。

 

これでロゴ画像がレスポンシブに表示されるようになります。

 

以上です。最後まで読んで頂きありがとうございました。