ムッチローの呟くには少し長い呟き

毎日140字ではとても収まりきらないような呟きの数々

半日でホームページを作成しよう!(HTML&CSS&WEBサイトに関する基礎知識)簡潔に解説!

どうも、ムッチローでございます。
 
 
もともと「ホームページ制作のザ・基本」というタイトルでアマゾンから電子書籍版を出版しようと考えていたものを、ここで全文掲載することにしました。
そのことからところどころで「この本」など、ブログ書いてるんじゃないのかよ!とつっこみをしたくなるような場所があるのですが、そこは理解していただければと思います。
 
このブログでは、普段は流行りの邦楽やアーティストの新曲などの歌詞を毎日取り上げ、勝手に感想や意見などを書いています。
 
このページに来られた方はホームページ作成に関する知識を補いたい方がほとんどだと思いますが、このブログに書かれていることはあくまで素人が書いた参考程度のものと考えていただければ嬉しいです。
何かしら皆さんの力になったら嬉しいです。
 
それでは、どうぞ!
 
 
目次
 
1章 ホームページ制作は難しいのか?
 
2章 準備
 
3章 HTMLの基本
 
4章 CSSの基本
 
5章 ホームページをWeb上に公開しよう
 
6章 これからのプログラミング学習
 
7章 おわりに
 
 
1章 ホームページ製作は難しいのか?
 
 この本にたどり着いてくださった方、ありがとうございます。
この本では「ホームページ製作」に必要な準備や基本的なスキル、それらを活かした応用技術などを簡潔にまとめています。
 
私自身、ホームページ制作などに必要な「プログラミング」に対して抵抗がありました。しかし、一つ一つ難しく考えずに理解をしていくと「難しい」は「簡単で楽しい」という印象に変わりました。今ではホームページ制作にとどまらず、他のプログラミング言語を使った「Webアプリケーション」を作ったりしています。
 
プログラミングの一番の魅力は、なんといっても自分で『こうしたい』と思ったことをそのまま形にできることだと思います。私たちが普段スマートフォンなどを通じて閲覧するブログやSNS、Webサイトなどもすべて、世界中の誰かが『こういうものを作りたい』と考えたものでデザインされています。パッと見シンプルでスタイリッシュなサイトでも、それらは実はとてつもなく複雑で高度なプログラミング技術によって作られていたりもします。
 
この本を通じて、一つ一つ、着実にプログラミングを理解をして、自分が作りたいものを形にできるようになりましょう!
 
 
2章 準備
 
 それでは、さっそくホームページ制作のスキルを身につけていきましょう。
まずはプログラミングのコードを書くために、落ち着いて下準備を済ませておくこととします。
 
 ①パソコンを開き、インターネットでテキストエディタをインストール!
   パソコンがなければホームページを作るのは難しいですので、まずパソコンを自分の手元に用意しましょう。
ここで「自分のパソコンでもホームページ制作はできるのかなぁ」と不安になるかもしれません。
 パソコンのスペックが低いかもしれない…というようなことだと思いますが、心配いりません。プログラミングのコードを書くこと自体は、そこまでハイスペックなパソコンを必要としません。普段資料を作ったりネットサーフィンをしているようなパソコンで十分です。私なんかも初めのうちはWindows7のパソコンでプログラミングを勉強していましたし、まったく支障はありませんでしたので、大丈夫かと思います。
 
 次に「テキストエディタ」について説明をしておきたいと思います。テキストエディタとは、プログラミングのコードを書く場所です。資料を作成する時は、Wordを使ったりしますよね?プログラミングのコードが資料のテキストだとすれば、テキストエディタはそのWordのような役割のあるものです。
