ホームページ制作入門

HTML - body - 強調（strong）

HTML - body - 強調（strong） strongは文字を強調したい時に使うタグです。強調すると言っても見出しとは違い、文章中で、この部分を強調したいと思った場所で使用します。 strongタグで文字を書くと、見た目としては太字になります。使用例） <strong>強調された文章</strong> 上記の様に <xxx>～</xxx> という形式で使用するタグです。 ※「強調された文章」の部分が太字になります。

HTML - body - 改行（br）

HTML - body - 改行（br）前回、前々回で、見出しと文章が書けるようになりました。ですが、HTMLで改行して文章を書いても、ブラウザ上にはその改行は反映されません。実は、HTMLでは、改行もタグで指定します。改行を指定するタグは <br /> です。改行タグは、「ここで改行する」というのを書くだけのタグですので、改行タグには、終了タグがありません。今までの <xxx>～</xxx> という形式のタグとは異なり、改行タグは、 <xxx /> という書き方をします（最後に半角スペースと半角スラッシュ「 /」が入ります）。タグは他にも沢山ありますが、見出しタグ<h1>～<h6>、段落タグ<p>、改行タグ<br />を覚えると、実は簡単なHTMLなら書けるようになっています。サンプルのHTMLを下に記載しますので、内容を変更して、HTMLを作ってみてください。 <!DOCTYPE html> <html lang="ja"> <head> </head> <body> <h1>一番大きな見出し</h1> <h2>二番目に大きな見出し</h2> <p>二番目に大きな見出しの説明文</p> <h3>三番目に大きな見出し</h3> <p>二番目に大きな見出しの説明文文章が長くなったときは、<br /> 改行タグを使って、<br /> 文章を改行する </p> </body> </html>

HTML - body - 段落（p）

HTML - body - 段落（p）見出しの次は、文章が必要ですよね。文章には<p>タグを使用します。 <p>タグは、「段落ひとつ分」だと考えてください。使い方は <p>ここに文章を、一段落分書きます。</p> という様に使用します。ちなみに、<p>タグを使用せずに、そのままテキストを書いても、HTMLでは表示されます。ですが、デザイン等をしていく際に便利ですので、文章は<p>タグで囲むようにしましょう。

HTML - body - 見出しを書く（h1～h6）

HTMLで、見出しを意味するのが <h1>から<h6>までのタグです。使い方は通常のタグと同じで、 <h1>ここに見出しを書く</h1> という様に使う事が出来ます。 <h1>が一番大きな見出しで、通常1ページに1つしか使用しません。 ※ページのタイトルの様に使用します。見出しタグは新聞を想像すると分かりやすいと思うのですが、新聞で、「○○新聞」という見出し（というよりタイトル）は、通常一ヶ所です。複数か所にあると変ですよね？一面の大きい見出しは<h1>または<h2>あたりでしょうか。。。もう少し小さい記事の見出しが、<h3>とかで、更に小さい記事や、記事の中に更に見出しがある場合などは、 <h4>、<h5>、<h6>あたりになるかと思います。 <h1>が一番大きい見出しで、次に大きいのが<h2>です。見出しとしての大きさの順番は、単純に数字が大きいほど、見出しとしては小さくなります。 <h1> ＞ <h2> ＞ <h3> ＞ <h4> ＞ <h5> ＞ <h6> 見出しタグは、<h6>までしか使いません。使い方の例としては・・・ <h1>サイトタイトル</h1> 　<h2>ページタイトル</h2> 　　<h3>項目の見出し</h3> 　　　<h4>項目内の小さい見出し</h4> 　　　<h4>項目内の小さい見出し</h4> 　　<h3>項目の見出し</h3> 　　　<h4>項目内の小さい見出し</h4> 　　　<h4>項目内の小さい見出し</h4> 　　<h3>項目の見出し</h3> 　　　<h4>項目内の小さい見出し</h4> 　　　<h4>項目内の小さい見出し</h4> 　　　・・・という様な感じに使用したりします。 ※実際には、そんなに細かく決まっている訳ではありませんので、 <h2>が無いのに、<h3>を使用したりしても、さほど問題ありません。

HTML - トップページの名称について

