「Webページやサイトをつくる」ことができるんだよ。
このブログのようにインターネットに表示されているページは全て「特殊な言語」で構成されています。これが冒頭に出てきた「HTML」と「CSS」という言語です。
作成されたデータは「コード」と呼ばれ、通常「ページの裏側」を見ることで確認できます。Googleのホーム画面を例に、まず右クリックします。次に「ページのソースを表示」。
こちらがソースコードの一部です。「HTML」はここに書かれている＜タグ＞で囲まれた全てのコードです。
「CSS」は「F12キー」を押したときに出てくる「デベロッパーツール」で確認できます。赤枠にある{波カッコ}で囲まれた「display:block;」などのコードです。
最初は暗号のように思えますが、よく使う表現、ルールに決まりがあるので、何度も使ううちに自然と覚えます。難しく考える必要はありません。
目次
HTML・CSSとは
HTMLとは
「HTML」は「エイチティーエムエル」と読みます。「Hyper Text Markup Language（ハイパーテキストマークアップランゲージ）」の略称で、プログラミング言語のひとつです。
Googleのホーム画面で見たように、Webページを表現するための言語であり「HTML」でコードを組むことをコーディングといいます。
現在は最新の「HTML5」と呼ばれるバージョンが使われており、1991年に初めてのWebサイトが設立されてからコード、ルール共にアップデートされてきました。
開発、仕様の変更は「W3C」という標準化団体によって行われ、Webページをつくる際の基準として広く知られています。
創設者は「HTML」を開発した「ティム・バーナーズ＝リー」で、昨年は「Contract for the Web」と呼ばれるWebの課題に対する行動指針を発表するなど、現在も精力的に活動しています。
CSSとは
「CSS」は「シーエスエス」と読みます。「Cascading Style Sheets（カスケーディングスタイルシート）」の略称で、「HTML」に装飾を施すためのスタイルシート言語です。
基本的に「HTML」と一緒に使うことを目的とした言語であり、マークアップした「HTML」のレイアウトや色、サイズなどを設定することができます。
1994年に「ホーコン・ウィウム・リー」によって提唱されてから、「HTML」と共にバージョンアップしてきました。現在使われている「CSS3」が最新のバージョンになります。
「CSS」はブラウザ間で適用有無が異なるため「Can I use」などで調べてからの利用が確実です。特に新しい「CSSプロパティ」は対応していないことが多いので気をつけてください。
エディタをダウンロード
はじめにコード作成に必要な「エディタ」をダウンロードします。使いやすいもので構いません。「Sublime Text 3」はこちらの記事にまとめています。
高機能且つ見やすいエディタをもうひとつご紹介します。Microsoftが提供している「Visual Studio Code」です。無料で使える上、便利な拡張機能が揃っています。
ダウンロードも簡単。使っているOSのインストーラーをダウンロードします。
exeファイルを起動し、内容を確認して「同意する」で次へ。
インストール先はそのままでOK。
追加タスクは任意で選んでOK。そのままにして次へ。
「インストール」し、完了したら起動してください。
HTML・CSSファイルを作成
次にコードを書く「ファイル」を用意します。エディタで新規ファイルを開き、名前を付けて保存します。この時、ファイルの拡張子を「.html」にしてください。
保存時に「.html」をつけると「HTMLファイル」になります。
同じように新規ファイルを作成し、拡張子を「.css」で保存してください。
ファイル名を「index」「style」としている理由は、indexがトップページ、styleが全体のスタイル（装飾）を意味する言葉として広く使われているためです。
ファイルの基本コード
つづいて、ファイルに書く基本コードを確認します。ちなみに「Visual Studio Code」を使えば「Emmet」という記述サポートがあるのですぐに覚えなくても大丈夫。
「index.html」に「html」と入力してください。出てきた候補から「html:5」を選択。
以下のコードが自動挿入されていればOK。簡単ですよね！
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> </body> </html>
言語が英語になっているので、日本語の「ja」に直しておきます。
<html lang="ja">
DOCTYPEとは
<!DOCTYPE html>はDOCTYPE宣言と呼ばれ、HTML5で作成されたファイルであることを宣言しています。必ず文頭に入れ、</html>で閉じます。
<!DOCTYPE html> </html>
langとは
先ほど修正した言語指定です。html要素のlang属性に「ja」を入れることで、ファイルの言語が日本語であると宣言します。要素、属性については、まだ深く考えなくてOKです。
<html lang="ja">
headとは
<head>～</head>に読み込ませたいファイル、文字コードの指定など「index.html」に関連付ける記述を入れます。ここに書かれた情報は本文には表示されません。
<head> </head>
charasetとは
こちらは文字コードです。「UTF-8」はパソコンで扱いやすい最もスタンダードな形式として使われ、「charaset」指定することで文字化けを防ぐ効果があります。
<meta charset="UTF-8">
viewportとは
「scale=1.0」とあるように、パソコンやスマホの画面で端末に合わせて表示するためのコードです。ビューポートと呼ばれます。
<meta name="viewport" content="width=device-width, initial-scale=1.0">
titleとは
<title>～</title>は、タブに表示されるタイトル部分です。開いている内容に沿ったページ名をページごとに設定します。
<title>Document</title>
bodyとは
最後に、本文は<body>～</body>の中に書いていきます。ここに書かれた内容がWebページに表示されます。
<body> </body>
ファイルの配置と階層
作成したファイルを任意のフォルダに設置します。Webページを作るときに大切なのは「階層」です。配置にミスがあると正しく表示することができません。
この場合は、同じ階層にあることが分かります。
こちらはどうでしょうか。htmlファイルから見て、cssファイルが「一つ下」になっています。
このように階層が変わることでファイルの場所を示す「パス」が一部変わります。以下が一例です。ファイル名の前にフォルダ名がついているかの違いです。
<!-- 同じ階層 --> <link rel="stylesheet" href="style.css"> <!-- 下の階層 --> <link rel="stylesheet" href="css/style.css">
「HTMLファイル」の「head」内にファイルの配置に合わせたパスの記述をすることで、別ファイルの情報を読み込むことができるようになります。
ここまでの内容をまとめたコードがこちらです。今後ファイルが増えることを考え、各フォルダに配置した場合のパス（下の階層）にしています。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="css/style.css"> <title>Document</title> </head> <body> </body> </html>
ところどころ用語が出てきていますが、基本の意味を覚えておけば大丈夫です。「HTML」と「CSS」の特徴とWebページの作り方をまずは広く浅く書きました。
実際にWebで見られるようにするのはファイルが全て出来上がってからが基本です。最初はローカル（自分のパソコン）でページをつくるところから始めましょう。
「HTML」と「CSS」で何ができるの？