＊勉強中の為、間違った解釈を説明すると思いますので、ご指摘コメントもお待ちしておいります。
ホームページを作りたい-どうやってつくるの？
まずはじめにホームページとはインターネット上で見れる情報のことです。
会社案内だったり居酒屋の紹介だったりグーグルなどの検索するものだったりと色々です。
当ブログでは最初から難しいことをやろうとしてしまうと、あきらめてしまうのでゆっくりと簡単に説明しながら最終的にホームページが自分の手で作成できるように説明していきます。やはりかっこいいものやシステムが組まれているものなどはプロの制作会社に頼んだほうが金額も安く、手間もかからず便利ですが、自分のブログを少しいじったりできたらかっこいいと思うのでそこを目指して頑張りましょう。
1.どうやってできているの？？
ホームページは「ＨＴＭＬ」という言葉で記述していきます。皆さんも一度は聞いたことがあると思います。しかしＨＴＭＬにはバージョン・種類がいくつもあります。
ＨＴＭＬ4.0やＨＴＭＬ5.0・ＸＨＴＭＬ1.0など様々です。このブログではＸＨＴＭＬ1.0で説明をしていきます。
簡単に何が違うかというと書き方が少し違ってきます。日本語でいうと福岡の人のしゃべり方と広島の人のしゃべり方が違うようなものです。○○たい！○○じゃけぇ！のように同じ日本語ですが少し違う程度のものです。大きな違いはなく今は気にする必要はないでしょう。
次に重要になってくるのが「ＣＳＳ」です。ＣＳＳとは例えると指示書のようなものです。より美しくよりきれいに見せるためにＨＴＭＬにああしなさいこうしなさいと指示をだすイメージです。色をつけたり、大きさ余白を調整したりするものです。
そのほかにもホームページ作成に欠かせない「JAVASCRIPT」や「ＦＬＡＳＨ」や「ＰＨＰ」などたくさんありますが、この３つはまたの機会にいたします。これらは少し難しく、ホームページをより一層かっこよく見せるためのものだったりします。
なのでまずはＨＴＭＬとＣＳＳを学習して基本をしっかりマスターしたのち次のステップに進みましょう。
2.ＨＴＭＬとは
簡単に説明するとＨＴＭＬとはタグの固まりで構成されています。タグとは意味をもった箱みたいなものです。
このブログではタグは箱のようなものとして説明していきます。タグ＝箱。
まだよく意味が分からないかもしれませんがタグとはそれぞれに意味を持っている箱です。基本的にタグとは開始タグと閉じタグで構成されています。
例をここで上げてみます
上記の写真を見てもらうと先ほど説明した、開始タグと閉じタグで構成されているのがわかると思います。内容は開始タグと閉じタグの間に書いていきます。上記の写真を簡単に説明すると「HTMLのタグを勉強中」は段落でできている、ということになります。
タグは<>の中に書かれます。閉じタグは</>のようにスラッシュが入ります。
まとめると
<タグの名前>ここに内容</タグの名前>
となります。
ＨＴＭＬ（タグ）を書くのは拡張子が.htmlのファイルに書かなければなりません。作成方法はデスクトップにテキストドキュメント（メモ帳）を作成し、拡張子が.txtになっていると思うので.htmlに変更するだけで完了です。拡張子に関してはググッてください。
拡張子変更後ダブルクリックするとブラウザ（インターネット）が立ち上がるので変更する場合はメモ帳（Notepade）で開き編集しましょう。
タグの種類はいくつあるかわかりませんが、大量にあるためよく使うものだけを次回投稿したします。閉じタグを必要としないものなどもありますのでゆっくり覚えていきましょう。
3.CSSとは
CSSとは先ほど書いたように指示書のようなものです。色を付けたりレイアウトしたりするのはこのCSSで命令していきます。ＨＴＭＬで内容を書き込みＣＳＳでレイアウトを整えるというかたちです。
CSSを書く場所はＨＴＭＬの中の<head></head>の中に書く方法とタグに直接書く方法と別のファイル（拡張子が.cssのファイル）に書く方法があります。当ブログでは別のファイルに書く方法で説明していきます。
.cssファイルを作成する方法は.htmlファイルと同じ方法で作成できます。
.htmlのファイルと.cssのファイルを関連づける方法はまた投稿します。
ではCSSの書き方を説明します。
セレクタ｛
プロパティ:値;
｝
セレクタとは指示をする対象物(何に指示をだすか)です。プロパティには何をするかを書きます。横幅を変更したいのか背景を変更したいのか文字の色を変更したいのかを書きます。値にはどうするかを書きます。基本数字ですが文字が入ることもあります。
例を書きます。
先ほどタグの説明時の写真はpのタグで囲まれた段落です。この段落の背景を赤色に指示する場合は下記のように書きます。
p｛
background:#FF0000;
｝
言葉で書くと
このホームページに使われているpタグの{
背景を : 赤にしてね ;
}
の感じです。backgroundが背景のプロパティで#FF0000はRGBの各色をそれぞれ6段階に分けて１６進数で記述したものです。見えにくいですがプロパティの後は：（コロン）値の後は；セミコロンです。
ここではよく使うセレクタの指定方法だけ説明します。プロパティについては今度投稿します。セレクタの指定方法は大きく分けて３つあります。メリット・デメリットを説明していきます。
上記の場合はセレクタにタグを指定した方法でこれが一つ目です。タグの場合だと複数pがある場合すべて背景が赤になってしまいます。すべて背景を赤にしたい場合は便利ですが一つのpだけ背景を赤にすることはできません。
２つ目はID（アイディー）で指定する方法です。ＩＤとはタグに個別にＩＤ（名前的なもの）を付けることができます。タグにＩＤをつけることによって個別に指示を出すことができるようになります。
ＩＤのつけ方は
です。
ではセレクタにＩＤを入れて指示を書きます。
#mario｛
background:#FF0000;
｝
言葉で書くと
このホームページに使われているID名marioの{
背景を : 赤にしてね ;
}
という感じです。ＩＤで書く場合はＩＤ名の前に＃（シャープ）を書きます。
3つ目はclass(クラス)で指定する方法です。classとはタグに個別にclass（名前的なもの）を付けることができます。タグにclassをつけることによって個別に指示を出すことができるようになります。IDとの違いはＩＤは一つのページに一つのＩＤ名しか使えませんがclassは複数使うことができます。
こう聞くとclassのほうがすぐれているような感じがしますが、１つのページに１つしかないものに対して指示を出す場合はidで名前を付けておいたほうがわかりやすく便利です。
クラスの指定方法はidがclassに代わるだけです。
ではセレクタにclassを入れて指示を書きます。
.design｛
background:#FF0000;
｝
言葉で書くと
このホームページに使われているclass名designの{
背景を : 赤にしてね ;
}
という感じです。classで書く場合はclass名の前に.（ドット）を書きます。
以上がセレクタの代表的な３種類です。そのほかにもグループセレクタや子孫セレクタ・組み合わせで様々なセレクタタイプがありますが、それは後日投稿します。
4.HTML・CSSを書くときの注意点
HTMLとCSSについて簡単に説明いたしましたが、ホームページを作成するにあたっての注意事項をここで説明します。
それは必ず記号を除いた半角英数字で書くことです。使える記号はいくつかありますが当ブログでは半角英数字と記号は_(アンダーバー)しか使用しません。これは使えるけどこれは使えませんなどで頭を使わないためです。しかし文字の先頭には数字や_（アンダーバー）は使えません。
まとめるとホームページ作成にかかわるフォルダ名、ファイル名、画像の名前、id名、class名すべて半角英数字で書き、文字の先頭は数字や_（アンダーバー）は使わないようするということです。
日本語や大文字の英語は本文の内容以外に使わないように気を付けましょう。
コメントを残す