I aim to creator.

サイト作成を出来る方からしたらHTMLなんて簡単過ぎてしょうがない方も居ると思うのですが、

初心者さん達は、変な所で、つまずく事が多いようです。

なので、今回初心者さんがよくつまずく所を徹底解説します。

ファイル名

つい最近自分の中学校のホームページを見たのですが、
ファイル名を少し間違えただけで、アクセス制限を簡単にクリアー出来ました。

特に間違える方は、居ないと思うのですが、
学校の先生達が間違える様な事なので解説したいとおもいます。


ホームページのトップページのファイル名は、必ず
index.htmlにする事がルールとなります。
このindex.htmlは、フォルダー内のトップページですよ～っていう意味です。
なので、フォルダーごとにindex.htmlを作る必要があります。


この説明は、入門書などに書かれていない事がよくあります。

indexと言うファイル名は、トップページを示すファイル名です。
例えばもしphpファイルをトップページとして使いたいなら「index.php」となります。

HTMLを理解する方法

ホームページ作成初心者の方は、HTMLを覚えるのに結構大変ですよね?
でも考え方を変えるだけで、結構簡単に覚えれるものなのです。

まずHTMLは、ただの印と考えて下さい。
<h1>これは見出しの印です。<br>これは、改行の印です<hr>これらラインの印です。
今の時点で、見出しのタグと改行のタグとラインのタグを覚えたはずです。

HTMLは、組み合わせで、表示方法が違ってくるだけなんです。
phpとになったらもっと複雑になって組み合わせ次第で、色々作れてしまいます。
それと違ってHTMLは、表示方法が違ってくるだけなので、簡単です。

メニューなど作る時も
liタグとulタグさえ覚えれば簡単です。

CSSを理解してみよう

サイト作成初心者さんは、よくHTMLを自ら複雑にしている事が多いです。
知恵袋で、ソースを貼っている方が居ますけど大体の方が、タグに、
直接スタイルを決めています。

なので、HTMLタグ内では、HTMLの印&CSSみたいな感じになっています。
主に直接スタイルを決める時は、大体一部分の時だけだったりします。
でも初心者さんは、直接入力して他の奴にもそのスタイルを書いていると言う感じです。

それって実際見にくいし大変ですよね?
ちゃんとスタイルシートが作れる様になったら簡単に全ページにCSSを反映出来ます。

例えば段落の属性pの部分を赤い色の文字にしたい場合は、
p{
color: #ff0000;
}

これだけで、完了です。
この数行入力するだけで、全てのページに反映されます。



緑のpの部分がセレクターです。
セレクターは、要素などを指定している所です。

オレンジの部分は、命令だと思って下さい。
赤の部分は、何をするか?っと考えて下さい。

っと言ってもあまり理解出来ないですよね?
でもレストランに例えると、

客　ハンバーグを1個お願いしま～す
受け付け　分かりました～
料理人　ハンバーグ1つ了解で～す。

っと言う流れになります。
まず客が注文をします。
そして受け付けの方が、料理人達に何を作るか命令をします。
それで、料理人達が作ります。

この流れで、CSSを書いていきます。
何を指定するか決める>>命令をする>>結果を出す。

こんな感じのイメージで十分CSSを組む事が可能です。

初心者さんの勘違い

よく知恵袋の初心者さんが間違えている事があります。
そ・れ・は・メールフォームをHTMLで、作れると思っている人です。

これは、よくある勘違いだと思います。
でも実際は、作れません。

HTMLは、ただ見た目を作るだけでphpなどみたいに動的なサイトは、作れません。
これだけは、おぼいておいた方がいいです。
HTMLだけで、作れないと分からないまま
作り方をひたすら探している方がよく居ます。