<初心者向け>「ホームページ」を作ろう

Web上で模索しながら、手探りでホームページを勉強しています。
タグソース等間違いがあるかもしれませんが、その点は、ご容赦願います。
また間違い等有りましたら、ご連絡頂ければ幸甚です。
宜しくお願い申し上げます。

目　次
■ホームページ制作の基本ベース■
●ホームページを作るのに必要な3点
●ホームページ作成には大きく分けて2種類
●ホームページ用のフォルダを最初に作っておきましょう。
■HTMLの基礎■
●HTMLの基礎知識
●HTMLの要素
●HTMLの属性
●ホームページ用の最初のファイル「index.html」を作り、宣言を最初に書きます。
●よく使うタグ類
■文字に色を付ける、■太文字にする、■文章の中に空白を入れる、■h1〜h6タグ、■画像はimgタグ、■文章の改行にはbrタグ
■リンクの挿入にはaタグ、■文字列にはpタグ、■箇条書きにするには、ulタグ、olタグとliタグ、■表を作成するにはtableタグ
■ホームページの中にタグを表記するタグ
■CSS(スタイルシート)の基礎■
●CSSの基礎知識
■レシポンシブについて■
●PCもスマホも見れる為にはレシポンシブの宣言もhead内に書きます。
●レシポンシブ用(PC&SP)の分岐(メディアクエリ)はCSSに書きます。

☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆

■ホームページ制作の基本ベース■

●ホームページを作るのに必要な3点

●ドメイン(世界で一つしかない名前)を取得する事。
〇〇〇〇〇〇.comや〇〇〇〇〇〇.jpなどのドメインをプロバイダーなどで取得しましょう。
プロバイダーも沢山ありますので、金額や信頼性など選んで申し込んでください。

●サーバー(ホームページを入れて置く場所)。
サーバー選びも金額などマチマチで提供しています。
こちらも調べてお好みのプロバイダーでレンタルサーバーをお借りしてください。

●ホームページのデータ(タグで組んだ文字や表記する写真など)。
タグが組めない方は、WordPressも有ります。
時間が掛かっても自分でエディタでファイルを作り、
ホームページを作るのも楽しいものです。ぜひチャレンジして下さい。

必要な3点

●ホームページ作成には大きく分けて2種類

●HTMLやCSSなどを組んで(アプリケーションも有ります)作成。
HTMLやCSSなどを組んで作る場合は、少し知識が必要です。
知識を少しづづ積み上げながらチャレンジする事をお勧め致します。きっとその過程も楽しいです。
●CMS(ワードプレスなど)を利用して簡単に作成。 簡単と言っても、ネットで調べながら作成をお勧めします。
ワードプレスも無料のものから有料のものまで多数ありますので、
ご自分の好きなものをお選びください。

女の子

●ホームページ用のフォルダを最初に作っておきましょう。

HPなど名前をつけて保存用フォルダを作ります。
HP(index.htmlやimagesとcssを入れておきます)。
imagesは写真類を入れるフォルダです。cssはcssファイルを入れます。
それぞれのフォルダの名前は、自分の好きな名前を付けてください。
但し日本語でなく、ローマ字か英語でお願いします。

フロー図

☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆

■HTMLの基礎■

●HTMLの基礎知識

HTMLは、Hyper Text Markup Languageの略語です。
Webページを定義するための言語です。
ホームページは、HTMLとCSSと画像とJavaScriptでの構造要素が多く見受けられます。

フロー図

HTMLは、全体の構造など決めます。
CSSは、Cascading Style Sheetsの略語です。
このCSSは、文字に色や写真などの位置を指定したり、デザイン的要素を設定します。

HTMLは、< と >で囲まれた中に決められた言語を入れます。これをタグと言います。
開始タグは、< > など。
終了タグは、</> など。
<html> や <head> などのhtml や head などをタグ名と呼びます。
タグ名は大文字でも小文字でも構いませんが、必ず半角文字で記述します。
タグ名の前にスペース入れない。

●HTMLの要素

開始タグから終了タグまで構成される文章全体を要素と言います。
HTMLは、親要素の中に入れ子構造で、子要素を入れます。
親要素は、<html>から</html>までです。
<html>から</html>までの中は、子要素になります。

●HTMLの属性

要素に対して設定するものとして、属性が有ります。
属性の例をあげます。
見本は最初から、要素名、属性、属性値、表示される内容、修了タグ。になります。
aタグはhref属性を追加して、リンクの挿入が出来ます。

