HTMLスキル - 第3章 Lesson9

[実践]アバウトページを作ってみよう

   

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

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

画像タグ<img>を使って写真を表示して<div>タグでレイアウトを組み、アバウトページを作成していきます。



この動画で学べること

・アバウトページのマークアップの仕方



画像や見出し、文章をマークアップしよう


今回は画像や見出しを定義して、アバウトページを作ってみましょう。
ファイルの、
<!-- ここからコンテンツ-->
<!-- ここまでコンテンツ-->
の中に書いていきましょう。


まずは<div>タグを書いてください。
今回はdivのidを「about」としておきます。


<div id="about"></div>



写真と文章をsectionでまとめたいので、divの中に<section>タグを入れていきます。


<div id="about">
<section>
<h1>ABOUT</h1>
</section>
</div>



次に画像を挿入します。
<h1>ABOUT</h1>の下に<img>タグを書きましょう。



<img src="images/me.jpg" alt="YUMIの写真">



ページの右側の部分を作るために、さらに<img>タグの下に<div>タグを書きましょう。
今回はdivのidを「description」としておきます。



<div id="description">



また、名前を見出し2で書いていきます。


<h2>YUMI TAMURA</h2>


最後に、名前の下の文章を書いていきます。
こちらの文章をコピーしてください。



ーーーーーーーーーーーーーーーーーーーーーーーーー貼り付ける文章ーーーーーーーーーーーーーーーーーーーーーーーーーー


大学を1年間休学し、ウェブデザインの勉強を開始。
大学卒業後、23歳で独立し、フリーランスに。


ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー



こちらも適切なタグで囲む必要があります。
これは文章ですので、<p>タグを使いましょう。
また、<br>タグを使って、改行もしていきましょう。

このようになれば完成です。