HTML CSS　入門

ホームページを自分で書けば制作費用はゼロ円。
簡単に書けるし、修正も自分ですぐにできる。
アプリに頼る必要もない。業者に依頼する必要もない。制作費用は全くかからない。
年間２０００円ほどでサーバをレンタルでき、変な広告も入らない自分・自社
オリジナルなホームページを自作して維持できる。

HTML入門

ホームページはビルダなどのアプリで作るのではなく、自分の手でそのプログラムを書こう。
簡単に作れる。ホームページは「HTML」という言語でプログラミングする。
実はプログラミングとは言えない簡単な構成なので誰でもすぐに修得できる。

「HTML」言語は表示したい文章や写真・図をホームページとして
表示させるためのプログラムだ。

例えば「ここに文章を大きく表示する、ここに写真を表示する」
などを「HTML」言語で記述してホームページとして表示させる、という仕組み。

ＨＴＭＬで書いたプログラムや文章、写真などはレンタルサーバにアップして公開すれば、
世界中の人に見てもらえる。レンタルサーバにアップするのも簡単。

HTMLはタグというもので挟む構成。
例えば　　＜ｈ１＞ねこの飼い方＜／ｈ１＞　　というプログラムの書き方をする。
「ねこの飼い方」という文を＜ｈ１＞と＜／ｈ１＞で挟んでいる構成。
＜ｈ１＞の部分をタグという。＜ｈ１＞タグは「題目」を表示させる命令になる。
つまり「ねこの飼い方」という文がホームページでは大きく表題のような表示になる。
このページの一番最初の「ホームページの自作」という部分が＜ｈ１＞で表示している。

全体のプログラムは以下のような構成になる。
＜ｈｔｍｌ＞
＜ｈｅａｄ＞
＜／ｈｅａｄ＞
＜ｂｏｄｙ＞
＜ｈ１＞ねこの飼い方＜／ｈ１＞
＜／ｂｏｄｙ＞
＜／ｈｔｍｌ＞
これだけでホームページは出来上がり。上のプログラムをメモ帳で記述、保存して、
保存したファイルをダブルクリックするとホームページが表示される。
（「ねこの飼い方」以外のタグの部分は半角英数で記述、メモ帳で「neko.html」と保存する。
．の後はtxtではなくhtmlと書くように）

上のプログラムでは全体を＜ｈｔｍｌ＞で挟んでいる。
その中に＜ｈｅａｄ＞で挟む領域と
＜ｂｏｄｙ＞で挟む領域の２つの部分で構成される。
＜ｂｏｄｙ＞で挟む領域に本文を書く。＜ｈｅａｄ＞で挟む領域は各種設定を書く。
例えばこんな感じになる。

ただし、本チャンで書くなら、もう少しまじない的な記述を付加して、
こんな風になる
意味を知りたい時はまたどこかで参照の事。

HTMLで色々書いてみる

＜ｂｏｄｙ＞～＜／ｂｏｄｙ＞の間に色々プログラムを書いてみる。
プログラムと表示結果を見比べてみる。

画像を表示させる

ホームページには写真や図を入れられるのが最大の利点。
写真や図を多用して、閲覧者への理解を深める事ができる。
ここでは＜ｉｍｇ＞タグを使ってみる。
＜ｉｍｇ＞タグを使ったプログラム例

表を表示させる

CSSの使い方の説明

上述のプログラム例を見ると、全てが左に寄って、所々右に伸びて
あまり見栄えは良くない。それを少し良くするために使うのがCSSという
プログラムで、HTMLとは全く異なるもの。でも同一ファイルの中に書く。

ここではなるべく一読だけで、すぐCSSを書けるように説明する。
理解優先で説明するので定義や用語、細かい設定などは割愛している。
＜ｈｔｍｌ＞を手書きで記述できる人向けに説明にしている。

ここでCSSを理解できれば、詳細や応用もどんどん理解してゆけるはず。
CSSはWebページの「見栄え」を良くするためだけに利用されるもの。
個人でページを自作する人にはそれほど利用価値はない。
見栄えが必要なのは企業だ。見栄えに手間暇をかけたページほど中身がないものだ。

