前ページでheader上部に文字を入れましたが、ここではロゴマークを入れてみましょう。
ホームページを
自作する
サイト
ロゴマークは250pxの画像をwidth 100px height 100pxの大きさに縮小しました。
さらに、htmlファイルでwidth 50px height 50px に縮小しています。
使用する画像はあらかじめ、最小単位に切り抜いておきましょう。
ソースコード上で扱いやすくなります。
ロゴマークの位置
入れる位置は、上部文字背景高さ25pxの下30px、左から75pxあたりにします。
ロゴ画像は画像をタイル状に配置するでダウンロードしたimagesフォルダーに入ってますよ。
header背景に透過画像を使用していますから、絶対配置になりますよね。
htmlソース
<body>
<div id="container">
<header>
<div class="header_1"></div>
<div class="header_1a">
<p class="subject_left">ホームページを</p>
<p class="subject_center">自作する</p>
<p class="subject_right">イト</p>
</div>
<div class="rogo">
<a href="https://www.arysk88.com/"><img src="./images/zim-2a.png" width="50" height="50" alt="ロゴマーク"></a>
</div>
</header>
</div><!--container-->
</body>
cssソース
/*====参考====*/
.rogo {
width: 50px;
height: 50px;
position: absolute;
top: 55px;
left: 75px;
}
ホームページを
自作する
サイト
ロゴマークの下にtextを入れる
header上端からロゴマーク下端までの寸法は、ロゴマークまで55px、ロゴマーク高さ50pxで、合計105pxです。
左側60px、ロゴマーク下端から5px空けてtextを入れてみましょう。
htmlソース
<body>
<div id="container">
<header>
<div class="header_1"></div>
<div class="header_1a">
<p class="subject_left">ホームページを</p>
<p class="subject_center">自作する</p>
<p class="subject_right">イト</p>
</div>
<div class="rogo">
<a href="https://www.arysk88.com/"><img src="./images/zim-2a.png" width="50" height="50" alt="ロゴマーク"></a>
</div>
<p class="comment">あなたもホームページを作れる</p>
</header>
</div><!--container-->
</body>
cssソース
.comment {
width: 100%;
height: 20px;
font-size: 200%;
font-weight: bold;
position: absolute;
top: 70px;
left: 0;
padding-left: 60px;
}
ホームページを
自作する
サイト
あなたもホームページを作れる
今回のheaderの表示は文字を入れ、ロゴマークを入れ、テキストを上から順に表示する簡単な方法を取りました。
スライドを入れたり、その他いろいろなことがhtml、cssでできます。
挑戦してみてください。