じゃなくてWEB制作・・・の始め方。
超初心者でも分かりやすいように1からHTMLCSSの始め方をお教えします。ので、
＼＼ここから、始めましょう。一から・・・いいえ、ゼロから！／／
HTML・CSSとは
HTMLとは、Hyper Text Markup Language といいます。
これはウェブページを開発するために開発された言語です。
よくプログラミング言語と一緒に間違われやすいですが、マークアップ言語と言い、少し違います。
次に、CSSとは、Cascading Style Sheetといいます。
HTMLとセットで使うことが必須と考えて良いでしょう
とまあ、細かいどうでもいい話は置いといて、
初心者でも分かりやすいよう必要なことを学んでいきましょう
これら二つは以下のような役割を持ちます。
HTMLとCSSの違い
HTMLは家でいうと、鉄骨や骨組みの役割をします。
つまり組み立ての構造です。
CSSは家でいう外装、配置や色など、家を煌びやかなものにするための細かな指定をします。
つまり装飾です。
HTMLだけの場合、縦に並ぶ文字しか書けません。
しかしCSSを使用することにより、文字の大きさを変えたり、色を変えたりすることが出来ます。
厳密には違いますが、そう認識して頂いても構いません。
（HTMLには様々な種類のタグが有り、それぞれの役割に沿って画像の挿入や、文字の大きさの違うタグを使用できますが、CSSなしでは成り立ちません。）
テキストエディタ
では、実際にWEBサイト制作の始め方を見ていきましょう。
WEBサイトを制作するにはみなさんご想像しているかもしれませんが、コーディングしなければなりません
真っ黒な画面に英数字をカタカタする感じのやつです。
テキストエディタというソフトウェアに文字を書いていきます。
そのテキストエディタを先ずはインストールしましょう。
みなさんよく使うメモ帳もテキストエディタの一つですが、あくまでメモする用のアプリ・ソフトなので使いにくいです。
ので、WEB制作向きのテキストエディタをインストールします。
無料のもので十分です。
私はBracketsというものを使用しており、とても使いやすいのでこれをおすすめします。
ではインストール方法です。
がBracketsのホームページになります。
こちらからインストールください。
(URLか画像のクリックで開きます)
他にも様々な無料テキストエディタがありますので、お好きなものをお使いください。
テキストエディタによってWEB制作方法が大きく異なる事はございません。
HTML ・CSSの書き方も変わりません。
コーディング
では、Bracketsをインストールできたら実際にコーディングしていきます。
左上のファイル→新規作成から、新規テキストを開きます。
以上の画像を参照ください
こちらをカタカタと打ち込んでいきましょう。
こちらがコーディングを始める前に必要な要素になります。これは前提条件のようなものです。
HTMLタグの中にHEADタグとBODYタグがあります。
HEADタグには文書を書くにあたっての条件のようなルールのようなものを書きます。
HEADタグの中に書かなければいけないものを説明していきます。
＜!DOCTYPE html＞
1行目に必ず必要です。（最近はなくてもいいとか賛否両論です）書いておきましょう。
これは「今からHTMLを書き始めますよ」という宣言になります。
最初の「！」を忘れないよう気をつけてください。
＜html＞
HTMLの始まりの印です。
＜html＞？？？＜/html＞
この？？？の中に内容を記していきます。
＜head＞
＜html＞タグの中に＜head＞を入れます。
この中に記すことはWEBページには表示されません。
表示されないようなWEBページに関するルールや決まり、詳細を書いていきます。
その内容は以下です。
＜meta charset=”utf-8″＞
覚えなくても良いけど、一応説明はしておきます。
メタというのはメタ情報といい、ちょっと難しいのでというか何というか（理解していません、はい。なのに記事なんか書いてすいません）
メタっていうくくりがあって、タイトルとか記事の概要とかそういう情報をメタ情報ってくくっています。
その中でもcharsetはutf-8です。という表記です。
これは何かといいますと、コンピューター言語って言うのが存在しまして、プログラミング言語とは違います。
例えば、パソコンに「１」でも「あ」でも「A」でも良いんですけど、打つとこれをコンピューター言語ではそのまま文字として読み取らず、「０１」とか「０１００１」とか数字の羅列で認識します。
これがコンピューター言語です。コンピュータ言語にもいろいろあってそれが「utf-8」ですよーっていう指定です。
＜link rel=”stylesheet” href=“???.css”＞
これは冒頭で説明したCSSに関する記述です。
HTMLに対してCSSでアレンジしていくわけですが、HTML内にCSSを記述することも可能なんですが、大変見にくいし、その１HTMLにのみ反映されるCSSになり、他のHTMLに共通して使い回すことが出来ません
それを解決するために、CSSは別ファイルに書きましょう。v
別ファイルとリンクさせるので「link」「rel=stylesheet」は関係性はスタイルシートです。という記述。「href=???.css」は、???.cssと関連付けますよ。という意味。？？？の部分はCSSのファイル名に応じて変更してください。拡張子は.cssです。
＜title＞???＜/title＞
これでタイトルを記述します。
WEBサイトには必ずタイトルがあります。無ければ何に関する記事なのか中身を見るまで分かりません。題名みたいなものですね。
？？？の部分にタイトル名を書いてください。
＜meta name=“description” content=“???”＞
はい、またメタ情報ですね。今回はdescription説明です。
そしてその説明文をcontent=???のなかに説明文を入れます。SEO対策としてキーワードをしっかり入れましょう。
＜/head＞＜body＞
以上でheadが終了です。
で、改行した後にbodyを始めましょう。
このbody内が実際のコーディングになるのでつ次の記事でしっかり見ていきましょう。