トップページのファイル名は基本的には index.html にしてください ① 「index.html」というファイルを作成します。 ② レンタルサーバーにアップロードします。 ③ レンタルサーバーで指定されているURLにアクセスします。 ※http://www.xxxxx.xxx/ という様な「/」で終わるURLです。 ⇒ 「index.html」の内容が表示されます。 ④ レンタルサーバーで指定されているURLの末尾に「/index.html」を付けたURLにアクセスします。 ⇒ 「index.html」の内容が表示されます。 ※http://www.xxxxx.xxx/index.html という様な「/index.html」で終わるURLです。この様に、URLやディレクトリに直接アクセスされた場合、「index.html」を表示します。という決まりごと（？）があります。これは、「index.html」以外にも「index.php」「index.cgi」･･･などでも有効です ※サーバーによって設定が事なっています。色々説明して、ややこしくなりましたが、トップページは「index.html」！これだけ覚えておいてください

HTML - body部分に書く事

HTMLの<body>～</body>の間には、主にブラウザに表示する部分を記述します。見出しや文章、画像など様々な内容を書いていきます。例えば、 <head>～</head>の間に記述するホームページのタイトルは、ブラウザ上部のタイトルバー（ツールバーの更に上部にあるバー）に表示されるだけで、ホームページを表示する部分には何も表示されません。ロボット用にはヘッダーにタイトルを書いて認識させますが、ユーザー用には、<body>～</body>の間に、テキストや画像などで表示させます。表示させる方法は人それぞれなので、例えば「背景としてロゴ画像を表示する」の様な方法でも大丈夫です。記述する順番としては、表示したい上から順番に書いていきます。

HTML - head部分に書く事

HTMLの<head>～</head>の間には、主に、ブラウザ上に表示されない内容を書きます。例えば、設定情報として、・どんな文字コードを使っているのか・どんなプログラムを使っているのか・著作権者の表記・制作者の表記検索エンジン向けの情報として、・検索結果に表示したい「タイトル」・検索結果に表示したい「説明文」・検索キーワード・検索にヒットさせたいかどうかリンクされる情報として・ページのファビコンの位置・スタイルシートの位置・Javascriptの位置・トップページの位置などの情報を掲載できいます。

HTML - HTML - タグのルール③ - その他

実際にHTMLでは、タグに色々な内容を書きくわえる場合があります。例えば、・画像のタグを書いた場合に、どの画像を表示するのか・リンクを書いた場合に、どこのページにリンクするのかなどこれらは、タグに属性等を書くことで設定しています。 <aaa bbb="ccc">タグの内容</aaa> 実際には、 aaaには「タグの名前」 bbbには「属性」 cccには「属性値」が入ります。このへんの内容は、タグの説明をしながら、必要に応じて解説していきます。

HTML - HTML - タグのルール② - 入れ子構造

HTML内にはタグが沢山書かれることになります。

タグの書き方の配置に関するルールを説明します。
・タグは、他のタグに対して「完全な外側」または、「完全な内側」に書かなければいけません（入れ子構造とか、ネストといいます）。

入れ子構造の例）

▼別々にタグが書かれている場合

<aaa></aaa>
<bbb></bbb>

▼aaaタグがbbbタグの内側にある場合

<bbb>
<aaa></aaa>
</bbb>

▼aaaタグの内側にbbbタグとcccタグが入っていて、さらに、cccタグ内にdddタグが入っている状態

<aaa>
<bbb>
</bbb>
<ccc>
<ddd>
</ddd>
</ccc>
</aaa>

上記の様な状態だととても見づらいので、
先頭に半角スペースまたはTabキーで空白を作ります（インデントと言います）。
インデントするとこうなります。

▼aaaタグの内側にbbbタグとcccタグが入っていて、さらに、cccタグ内にdddタグが入っている状態

<aaa>
　<bbb>
　　</bbb>
　<ccc>
　　<ddd>
　　</ddd>
　</ccc>
</aaa>

インデントすることで、構造が少し分かりやすくなります。

最後に間違った例をあげておきます。

▼aaaとbbbのどちらが外側か判別がつかない（入れ子構造になっていない）状態

<aaa>
　<bbb>
</aaa>
　</bbb>

※aaa、bbb、ccc、dddには実際にはタグの名称が入ります。

HTML - タグのルール① - 基本的なルール

HTMLの内容は「タグ」というものを使って書きます。タグのルール① - 基本的なルール・タグは「<」と「>」で囲んで使用します。・開始タグは「<xxx>」という書き方をします。・終了タグは、開始タグと同じ名前で、「<」の後に「/」を入れて、「</xxx>」という書き方をします。・ひとつで完結するタグは、タグの名前の最後に半角スペースとスラッシュ「 /」を入れて、「<xxx />」という書き方をします。 ※xxxの部分には、実際にはタグ名を書きます。タグの書き方の例） ▼通常のタグ <xxx>タグの内容</xxx> ▼ひとつで終了するタグ <xxx />