●ホームページ用の最初のファイル「index.html」を作り、
宣言を最初に書きます。

ホームページ用ファイルですよ。と最初にドキュメントタイプ宣言をします。
HTMLは数個のバージョンがあります。そのバージョンによってルールなど異なります。
ブラウザは、そのHTMLがどのバージョンで書かれているか認識致します。
HTML5の場合は、

     <!DOCTYPE html>

になります。
次に記述するのが、htmlタグです。htmlタグは、HTML文書であることを示すタグで、
htmlタグの開始タグを記述し、最後に終了タグで修了します。
そのhtmlタグの中に、最初にheadタグを記述します。
headタグは、ブラウザに情報を記述するタグです。htmlタグの直下に一つだけ記述できます。
headタグに記述する内容は、metaタグ、titleタグ、linkタグ、などを記述します。
headタグ中の記述は、検索エンジンへの情報で、Webページの画面上には表示されません。
headタグの次にブラウザから閲覧できるbodyタグを記述します。

それでは、HTML5の簡単な例のHTMLソースを書きます。
例

     <!DOCTYPE html>
     <html>
       <head>
          <meta charset="UTF-8">
          <title>サンプル(ご自分の名称を入れてください)</title>
       </head>
       <body>
         <p>例としての文章です。(ご自分の文章を入れてください)</p>
       </body>
     </html>

※簡単豆解説=最新「HTML5」とは以前の記述方法より処理を簡単で、構造もスッキリ。
<!DOCTYPE html>は、HTMLですよ。という宣言。
<html>は、HTMLの始まりますというタグ。
<head>は、ここからはホームページに表示されない
裏の操作設定ですよという宣言。
<meta charset="UTF-8">は、文字が化ける事を防止する記述です。
<title>サンプル(ご自分の名称を入れてください)</title>は、ホームページの
タイトルを入れます。
</head>は、裏の操作設定は、ここまでです。の宣言。
<body>は、ここからホームページに内容が表示されるという宣言。
</body>は、ここまでがホームページの内容です。という宣言。
</html>は、ここまでがHTMLですという終わりの宣言。

●よく使うタグ類

■文字に色を付ける

青文字でしたら「font color="blue"」と宣言します。
その後に文字を入れます。「こんにちは！」など。
例=<h3><font color="blue">こんにちは！</font></h3>

こんにちは！

■太文字にする

例=<strong>強調</strong>
強調

■文章の中に空白を入れる

『 &ensp; 』　半角スペースより少し広い空白。
『 &emsp; 』　全角スペースとほぼ同じ大きさの空白。
『   』　半角の空白より小さい空白。

■h1〜h6タグ

大見出しや中身出し、小見出しにhを使います。
h1からh6までの６種類で、数字が小さいほど大きな文字見出しです。

以下は例です。(枠と色はcssで付けています。)

タイトルなどの大見出しのh1

タイトルなどの中見出しのh2

タイトルなどの小見出しのh3

■画像はimgタグ

画像の表示は、imgタグで表示します。
imgタグは、修了タグは要りません。
しかしalt="〜"の部分に、画像の説明文を記入します。
画像が表示されない時に画像の代わりに画像の説明文が表示されます。

imgの使い方例

<img scr="画像ファイル名(画像がある場所)" alt ="画像の説明文">

■文章の改行にはbrタグ

文章を改行するにはbrタグを使います。

長い文章や改行したい文章の時は<br> を使用します。
ここから改行しています。

■リンクの挿入にはaタグ

別のURLへリンクを貼るにはaタグを用います。
リンクボタンで別のURLへリンクします。
リンクボタンは、文字でも画像でも可能です。

<a href="別リンク先のURLを書きます">リンク用のボタン</a >

リンクボタンを文字でなく、画像の場合は、

<a href="別リンク先のURLを書きます"><img scr="画像のボタンのファイルを指定" alt="リンク用画像ボタン" ></a>

■文字列にはpタグ

段落を作る時は、pタグを使用します。
pタグはbrタグはどちらも改行できますが、pタグはbrタグと異なり、行間が広くなります。

<p>例として表示しますと、pタグとbrタグの違いは行間のスペース(行間の空きの広さ)が異なります。</p>
こちらはpタグのみで、brタグは使用していません。

