HTMLスキル - 第6章 Lesson9

文字構造を意識したHTMLテキストのマークアップをしてみよう

   

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

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

見出しタグ<h1>や段落タグ<p>、定義型リストタグ<dl><dt><dd>など様々なタグを使いこなして、文書構造にあったHTMLを作成する方法について学びます。



この動画で学べること

・文字構造を意識したHTMLのマークアップのしかた



文字構造を意識したHTMLのマークアップの仕方

文字構造を意識したHTMLのタグをつけていきましょう。
練習用のファイルを使って見ていきます。


・大見出しを<h1>、中見出しを<h2>、小見出しを<h3>と定義していきます。
・文章すべてを<p>タグで囲んでいきましょう。
・引用元であることを示す<q>タグをつけ、cite属性を追加して引用元を設定しましょう。
・<dl><dt><dd>を使って定義型リストを作成しましょう。
・連絡先や住所を指定する<address>タグを定義しましょう。
・改行が必要な部分に<br/>タグを加えていきましょう。




<h1>デザイナー採用ページ</h1>
<h2>★求める人物像</h2>
<h3>(1)他責でない人</h3>
<p>チーム内でミスが起こっても、決して他人のせいにせず解決策をその場で考えられる人。</p>
<h3>(2)考えるよりも行動派</h3>
<p>「<q cite="#.html">案ずるより産むが易し</q>」とは、あれこれ頭で考えるよりも実践第一で行動しようという諺です。
<cite>引用元:wikipedia</cite></p>
<h3>(3)ポジティブな人</h3>
<p>出来ない理由でなく、できる理由を考えれる人。</p>


<h2>★必須スキル</h2>
<dl>
<dt>HTML</dt>
<dd>HTMLを使用したウェブサイトマークアップが出来る事</dd>
<dt>CSS</dt>
<dd>CSSを使用したウェブサイトデザインが出来ること</dd>
</dl>
<p>詳しくは、HTMLレッスンブックを参照してください。</p>
<h2>★面接会場</h2>
<address>
株式会社Campus<br/>
京都府京都市京都町00-00<br/>
000-000
</address>




ここまでできたら 、保存してブラウザで見てみましょう。
このようになっていれば完成です。
文章に適切なタグを入れて、文字の構造を意識したHTMLをかけるようになりましょう。