プログラミングをする時には必ずテキストエディタが必要となるので、このテキストエディタからインストールをしてきましょう。
 
 テキストエディタには無料で利用できるものが多くあり、調べてみると、どのテキストエディタがどういった点で優れているのか、どんな特徴があるのかなども知ることができるので、「テキストエディタ おすすめ」というように検索をして、自分にあったテキストエディタを探してインストールしてみてください。ちなみに私はAtomというテキストエディタを使っています。無料で使えますし、なによりコードを書いている時に「プログラミングしてます感」が出てかっこいいな、と思ったのでこれを愛用しています笑。
 
 ②インストールしたテキストエディタを開き、新しくファイルを作成!
 テキストエディタがインストールできたら、さっそくそれを開いてみましょう。するとどのテキストエディタにも「ファイルを作成」というようなものがあると思うので、それをクリックし、ファイルを作成することになります。ファイルを作成する場所が分からない場合は、焦らず、そのテキストエディタのどこにファイルを作成するボタンがあるのかを調べましょう。プログラミングをしていく中で大切なのは「焦らず、落ち着いている」ことですよ!
 
 いよいよファイルを作成していくのですが、まずポイントとなるのが「ファイルの名前」です。難しく考えず「index.html」というファイル名でファイルを作ってください。どうしてこのような名前にするのかは今は理解しなくて大丈夫です。この時点で頭がいっぱいになってはいけませんからね。
 index.htmlというファイルを作成したら、そのファイルを開きます。さぁ、いよいよプログラミングをしていきますよ!
 
 
3章 HTMLの基本
 
 何も書かれていないファイルに、これから私たちは「コード」を書いていきます。コードとはプログラミング言語で書かれたテキストのことを指すのですが、では私たちは今から何というプログラミング言語を書いていけば良いのでしょう。
 
章のタイトルにもあるように、ホームページ制作をする際にもっとも基本となるプログラミング言語が「HTML」です。さきほどファイルを作成する際に名前をindex.htmlとしましたね?この「.」以下の「html」が「このファイルはHTMLというプログラミング言語で書いていくよ」ということを知らせているわけですね。
 
 タグ(<html>, <body>, <h1>, <p>,<title>)
    新しく「タグ」という単語が登場しました。下の(1)を見てください。
 
 
            <html>こんにちは</html> (1)
 
 
    「こんにちは」というテキストが<html>と</html>という「タグ」で挟まれていますね。
もう一つ見てみましょう。(2)です。
 
 
            <h1>おはようございます</h1>  (2)   
 
 
    今度は「おはようございます」というテキストが<h1>と</h1>という「タグ」で挟まれています。
このように、HTMLというプログラミング言語では、表示したいテキストや画像などを「タグ」で挟んで書いていきます。
(2)は、<h1>と</h1>で挟まれている部分が「h1」という「場所」だよということを言っているのです。
 
 
            <p>おやすみ</p> 
 
 
    これも同じ。「p」という場所に「おやすみ」というテキストが入っています。<body>タグも同じです。<body></body>で「body」という場所を作ります。
 
 タグの使い方    
    HTMLはタグを使って表現するプログラミング言語で、タグは「場所」を作ります。
では、このタグたちを使って、どのようにコードを書いていけばいいでしょうか。
(3)のコードを見てください。HTMLはこのように書きます。
 
 
        <!DOCTYPE html>
            <html>
              <body>
                <h1>おはようございます</h1>
                <p>おやすみ</p>
              </body>
            </html> (3)
 
 
 1行目から6行目の全体が「html」という名前の場所、そして2行目から5行目までが「body」という場所、3行目が「h1」という場所で4行目が「p」という場所だということです。
 2行目から5行目の場所は、「html」と「body」という二つの名前が付くことになりますが、それでいいのです。「body」という部分を含めて全体に対して何かしたい時は「htmlという場所に○○してくれ」と言えばいいし、「body」という部分のみに対して何かしたい時は「bodyという場所に○○してくれ」と命令することができるからです。<h1>も<p>も同じように「場所を限定する役割」と考えると理解しやすいかもしれません。
 
それでは、先ほど作成したindex.htmlに(4)をそのまま写してみてください。
 
 
        <!DOCTYPE html>
            <html>
              <body>
                <h1>おはようございます</h1>
                <p>おやすみ</p>
              </body>
            </html>
 
 
 あれ?<!DOCTYPE html>って何だ?
