実践コーディングスキル - 第2章 Lesson2

第11回:リストタグを使ってバナーを作ってみよう

   

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

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

背景画像を利用したバナーを作成する方法を、初心者向けに解説しています。
ここでは、リストタグを利用してリンク付きのバナーのhtmlを記述します。



この動画で学べること

・バナーのテキスト部分を作成する方法



バナーのテキスト部分を作成しよう

リストタグを使って、サイドのバナーを表示させていきたいと思います。
<div>id名leftの中にある3つのバナーを、今回は画像ではなく、テキストやCSSを使ってデザインしましょう。
まず、<li>タグに文字を入れて、クリックした時に別のページに飛ぶことができるよう、<a>タグで囲みます。
1つできたらコピーして、中身の文字だけを書き換えることによって作業を効率化していきましょう。
最後に<li>タグを<ul>タグで囲み、HTMLの部分は完成です。


<div id="left">
<ul>
<li><a href="#" id="icon_tel">お電話でのご予約はこちら</a></li>
<li><a href="#" id="icon_blog">院長のブログ</a></li>
<li><a href="#" id="icon_voice">お客様の声</a></li>
</ul>
</div>



では保存してブラウザで見てみましょう。
バナーの文字になる部分が完成しました。
次回、これにスタイルを適応してバナーらしくしていきたいと思います。