初心者向けサイトの作り方【HTML基礎編２】
さて『【サイトの作り方】HTML5でサイトを作ろう！【HTML基礎編】』ではサイトの基本となる雛形（基本テンプレート）について書きました。
今回からはより実践寄りになっていきます。
まずはじめにHTMLでよく使用するタグについて説明します。
よく使うタグ
見出し「h1~h6」
h1~h6は見出しに使用するタグです。
見出しってなんぞや？いつ使うんや？と言うと文章書く時タイトルがあって各項目に少し大きな字などで見出しがありますよね？
あれです！
【例】
大見出し(h1)→新発売！HTMLがよく分かる本！
中見出し(h2)→本のポイント
小見出し(h3)→ポイント①
本文
基本的にh○の数字が大きいほど大きな見出しになります。
なのでh6のあとにh1など見出しの順番がおかしくならないように注意して使いましょう！
実際に書いてみるとこんな感じです。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8" /> <title></title> </head> <body> <h1>新発売！HTMLがよく分かる本！</h1> <h2>本のポイント</h2> <h3>ポイント①</h3> <p>テキストが入ります。</p> <h3>ポイント②</h3> <p>テキストが入ります。</p> </body> </html>
段落を作る「pタグ」
主に文章を入れる時のタグです。
文字を入れるときはだいたいこれを使います。
一番良く使うタグの１つです。
実際に書いてみるとこんな感じです。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8" /> <title></title> </head> <body> <p>サイト制作たっのしー！わーい！</p> </body> </html>
改行「br」
「p」で文字を打っていて途中で改行したいときも出てくると思います。
そんなときに使うのが「ｂｒ」です。
初心者の方でたまに見かけるのがｂｒを使って隙間を開ける方法です。
「ｂｒ」はあくまで文章の中で改行させるのに使用するものなので、コンテンツ同士の隙間を開けるためなどに使うのは絶対にやめましょう。
実際に書いてみるとこんな感じです。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8" /> <title></title> </head> <body> <p>最近めちゃくちゃ寒いですね。<br> こんな日は肉まんに限ります。</p> </body> </html>
リスト「ul,li」「ol,li」
箇条書きリストや手順など順番のリストを作る時「・○○○」とか「1.○○○」を書いたりしますよね。
それがこの「ul,li」と「ol,li」になります。
「ul,li」が箇条書きの「・○○○」
「ol,li」が手順など順番の「1.○○○」
になります。
実際に書いてみるとこんな感じです。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8" /> <title></title> </head> <body> <ul> <li>ピーマン</li> <li>キャベツ</li> <li>人参</li> </ul> <ol> <li>野菜を洗う。</li> <li>野菜を炒める。</li> <li>完成</li> </ol> </body> </html>
ぱっと思いつくのはこれぐらいのタグでした。
実際に打って使ってみてください！
他にもいろいろなタグがありますがまずはこれぐらい覚えておけばあとはわからないときに調べるという形にするのがベストかと思います。
実際仕事としてやっていても覚えているのは１部で日々調べながら行っています。
次回からCSS編にはいっていきます！
このシリーズで足りなかったタグなどがあれば随時次回の講座でも紹介していくので進めながらいろいろなタグを覚えていきましょう！
次回更新までしばしお待ち下さい！
コメント