ゆっくりホームページ作り-3。いろんなタグを使ってみよう
HTMLを制覇するにはやっぱりいろんな表示させるタグを知ることが早道かなと思うのでいろんなタグを使ってみましょう。
よく使うであろうタグを書き出してみました(ホームページの上の方から順番)
<header>ヘッダー</header>
・・・ ホームページの最初。タイトル、ナビゲーションなど
<p>段落</p>
・・・ 文章の区切りごとに使うとわかりやすい
<h1>見出し(大)</h1>
・・・ 見出し。その文章のタイトルなど。h1 > h2 > h3 ・・h6という感じにするとタイトルの文字の大きさを変えることができます。
<ul><li>リスト</li></ul>
・・・ リスト。縦に順番に並びます。
<img src="アドレス">画像 </img>
・・・ 画像を貼り付けることができます。
<a href="アドレス">ホームページ</a>
・・・ ホームページなどのリンクを貼ることができます。
<hr>水平線
・・・ 区切り線を水平に書くことができます。
<strong>強調</strong>
・・・ 強調したい文字を挟むと太字になります。
ちょっと特殊なタグ
<span>範囲指定</span>
・・・ id,classで指定していろいろカスタマイズ
<div>区分</div>
・・・ id,classで指定していろいろカスタマイズ
<footer>フッター</footer>
・・・ ホームページの最後。必要な情報等を記入することが多いです。
他にもタグはありますが、これぐらい知っているとホームページを作るときにほぼ困りません。あとは組み合わせとCSS、スタイルシートで形を整えていきます。
必要なタグも完全に覚えていなくても大丈夫。今はすぐ調べると出てくるし、テキストエディタなどで自動で候補を出してくれることが多いのでちょっと頭に入っていれば良いと思います。
CodePenで書いて実行してみます。
<header>
<h1>スティーブ・ジョブスの名言</h1>
</header>
<hr>
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/d/dc/Steve_Jobs_Headshot_2010-CROP_%28cropped_2%29.jpg/400px-Steve_Jobs_Headshot_2010-CROP_%28cropped_2%29.jpg" alt="">
<ul>
<li><strong>あなたの時間は限られている</strong>。だから他人の人生を生きたりして無駄に過ごしてはいけない。</li>
<li>墓場で一番の金持ちになることは私には重要ではない。夜眠るとき、<strong>我々は素晴らしいことをしたと言えること</strong>、それが重要だ。</li>
<li><strong>シンプルであることは、複雑であることよりもむずかしいときがある</strong>。物事をシンプルにするためには、懸命に努力して思考を明瞭にしなければならないからだ</li>
<li>すばらしい仕事をする唯一の方法は、<strong>自分のやっていることを好きになる</strong>ことだ。</li>
</ul>
<hr>
<footer>
<p>スティーブ・ジョブズ</p>
<a href="https://ja.wikipedia.org/wiki/%E3%82%B9%E3%83%86%E3%82%A3%E3%83%BC%E3%83%96%E3%83%BB%E3%82%B8%E3%83%A7%E3%83%96%E3%82%BA">ウィキペディア（Wikipedia）より</a>
<p>
スティーブ・ジョブズ（英語: Steve Jobs）は、アメリカ合衆国の起業家、実業家、工業デザイナー。アメリカ国家技術賞、大統領自由勲章を受賞している。
Appleの共同創業者の一人であり、同社のCEOを務め、一切の妥協を許さないカリスマ的変革者として知られる。NeXTやピクサー・アニメーション・スタジオの創業者でもあり、ウォルト・ディズニー・カンパニーなどの役員を歴任した。AppleⅡなどによりパーソナルコンピュータ（パソコン）の概念を市場に普及させ、iPodとiTunes及びiTunes Storeによって音楽業界に変革をもたらし、iPhoneおよびiPadを世に送り出したと評された。
</p>
</footer>
これを表示すると
