ホームページのソースの見方。初心者でも簡単にソースが書ける方法

初心者でもわかる!

 

くくり
こんにちは。難しいウェブの世界をやさしく楽しくお話しする「くくり」です。



女性起業家
こんにちは。くくりさん。

先日、カッコいいデザインのホームページを見つけたのですが、一体どんなふうに作っているのか気になります。



くくり
それはホームページのソースを見てみるといいですよ。

ホームページのソースを見ると、ちょっとした専門知識があれば「このキレイな色使いはどんなふうにしているのか?」このわかりやすいレイアウトはどうやって作られているのか?」ということがわかり、自分で再現することができます。

今回は、ホームページのソースの見方からホームページを一から作る方法をイメージできるように簡単にお話しますね。

 

 

 

ホームページのソースとは?

ページのソース

 

普段何気なく見ているホームページなどのウェブページは、HTMIやCSSなどのプログラム言語からできています。

 

プログラム言語で書かれたファイルのことを「ソースファイル」と呼び、例えばHTMLで書かれたファイルを「HTMLソース」といいます。

 

「プログラム言語?」

「ソース?」

 

いきなりそういわれても何のことやらという方は、一度自分が好きなホームページのソースを見てみるといいでしょう。

 

実は、Internet ExplorerやChromeなどのブラウザからいろんなホームページのソースをめちゃ簡単にみることができます。

 

 

 

初心者でもわかるソースの見方

ソースの見方

 

ホームページのソースを表示する方法は2つあります。

 

①ブラウザの「表示 → ソース」を選択

 

ソースの表示①

 

 


②画面の好きな場所で右クリック「ソースの表示」を選択

 

ソースの表示②

 

 


たったそれだけでHTMLのソースコードがメモ帳に表示されます。

 

ソースの表示③

 

 

くくり
見れましたか?

女性起業家
見れましたが、何やら文字や記号が多すぎて・・・


くくり
そうですね。

HTMLなどのプログラム言語に関する専門知識がないと、何が書いてあるのかさっぱりですよね。

今はそれでいいですよ。

 

ホームページはこのようにソースに書かれているHTMIやCSSなどのプログラム言語からできています。

 

HTMIとCSSには、それぞれ役割があります。

 

例えば、ホームページの見出しとなる部分に「ここが見出しですよ」とHTMIで位置づけし、「見出しのこの部分を太字の赤で」とCSSで見栄え良くします。

 

HTMIやCSSなどのプログラム言語を簡単に「家作り」に例えると

 

HTMIは、ホームページの骨組み(外装)を作ります。

CSSは、ホームページの装飾(内装を作ります。

 

「このホームページのデザインってカッコいい!これってどうやってするんだろう?」

 

そんなとき少しでもHTMLやCSSなどのプログラム言語の専門知識があると、そのホームページのソースをみて、カッコいいデザインを再現できるのでとても便利です。

 

少しずついろんなホームページのソースをみて、見慣れるようにしていくといいでしょう。

 

ただし、他社のホームページを真似て、同じようなホームページを作り、ネット上にアップしてしまっては著作権の問題になります。

十分注意が必要です。

 

 

ホームページのHTMLソースの作り方

一から作る!

 

ホームページのソースって初心者でも書けるのでしょうか?

 

ちょっとHTMLを使って体験してみましょう。

 

今回はホームページの作り方のイメージを持ってもらうために、簡単なHTMLソースを実際に書いてみて、ブラウザ上でどのように映し出されるかみていきますね。

 

それでは、無料で使えるCrescent Eve(クレセントイブ)というテキストエディタを使ってHTMLソースを書いていきます。

 

 

Crescent Eveをダウンロードし、新規テキストを開きます。

クレセントイブ①

 

 

②Crescent Eveの入力補助機能を利用するため、何も入力せずに一度「名前を付けて保存」します。

Crescent Eveというテキストエディタは、始めにHTMIファイルで保存すると、HTMIを書くのに必要なタグなどが勝手に選択されるので便利です。

クレセントイブ②

 


③ファイル名「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はこのドキュメントタイプで作られていますと宣言するものです。

このテキストエディタはHTMI4.01を使ってます。

クレセントイブ⑥

 

 


⑦2行目に半角記号「<」を入力すると<html>というタグが出てきます。

クレセントイブ⑦

 

 

 

⑧3行目にカーソルを置き「Ctrl」+「Enter」キーを押すと</html>というタグが出てきます。

<html></html>は開始タグと終了タグとしてセットになっており、他のタグや文字列はその間に書きます。

クレセントイブ⑧

 

 

⑨<html></html>の開始タグと終了タグの間に他のタグや文字列を入力するため、数行空けておきます。

改行はブラウザに反映されません。見やすさのためなので空けても空けなくてもOK!

クレセントイブ⑨

 

 

⑩4行目にカーソルを置き「<」を入力すると関連するタグが「a~」からドリルダウンで見れるので必要なタグを選択します。

【例】
・h1(エイチ1)見出しのこと
・a(アンカー)リンクのこと
・p(ピー)段落のこと
クレセントイブ⑩

 

 

 

<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でスタイルを定義する(装飾)

 

 

 

イメージを掴めましたか?

 

実際にプログラム言語をつかってホームページのソースを書いていくとなると、初心者には膨大な時間と勉強量が必要です。

 

女性起業家
ホームページにそんな時間かけていられないです。

 

そんな方に向けてプログラム言語などの専門知識があまりなくてもすむ方法があります。

 

ワードプレスなどのCMS(コンテンツ・マネジメント・システム)でホームページを作る方法です。

 

CMS(コンテンツ・マネジメント・システム)とは、ウェブサイトを管理・更新できるシステムのことです。

 

HTML などのプログラム言語の専門知識がなくても、 このシステムに用意された管理画面を使ってテキストや画像を入れ替えるだけでホームページを作成したり更新したりすることができます。

 

それでもホームページのソースの見方がわかると、CNSの管理画面にない機能を自分で追加できるのでホームページ作成の幅が広がりますよ。

 

 

 

まとめ

 

くくり
ホームページのソースってどんなものかおわかりいただけましたか?



女性起業家
はい。

ホームページのソースの見方や書き方などなんとなく掴めてきました。

でも、ホームページを一から作るのって大変なんですね~




くくり
そうですね。

確かにホームページを一から作るのは大変ですが、気に入ったホームページのソースを見るのは勉強になります。

苦手意識を持たずにいろいろ見ておきましょうね。