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

第8回:見出しタグを使ってロゴをマークアップしよう

   

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

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

見出しタグを使ってロゴをマークアップする方法について、解説しています。



この動画で学べること

・見出しタグを使ってロゴを作成する方法



見出しタグを使ってロゴを作成しよう

ロゴはサイトの中でもタイトルになるような重要な部分ですので、<h1>を使って書いていきたいと思います。
今回は、画像ではなくテキストで作っていきたいと思うので、まずは文章を入力し、改行の<br>タグを入れます。
そして、ロゴの1行目と2行目でデザインデザインを変えたいので、NESThairの部分を<span>タグで囲みましょう。


<h1>
京都の学生向けオーガニックヘアサロンなら<br>
<span>NESThair</span>
</h1>



HTMLがかけたら、CSSに文字の大きさや色、種類を書いていきます。



header h1 {
font-size: 12px;
color: #555555;
font-family: "メイリオ", Meiryo;
}



保存してブラウザで見てみましょう。
ロゴの1行目が上手くできました。
<span>タグで囲んだNESThairの部分は、次回スタイリングしていきたいと思います。