初心者が最初に学ぶホームページ作りの基本ガイド | Webクラブ

ホームページ作りのイメージ図

ホームページって何?

自分

どーも、K君です。
早速ですが今日は、ホームページ作りの第一歩を一緒に学びましょう!

Webサイト(ホームページ)とは、インターネット上にある「お店」や「本」のようなものです。

例えば...

本屋さんに行くと、本が並んでいますよね。その本には「文字」「写真」「絵」が載っています。ホームページも同じです。インターネット上に「文字」「写真」「ボタン」などを並べて、みんなに見てもらうものなのです。

ポイント

ホームページは難しそうに見えますが、実は「文字と画像を並べる」というシンプルな作業の積み重ねなんです。だから、誰でも作れるようになります!

ホームページの3つの材料

ホームページを作るには、3つの「材料」が必要です。これを「家を建てる」ことに例えて説明しますね。

材料1:HTML(エイチティーエムエル)

これは「家の骨組み」です。
「ここに文字を置く」「ここに写真を置く」「ここにボタンを置く」という指示を書きます。HTMLがないと、何も表示されません。

材料2:CSS(シーエスエス)

これは「家の装飾」です。
「文字を赤くする」「背景を青にする」「ボタンを丸くする」など、見た目をキレイにする指示を書きます。

材料3:JavaScript(ジャバスクリプト)

これは「家の機能」です。
「ボタンを押したら写真が変わる」「メニューが開く」など、動きをつける指示を書きます。

家で例えると

HTML = 柱や壁(骨組み)
CSS = ペンキや壁紙(装飾)
JavaScript = 電気やドア(動く仕組み)

一番最初に学ぶべきこと

答え:まずは「HTML」から学びましょう!

なぜなら、HTMLが「すべての土台」だからです。
家を建てるとき、最初にやることは「骨組みを作る」ことですよね。いきなりペンキを塗ったり、電気を付けたりはできません。

ホームページも同じです。HTMLで「文字」や「画像」を配置できるようになってから、CSSで見た目をキレイにしたり、JavaScriptで動きをつけたりします。

HTMLから始めよう

HTMLを詳しく説明すると

HTML(エイチティーエムエル)は 「HyperText Markup Language」の略で、Webページを作るためのマークアップ言語です。インターネットで見るほぼすべてのWebページは、HTMLで作られています。

ちなみに、マークアップ言語とは 文書に「印(マーク)」をつけて、その文書の構造や意味を示すための言語です。文書のどこが見出しで、どこが本文で、どこが重要な部分かなどを「タグ」で印をつけて表します。

「マークアップ」の意味

元々は編集者が原稿用紙に赤ペンで「ここは見出し」「ここは太字」などと書き込んでいたことから来ています。それをコンピュータ上で行うのがマークアップ言語です。

HTMLは「タグ」というものを使って、コンピュータに「これは見出しです」「これは段落です」と教えてあげる言葉です。

例えば

<h1>これは大きな見出し</h1>

<p>これは普通の文章です</p>

この「<h1>」や「<p>」がタグです。タグで囲むことで、「ここは見出し」「ここは文章」とコンピュータに伝えます。

HTMLの基本の書き方

シンプルなHTMLを見てみましょう

HTML

それぞれの意味

<!DOCTYPE html>

これはHTML5で書かれた文書だと宣言する

<html lang="ja">

ここから日本語のホームページが始まるよ

<head>

ページの情報(タイトルなど)を書く場所

<meta charset="UTF-8" />

メタタグで文字コードをUTF-8にする

<body>

実際に表示される内容を書く場所

<h1>

一番大きな見出し

<p>

普通の文章

※ 内容の終わりは、</p>のように閉じましょう

Web開発の現場では、HTML、CSS、JavaScriptをまとめて「ソースコード」略して「ソース」と呼ぶことが多いです。特に「HTMLのソースを見る」という表現はごく普通に使われます。

ただし、プログラミング言語ではなくマークアップ言語という分類になります。

ソースコードを見るにはブラウザ上でマウスの右クリックをすると下図のように、ソースを表示と出てきますので、左クリックで見る事ができます。

ソースコード表示1図 ソースコード表示2図

練習の進め方

ステップ1:メモ帳を開く

パソコンの「メモ帳」や「テキストエディター」で開きます。

ステップ2:HTMLを書いてみる

上で紹介した基本のHTMLをそのまま書いてみましょう。

ステップ3:「.html」で保存する

「test.html」という名前で保存します。必ず最後に「.html」を付けてください。

.html←ドットの所から拡張子(かくちょうし)といいます。が付けれないって人は、拡張子が表示されてない設定になっていると思いますので、「拡張子を表示しよう 」をご覧ください。

ステップ4:ブラウザで開く

保存したファイルをダブルクリックすると、ブラウザ(Chrome、Safari、Edgeなど)で開きます。すると...あなたが書いたホームページが表示されます!

どのくらい練習すればいいの?

まずは1週間、毎日30分HTMLを触ってみましょう。見出しや段落、リンク、画像を配置できるようになれば、基本はOKです!

CSSやJavaScriptはいつ学ぶの?

HTMLで簡単なページが作れるようになってから(2週間〜1ヶ月後)が目安です。焦らず、まずはHTMLをしっかり覚えましょう。

分からないことがあったらどうすればいい?

インターネットで「HTML 初心者」と検索すると、たくさんの解説サイトが出てきます。また、YouTubeにも分かりやすい動画がたくさんあります。

まとめ

ホームページ作りの第一歩は「HTML」です。HTMLは家の骨組みのようなもので、これがないと何も始まりません。まずはメモ帳でHTMLを書いて、ブラウザで開いてみましょう。最初は簡単なページでOK。少しずつ慣れていけば、どんどん楽しくなっていきますよ!

次の記事では、HTMLでよく使う「タグ」を10個紹介します。これを覚えれば、簡単なホームページはすぐに作れるようになります。

自分

最後まで読んでくれて、ありがとう!
HTMLは難しくないよ。一緒に頑張ろう ('◇')ゞ