<p>例として表示しますと、pタグとbrタグの違いは行間のスペース(行間の空きの広さ)が異なります。</p>
ここから、こちらはpタグのみでなく、brタグを使用しています。

■箇条書きにするには、ulタグ、olタグとliタグ

箇条書きに書くには、<ul>と<li>の組み合わせと、<ol>と<li>の組み合わせで利用します。
番号付きの箇条書きにするには、olタグを使用します。

●ulタグとliタグの例
<ul>
<li>見本リスト</li>
<li>見本リスト</li>
<li>見本リスト</li>
</ul>

●ulタグとliタグの結果の例

見本リスト

見本リスト

見本リスト

●olタグとliタグの例
<ol>
<li>見本リスト</li>
<li>見本リスト</li>
<li>見本リスト</li>
</ol>

●olタグとliタグの結果の例

見本リスト

見本リスト

見本リスト

■表を作成するにはtableタグ

表を作るには、tableタグを使用します。
<table>〜</table>のように使用し、表組の全体を指定します。
tableタグを使うには、trタグ、tdタグ、thタグと一緒に使います。
<table>〜</table>の中に、入れ子方式で行と見出しとデータを入れます。
trは「Table Row（行）」の略で、表組の行を作成します。
<tr>〜</tr>のように使用します。
thは「Table Header（見出し）」の略で、表組の見出しを作成します。
<th>〜</th>のように使用します。
tdは「Table Data（データ）」の略で、表組のデータを作成します。
<td>〜</td>のように使用します。

テーブル

下記にtableタグの例を書きます。
<table border="1">
<tr>
<th>名前</th><th>年齢</th>
</tr>
<tr>
<td>斉藤</td><td>34</td>
</tr>
<tr>
<td>加藤</td><td>47</td>
</tr>
</table>

例の結果を下記に表示します。

名前	年齢
斉藤	34
加藤	47

htタグは、表の見出しなので目立つ太字になり中央寄せされます。
<table border="1">の「border="1"」という属性は、外枠線の幅を指定する属性で、
数字が大きくなるほど枠線が太くなり、０にすると枠線が見えなくなります。
０〜７まで指定できます。

■ホームページの中にタグを表記するタグ

タグ記号　→　変換用特殊文字
<>の　< は、　→　< になります。
<>の　> は、　→　> になります。
& は、　→　& になります。
" は、　→　" になります。

■リンクを貼る■

●文字にリンクを貼る

例= <a href= "xxxx/xxxx.html" >アンカーテキスト</a>
<a href= "xxxx/xxxx.html" >は、a href=がリンク先を示すタグです構文。
"xxxx/xxxx.html"は、リンク先のアドレス。
>で、閉めます。そのあとにリンクを貼る文字を入れます。「アンカーテキスト」など。
最後に</a>で閉めます。

☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆

■CSS(スタイルシート)の基礎■

●CSSの基礎知識

CSSとは「Cascading Style Sheets」の略語で、スタイルシートとも呼ばれます。
HTMLで作られた文書構造にデザインを加えて見栄えを整える役目が、CSS言語です。
簡単なものならHTMLでも作成できますが、HTMLとCSSが組み合わせて作ります。

■文字の大きさや色を変えるfontタグとsize属性

文字の大きさや色を変える時は、fontタグを使います。
文字の大きさを変える時は、fontタグとsize属性を使います。
属性値には１〜７まで指定できます。数字が大きい方が文字も大きくなります。

●文字サイズの例
<font size="1">文字サイズ1です。</font >
<font size="7">文字サイズ7です。</font >

●文字サイズの結果の例
文字サイズ1です。
文字サイズ7です。

文字の色を変える時は、fontタグとcolor属性を使います。
属性値にはカラー名かカラーコードを入れます。
カラー名は、redやblueのように、英語で指定する方法と、
カラーコードでは、#に続く６桁の１６進数で表現され、幅広い色が使えます。

●文字色の例
<font color="green">グリーン色です。</font >
<font color="#008000">グリーン色です。</font >

●文字色の結果の例
グリーン色です。
グリーン色です。

■背景に色を付けるには、background-color

