PCやスマホを用いて、ブログやWebサイト、地方自治体などのホームページを閲覧する機会は誰にでもあろうかと思います。インターネット上で発信されている情報を、私たちの多くは参照する立ち位置にあるわけです。よってホームページがどのような形で作成されているのかについては、あまり考えたことがなかったという方も少なくないはずです。
そこで今回は、インターネット上のコンテンツが、どのような形で作成されているのかについての説明を進めていくことにしましょう。
なお、時間をかけてこれらの知識を深めていくことができれば、それは第二の人生の収入源確保につながる可能性もあります。
HTMLとCSSの初歩
インターネットにあるホームページやブログの多くは、主にHTMLという言語と、CSSという情報を用いて作成されています。まずはHTMLとCSSの概念について簡単に理解を深めていくことにしましょう。
HTMLとは
HTML（HyperText Markup Language）とは、Web上の情報を作成するために開発された言語であり、この書式に則して記述することにより、Webブラウザなどでのコンテンツの表示が可能となります。
HTMLの情報は、一般的にWebサーバ上に置かれています。URLなどを指定することにより、私たちはその情報にアクセスをします。HTML情報が読み込まれ、PCやスマホ上に転送されます。PCやスマホでは、読み込んだHTML情報を解析し、その言語の示す通りに表示されるという流れです。
このため、仮にHTMLに則した形で、私たちがページを作成すれば、それがご自分のPC内のファイルであっても、ブラウザはこれを忠実に読み込み、表示できることになります。
ちなみに、ブラウザに表示されているウェブページが、どのようなHTMLの記述がなされているかを知るためには、PC環境の場合、ブラウザ画面で右クリック、「ページのソースを表示」を左クリックすることで、参照することができます。
「うわぁ。こんな横文字の羅列、自分には絶対無理」と思われたかもしれません。
しかしシンプルにすれば、意外に理解しやすいものです。たとえば、以下のような書式でも立派なウェブページとして成立しています。
<head>
<title>私のホームページ</title>
</head>
<body>
<p>こんにちは。HTMLの世界！</p>
</body>
</html>
この情報を、ご自分のPC内で作成し、実際に表示してみることにしましょう。
囲まれたこのテキストを、コピーしてPC内のテキストエディタにペーストします。そしてこれを、たとえばMyPage.htmlといった名前で任意の場所に保存してください。
これをエクスプローラーなどで見てみると、そこにはウェブのアイコンの付いたファイルを確認することができるはずです。これをダブルクリックしてみてください。無事、あなたのはじめてのホームページが表示されているはずです。
単なる一行だけのページではありますが、しっかりとタイトルも表示されていることを確認いただけるはずです。
CSSとは
CSS（cascading style sheets）とは、ウェブページなどのレイアウトやデザインを指定するためのスタイルシートをいいます。
先のHTMLは、ウェブページのコンテンツを表示するための命令を記述しました。ところが表示された文字は、単なる黒文字の表示となっていたはずです。一方でCSSでは、このコンテンツのレイアウトやデザインなどを指定するものといえます。
CSSは、HTML内部に記述することもできますが、一般的に別ファイルとして作成し、HTML側から参照することで、デザインを設定します。
では次にCSSを新たに作成し、これを先のHTMLファイルと関連付けて見ることにしましょう。
font-size : 24pt;
color : red
}
まずは上記の囲みの中の文字をコピーして、テキストエディタなどにペーストしてみてください。これは、HTML内のパラグラフ、つまり段落部分について、フォントサイズ24ドット、色は赤で表示するように指定しています。
テキストエディタへのペーストが完了したら、ここではMyStyle.cssという名前で保存しておいてください。
次に先に作成したMyPage.htmlを、以下のように書き換えてみることにします。
実際には4行目にlinkタグを挿入し、CSS情報については、MyStyle.cssから読み込むことを宣言しています。
つまり、今作成したCSS（MyStyle.css）を読み込んで、レイアウトやデザインを決定することを宣言しているわけです。
<head>
<title>私のホームページ</title>
<link rel=”stylesheet” type=”text/css” href=”MyStyle.css”>
</head>
<body>
<p>こんにちは。HTMLの世界！</p>
</body>
</html>
さて、これを保存したあとに、再びエクスプローラーからMyPage.htmlを起動してみてください。文字フォントが大きくなっていることに気づかれるでしょうか。
また、「こんにちは。HTMLの世界！」の色が赤くなっていることがわかります。
これらは、先にCSSによって指定した、段落内のフォントサイズと色がしっかりと反映されているわけです。
なお、MyPage.htmlのコンテンツ自体の内容については、CSSへのリンク設定以外変更していないことを今一度思い出していただきたく思います。
つまり、CSSを用いれば、HTMLによって設定されたコンテンツに手を加えることなく、ホームページ全体のデザインや書式を変更することができるわけです。
HTMLとCSSは自学自習できる
これまでごくごく簡単にHTMLとCSSについてご紹介してきました。
タグや命令について触れていないので、詳細についてはまったくわからない状態であるかもしれません。しかしHTMLとCSSのおおよその機能自体をイメージしていただけたなら、この段階では十分です。
なお、HTMLとCSSについては、インターネット上に無料で用いることができる学習サイトが複数存在します。これらのサイトを上手く活用することで、簡単にご理解を深めていくことが可能となっています。
HTML学習サイト
たとえば、HTMLについては以下のサイトがお勧めです。全15回の工程によって、およその機能を簡単に学ぶことができます。また、書籍のように単に読むのみではなく、設問に対して実際に入力をしたり、その結果を表示したりしながら知識を深めることができるので、学習効果も高いと言えます。
CSS学習サイト
以下は同サイトのCSSコースです。これもまた無料で受講することができます。全17回を受講することでCSSの基本的な機能をご理解いただけるはずです。
専門書籍で理解を深める
HTMLとCSSについては、数多くの専門書籍が出版されています。よって、先の学習サイトと併用する形で書籍を活用することで、より深い知識を得ることができることでしょう。
収入源へとつなげる可能性
初段階において、この知識を収入源へとつなげることができると申し上げても、実感をしていただくのは難しいかもしれません。しかしここではその可能性について触れておくことにしたく思います。
クラウドソーシングの普及
昨今、HTMLやCSSについての知識を実践的な領域まで高めることができれば、それを用いて収益源へとつなげることが可能となっています。そしてこれには、クラウドソーシングを用います。
クラウドソーシングとは、企業が不特定多数の人に募集をかけることで必要とするコンテンツやサービスを得る方法もしくは雇用形態と言えます。
たとえば企業がホームページを作成したいと考えた場合、これを業者に発注する代わりに不特定多数に対して募集をすることで、目的を達することができます。
最近では日本においてもクラウドソーシング専門サイトが複数立ち上がってきています。これらのサイトにアカウントを開設することで、誰もが企業からの発注を受けることができるようになってきているわけです。
しかもこれらは、PC一台あれば、自宅で作業を完結することができます。つまり作業場所に依存することなく仕事を受けることが可能です。このため、昨今では物価の安い国に住みながら、日本から仕事を受注して作業をする若者が増加傾向にあります。
一方、私たちシニア世代であっても、同様に自宅に居ながらにして仕事を得ることができるわけですから、収入源へとつなげる可能性は十分にあるわけです。
「仕事を受注するレベルなどとてもとても」と思われるかもしれません。
しかし、有り余る時間を用いて、たとえば1年程度の学習に取り組むことで、そのレベルには十分に達することができます。しかも、たとえ頓挫したとしても、資金的に損失を被ることはないわけであり、むしろ充実した時間を得られるというメリットしかありません。
いち早く知識をモノにするために
実践的レベルにいち早く高めるためには、それなりのコツが必要となります。それは、学んだ知識はすぐに使ってみるということです。
HTMLやCSSは、各々のタグや命令を学んだら、その場で使ってみることができます。先の例のように、テキストエディターで作成し、これをWebブラウザに読み込ませることですぐに結果を得ることができるわけですから、得た知識をその場で具現化することができるわけです。
知識を収入源とするためには、知識を得るのみならずこれをアウトプットすることが必要となります。よって知識を得てすぐにそれを用いて実際にコンテンツを作ることを繰り返すことで、レベルを早く高めることができるわけです。
できれば学びたいその他の知識
今回はHTMLとCSSについてのお話なので付加的な説明に留めますが、Webに関してさらに高度なレベルに達するためには、その他の知識にも触れておくことが望ましいと言えます。これについては別記事で詳細についてご紹介することにしますが、ここでは簡単に触れておきたいと思います。
JavaScript
JavaScriptとはプログラミング言語のひとつであり、HTMLの中に記述することができます。
HTMLとCSSを用いることであらゆるコンテンツを作成することができるわけですが、昨今のサイトでは、動きのあるサイトがあることを御理解いただけるかと思います。これらの動的な動作を実現するのがJavaScriptです。
JavaScriptは、HTMLと同時にWebブラウザ側に送られてブラウザ上で実行されることにより、動的なコンテンツを実現するわけです。なお、JavaScriptの学習についてもサイトの存在があります。
PHP
PHP（Hypertext Preprocessor）もまたプログラミング言語のひとつといえます。先のJavaScriptがWebブラウザ上で実行されるものであったのに対して、PHPはWebサーバー上で実行されることにより、動的なコンテンツを実現します。
昨今のWebサービスでは、様々な動的サービスが存在します。たとえば、インターネットを介してアカウントを作成したり、必要情報を自由に参照することができます。
これらの多くは、PHPプログラムがWebサーバー上で動作するとともに、データベースとの連携を行うことで実現しています。PHPもまた、学習サイトの存在がありますので、ご興味があれば知識を深めていただければと思います。
WordPress
昨今ではインターネット上に数多くのブログを見ることができるはずです。ブログサービスを用いれば、誰もが簡単に情報発信者側に回ることができます。
WordPressは、ブログ実現するためのソフトウェアであり、CSM（content management system）と呼ばれるシステムのひとつです。PHPによって作成され、コンテンツ管理にはデータベースが用いられています。
WordPressはカスタマイズ性に優れており、HTMLやCSSの知識に加えてこのシステムに熟知することで、多岐にわたるニーズに対応したサイトを作成することができます。ちなみに、現在の大手企業の多くは、WordPressをベースにしてサイトを作成しています。
まとめ
HTMLとCSSの初歩的な知識から、一気に収益化への可能性へとお話を拡大してしまったので、戸惑われてしまったかもしれません。
しかし、Webの世界を全体的に見渡していただいたことで、短時間ながらこれまでには見えなかった景色をイメージすることができるようになられたなら、今回は十分に意味のある一時であったといえそうです。
各々については、時間をかけて理解を深めていく必要がありますが、有り余る時間を用いてじっくりと取り組んでいただければ、シニアの私たちでも決して乗り越えられないものではないと考えています。
生涯学習という言葉もありますが、現在では学習するためのサイトや、情報はすべてインターネット上に存在します。また、書店に足を運べば、関連する書籍を数多く入手することも可能です。
よってもし、お時間を持て余しているといった方であれば、少しづづ学習をされてみるのも、第二の人生を豊かに過ごすために有効な選択のひとつではないかと考えています。一歩踏み出せば、そこには広大な世界が広がっています。そんな世界をぜひお楽しみいただければと思います。
コメント