と思ったかもしれません。そんな時は思い出してください。
「焦らず、落ち着いている」こと、そして「難しく考えない」ことです!HTMLを書く時にはこの特殊なタグを1つだけ1番上に書く必要があるのです。それだけです。それ以上理解する必要はまったくないと思います。「ふーん、そういうものなのか」というくらいの気持ちでペペッと書いちゃってください笑。それから、プログラミングのコードを書く時はスペルを間違えたり細かい見落としをしないことが大切です。プログラミング言語は、実は人間がコンピューターに命令をするための言語です。一文字でも間違いがあると、コンピューターは私たちからの命令をうまく理解してくれないのです。焦らず、落ち着いて一つ一つ着実に書いていきましょう。ホームページ制作にはそれがものすごく大切!
 
 書き写すことができましたでしょうか。コードを書く時には普段使わないような記号も頻出するので、一つ一つ手で覚えてきましょう。
 
さて。書けたけど、だから何なの?という感じでしょうか。現時点では文字が羅列しているだけで、しかも「おはようございます」と「おやすみ」を表示するなら
 
            おはようございます
            おやすみ
 
と書けばいいじゃないかと。
一つ一つ理解をしていきましょう。まずこのコードが書けたら、index.htmlを保存してあげてください。デスクトップに置いておくと分かりやすくていいですね!
 
 デスクトップにindex.htmlを置けたら、「ホームページ制作を自分はしているんだ」と実感できるような作業をします。まず、もう一度インターネットを開いてください。どんな状態でも構わないので、URLバーが表示されているのを確認してください。
そして、デスクトップにあるindex.htmlをそのURLバーにドラック&ドロップしてみてください。すると、それらしきURLのようなものが入力されます。
Enterキーを押すとなんと!先ほどコードで書いた「おはようございます」と「おやすみ」が表示されているのが分かります。どうでしょう。
 
これでもう、あなたはHTMLでホームページを製作できたことになります!
え?これだけ?
そうです。これだけです。コードを書いてWeb上で結果を確かめる。その繰り返しをする作業がホームページ制作です。
 
 ③「div」タグの使い方
 HTMLの文法がなんとなく分かってきたところで、少しステップアップしてみましょう。
HTMLはタグを組み合わせて書いていくのですが、その中に「div」というものがあります。下のコードを見てください。
 
 
<div class="ice">
 <div class="first">
    <h1>こんにちは</h1>
   </div>
   <div class="one">
     <p>さようなら</p>
    </div>
</div>
 
 
なんだかたくさん「div」やら「class」やらが出てきました。でも、よく見てみるとすごく単純な構造になっています。
 
まず、divタグは、他のタグと同様に、場所を限定して名前を付けるためのものです。divタグは非常に使い勝手が良く、いくらでもdivタグを使った場所の限定をすることができます。ここでポイントとなるのがclassです。divタグは複数使うことができるのですが、他と違う名前の場所にしたいのに、同じ「div」という名前ではどこがどう区分されているのかが分からないですよね?そこで、<div class="○○">と○○の部分に分かりやすいような名前を自分で付けることができるようになっています。
それ以外は他のタグと扱いはまったく変わりません。「ice」という名前のdivタグが全体を、2~4行目までの場所が「first」、5~7行目までの場所が「one」という名前となっています。そして、firstにはh1タグで「こんにちは」というテキストが入れられており、oneにはpタグでさようならを挟んであります。
 
最後にtitleタグについて知っておきましょう。
 
 
<title>ホームページ制作のザ・基本</title>
 
 
titleタグはこのように使います。先ほどまでのh1タグやpタグと似て単純で分かりやすいタグだと思います。
パソコンでネットサーフィンをしていると、画面の上の方に開いているページのタブが並んで表示されていることがありますよね。それぞれのタブに「Google」「Amazon」などと書かれているのを見てページを行ったり来たりすると思うのですが、titleタグで囲んだ部分(先ほどの例の場合「ホームページ制作のザ・基本」)がここに当たります。
また、Googleで検索をしてヒットしたサイトが表示がされると思うのですが、そこに表示されるそれぞれの文章はこのtitleタグで記述されたものになっています。例えばGoogleで「アマゾン」と検索すると、1番上に「アマゾン:Amazon|本,ファッション,家電から食品まで」とAmazonのサイトのリンクが表示されます。つまりコードとしては
 
 
<title>アマゾン:Amazon|本,ファッション,家電から食品まで</title>
 
 
と記述がされているわけです。
このtitleタグは、ホームページやサイトをWebサイトに公開する際に大切なタグとなるので覚えておいてください!
 
