メモ

メモを入力してみよう!


Lesson 02「HTMLの書き方」

学習概要

HTMLの構成と基本的な書き方を無料のテキストエディタソフト「CotEditor」を使って学んでいきます。

補足

■Windowsユーザーのエディターについて
この部活ではEditor独自の機能を使うことはないため、
Windowsを使っている場合は、他の好きなEditorを使ってもらって構いません。
Windows用の無料エディタであれば「サクラエディタ」やもう少し高機能な「Atom」がオススメです。
別の部では「Atom」や「Brackets」を使っています。

■HTMLタグの書き方について
詳しくはコチラ

■拡張子について
保存をするファイルの最後には「.(ドット)」をつけて拡張子を指定します。
拡張子はファイルの種類をPCに分からせるものです。

◼️文字化けについて
エディターで開いた時にコードが文字化け(わけのわからない文字がいっぱい出ている)ている場合は、エディターの文字コード設定をUTF-8にしてください。
http://www.be-webdesigner.com/tips/coding/mojibake.htm

この練習でわからない所を質問する※部活外の質問はできません

既に出ている同じ内容の質問やレッスン以外の質問には回答致しません。こちらから既出の質問・回答をワード検索できます。(仮入部部員は利用不可)

ログインが必要です

この練習への質問一覧

ログインが必要です

Lesson 02「HTMLの書き方」の内容※SEO用のため読めません

では実際にプログラミングをしていきましょう。
ではプログラミングを始めていきましょう。

プログラミングにはテキストエディタと呼ばれるメモ帳のようなソフトを使います。
Macには標準でテキストエディットというソフトが入っています。

しかし標準のソフトでは使いづらいためウェブカツ!!では無料のテキストエディターソフト、CotEditorというソフトを使っていきたいと思います。

インターネットから CotEditor を検索しダウンロード・インストールを行ってください。またプログラミングにはWebブラウザというソフトを使います。
Webブラウザはホームページを表示させるソフトになります。Macでは標準で Safari というソフトが入っていますが、こちらもプログラミングの開発用に Google Chromeというソフトをインストールしてください。

インストールしたCotEditorを開くとこのような画面が表示されるかと思います。この画面の中で実際にプログラミングを行っていきます。

プログラミング言語で書いた文章のことをコードといいます。ではこちらのコードをキーボードから打ち込んでみてください。コードが書き終わったら保存をしていきましょう。

コマンドと Sボタンを同時に押すと保存の画面が出てきます。
ここではデスクトップに保存をしたいと思います。
まずデスクトップにフォルダを作りましょう。[新規フォルダ作成]でフォルダを作ります。

適当な名前で構いませんが、ここでは[test]というフォルダを作ることにします。その中にファイルを保存してください。ファイルの名前はこちらも適当で構いませんが、今回はindexという名前にします。

そして拡張子、こちらはファイルの種類になりますが、こちらは[.html] ホームページの拡張子にして保存をしてください。そうするとCotEditorがこの文章はHTML言語で書かれているということを理解してコードが見やすいように色をつけてくれます。

では保存されたファイルを開いてみましょう。まずはデスクトップに作成された[test]フォルダーを開きます。

その中に先ほど作成したホームページのファイル [index.html] というファイルがあるかと思います。そちらを開いてみましょう。開いてみるとウェブブラウザソフトが立ち上がりホームページが表示されました。

これで簡易的なホームページの出来上がりです。

はい、では実際にコードの中身を見ていきたいと思います。
コード全体を見てもらうとですね で囲まれたものがあると思うんですけれども、これが目印になるタグと呼ばれるものになります。
あと1行目をまずちょっと見て頂きたいんですけれども1行目に !DOCTYPE html となってます。何かというとこの文章は HTML5という形式で書かれてますよ、というものを宣言してる形になります。
宣言というのはコンピューターに伝えてあげるという風なものですね。
2行目には html と書かれたタグがあります。一番最後の行にも同じ /html と書かれたタグがあって、こっちの方は前の方に [ / ] が入ってるものですね。

このタグというのは基本的にはこの2つが対になってます。これで1セットという形ですね。こっからここまでというような意味になります。このタグの意味はここからここまでの間に実際にHTMLの内容を色々と書いていきますよ、と言ったような意味になります。

その中は実際には2つの構成に分かれてます。
1つ目の構成は3行目からあるもの、 head というタグを使ってます。header部と呼ばれるものになるんですけれども、この中にはどういったものが書かれているかというと、4行目 metaタグ というもので指定されてるんですけれどもこれは文字コードというの指定してます。文字コードというのは後々説明しますけれども、文字の種類だと思っていただければと思います。

UTF-8という種類の文字コードを使いますよ。それで書かれてますよというものを指定してます。
もう1つがその下 titleタグ というものを使ってます。
何かというとこのホームページのタイトルがこの文字列、タイトルタグの中に書かれてるのですね。になりますよというものを指定してます。なのでここに書かれた文字が、実際にはWebブラウザの方を見てもらうと画面の一番上のところに書いた文字が出てきてます。これでこれがタイトルですよっていうのを指定している。これがheader部と呼ばれるところですね。

もう一つが body というものを使っている body部 というところがあります。この部分の中に書くのはですね実際に画面に表示されるところ、画面に表示されるものをこの中に書いていきます。その中に実際に今回どんなものを書いているかというとまず h1タグというものを使って書いてるところがあります。

h1タグというのは、見出しのタグになります。ここが見出しですよというものです。なので画面を見てもらうとその中に書いた文字が見出しとしても大きく太字で表示されているような形ですね。
もう1つがその下 pタグ といったものを使ってます。これparagraph(パラグラフ)の略の p なんですけど、paragraphというのは段落ですね。このタグの中に書いた文字が段落ですよーというものを示してます。なのでそこに書いた文字が実際に画面にはちょっと見出しよりは小さい文字で書かれています。これが段落として表示されているような形ですね。

このように HTML の書き方というのは
まず !DOCTYPE html という形でHTMLの宣言しますよ、
html というタグでHTMLの中を書いていきますよ、
headというタグでheader部というものを作って、その中に文字コードやタイトル書いていきます。
最後に bodyタグというものを使ってbody部という部分を作ってその中に文章などを書いていくというような構成になっています。


はい、いかがだったでしょうか。HTMLの構造とは3つに分かれている、ということですね。次回実際に画面に表示させる部分というのをいろんな書き方がありますのでそれを見ていきたいと思います。