HTML5初心者向け

はじめに

@MiRaiです。HTML/CSSのメモ代わりとして随時更新します。Swiftページも初心者向けに更新していこうと思います。自分も学習中の身であり、完結に書いていくのでさらっと全部読んでいただき、詳しく知りたい方は個々に調べて頂く形でお願いします。

サンプルコード

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>見出し</h1>
<p>段落</p>

</body>
</html>

基本構成

基本構成は<html>タグ、<head>タグ、<title>タグ、<body>タグの４種類です。

<!DOCTYPE>はHTML5の宣言です。

<html>はHTML自体を始めるための宣言です。

<head>は文書のヘッダ情報（文書に関する情報）を表します。

<title>はホームページのタイトルです。

<body>はブラウザに表示される文書の本体を記述します。

そして個々に開始タグと終了タグが存在します。例)<html>と</html>

見出しと段落

<h1>見出し</h1>

<h1>は見出しです。<h1>から<h6>まで存在し、<h1>が１番大きく、<h6>が１番小さい見出しとなります。

<p>段落</p>

<p>タグ(p要素とも呼ばれる)は段落となります。段落とはひとかたまりになってる文と考えてよいでしょう。

サンプルコード２

<!DOCTYPE html>
<body style="background-color:#D8D8D8">
<html>
<head>
<title>自己紹介</title>
</head>
<body>

<h1>MiRai</h1>
<img src = "http://i.imgur.com/LHoZoRq.png" witdh ="256" height ="256" alt = "profilePic">

<h2>About me</h2>

<ul>
<li>Live in NewportBeach </li>
<li>I'm from Japan.</li>
<li>technology and art is my life.</li>
</ul>

<hr>

<h2>My favorite</h2>
<ol>
<li>go to museum weekend.</li>
<li>listen new music.</li>
<li>making something with my computer.</li>
</ol>

<hr>

<dl>
<dt>ジョン・レノン</dt>
<dd>１９４０年１０月９日生まれ。偉大なアーティスト</dd>

<dt>坂本龍馬</dt>
<dd>1867年12月10日生まれ。偉大な志士</dd>
</dl>

</body>
</html>

上から順番に説明していきたいと思います。
オンラインでhtmlコード実際に確認したい場合、色々ありますが自分はW3Schoolで右側にあるTry it Selfを使用しています。コードをコピペするのもよし、自分で弄るのもよし。また、他のサイトの方が使いやすいならそちらを使ってください。

背景画像

HTML記述の背景画像は
html <body style="background-color:#D8D8D8">
となります。この#D8D8D8はカラーコード（シャープ（#）に続く6桁の16進数）です。また、color:orange等の英語での記述でも色は変更できます。

タイトル

<title>自己紹介</title>

題名通りホームページのタイトルとなります。

`<hr>`タグ

線を引きたいときは<hr>タグを使用します。終了タグはありません。

`<img>`要素

<img src = "http://i.imgur.com/LHoZoRq.png" witdh ="256" height ="256" alt = "profilePic">

<img src="画像へのパス" width="画像の幅" height="画像の高さ" alt="代替テキスト">

画像へのパス

画像へのパスのところに画像名またはURLを指定します。
今回の場合、ローカルではなくURL指定しています。自分はImgurというサイトを経由して画像をアップデートしています。このサイトの場合、アップデートした後に、Direct URLを選ぶことを忘れないで下さい。この辺は個々に探してもらうのが良いかと思います。

画像の大きさ

width="画像の幅" height="画像の高さ"はpx(ピクセル)となってます。
今回は幅高さ共に256pxに指定してあります。

代替テキスト

代替テキストとは画像が表示されなかった場合に、表示されるテキストです。

`<LI>`タグ

<ul>
<li>Live in NewportBeach </li>
<li>I'm from Japan.</li>
<li>technology and art is my life.</li>
</ul>

<ol>
<li>go to museum weekend.</li>
<li>listen new music.</li>
<li>making something with my computer.</li>
</ol>

<タグの種類>
<li>リスト１</li>
<li>リスト２</li>
<li>リスト３</li>
</タグの種類>

基本的にはこのような構成になっています。

タグはList Itemの略で、リスト項目を作成する時に使用します。
今回タグの種類は２種類使用しています。<ul>タグと<ol>タグです。

`<ul>`タグ

Unordered listの略で、・でリストが表示されます。

`<ol>`タグ

Ordered listの略で、数字でリストが表示されます。

定義リスト


<dl>
<dt>ジョン・レノン</dt>
<dd>１９４０年１０月９日生まれ。偉大なアーティスト</dd>

<dt>坂本龍馬</dt>
<dd>1867年12月10日生まれ。偉大な志士</dd>
</dl>

<dl>はDefinition Listの略で、<dt>で定義語、<dd>で定義説明となります。

Next coming soon...

HTML5初心者メモ