これまでは場所を限定して名前を付けるには「h1」、「p」というようにタグ自体の種類を使い分けていましたが、divタグを使うことで、classで名前を自由に付け、場所を限定しやすくなったのです。HTMLでより自分の頭にあるデザインを表現するためには、divタグを頻繁に使う必要が出てくるので、このdivタグはこの本以外でもネットなどで調べ、理解を深めておきましょう。
 
しかしまだまだ作りは単純で、想像しているようなものとはまだかけ離れていると思うので、ここまでで超基本的なHTMLを理解したことにし、一度次の4章で<body>や<h1>などのタグをなぜ記述する必要があるのかを、実践を通じて理解しておきましょう。
 
次の章ではCSSというもう一つのホームページ作成の基本となる言語を紹介するのですが、このCSSはこれまで学んできたHTMLのプログラムの中に書くことができます。
本当は他のファイルに記述してHTMLファイルと連携させてプログラムを組む方がいろいろな点で望ましいのですが、ここではあくまで「基本」を前提にしているので、手軽にCSSを用いることができる方法を紹介します。
 
        <!DOCTYPE html>
            <html>
              <body>
                 <head>  ← 今はここに書くものだと覚えるだけでOK!
                   <style>
      ↑
     ここにCSSを書いていくことができる!!
      ↓
                   </style>
                 </head>
                <h1>おはようございます</h1>
                <p>おやすみ</p>
              </body>
            </html>
 
<style>で囲まれた部分があると思いますが、図にも書いてあるようにCSSはこの<style>と</style>の間に記述していくことになります。
CSSとか<div>とかいろいろ理解していないものが増えてきて焦るかもしれません。
でも大丈夫です。準備はここですべて終了しました。
次章からのCSSを学ぶことで、今不安な要素もすべて「なるほど!」「そういうことだったのね!」と理解できると思いますので、ここまでなんとなく出来る気がするぞ、という方は次の4章に進んで見てください。
 
焦らず、落ち着いて、ですよ!
 
 
4章 CSSの基本
 
 HTMLの超基本を理解したあなたは、これからCSSというもう一つのプログラミング言語をこの章で学ぶことになります。
CSSとはどのようなことを可能にするプログラミング言語なのでしょう。簡単に言うと、HTMLで作った骨組みを装飾する役割です。
ネットサーフィンをしている際に出逢うWebサイトは、カラフルできれいなものが多いですよね?テキストの色を変えたり、背景を変えたり、真ん中に寄せたり横に並べたりするような命令をするのがCSSです。HTMLだけでもできるものはありますが、CSSを使って装飾をしていくのが一般的です!
 
 
h1 {
   color: blue;
}                  
 
 
これがCSSのコードです。パッと見分かりずらいでしょうか。
まず始めのh1という記述は「h1という場所に対するデザインだよ」という意味で、{ と } の間に書かれている color: blue; という記述は「h1という場所に書いてあるテキストのcolor(色)をblue(青)にしてくれ」という意味です。
 
p {
  color: red;
}
 
この場合はどうでしょう。このコードの意味は、「pという場所に書いてあるテキストの色を赤にしてくれ」というものになります。
CSSはあくまでデザインをするツールなので、実はまったく難しくありません。基本的には始めに場所を指定して、そこに対して { と } の間でどのようなデザインを施すのかを書くだけなので、型自体はこれに限ります。これ以外の記述法は基本的にはないので、CSSを学んでいくということは、「{ と }の間にどのような命令を書けるか」というレパートリーを増やしていく作業になります。
この本でも多少の例を取り上げますが、ネットで「CSS 一覧」と調べてヒットするサイトを見てみるとどんどん自分が使える「テクニック」が増えていきます。載っているものをそのまま写すだけにとどまらず、他にどのような書き方があるのか、どんなコードが書けるのかなどを自ら探す姿勢もプログラミングスキルを身に付ける上でとても大切だと思いますので、ぜひ皆さんも自分の力でスキルを高めていってください!
 
※divタグに関してのCSS を記述する際は、iceというclassの場合、
 
