ホームページ制作入門

HTML - body - 強調（strong）

2012-08-26T13:14:45+09:00

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

HTML - body - 改行（br）

2012-08-05T11:26:33+09:00

HTML - body - 改行（br）前回、前々回で、見出しと文章が書けるようになりました。ですが、HTMLで改行して文章を書いても、ブラウザ上にはその改行は反映されません。実は、HTMLでは、改行もタグで指定します。改行を指定するタグは
です。改行タグは、「ここで改行する」というのを書くだけのタグですので、改行タグには、終了タグがありません。今までの～という形式のタグとは異なり、改行タグは、という書き方をします（最後に半角スペースと半角スラッシュ「 /」が入ります）。タグは他にも沢山ありますが、見出しタグ

～

、段落タグ
、改行タグ
を覚えると、実は簡単なHTMLなら書けるようになっています。サンプルのHTMLを下に記載しますので、内容を変更して、HTMLを作ってみてください。

一番大きな見出し

二番目に大きな見出し

二番目に大きな見出しの説明文

三番目に大きな見出し

二番目に大きな見出しの説明文文章が長くなったときは、
改行タグを使って、
文章を改行する

HTML - body - 段落（p）

2012-07-22T15:50:11+09:00

HTML - body - 段落（p）見出しの次は、文章が必要ですよね。文章には

タグを使用します。

タグは、「段落ひとつ分」だと考えてください。使い方は

ここに文章を、一段落分書きます。

という様に使用します。ちなみに、

タグを使用せずに、そのままテキストを書いても、HTMLでは表示されます。ですが、デザイン等をしていく際に便利ですので、文章は

タグで囲むようにしましょう。

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

2012-06-02T17:57:32+09:00

HTMLで、見出しを意味するのが

から

までのタグです。使い方は通常のタグと同じで、

ここに見出しを書く

という様に使う事が出来ます。

が一番大きな見出しで、通常1ページに1つしか使用しません。 ※ページのタイトルの様に使用します。見出しタグは新聞を想像すると分かりやすいと思うのですが、新聞で、「○○新聞」という見出し（というよりタイトル）は、通常一ヶ所です。複数か所にあると変ですよね？一面の大きい見出しは

または

あたりでしょうか。。。もう少し小さい記事の見出しが、

とかで、更に小さい記事や、記事の中に更に見出しがある場合などは、

、

あたりになるかと思います。

が一番大きい見出しで、次に大きいのが

です。見出しとしての大きさの順番は、単純に数字が大きいほど、見出しとしては小さくなります。

＞

見出しタグは、

までしか使いません。使い方の例としては・・・

サイトタイトル

ページタイトル

項目の見出し

項目内の小さい見出し

項目の見出し

項目内の小さい見出し

項目の見出し

項目内の小さい見出し

　　　・・・という様な感じに使用したりします。 ※実際には、そんなに細かく決まっている訳ではありませんので、

が無いのに、

を使用したりしても、さほど問題ありません。

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

2012-05-26T19:21:49+09:00

トップページのファイル名は基本的には 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部分に書く事

2012-05-14T11:42:36+09:00

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

HTML - head部分に書く事

2012-05-14T11:42:07+09:00

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

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

2012-05-14T11:41:36+09:00

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

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

2012-05-14T11:38:14+09:00

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

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

入れ子構造の例）

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

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

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

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

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

　
　　
　
　　
　　
　

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

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

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

　

　

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

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

2012-05-06T16:34:01+09:00

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

ホームページ制作入門

HTML - body - 強調（strong）

HTML - body - 改行（br）

～

、段落タグ、改行タグを覚えると、 実は簡単なHTMLなら書けるようになっています。 サンプルのHTMLを下に記載しますので、内容を変更して、HTMLを作ってみてください。

一番大きな見出し

二番目に大きな見出し

三番目に大きな見出し

HTML - body - 段落（p）

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

から

までのタグです。 使い方は通常のタグと同じで、

ここに見出しを書く

または

あたりでしょうか。。。 もう少し小さい記事の見出しが、

とかで、 更に小さい記事や、記事の中に更に見出しがある場合などは、

、

、

あたりになるかと思います。

が一番大きい見出しで、 次に大きいのが

です。 見出しとしての大きさの順番は、単純に数字が大きいほど、見出しとしては小さくなります。

＞

＞

＞

＞

＞

見出しタグは、

までしか使いません。 使い方の例としては・・・

サイトタイトル

ページタイトル

項目の見出し

項目内の小さい見出し

項目内の小さい見出し

項目の見出し

項目内の小さい見出し

項目内の小さい見出し

項目の見出し

項目内の小さい見出し

項目内の小さい見出し

が無いのに、

を使用したりしても、さほど問題ありません。

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

HTML - body部分に書く事

HTML - head部分に書く事

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

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

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

、段落タグ
、改行タグ
を覚えると、実は簡単なHTMLなら書けるようになっています。サンプルのHTMLを下に記載しますので、内容を変更して、HTMLを作ってみてください。

までのタグです。使い方は通常のタグと同じで、

あたりでしょうか。。。もう少し小さい記事の見出しが、

とかで、更に小さい記事や、記事の中に更に見出しがある場合などは、

が一番大きい見出しで、次に大きいのが

です。見出しとしての大きさの順番は、単純に数字が大きいほど、見出しとしては小さくなります。

までしか使いません。使い方の例としては・・・