カフェのトップページを作ろう！
こんにちは！ ちばにしです
今日はWEB製作の楽しさを伝えるために、一緒に架空のカフェのトップページを作っていきたいと思います。
本当に簡単なつくりにしていますので、どうぞ小学生くらいのお子さんとご一緒にチャレンジしてみてください。
WEB製作をする上で必ず勉強が必要になるHTMLとCSSという言語は、少しプログラミングに似ています。
2020年から始まる予定のプログラミング教育では「順序立てて考えて、試行錯誤して、ものごとを解決する力を育てる」というのが目的となっていますので、
同じようにコーディング（プログラム言語を用いた記述・打ち込み）を行うHTMLとCSSはその練習になると思います。
サーバーを用意する必要も無く、PCとその中にメモ帳さえあればOKなので、小学生くらいのお子さんにもオススメですよ！
さて、前置きはこの辺にして、さっそく取り掛かっていきたいと思います！
準備が必要なもの
-
- PC
- メモ帳
以上です！
作業時間は１時間ほどとなっております。
まずは必要な文章を書いていきます
メモ帳を開き、まずは以下のテキスト郡をコピーアンドペーストしてください。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>無題ドキュメント</title>
<style>
<!-- ここに、デザインをきめるCSSが入ります-->
</style>
</head>
<body>
ここに、ページの本文がはいります。
</body>
</html>
今回はお試しのコーディングなので、難しい話は省きますが、簡単に説明いたしますとこれらのテキスト郡はブラウザにWebページを認識させるために必要なものです。
難しく考えず、最初は毎回コピペして使用してよいと思います。
今回大切なのは日本語で書かれている部分です。ここをこれから編集していきます。
タイトルや説明文などをオリジナルに書き換えよう
<title>無題ドキュメント</title>となっているところを、お好きなカフェの名前に変更してください。
これはブラウザのタブに表示されるサイト名になります。
次に本文の編集にとりかかります。
以下の例文を、
ChibaNishi CAFEがオープンします
バリスタが丁寧に淹れたエスプレッソをぜひお楽しみください
HOME
ABOUT
MENU
ACCESS
BLOG
<body>
ここに、ページの本文がはいります。
</body>の「ここに、ページの本文がはいります。」のところにコピーアンドペーストしてください。
「ChibaNishi CAFE」という部分はご自分の好きな名前に変えてくださいね。
ココで一旦ファイルに名前をつけて保存
ここで注意です！
テキストファイル（～～.txt）ではなく、HTMLファイル(～～.html)として保存します。
やり方は以下になります。
まず左上にあるファイル(F)というテキストを左クリックします。
出てきたタブの中から「名前をつけて保存」を選びます。
ファイル名を「cafe.html」と拡張子までつけてください
その上で、下のほうにある「文字コード」という文字の右隣にあるタブを開き、UTF-8という形式を選択した状態でデスクトップに保存をしてください。
すると、デスクトップにcafe.htmlというファイルが出てくると思うので、ダブルクリックして開いてみてください。
デフォルトのブラウザに指定されているグーグルクロームやエッジなどのブラウザで開かれると思います。
状態を確認すると･････
ん？ ちゃんと改行したのに、一直線に文字がつながって表示されていて読みにくいなあ
と、感じてしまったと思います。
はい、実は、テキスト編集ソフトでいくら改行しても、ブラウザには認識されないのです。
ブラウザにきちんとテキストや改行、デザインを認識してもらうために、次回はHTMLとCSSでコーディングしていきたいと思います。
ひとまず今回はここまで！
次の記事につづきます♪
著者：ちばにし
[:]
