HTMLスキル - 第3章 Lesson5

コンテンツをマークアップしてみよう

   

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

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

Webサイトのコンテンツ部分をマークアップする方法を解説しています。
ここでは、文書にあった適切なタグをどのように選んでいくのかについて学びます。



この動画で学べること

・<li>タグを使ったコンテンツのマークアップ方法



<li>タグを使ったコンテンツのマークアップ方法


今回は、Webサイトのコンテンツをマークアップしていきましょう。
同じようなものが何回も続くので、<li>タグを使って書いていきます。
まず文字を<li>タグで囲み、さらに<li>タグを<ul>タグで囲みましょう。


 <ul>
 <li>Web design</li>
 <li>Customize</li>
 <li>Writing</li>
 </ul>



では次に、画像を表示させましょう。
<li>タグの中に<img>タグを挿入していきます。
メイン画像でつかったタグをコピーして、パスだけを変更していきましょう。
この時、拡張子も正確に記述しないと上手く表示ができないので、気をつけてください。



 <ul>
 <li><img src="images/icon_design.png" alt="アイコン(デザイン)">Web design</li>
 <li><img src="images/icon_pre.png" alt="アイコン(カスタマイズ)">Customize</li>
 <li><img src="images/icon_writing.png" alt="アイコン(ライティング)">Writing</li>
 </ul>



ここまでできたら一度保存してブラウザで見てみましょう。
画像とテキストが並んでいるので、<br>タグで<img>タグの後ろで改行させいましょう。
また、<li>タグの中に<a>タグを書いてリンクを挿入していきます。



 <ul>
 <li><a href="#"><img src="images/icon_design.png" alt="アイコン(デザイン)"><br>Web design</a></li>
 <li><a href="#"><img src="images/icon_pre.png" alt="アイコン(カスタマイズ)"><br>Customize</a></li>
 <li><a href="#"><img src="images/icon_writing.png" alt="アイコン(ライティング)"><br>Writing</a></li>
 </ul>



わたしにできることのリストがこのように表示されました。