Caution
お使いのブラウザはJavaScriptが実行できない状態になっております。
当サイトはWebプログラミングの情報サイトの為、
JavaScriptが実行できない環境では正しいコンテンツが提供出来ません。
JavaScriptが実行可能な状態でご閲覧頂くようお願い申し上げます。
HTML5
入門編
- トップページ
- HTML5入門編 - HTML入門編総まとめ
HTML入門編総まとめ
みなさまこんにちわ。
HTML入門編の最後の記事でございます。これまで大変お疲れ様でした、そしてここまでお付き合い頂きありがとうございました。総まとめとなりますのでこちらで忘れてしまった項目などをチェックしちゃってください。
タグと要素
コメントアウト
『<!--』と『-->』で囲まれた部分が『コメント』となる。記述例は以下。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title></title> </head> <body> <!-- メインコンテンツ ここから --> <!-- メインコンテンツ ここまで --> <!-- 追加分 ここから --> <!-- 追加分 ここまで --> </body> </html>
詳細はこちらへ
titleタグ
pタグとbrタグ
pタグで文章の段落を表示できる。改行させたい場合はbrタグを使用する。記述例は以下。
<p>ボクの初めてのウェブサイトを製作中です。<br>でもお腹空きましたのでご飯食べてきます。</p>
詳細はこちらへ
imgタグ
imgタグで画像を表示させることができる。一般的にウェブで使われる画像の形式(フォーマット)は『JPEG』(ジェイペグ)、『PING』(ピング)、『GIF』(ギフ もしくは ジフ)の三種類。記述例は以下。
<img alt="サンプル画像です" src="sample.jpg">
詳細はこちらへ
パス
パスとはファイルの位置を指定するための記述。絶対パスで位置を指定する『URL』、同じ階層を示す『./』、一つ上の階層を示す『../』、ドキュメントルートからの位置を指定する『/』、同じプロトコルを維持したまま位置指定ができる『//』が使用される。記述例は以下。
<img alt="" src="https://wp-p.info/reps/html-beginner/img/test.jpg"> <img alt="" src="./test.jpg"> <img alt="" src="/test.jpg"> <img alt="" src="//wp-p.info/reps/html-beginner/img/test.jpg">
詳細はこちらへ
aタグ
aタグを使用するとハイパーリンクを設定できる。『target属性』でページの表示方法を指定できる。記述例は以下。
<a href="http://google.co.jp/" target="_blank">ここをクリック</a>
詳細はこちらへ
h1〜h6タグ
h1〜h6タグを使用すると見出しとなる。記述例は以下。
<h1>見出し1</h1> <h2>見出し2</h2> <h3>見出し3</h3> <h4>見出し4</h4> <h5>見出し5</h5> <h6>見出し6</h6>
詳細はこちらへ
表
『table要素』、『tr要素』、『th要素』、『td要素』で表を作成できる。『colspan』属性と『rowspan』属性でセルを結合できる。『colspan』属性は横方向、『rowspan』属性は縦方向の結合となる。記述例は以下。
<table>
<tr>
<td colspan="3" rowspan="3">colspanとrowspanに3を設定しているよ！</td><td>セル2</td><td>セル3</td>
</tr>
<tr>
<td>セル2</td><td>セル3</td>
</tr>
<tr>
<td>セル2</td><td>セル3</td>
</tr>
</table>
詳細はこちらへ
リストと定義リスト
『ul』タグ、『ol』タグ、『li』タグでリストを作成できる。記述例は以下。
<ul>
<li>
<p>リスト1</p>
<p><span>ここはspanです</span></p>
</li>
<li>リスト2</li>
<li>リスト3</li>
</ul>
定義リストは『dl』タグ、『dt』タグ、『dd』タグで作成できる。記述例は以下。
<dl>
<dt>定義</dt>
<dd>ここに説明を書くよ</dd>
</dl>
詳細はこちらへ
インデント
『インデント』とは文章の行頭に空白を挿入して段をさげる字下げのこと。読み手が読みやすいよう整形するのが目的。インデントする際は半角スペースの挿入に注意。記述例は以下。
<ul>
<li>猫</li>
<li>犬</li>
<li>馬</li>
</ul>
詳細はこちらへ
divタグとspanタグ
『div』タグと『span』タグは意味のないタグ。主に要素をまとめたい場合に使用される。記述例は以下。
<div>
<p>ここはpタグです</p>
<p>ここもpタグです。<span>ここはpタグの中のspanタグです</span></p>
</div>
<div>ここはdivタグです。</div>
詳細はこちらへ
以上となります。
さて次に勉強する内容ですが、当サイトで引き続き勉強したいという粋な方はCSS入門編へと進むと良いと思います。
CSSを身に付ければおしゃれなウェブサイトが色々と作成できるようになり、作成できるコンテンツの幅が大きく広がります。HTMLが書けるようになってきたらそのままCSSも身につけてしまいましょう。
ではこの辺で失礼致します。またどこかでお会いしましょう。
この記事は桜舞が執筆致しました。
著者が愛する小型哺乳類 |
桜舞 春人 Sakurama HarutoISDN時代から様々なコンテンツを制作しているちょっと髪の毛が心配な東京在住のプログラマー。生粋のロングスリーパーで、10時間以上睡眠を取らないと基本的に体調が悪い。好きなだけ寝れる生活を送るのが夢。ゲームとスポーツと音楽が大好き。誰か髪の毛を分けて下さい。 |
記事の間違いや著作権の侵害等ございましたらお手数ですがこちらまでご連絡頂ければ幸いです。