要素の背景色を変えるには、background-colorを使います。
色の指定は、カラーコードやキーワードで指定します。
例えば、ホームページ全体のbodyの背景を黄色( yellow または　#ffff00 )にする場合には、

body {
　　background-color:yellow; 　
　　}

カラーチャートは、「WEB色見本原色大辞典」をご覧ください。

■文章の行間を広くしたり、・狭くする。line-height

line-heightは、文章の行の高さを設定できるプロパティです。
文章の行間を広くしたり、・狭くしたりします。
line-heightプロパティを以下に記述します。

line-height: 値;

値は絶対値、文字サイズ、normalで指定する方法があります。
line-heightで指定される高さは、文字の高さ＋上下の余白になります。

行間の空き

line-heightで設定した数値から文字サイズを引いた数値が、文字の上下の余白になります。
例えば文字サイズが14pxの文章にline-heightで18pxを指定した場合、
18px–14px = 4pxとなります。
その結果として、上下に各2pxずつ余白が配置されます。

■画像の大きさを指定する。img要素

画像の大きさを指定するには、
img要素に対してwidth は横幅を、height は高さを指定します。

img.example {
　　width: 300px;
　　height: 200px;
}

exampleは写真のファイル名を入れてください。
height: 200px;をheight: auto;にすると、
高さは横幅width: 300px;に合わせて、自動で高さを設定できます。

☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆

■レシポンシブについて■

●PCもスマホも見れる為にはレシポンシブの宣言もhead内に書きます。

PC画面だけで無く、スマホなどでも違和感なく見れるようにする場合には、
レシポンシブ対応が必要です。

※簡単豆解説=レスポンシブ対応とは、
様々なデバイス（パソコン、SP(スマートフォン)、タブレット端末など）で
最適化することができる対応。

書く場所は、 <head>と</head>の間に記入させます。
metaタグは、
<meta name=”viewport” content=”width=device-width,initial-scale=1.0″>
になります。

※簡単豆解説=metaタグとは、
コンテンツの情報を検索エンジンやブラウザに伝えるための情報。

例

     <!DOCTYPE html>
     <html>
       <head>
          <meta charset="UTF-8">
          <title>サンプル(ご自分の名称を入れてください)</title>
           <meta name=”viewport” content=”width=device-width,initial-scale=1.0″>
       </head>
       <body>
         <p>例としての文章です。(ご自分の文章を入れてください)</p>
       </body>
     </html>

●レシポンシブ用(PC&SP)の分岐(メディアクエリ)はCSSに書きます。

※簡単豆解説=メディアクエリとは表示する画面環境(パソコン又はスマホなど)に
対応して適用するスタイルを切り替える機能。

CSSファイルを作って、それにPC用とスマホ用の表示方法(メディアクエリ)を入れる。
PC(パソコン用)とSP(iphoneなどスマホ)のブレイクポイントをメディアクエリで入れます。
PC(パソコン用)に対してブレイクポイントを下記に紹介致します。
@media screen and (min-width: 481px)　{ }
上記の{ }は、PC用スタイルを記述します。

例

@media screen and (min-width: 481px)　{
img
{
width:630px;　
height: auto;
}
}

※簡単豆解説=media screen and (min-width: 481px)は、メデイアの画面が481ピクセル以上
だと写真を横幅630ピクセルで縦幅は、そのサイズに合わせてください。
という意味になります。

SP(iphoneなどスマホ)に対してブレイクポイントを記します。
@media screen and (max-width: 480px)　{ }
上記の{ }は、SP(iphoneなどスマホ)用スタイルを記述します。

例

@media screen and (max-width: 480px)　{
img
{
width:100%;　
height: auto;
}
}

※簡単豆解説=media screen and (max-width: 481px)は、メデイアの画面が480ピクセル以下
だと画像横幅を画面の100％にして縦幅は、その100％のサイズに合わせて
ください。という意味になります。

つまり、
「min-width: ○○○px」は、横幅○○○px以上という設定です。
「max-width: ○○○px」は、横幅○○○px以下という設定です。
上記の設定は、
スマホサイズを基準にして、大きいデバイスに対してメディアクエリを設定していくなら、
min-widthになります。
PCサイズを基準にして、小さいデバイスに対してメディアクエリを設定していくなら、
max-widthになります。
つまり、基準をスマホかPCかによって、minにするか、maxにするか洗濯してください。

タグなど覚えなくても、ネット調べれば、多くの方々が親切に説明されています。
その都度、調べながら作られることを期待致します。
皆様も、ゆっくりとネットで調べながら、ホームページを作ってください。
間違い等ありましたら、ご指摘ください。宜しくお願い申し上げます。

<初心者向け>「ホームページ」 を作ろう