（注意）
HTMLやCSSを書いて自分のパソコンでその仕上がりを見るのはいい。
でも多くの人のパソコンで同じように表示される保証はない。先端仕様のプログラム
を駆使してもそれほど意味がないので、あまり複雑なものではなく、オーソドックスな
命令だけを使ってプログラムしたいものだ。

CSSの多数のプロパティやその個々の詳しい内容は他のCSS解説ページを参照するように。

CSSとHTMLの関係

CSSはHTMLのタグごとに表示スタイルを設定する為のもの。
例えば＜ｐ＞タグの箇所の文字の色を赤にする命令とかを記述する。
１つのCSS命令でどのHTMLタグにそれを作用させるか、を設定する。
CSS命令はHTMLファイルの中に一緒に書き込む。（別ファイルにする方法もある）

CSSの各部の名称

説明全体で使うので、まずは「セレクタ」、「プロパティ」という２つの名称だけ覚える。

「セレクタ」は｛　の前に書く名前のようなもの。これで装飾するHTMLタグを指定する。
その後ろに中カッコ｛　｝で「プロパティ」を囲む構成。
「プロパティ」は：の後に値を書き、最後に；で終わる。
｛　｝内に複数のプロパティを列記する。プロパティで装飾する内容を記述する。
例えば文字色はＸＸ、文字のスタイルはＹＹという風に複数行が並ぶ形。詳細後述

各部の意味

例えばhtmlの記述中に
＜ｐ＞日本の国土、国民はすばらしい＜／ｐ＞　　
という＜ｐ＞タグで挟んだフレーズがあり、その見栄えを良くするのに、
　
　
ｐ＃ｘｙｚ｛
　　　　ｃｏｌｏｒ：＃１２３４５６；
　　　　ｆｏｎｔ－ｗｅｉｇｈｔ：ｂｏｌｄ；
｝
　
　

というCSSを書く。
セレクタの「ｐ」は＜ｐ＞タグを差す。「＃ｘｙｚ」は任意で付ける名前。
＜ｐ＞タグの内ｘｙｚという名前がついた物を装飾する。
（例えば＜ｐ　ｉｄ＝”ｘｙｚ”＞日本の国土＜／ｐ＞という部分）
この名前とタグ名でCSSを適用させる部分を決定する。
上述のCSSは＜ｐ＞タグの中にｉｄ＝”ｘｙｚ”が付いた箇所だけに作用し、
他の＜ｐ＞タグには影響しない。

＜ｈｔｍｌ＞の方では、このCSSを受けるために＜ｐ　ｉｄ＝”ｘｙｚ”＞と書く。
するとそのタグに挟まれた部分だけ文字色が＃１２３４５６になり、フォントが太文字になる。
（色の指定は１６進数６ケタで表現する。例えば＃ｆｆ２３ａｂとか）

というように、CSSセレクタと＜ｐ＞タグを対にして構成する。
このCSSのセレクタ「ｐ＃ｘｙｚ」は＜ｐ＞タグ内に
「ｉｄ＝”ｘｙｚ”」が付いているものだけに作用する。

「＃ｘｙｚ」と「ｉｄ＝”ｘｙｚ”」が対になっているのと同じように
「．ｘｙｚ」と「ｃｌａｓｓ＝”ｘｙｚ”」も対で使う。.とclassになっただけ。
機能的には同じ。例えば・・・
　
ｐ．ｘｙｚ｛
　　　　ｃｏｌｏｒ：＃１２３４５６；
　　　　ｆｏｎｔ－ｗｅｉｇｈｔ：ｂｏｌｄ；
｝
－－－－－－－－－－－－－－－－－－
＜ｐ　ｃｌａｓｓ＝”ｘｙｚ”＞日本の国土、国民はすばらしい＜／ｐ＞
　
　
CSSの命令は　＜ｈｅａｄ＞・・・＜／ｈｅａｄ＞の領域の中に、
＜ｓｔｙｌｅ＞・・・＜／ｓｔｙｌｅ＞の領域を作り、その間に記述する。
別ファイルとして読み込む方法もある。
ここまでのソースコードと表示結果

上のソースコードはテキストなのでそのままコピー＆ペーストで使える。
色々自分で手を加えて実験すればいい。
ファイル保存はもちろん「.html」で、文字コードは「UTF-8」を意識的に指定するように。
ソースコード中の＜ｍｅｔａ　ｃｈａｒｓｅｔ＝”ＵＴＦ－８”＞とか、
＜ｓｔｙｌｅ　ｔｙｐｅ＝”ｔｅｘｔ／ｃｓｓ”＞　の定文は何となく分かるでしょ。
おまじないを含めた本チャンのソースコード