.ice {
  
}
というように、「.」を前に付けることが必要です。
 
 
    CSSの記述例
 
 テキストの色を変える
    color: 表示したい色;
    
 テキストの大きさを変える
    font-size: ○px;
 
 ボックスとの間に幅を作る    
    margin-top: ○px;
    margin-left: ○px;
    margin-right: ○px;
    margin-bottom: ○px;
 
    テキストを真ん中に配置する
    text-align: center;
 
    ボックスの外枠とテキストの間に幅を作る
    padding-top: ○px;
    padding-left: ○px;
    padding-right: ○px;
    padding-bottom: ○px;
 
    ボックスを左から数えて好きなところに配置する
    position: absolute:
    left: ○○%;
 
    ボックスの背景色を変える
    background-color: 表示したい色;
 
 
5章 ホームページをWeb上に公開しよう
 
ここまでHTMLとCSSの基本を学んできました。みなさん本当にお疲れ様でした。
この本を見てくださっている方は、おそらくホームページを自分で作ってWeb上に公開したいと考えている人が多いと思います。
会社やカフェ、事務所などを経営していく中で大切なことを調べていくと、どのサイトでも「オリジナルのホームページを作りましょう!」と書かれていたりしますよね。確かにホームページを作れば、SNSのように自分のやっていることを他の人に知ってもらうきっかけが増えますから、まずオリジナルのサイトを作りたいと考える人は多いと思います。サイトやホームページを作る方法は大きく3つあります。
アウトソーシング(外注)する方法、HTMLやCSSで1から自分で作る方法、そしてWixのようなホームページ作成ツールを利用する方法です。1つずつメリットとデメリットを見ていきましょう。
 
まずアウトソーシング(外注)する方法。これまで学んだHTMLやCSS、そしてデザインが華やかになるJavascriptなど、サイトを構築する上で必要なプログラム言語のプロに「〇〇で〇〇な感じのサイトを作ってほしい」と依頼するわけです。もちろんそれを仕事にしているプロですから、要望に合わせてハイクオリティなサイトを作ってくれます。
ネットでホームページ制作を担当している企業や事業主を見つけたり、クラウドワークスのようなマッチングサイトの中で募集をかけるなどしてホームページを作ってもらうことができます。
この方法であれば短期間で完成度の高いホームページを作ることができるのですが、それには高額の費用がかかります。
調べた相場では20万〜30万円ほどでサイトを作ります、というのが1番多いです。中には極端に安いものもあると思いますが、相手が要望に沿ったサイトを作ってくれるかは分かりませんから、外注する場合はどうしても大きな費用がかかってしまいます。
 
続いて自分で1からプログラム言語を使ってサイトを構築する方法ですが、とにかく自分の意思ですべてを決めることができる点が1番のメリットです。そして自分でサイトを作る分にはお金は一切かかりませんし、1つずつコードを書いていけば必ずサイトは出来上がります。
しかし慣れないうちは外注する場合よりもクオリティが下がってしまうので、しっかりHTMLとCSSを学んでいくことが必要です。また、ホームページ制作であれば必要な言語は基本的にはこの2つなので、着実に学んでいけば自分の理想のデザインを形にできるようになります。
 
最後にホームページ作成ツールを活用する方法です。既存のテンプレートをベースにテキストを書いたり写真を配置することで、簡単にホームページを作ることができ、代表的なものとしてWix挙があります。
プログラム言語がまったく分からない状態でも取り掛かることができるので、メリットがたくさんあるように思えますし、何より無料で作成する場合が多いことがいいところだと思います。
最近はこの方法を用いてサイトやホームページを作る人が増えているのですが、完成まで時間がかかること、ビジネスで活用するには有料プランを利用する必要があること、ベースとなるテンプレートの変更ができない点などがデメリットとして挙げられます。
私自身、この作成ツールを使った方法は場合によってはベストであるように思います。しかし実際にWixでサイトを作ってみたところ、1ページ分のサイトを作るのにも結構な手間がかかった印象があります。HTMLとCSSをある程度使うことができる状態であれば、1から自分で作った方が早いし自分好みに仕上げることができるというのが正直な感想です。
 
