この記事は、こんな人におすすめ
✅ WordPressのテーマのデフォルトデザインをちょっと変更したいという人
✅ htmlとは？cssとは？なんだろうという人
✅HTMLやCSSなら独学でなんとかしたい！という人
✅HTMLやCSSの勉強の方法もよくわかない！という人
そういうあなたのために、おすすめのHTMLやCSSの入門テキストと勉強方法を紹介します
HTMLやCSSの初心者のための基礎の勉強方法！
◇ 準備するもの
- パソコン
- テキストエディター
- (有料のものもありますが、無料のもので十分です)：プログラムを記述するためのアプリ
❖ HTML5やCSS3のおすすめテキスト
1冊ですべて身につくHTML & CSSとWebデザイン入門講座 Mana (著)
この１冊で、HTMLとCSSで作成できるホームページを１つ作ることができるようになっています。また、レスポンシブ対応(スマホ対応)のものが出来上がるようになっており、基礎を学ぶにはとても良いHTML5とCSS3の入門テキストです。さらに、サンプルコードもダウンロードできますので独学にも最適です。
なお、プログラミング(HTMLやCSSを問わず)の勉強のためのテキストやWeb上の情報はできるだけ新しいものを参考にしましょう。古いものだと、使えなくなったコードがあったり、逆に新しくできたコードなどでとても便利なものがあったりするからです。
❖ プログラミングを勉強するための環境をととのえましょう～おすすめのテキストエディターの紹介～
HTMLやCSSを問わず、プログラムを記述するには、テキスト形式で記述のできるソフトを使用する必要があります。Windowsであればメモ帳、Macであればテキストエディットというソフトがデフォルトで入っています。しかし、プログラミング専用のテキストエディターは、使いやすく機能も充実しているためダウンロードして使用することをおすすめします。テキストエディターは、有料のものもありますが無料のもので十分です。おすすめのテキストエディターは下記の2つです。HTMLやCSS以外の言語にも多数対応しており、どちらも使い勝手はよく、初心者にもおすすめです。基本的にテキストエディターは、プラグインをダウンロードして自分好みにカスタマイズして使用します。
♥ Visual Studio Code（ヴィジュアル スタジオ コード）
下記よりダウンロードできます
使い方の詳しい記事は、下記を参考にしてください
♥ Sublime Text（サブライムテキスト）
下記よりダウンロードできます
使い方の詳しい記事は、下記を参考にしてください
どちらも使用してみましたが、 私は、Visual Studio Code が好みでした。世界的にも最も使用されているテキストエディターですのでお勧めです。さて、ここまで準備ができたら早速勉強をはじめてみましょう！
❖ HTMLとは(ハイパー・テキスト・マークアップ・ランゲージ)
♥ まずはフォルダを作成しよう
ホームページのフォルダは、基本的には下記の画像のようなイメージで作成されています。ここではまず、ピンクのフォルダ『homepage』のフォルダの中に緑のフォルダ『css』と『images』フォルダを作成してみましょう。場所は、ドキュメントの中がおすすめですが、とりあえずデスクトップ上でもよいでしょう。ここでの注意点は、フォルダ名はすべて半角英数で指定してください。日本語ファイル名では、正しく認識されないためページが表示されません。
♥ htmlファイルを作成しましょう
HTMLとは、Webページの核となるファイルを作成するための言語で、『 < 』『 > 』のような『タグ』で囲まれた文字で記述をしていきます。では、テキストエディターを開きましょう。ホームページのトップページとなるhtmlファイルを作成します。まず、メニューのファイルから新規ファイルを作成しましょう。ファイル名を『index.html』として名前をつけて『homepage』フォルダの中に保存しますが、ここでファイルの拡張子『.html』とします。
htmlファイルの保存ができたら、テキストエディターに戻ります。Visual Studio Code で説明していきますが、基本的に Sublime Text もほぼ同じです。下記画像の赤枠のフォルダの追加から作成した『homepage』フォルダを選択するか、もしくはフォルダをこのエリアにドラッグすることで、ファイルをテキストエディターで開くことができるようになります。
選択ができたら、下記の画像のように作成したフォルダを表示できるようになりますので、先ほど作成した『index.html』をクリックします。
補足ですが、テキストエディターに下記のプラグインを入れていない場合には入れておくことをおすすめします。
- 『Japanese Language Pack for Visual Studio Code』プラグインを入れて日本語化しましょう
- 『Auto Rename Tag』開始タグと終了タグを同時に修正してくれます
- 『HTML CSS Support』htmlやcssのコードなどサポートしてくれます
- 『Live Server』ファイルを保存するとブラウザを自動で更新してくれます
♥ 実際にhtmlを記述してみましょう
では、 『index.html』 のファイルの1行目に『！』を入力しエンターキーを押下してください。そうすると、下記のように自動で記述されます。
<!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>
htmlは、この記述が基本です。1行目からhtmlの解説をしていきます。
<!DOCTYPE html> の部分はHTML5で作成されたものであることを宣言するドクタイプ宣言文といいます。
<html lang=”en”> の部分は言語の指定で、”en”は英語、”ja”は日本語です。ほとんと日本語でしょうから、ここは”ja”に変えましょう。
<head></head>に囲まれた部分をヘッドといい、この部分はサイトのページには表示されません。
<meta charset=”UTF-8″> の部分は”UTF-8″とという文字コードを指定します。この指定していない場合には文字化けしてしましますので、必ず指定しましょう。
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″> ビューポートといいますが、この部分は少し難しいのでhtmlとcssの学習がある程度進んだ時点で学習しなおしてください。簡単に説明すると、スマホの表示に対応(レスポンス対応)させるための表記です。
なお、このhtmlの『meta』はメタ要素(メタタグ)といいます。
<title>Document</title> この分をtitleタグに囲まれた文字(日本語可)は、ブラウザのタブや検索エンジンでページタイトルとして表示される部分になります。このtitleがないとページが表示できなくなりますので、必ず表記しましょう。
さて、<body></body> で囲まれた部分がブラウザページに表示される部分になります。
では、実際にブラウザ上に『Hello World!』と表示させてみましょう。
htmlファイルの<body></body> の間に下記のように記述してみましょう。
<body> <p>Hello World!</p> </body>
この ｐ 要素は、Wordpressを使用している人はご存じかと思いますが、html上で段落(paragraph)を指定する場合に使用するブロックレベル要素です。まあ、いまはよくわからずでよいので、とりあえず同じように記述してみてください。できたら、テキストエディター上でhtmlファイルを上書き保存(Ctrl+S押下)します。
補足：勉強を進めていくと、上書き保存の回数が極端に増えますので覚えていない人は、ショートカットキー 上書き保存(Ctrl+S) をここで覚えましょう
♥ ブラウザでhtmlファイルを表示してみしょう
htmlの記述画面上で右クリックをして、『Open with Live Server』を選択クリックします。
自動的にブラウザが起動し『Hello World！』が表示されます。
◇ htmlのポイント
- ＜タグ＞コンテンツ＜/タグ＞・・・開始タグと終了タグでコンテンツを囲む
- タグは、半角英数、余分なスペースを入れない
- タグの中に別のタグを入れることが可能(入れ子)
その他のhtmlについては、テキスト等で勉強していきましょう
次は、cssについて説明していきます
❖ CSSとは(カスケーディング・スタイル・シート)
cssは、htmlで記述した要素を装飾することができます。例えば、先ほど記述したhtml上の『Hello World！』の文字を大きくしたり、色をかえたりと様々な装飾をすることができます。また、jQueryなどを使わずに動きのあるcss(装飾)もでき、ネット上にはデザインサイトも多く存在します。そのようなサイトから高度なcssの記述を見てみると、本当に勉強になります。
♥ まず、htmlと同様にcssファイルを作成しましょう
CSSは、Webページ(html)を装飾するためのプログラム言語です。では、htmlと同じようにcssファイルを作成してみましょう。
テキストエディターで新規ファイルを作成します。
名前を付けて保存のときに、 ファイル名を『style.css』として名前をつけて『homepage』フォルダの中の『css』フォルダの中に保存しますが、ここでファイルの拡張子『.css』とします。
保存ができたら、１行目に下記のように記述します。
『”UTF-8”』は、htmlと同様の文字コードですので、1行目に記載をしていきます。
@charset "UTF-8";
♥ cssファイルをhtmlファイルに読み込ませる方法
基本的にCSSは、下記の画像のように一つのファイルで複数のhtmlへ反映させる方法を取ります。htmlファイルにCSSファイルを読み込ませる記述をして反映させるのです。
実際にhtmlに記述をしてみましょう。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<p>Hello World!</p>
</body>
</html>
CSSを読み込ませるためには、上記ブルーのアンダーライン部分の記述をhtmlに行います。
- <link>タグに rel属性『stylesheet』
- href属性に『style.css』(cssファイル名)を記述します
『style.css』 の前にある『css/』はフォルダ名です。
このファイルの指定は、パスといいますが相対パス・絶対パスとがあります。
ここでは、詳細の記載はしませんが、HTMLやCSSにとっては重要な項目になりますので、テキスト等を使って勉強していきましょう。
すべてのhtmlにこの記述をすることで、cssファイルは１個ですみます。
♥ cssをhtmlに直接記述する方法
もちろん、htmlとcssのファイルを分けずに直接htmlに記述する方法もあります。
<!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><p>Hello World!</p><style>p{color: #000;}</style></body></html>
上記のようにhtmlファイルに直接<style>タグで指定し、その中にcssを記述していきます。
♥ cssを記述してみよう
では、先ほど作成したhtmlファイルの『Hello World！』を赤い色にしてみましょう。CSSファイルに下記のように記述してみましょう。
@charset "UTF-8";
p {
color: red;
}
『ｐ』をセレクタ、『color』をプロパティ、『red』を値といいます。
cssで装飾をしたいセレクタのあとにプロパティと値を『｛｝』で囲みます。
記述ができたら、上書き保存をします。
(※ テキストエディターに 『Live Server』のプラグインを入れている場合で、ブラウザを表示したままにしていると、保存をした時点で自動的にブラウザが更新されます。)
(※ 上記のプラグインを入れてない場合には、ブラウザを更新してください。)
では、ブラウザで確認してみましょう。
テキストエディターのhtmlにもどり 右クリックをして、『Open with Live Server』を選択クリックをしましょう。
◇ cssのポイント
- htmlと同じく全角や日本語は使えません
- 大文字と小文字の区別はありませんが、小文字で統一しましょう
- セレクタもプロパティーも値も複数指定することが可能です
セレクタやプロパティーは、ネット上に一覧などまとめられたものもありますので参考にしてみましょう。あとは、テキストを参考にしながら勉強してみましょう。
