こんにちは、川端です。
以前【趣味レベルであれば独学で】
【そうでなければプロへ依頼】
と記載したものの、肝心の『趣味レベルのホームページ作成方法』に一切触れていませんでしたので、今回からはこの件について綴っていきたいと考えております。
※以下方法においての作成経験はWindowsのみとなりますので、macユーザーの方は申し訳ございません。
準備するツールは「テキストエディター」「ブラウザ」「画像編集ソフト」
「テキストエディター」
Windowsに入っている『メモ帳』です。
「ブラウザ」
Internet Explorer、Chrome、Firefox、Safari、Microsoft Edge、Opera
要するに『インターネット使用の際に起動するソフト』の事です。
「画像編集ソフト」
簡単な画像作成であればWindowsに入っている『ペイント』で問題ありませんが、凝った画像を作成したい方はAdobe社の『Photoshop』やフリーソフトの『GIMP』を推奨させていただきます。
ホームページ作成に必要なツールは以上の3点でOKです。
作成を開始する前に
・デスクトップ上に新規フォルダーを作成
・テキストエディター(メモ帳)を開き、以下のコードをコピペ
————————-
コード
————————-
<!DOCTYPE html>
<html lang=”ja”>
<head>
<title>demo</title>
<meta charset=”utf-8″>
<link rel=”stylesheet” href=”style.css” type=”text/css” />
</head>
<body>
<p></p>
</body>
</html>
————————-
ここまで
————————-
・ファイル→名前を付けて保存→ファイル名に【index.html】と入力し、文字コードをUTF-8にして保存
・再度テキストエディター(メモ帳)を開き、今度は何も記載せずにファイル→名前を付けて保存→ファイル名に【style.css】と入力し、文字コードをUTF-8にして保存
・作成した2つのファイルを先程のフォルダーに移動させる
以上で下準備は完了となります。
まずはテキストを打ってみましょう
先程用意したindex.htmlを右クリックしていただき、プログラムから開く→メモ帳の順に進んでいただくと下記画像と同じ画面が開かれると思います。
————————-
コード
————————-
<p></p>
————————-
ここまで
————————-
というタグが確認出来ると思いますので、その内部にお好きな言葉を入力してください。
以下の様な感じです。
————————-
コード
————————-
<p>マークアップ開始！</p>
————————-
ここまで
————————-
入力が終了したらファイル→上書き保存し、index.htmlをブラウザで開いてみましょう。
※index.html上で右クリック→プログラムから開く→ご利用のブラウザ
そうすると先程入力した文字が表示されていると思います。
次項ではこの文字に変化をつけてみます。
文字に色を付けてサイズを大きく
まずはstyle.cssをプログラムから開く→メモ帳で開いてみましょう。
当然ですが真っ白です。
ここに以下のコードをコピペしてみて下さい。
————————-
コード
————————-
p {
color: red;
font-size: 30px;
}
————————-
ここまで
————————-
上記同様にファイル→上書き保存
再度ブラウザを開いて確認していただくと、文字の色が赤く大きくなっている事が確認出来ると思います。
redの部分をblueにすると青になり、30を40にすると文字がより大きくなります。
今回のまとめ
本記事ではHTMLとCSSの関係性を体感していただく事を優先に考えました。
『HTML→丸裸』『CSS→衣服及び装飾品』比喩が下手で申し訳ありません。。。
【CSSでHTMLを変化させる】
これさえ覚えていただいていれば次回からの工程もスムーズに事が運べると考えております。
ご清覧、ありがとうございました。