アウトソーシング(外注)する場合、自分で1から構築する場合、作成ツールを利用する場合の3つを見てきましたが、いかがでしょうか。個人的な意見としては、時間と費用をかけずにそこそこのホームページを作りたいという場合は2番目の自分で作ってしまうのがベストだと考えます。ただ、会社のサイトなどはビジネスで活用できなければ意味がありませんし、ある程度クオリティの高いものであった方がいい印象を与えられると思うので、サイト制作のプロに依頼して作成してもらう方がいい場合もありますし、プログラミングなんてもう勉強したくない、という人はホームページ作成ツールを活用するのが1番だと思います。
 
最後に、ホームページを何かしらの形で作り終えたあとのポイントついて簡単にまとめておこうと思います。
「ホームページは作れたとしても、どうやってWeb上にアップすればいいんだ?」と疑問に思う方もいれば、なんとなく難しそうだとすでに抵抗がある人もいると思います。
ホームページをWeb上に公開して、誰でも、どこからでも自分のホームページにアクセスすることができるような状態にすることを「デプロイ」と言います。ホームページを作ったら、デプロイをするための作業にシフトします。ここでは、そのデプロイで出てくる難しめな単語や知っておくと作業が進みやすいことなどを取り上げたいと思います。
 
ドメイン: URLの「https://」以降の部分。Googleはパソコンで見ると「https://www.google.com/」なので、Googleドメインは「www.google.com」の部分です。
 
お名前.com独自ドメイン(自分だけの、サイトの住所)を取得するサイト。このサイト以外でもインターネット上の住所を取得することはできますが、私はこのサイトを利用しています。
ドメインの取得」ってどういう意味?と思うかもしれません。実はインターネット上の住所(ドメイン)を持つためには、普通の住所と同じようにお金がかかるのです。Googleドメインは最後が「.com」で終わっています。この部分は他に「.jp」「.co.jp」「.me」「.tokyo」などの種類があり、これらによって値段設定が変わってきます。「.com」と「.jp」が1番安く買える場合が多く、反対に社会的な信用を得るために会社のホームページなどは1番高い「.co.jp」を選択したりします。
 
SSL:サイトのセキュリティを高めること。「http」と「https」はセキュリティ対策をしているか否かで異なっています。ホームページをデプロイした際は、このSSL化もしておくとなお良いでしょう。
 
Heroku: 作成したホームページをデプロイするためには「PaaS」と総称される、ホームページをWeb上で表示するために必要な部品を一式まとめて管理してくれる、デプロイするための代表的なツールです。私もすべてこのHerokuを使ってホームページやサイトをデプロイしています。
また、HerokuはHTMLやCSS以外の言語を用いたプログラムにもよく対応しているため、これからプログラミングの腕が上がって他の言語にも手を出していった時にも変わらず使うことができます。
 
SEO対策Googleでワードを入れて検索をした際に、膨大な数のサイトやホームページがヒットすると思います。そして、私たちはそれらをすべてチェックすることはありませんよね。だいたい最初のページで表示されたリンクをクリックすると思います。
サイトやホームページをデプロイしたとしても、最初の1ページに表示がされなければ誰にも読まれず意味がありません。より多くの人に見てもらうためには、この検索された時に表示される「順位」を上げることが大事になってきます。
このように、自分のサイトの順位を挙げようとすることをSEO対策と言います。
 
 
6章 これからのプログラミング学習
 
 さぁ、みなさんはもうHTMLとCSSの二つのプログラミング言語の基礎を学習することができました。どうでしたか?高い技術を用いたホームページなどをみると、「こんなのでああいうふうなサイトが作れるようになるのかよ」と思うかもしれません。しかし、どんなホームページを見ても基本は変わりません。私たちがこれまでやってきたようなコードの書き方を理解し、自分で書けるようになっていると、あとは自分のスキルを自分で高めていくことができるようになると、時間をかけるだけ理想通りのホームページを作れるようになっていきます。
 
では、これからは具体的にどのようなことをしていけば、プログラミングの技術を高めていけるのでしょうか。この章では、私がプログラミングを学習する中で修得した「自分のプログラミングスキルを自分で上げるスキル」を紹介したいと思います。
 
 ①本を買って系統的に学習する
 プログラミングを学習するにあたって、まずは一冊『HTML・CSS大辞典』のようなタイトルの、ホームページ制作のほとんどを網羅した参考書を一冊買っておきましょう。私がおすすめなのは、技術評論社HTML5&CSS3デザインレシピ集』です。「番号付きの箇条書きを表示したい」というように、ホームページを作っていく中で「○○したい」と思った時にすぐそのまま方法を調べることができます。
 
