HTML5を学ぶ準備をしてみる

HTML
るん
るん

こんにちは、1歳の女の子を育児中のるん(@run_asiato)です。

HTML5とCSS3を学ぶための準備をしていきます。

なお、私が使用しているWindows環境での解説をしていきますので、ご了承ください。

スポンサーリンク

翔泳社 草野あけみ著 HTML5&CSS3 標準デザイン講座 で勉強しました

HTML5とCSS3を学ぶ準備をする前に、るんがどのように勉強したのかを少しだけ触れておこうと思います。

HTML5を含め、プログラミング言語の学び方は、書籍、スクール、ネットの情報などがあります。

私はもともとC++などのプログラミング言語を勉強したことがあり、どのようにプログラムの勉強をしたらよいのかが分かっていたので、HTML5とCSS3の勉強に関しては、ネット上にある解説サイトを利用しつつ、翔泳社から出版されていた草野あけみさんという方が著者のHTML5&CSS3 標準デザイン講座という書籍を購入して勉強しました。

実際にWebサイトを作りつつ段階を追って勉強できましたし、モバイル版の対応についてや、レスポンシブデザインなどについても触れられていたので、基礎を学ぶには良かったと思います。

HTML5とCSS3を学ぶための準備をしてみよう

それでは、HTML5とCSS3を学ぶために準備をしてみましょう。
何事にも準備は大切ですからね。

必要な物を用意しよう

HTML5とCSS3を学ぶためには、プログラムを記述するためのテキストエディタとそれを確認するためのブラウザが必要となります。

この他にも、実際にサイトを運営したり、仕事をするためには、サーバーやドメインが必要だったり、Web開発用のエディタを用意して、作業をやりやすくしたり、などできますが、初期段階からあれもこれもと欲張っても、難しくて挫折してしまうので、最初はシンプルにテキストエディタとブラウザで勉強を始めるのが良いと思います。

テキストエディタ

テキストエディタとは、テキストファイルを作成、編集、保存するためのソフトウェアです。
Windowsに搭載されているメモ帳もその1つです。

ただし、Windows搭載のメモ帳だと、文字コードの制限や記述ミスを見つけにくいなど、あまりHTMLの記述には適さないので、別途テキストエディタをインストールした方が良いです。

テキストエディタと検索をかけると、サクラエディタやTeraPadなどがあるので、お好みのものをインストールしましょう。

ちなみに私はサクラエディタを使用しています。

ブラウザ

ブラウザとは、Webサイトを見るためのソフトウェアです。
Internet Explorer(IE)やEdge、Google Chrome、Safariなどです。

世界的にシェアも大きいですし、Windows・Mac両対応のGoogle Chromeをインストールしておくと良いです。

環境を整えてみよう

テキストエディタとブラウザの準備ができたら、もう1つ作業をしておいた方がいいことがあります。
それは、拡張子を表示する設定です。

拡張子を表示する

プログラムを組むうえで、アイコンだけでは、どういった内容のデータなのか判断しづらいものもあるため、ファイル名に拡張子を表示する設定をしておきましょう。
拡張子とは、ファイル名の後の「.(ドット)」に続くアルファベットのことをで、どういった形式のデータなのかということを表します。

拡張子を表示するためには、何でもいいのでフォルダを開き、表示タブを選択し、「ファイル名拡張子」にチェックを入れます。

実際に簡単なHTMLを書いてみよう

ここまでで、必要最低限の準備ができました。

今までHTMLをやったことがない人にとって、HTMLとはいったいどんなものなのかイメージがつかないと思うので、実際に簡単なHTMLを書いてみて、イメージをつかんでみましょう。

今回は、HTMLでプログラムを書く際の流れをつかむためのものなので、聞きなれない言葉が出てきて混乱するかもしれませんが、ひとまず最後までやってみましょう。

新規HTMLファイルを作成してみる

まずは、HTMLのファイルを作ってみましょう。

テキストエディタを開き、デスクトップに index.html というファイル名で保存します。
ファイル名は、全て半角英数字で入力しましょう。

サクラエディタの場合

