実践コーディングスキル - 第1章 Lesson8

第7回:ロゴを配置してみよう

   

テクノロジーとクリエイティブのプロを目指す人のためのオンラインスクール
月額2500円で500以上のレッスンが受けられます

このスキルのデータをダウンロード: Windows Mac

サイトタイトルを示す見出しタグ<h1>を使って、ロゴをマークアップする方法を、初心者向けに解説しています。



この動画で学べること

・ロゴを配置する方法



ロゴを配置してみよう

ヘッダーの中身を作成していきましょう。
今回は、ロゴの配置をしていきたいと思います。
ロゴはサイトの中でもタイトルとなる一番大事なところなので、<h1>タグを使うようにしてください。
<header>タグの中に<h1>タグを書き、<img>タグで画像を挿入していきます。
また、src属性を追加して画像のパスを入力してください。




<header>
<h1><img src="images/logo.png" alt="まごころと優しさを大切に ネストクリニック"><h1>
</header>




このように、alt属性でどんな画像なのかを説明する文章も入れます。
これは、SEOでも非常に重要な部分となりますので、忘れないようにしてください。
では保存してブラウザで見てみます。
ヘッダー部分にロゴが配置されました。