本の優れている点は、安心感があるところです。パソコンの横に一冊本を置いておくことで、パソコンと本を見合わせながら着実に作業を進めることができるのです。また、いちいちネットを開いて文字を打って…というように時間を使う必要がないのも本のいいところです。
 
 ②ネットを駆使する
 プログラミングを学習する上で欠かせないのがこの「ネット」です。グーグル先生ほどプログラミングに詳しい人はいません(プログラミングに限らずですが)。「こうするためにはどうすればいいんだろう」と思ったら、そのやりたいことをそのまま検索窓に打ち込めばいいんです。そうすると、そのまま誰かが書いたブログや記事、まとめサイトなどがヒットします。それを一つ一つ冷静に、落ち着いて見ていくと必ずその方法が見つかります。
 
これは何に関してもそうですが、自分が分からないことはなんでもネットで調べれば知ることができます。お金もかかりませんし、「○○したい」と思ったものをそのままグーグル先生に聞いて、自分のホームページに生かしていけば自然とプログラミングのスキルは上がっていくものです。
 
 ③プログラミングスクールに通う
 これまではいわゆるプログラミングの「独学」について述べてきましたが、実はこの方法は「難しい」と考えられがちです。実際にプログラミングを独学する中で9割は挫折するとも言われているくらいです。そのため、プログラミングに詳しいメンターなどと直接コンタクトが取れたり、その場で「ここってどうすればこうできるんですか」というように聞くことができます。なので、プログラミングスクールに通うと独学に比べて比較的短期的に、集中して効率的にプログラミングスキルを上げることができます。
しかし、私自身はHTMLとCSSに限定して言うと、プログラミングスクールに通う必要はそこまでないように思います。私は今Webアプリケーションを実装しているのですが、HTMLとCSSに関してはその時その時で、それこそ本やネットを使って力をつけていけばいいので、案外「HTMLとCSSを3ヶ月でマスターしよう」というような意気込みをする必要はないと思っています。
HTMLとCSSに関しては長期的に時間をかけて学んでいくのがベストなのかな、という考えです。
 
 これまで3つのプログラミングの学習方法を見てきましたが、まずは本屋さんに行って、自分にあった参考書を一冊購入してみましょう。あとはパソコンの横にそれを置いて、後はネットを使い倒していきましょう。それでも難しいなと感じたら、プログラミングスクールで短期集中的に学ぶことにしましょう。
プログラミングに関しては特に、長くパソコンと向き合っていくことが大切です。懲りずに、なお焦らず、落ち着いて学習をしていくことが、やはり一番大事なことだと思います。
 
 
7章 おわりに
 
 これまで、ホームページ制作のための準備、HTMLの基礎、CSSの基礎、そしてこれからのプログラミングの学習の仕方について触れてきました。プログラミングというのは、HTMLとCSSだけではありません。他にもものすごい数のプログラミング言語があります。JAVAC++RubyPython、Unity、Swiftなどたくさんです。それぞれの言語によって実装できるものが異なります。そのプログラミング言語の基盤となるのがHTMLとCSSです。この2つができなければ、他の言語で作りたいものを実装することはできません。
 
これからはプログラミングのスキルがあることが前提の社会となっていきます。英語とコミュニケーション能力、次にプログラミングスキルが来ます。今からプログラミングの技術を身に付けておけば、それは大きな武器になります。この機会にHTMLとCSSから、他の言語にも手を伸ばしていきましょう!
 
冒頭にも述べましたが、プログラミングの一番の魅力は、自分が作りたいものを作ることができる点です。懲りず、焦らず、落ち着いて、一つずつ着実にスキルを身に付けていくことで、自分が作りたいものをそのまま形にできるようになり、ますますコードを書くことが楽しくなっていきます。決して難しいものだとは思わず、この本で学んだように理解を重ね、充実したプログラミングライフを一緒に楽しんでいきましょう!