HTMLで必要最低限の土台を用意してみる

HTMLでは、タグを使ってプログラムを組んでいきます。
タグは、<html></html>のようなもので、原則として、開始タグと終了タグがセットとなり、開始タグと終了タグの間に書いていきます。

それでは、実際にプログラムを入力してみます。

<html></html>であれば、<html>が開始タグで、</html>が終了タグです。
終了タグには、 /スラッシュ がついていますね。

ちなみに、タグは半角で入力しなければならないので、注意しましょう。
(半角でスラッシュを入力するには、半角入力状態で、エンターキーの下にあるシフトから2つ左の「め」と書かれているキーを押すと出ます。知らなかった人はここで覚えましょう!)

まずは、HTMLで土台を用意します。

<html>
<head>
</head>
<body>
</body>
</html>

どうですか?
すんなりと入力できましたか?

普段、半角入力をしていない場合は、少し苦戦するかもしれませんねぇ。
やっていくうちに、だんだんと慣れて、入力も速くなるので、めげずに頑張りましょうね。

タイトルを表示してみよう

次に、タイトルを表示してみようと思います。
Webサイトを開くと、タブの部分に文字が出ていますよね?
あの部分です。

先ほど入力した <head> と </head> の間に、以下の内容を入力します。

<title>Hello World!</title>

ブラウザで確認してみよう

入力ができたら上書き保存をして、正しく入力ができているか確認をします。

ブラウザで確認するには、ブラウザを開き、index.htmlのファイルをドラッグアンドドロップします。
ブラウザのタブに、「Hello World!」と表示されていれば、正しく入力できています。

表示されていない場合は、どこかで入力ミスをしているので、もう一度よく確認をして、再度挑戦してみましょう。

ちなみに、「Hello World!」の部分は好きな言葉に変更して大丈夫です。
また、この部分に関しては、全角入力でも大丈夫なので、以下のように変更することもできます。

<title>こんにちは 世界!</title>

なお、先行した場合は、上書き保存をしてから再度確認をしてみてくださいね。

画面に文字を表示してみよう

現状、タイトルは表示されましたが、白紙のページになっていると思います。
このままでは寂しいので、文字を表示してみることにします。

今度は、<body>と</body>の間に以下の内容を入力します。

Hello World!
なぜか最初に書きたくなるこの言葉

入力ができたら、先ほどと同じ手順で確認してみましょう。
上書き保存をして、ブラウザにindex.htmlをドラッグアンドドロップです。

どうですか?
今入力した言葉が表示されていますか?

表示されていたら、正しく入力できています。

これで、好きな文字を表示できるようになりましたね!

画面に出した文字に意味を持たせてみよう(タグ付け)

HTMLでは、文章に、「これは段落です」、「これは見出しです」と言ったように意味を持たせることができます。

先ほど表示した1行目を見出しに、2行目を段落にしてみます。
先ほど入力したプログラムを以下のように追記します。

<h1>Hello World!</h1>
<p>なぜか最初に書きたくなるこの言葉</p>

入力ができたら上書き保存をして、ブラウザで確認をしてみましょう。

CSSで文字に色をつけてみよう

次に、見出しに色を付けて目立たせてみます。

</title>タグのあとに入力していきます。

<style>
    h1{color:red;}
</style>

上記の h1 の行はタブキーで、1段下げています。

上書き保存をして、ブラウザで確認をしましょう。
見出しが赤くなっていたら成功です。

さいごに

いかがでしたでしょうか?
なんとなく、HTMLでプログラムを組むってこういうことなのかなぁと感じることができたでしょうか?

HTMLに限らずですが、プログラムをある程度入力したら、入力ミスがないか確認をして、またプログラムを入力して、と繰り返します。
上手くいかないと挫折してしまいそうになりますが、試行錯誤しながらできた時には達成感を感じられると思います。

HTMLができると、サイト運営やブログ運営の際に役に立ちますし、表現の幅が広がるので、興味が出た方は、ぜひ勉強してみてくださいね。

るん
るん

それでは、またお会いしましょう♪

コメント

タイトルとURLをコピーしました