P.2では実際にHTMLファイルとCSSファイルを作ってみましょう。
まずは、windowsでメモ帳を開いてください。
スタートボタン→検索［ メモ帳 ］か、スタート→全てのプログラム→アクセサリー→メモ帳にあるはずです。
Macの方はすみません。テキストエディットというものを標準テキストに設定し、取り組んでみてください。
以降はwindows環境での説明になります。
メモ帳でHTMLとCSSのファイルを作ってみよう
メモ帳を開いたら、以下の記述をコピペしてください。
<!DOCTYPE html> <html> <head> <title></title> </head> <body> これはテストです。 </body> </html>
コピペしたら、「名前をつけて保存」
保存場所はわかりやすいように「デスクトップ」に、ファイル名は「index.html」としておいてください。
※ここで注意！！※
ファイルの種類を「すべてのファイル」に変更するのを忘れずに・・・
すると、「すべてのファイルの種類で・・・拡張子が.htmlだから・・・」とパソコンが勝手にブラウザ表示にしてくれます。
なので、下の写真のように既定のブラウザに設定しているブラウザのアイコンになります。
私の場合はGoogleChromeになっていますが、Internet ExprolerやFirefoxなど見慣れたブラウザのアイコンになるはずです。
では、試しにindexを開いてみましょう！
ちゃんとブラウザで表示できるようになったことがわかりますよね！
私は当時、これだけでちょっとテンションがあがりました（笑）
CSSの場合も同じ要領で作りますが、CSSのファイル名は「style.css」としておいてください。
CSSのアイコンはメモ帳のままだと思います。
あとは「imgフォルダ（サイト内で使う画像をいれるフォルダ）」を作り、もう一つお好きな名前をつけた空のフォルダを作ります。
ここでは「testフォルダ」としましたが、そちらに「index.html」「style.css」「imgフォルダ」を入れましょう！
これが一番シンプルなHTML、CSSファイルを作る方法になります。
でもやっぱり、テキストエディターが便利
このままメモ帳で作成できなくはないのですが、色んな利便性を考慮してもテキストエディターの操作を覚えた方が良いです。
おすすめは「Sublime Text」。
インストールして操作を覚えてパッケージをインストールしたり、初めは大変ですが1日あれば大丈夫だと思います。
こちらの記事に詳しい情報を載せていますので、確認してからまた戻ってきてくださいね。
※この記事ではSublime Text2を使用しています。
http://nor-asu.work/design/wordpress-website-2
・・・・・。
インストールやパッケージはうまくいきましたか？
閉じタグがどこにあるかわかったり、ハイライトで色を自動で変えてくれたり、初心者の方に優しい機能がたくさんなので、ぜひ使いこなしてください！
では、さっそくSublime Textで開いてみましょう！
「index.html」と「style.css」に対して右クリックをし、プログラムから開くで「Sublime Text」を選択しましょう。
２つを開くとこんな感じになると思います。
このままでは見にくいので、表示→画面分割→2列としてドラッグ＆ドロップで見やすくします。（個人的意見なのでしなくても良いです）
index.htmlにstyle.cssを関連付けさせる
今のままのHTML記述では、「style.css」のCSSファイルが関連付けされていません。
そこで、P.1で書いていた通り、<head></head>内に関連付ける記述をしていきます。
見られてない方は先にP.1をご覧ください。
関連付けに必要な記述はこちらでしたね！
<link rel="stylesheet" href="./style.css" type="text/css" /> /* HTML5ではtypeを省略可能 */ <link rel="stylesheet" href="./style.css" />
DOCTYPE宣言はHTML5にしているので、typeを省略して記述します。
<!DOCTYPE html> <html> <head> <title></title> <link rel="stylesheet" href="./style.css" /> </head> <body> これはテストです。 </body> </html>
P.1の手順から、「index.html」と「style.css」は同じフォルダに入っているはずです。
ここで必要な知識は「階層」と「絶対パス・相対パス」を理解すること。
階層とは、「フォルダ」の中に「フォルダ」が入ることにより、データに深さができることを表します。
先ほど行った作業では、「testフォルダ」の下の階層に「imgフォルダ」「index.htmlファイル」「style.cssファイル」がありますよね。
「index.html」と「style.css」は同じ階層にあるので、記述は
<link rel="stylesheet" href="./style.css" />
でOKです。
./style.css の「./」は関連付けるhtmlの同じ階層にありますよ。という意味。
なので、htmlファイルが1階層上にあるなら「../」、2階層上なら「../../」となります。
このように、関連付けたいファイルをスタート地点として、階層の場所を指定するのが「相対パス」です。
逆に、「絶対パス」は最上層からのスタートになるので、深ければ深いほど記述が長くなります。
「http://ドメイン名/フォルダ名/ファイル名」 という記述をし、style.cssの場所を指定します。
それでは、P.3で実際にサイトを作っていきましょう。