写真と文章

自分は写真に文章を入れた構成を多用するので、そのCSSを記述・説明する。

上のように写真の横に文章を入れる構成にするために次のCSSを書いた。

ｉｍｇ．ｆｌ｛　
　　　　ｆｌｏａｔ：ｌｅｆｔ；
　　　　ｐａｄｄｉｎｇ：８ｐｘ；　
｝　

セレクタ「ｉｍｇ．ｆｌ」は＜ｉｍｇ＞タグのｃｌａｓｓ＝”ｆｌ”に適用させるもの。
プロパティの「ｆｌｏａｔ：ｌｅｆｔ；」は画像を左に寄せて右側に文章を流れ込ませるもの。
プロパティの「ｐａｄｄｉｎｇ：８ｐｘ；」は＜ｉｍｇ＞タグで指定する画像の周囲に８ピクセル分の余白を入れるもの。

このセレクタにはタグを指定する部分がなく「．ｃｌ」だけ。
ｃｌａｓｓの部分だけ記しているので、色んなタグで利用できる。
このCSSは上述の「ｆｌｏａｔ」で設定した流し込む機能を解除するためのもの。
これによる解除を行わないと、続く文章も写真の右側に入ってしまう。

＜ｈｔｍｌ＞側でこのCSSを利用するには
＜ｉｍｇ　ｃｌａｓｓ＝”ｆｌ”　ｓｒｃ＝・・・・＞　といれると、
写真は左に寄り右に文章が流れ込む。
流れ込み文章のあとの＜ｐ＞タグに＜ｐ　ｃｌａｓｓ＝”ｃｌ”＞　を入れると
それ以降の文章は流れ込まなくなる。
または流れ込み文章の一番最後の改行タグで
＜ｂｒ　ｃｌａｓｓ＝”ｃｌ”＞としても良い。

Boxのこと

CSSでboxという言葉（扱い）があるが、htmlタグではboxなどという物は何も存在しない。
つまりboxの概念はあるが実体は何も無い。CSSのプロパティで width:300px height:400px と範囲などを設定するだけで、boxの扱いになる。 boxというプロパティなどもない。
width や height という範囲で囲んだ所が box になる。width, heightどちらか１つでもboxになる。そうして指定した範囲（つまり box ）に色々プロパティで指定できる。

この「Ｂｏｘのこと」という章では、上の説明文章は横に長く伸びている。CSSでwidthを指定していないから（つまりboxを設定していない）。下の紫の文字の部分はboxを設定した例になる。

box単位で囲み線を入れたり、背景色を指定したり、boxを表示する位置を指定したりできる。

この部分にboxを設定している。ソースコードでは長々と文章を書いているがboxで囲まれているため、色んな形や色や文字設定になっている。
boxの設定は色々おかしな現象になる。入れ子にしたり重なるような設定にすると何がなんだか分からない状態になるので、かなり慣れるまではシンプルな形態で利用するのがいいだろう。またWebページを見る人のブラウザがどこまで対応しているとかによって、表示形態が変になったりしかねない（アクセスビリティ）。

この部分もにboxを設定している。文字の色、背景色、囲み線を設定した例。
こういう装飾に時間をかけるよりは、文章の表現や写真に注力した方がいい。筆者も偉そうな事は言えないが、できるだけ読み手に分かりやすいように表現や構成を考察し、時間を置いてまた読み返して、分かり難い表現などは何度も修正している。それでも完全ではない。

boxの設定には色んなプロパティがある。他のサイトを参照。
boxを設定したソースコードは下でみて。
ソースコードを参考に、色んなプロパティでどんな表示になるか実験してみるといい。

しかしページの閲覧者が自分と同じプラウザを使っているとは限らない。
boxの設定によっては変に重なったりするかも知れない。

こんな物を多用するよりは伝えたい内容の充実に時間を割きたいものだ。

HTMLの書き方の一番最後のページ「表を表示させる」の所をCSSを使って修飾すると
こんな感じ。元々は横にだらーっと長くのびる物をBoxモデルでこじんまりにした。

ホームページの自作(HTML CSSの書き方)