Home

ホーム>>2:最低限の知識

覚えるべき要素

要素はたくさんありますが全て覚えるのは大変なので、最低限このページで紹介している要素だけ覚えてください。

このページで紹介している要素さえ覚えれば、大概のwebサイト作成には困らないはずです。(ここで紹介しているのは最低限の要素のため、より多くの要素を知りたい方は、htmlリファレンス本を買う事をオススメします。)

覚えるべき要素

<h1~6>コンテンツ</h1~6>
<h1>コンテンツ</h1>のように、【h1~6】を使う要素は見出しを意味します。見出しを付ける際に使います。
<p>コンテンツ</p>
【p】要素は段落を意味します。通常の文章などはp要素の中に記述します。
<br />
<br />は改行を行います。

おはよう<br />ございます→おはようの後ろで改行される

<br />を入れた部分で改行されます。
<ul>
<li>コンテンツ</li>
</ul>
<ul><li>~</li></ul>はリストを意味します。箇条書きする時などに使い、<li>~</li>は任意の数だけ増やせます

<li>コンテンツ</li>は任意の数だけ増やせる
<a href="移動先ページ">移動先ページを示す言葉or画像</a>
【a】要素は主にページを移動させる際に使います。

【移動先ページ】には移動先のアドレス(【例】http://www.yahoo.co.jp/)またはパスを記入し、【移動先ページを示す言葉or画像】には任意の言葉or画像(【例】Yahoo! JAPANはこちら)を記入します。
<img src="表示する画像の指定" width="画像の横サイズ" height="画像の縦サイズ" alt="画像を示す言葉" />
<img />は画像を表示する際に使います。

【src】には表示する画像を指定し、【alt】には画像を示す言葉(【例】画像がロゴならサイト名など)を記入します。
<table>
<tr>
<th>見出し</th>
<th>見出し</th>
</tr>
<tr>
<td>コンテンツ</td>
<td>コンテンツ</td>
</tr>
</table>
【table】要素は表を意味します。

【tr】は行、【th】は見出しセル、【td】はデータセルを意味し、上記の場合、一列目に見出しセルが二つ、二列目にデータセルが二つある表になります。

一列目に見出しセルが二つ、二列目にデータセルが二つある表

【tr】【th】【td】は任意の数だけ増やせます
<div>コンテンツ</div>
【div】は特別な意味を持たない要素で、コンテンツをグループ化する際などに使います。

divタグでグループ化する要素を囲む

【div】にスタイルを適用する事で、グループ化したコンテンツのレイアウトを指定することが出来ます。【div】はスタイルと組み合わせて使うのが一般的です。

【htmlファイルの構成】へ>>

当サイトは初めてWebサイトを作る方向けの解説サイトです。文法は抜きにして"とにかく作って出す"という事を前提に解説しています。

一度作成してみてさらに興味がわいた方は、専門の参考書を読む事をおススメします。

はじめに - Webサイトについて -

1:予め用意するもの
テキストエディタ
画像編集ソフト
2:最低限の知識
拡張子の表示
htmlタグとは
覚えるべき要素
htmlファイルの構成
htmlファイルの保存
htmlファイルの確認
Webサイトの構造とindex.html
相対パス/絶対パス
3:作成手順
【1】保存フォルダの作成
【2】htmlファイルの作成
【3】ファイルを送信
【4】完成
応用
デザインの変え方
背景色・文字色を変える
文字サイズを変える
縦横のサイズを指定する
行揃えの位置を指定する
間隔をあける
線を引く