くくりさん
レンタルサーバー「くくり」のキャラクター。（本当は、とあるホスティングサービスの中の人）お仕事用のWebサイトやメールアドレスを初めて作る方向けに、役に立つ情報を発信します！
ホームページのソースを見ると、ちょっとした専門知識があれば「このキレイな色使いはどんなふうにしているのか？」「このわかりやすいレイアウトはどうやって作られているのか？」ということがわかり、自分で再現することができます。 今回は、ホームページのソースの見方からホームページを一から作る方法をイメージできるように簡単にお話しますね。
ホームページのソースとは？
普段何気なく見ているホームページなどのウェブページは、HTMLやCSSというマークアップ言語からできています。
これらの言語で書かれたファイルのことを「ソースファイル」と呼び、例えばHTMLで書かれたファイルを「HTMLソース」といいます。
「マークアップ言語？」
「ソース？」
いきなりそういわれても何のことやらという方は、一度自分が好きなホームページのソースを見てみるといいでしょう。
実は、Internet ExplorerやChromeなどのブラウザからいろんなホームページのソースをめちゃ簡単にみることができます。
初心者でもわかるソースの見方
ホームページのソースを表示する方法は2つあります。
①ブラウザの「表示 → ソース」を選択
②画面の好きな場所で右クリック「ソースの表示」を選択
たったそれだけでHTMLのソースコードがメモ帳に表示されます。
HTMLやCSSなどのマークアップ言語に関する専門知識がないと、何が書いてあるのかさっぱりですよね。 今はそれでいいですよ。 ホームページはこのようにソースに書かれているHTMLとCSSというマークアップ言語からできています。 HTMLとCSSには、それぞれ役割があります。 例えば、ホームページの各箇所に「ここが見出しですよ、そこは段落ですよ、画像ですよ」とHTMLで位置づけし、「この見出しは太字の赤で、そこの段落の背景はグリーンで、画像の大きさは・・・」とCSSで見栄え良くします。 HTMLやCSSを簡単に「家作り」に例えると HTMLは、ホームページの骨組み（外装）を作ります。 CSSは、ホームページの装飾（内装）を作ります。 「このホームページのデザインってカッコいい！これってどうやってするんだろう？」 そんなとき少しでもHTMLやCSSなどのマークアップ言語の専門知識があると、そのホームページのソースをみて、カッコいいデザインを再現できるのでとても便利です。 少しずついろんなホームページのソースをみて、見慣れるようにしていくといいでしょう。 ただし、他社のホームページを真似て、同じようなホームページを作り、ネット上にアップしてしまっては著作権の問題になります。 十分注意が必要です。 ホームページのソースって初心者でも書けるのでしょうか？ ちょっとHTMLを使って体験してみましょう。 今回はホームページの作り方のイメージを持ってもらうために、簡単なHTMLソースを実際に書いてみて、ブラウザ上でどのように映し出されるかみていきますね。 それでは、無料で使えるCrescent Eve（クレセントイブ）というテキストエディタを使ってHTMLソースを書いていきます。 ①Crescent Eveをダウンロードし、新規テキストを開きます。 ②Crescent Eveの入力補助機能を利用するため、何も入力せずに一度「名前を付けて保存」します。 Crescent Eveというテキストエディタは、始めにHTMLファイルで保存すると、HTMLを書くのに必要なタグなどが勝手に選択されるので便利です。 ③ファイル名「HTMLソースサンプル」、ファイルの種類「HTMLファイル」にして保存します。 ファイル名は分かりやすい名前であれば何でもOKです。 ④保存した「HTMLソースサンプル」で入力していきます。 ⑤1行目に半角記号「<」を入力するとDOCTYPE宣言に関する <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”> が入力補助で出てきます。 ⑥「Enter」キーを押すと<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”>が確定します。 このHTMLはこのドキュメントタイプで作られていますと宣言するものです。 このテキストエディタはHTML4.01を使ってます。 ⑦2行目に半角記号「<」を入力すると<html>というタグが出てきます。 ⑧3行目にカーソルを置き「Ctrl」+「Enter」キーを押すと</html>というタグが出てきます。 <html></html>は開始タグと終了タグとしてセットになっており、他のタグや文字列はその間に書きます。 ⑨<html></html>の開始タグと終了タグの間に他のタグや文字列を入力するため、数行空けておきます。 改行はブラウザに反映されません。見やすさのためなので空けても空けなくてもOK！ ⑩4行目にカーソルを置き「<」を入力すると関連するタグが「a～」からドリルダウンで見れるので必要なタグを選択します。 ⑪<html></html>の間に<head></head> を入力、次に<body></body>と入力します。 <head>はファイル自身の情報を示す部分 <body>はブラウザ上で実際に表示される部分 <head></head>の間に<title></title> <body></body>の間に <h1></h1>と<p></p>を文字列と一緒に入力します。 ⑫「HTMLプレビューを表示/更新(P)」を選択します。 ⑬実際にブラウザ上に表示される文章がプレビューされます。 ⑭実際にブラウザでも表示されるか確認します。 「ブラウザでプレビュー」で「InternetExplorer」を選択します。 ⑮「InternetExplorer」のタブに「HTMLソースの書き方」 ブラウザ上に見出し「ホームページのHTMLソースの書き方」 段落「ホームページを一から作ろう」が表示されます。 いかがでしたか？ 実際にブラウザ上に表示されると何だか嬉しいですね。 最終的には保存してどのブラウザでも表示されるか確認しましょう。 この時点では、ホームページをネット上で公開していませんので、いろいろ試してみるのも面白いですし、勉強にもなりますよ。 ホームページを一から作るということは、まずはHTMLとCSSを使えるようにならなくてはならないのですが、先ほどのHTMLソースの書き方でもわかるように、HTMLやCSSというマークアップ言語の専門知識がないと大変です。 今回は、ホームページを一から作る方法の簡単な考え方でイメージするだけにしましょう。 はじめに、自分が作りたいホームページのレイアウトを書いてみます。 次に「ブロック分け」し、「HTMLの構文に置き換え」し、「CSSでスタイルを定義」します。 家づくりに置き換えてみると「自分の作りたい家のデザイン画」を描きます。 「家の設計図」でブロック分けし、「外装（骨組み）」を作り、「内装（装飾）」でデザインどおりに表現していきます。 【ホームページを一から作る考え方】 ①ホームページをブロック分けする（設計図） ↓ ②HTMLの構文に置きかえる（骨組み） ↓ ③CSSでスタイルを定義する（装飾） イメージを掴めましたか？ 実際にHTMLとCSSのマークアップ言語をつかってホームページのソースを書いていくとなると、初心者には膨大な時間と勉強量が必要です。 そんな方に向けてHTMLやCSSというマークアップ言語などの専門知識があまりなくてもすむ方法があります。 ワードプレスなどのCMS（コンテンツ・マネジメント・システム）でホームページを作る方法です。 CMS（コンテンツ・マネジメント・システム）とは、ウェブサイトを管理・更新できるシステムのことです。 HTMLやCSSというマークアップ言語などの専門知識がなくても、 このシステムに用意された管理画面を使ってテキストや画像を入れ替えるだけでホームページを作成したり更新したりすることができます。 それでもホームページのソースの見方がわかると、ワードプレスの管理画面にない機能を自分で追加できるのでホームページ作成の幅が広がりますよ。 ホームページのソースの見方や書き方などなんとなく掴めてきました。 でも、ホームページを一から作るのって大変なんですね～ 確かにホームページを一から作るのは大変ですが、気に入ったホームページのソースを見るのは勉強になります。 苦手意識を持たずにいろいろ見ておきましょうね。 ホームページのHTMLソースの作り方
ホームページを一から作る簡単な考え方
まとめ
