こんにちは！
今回はHTML/CSS入門編ということで、HTMLとCSSの基礎を初学者にもわかりやすく解説していきます。
HTMLはページを構成する要素を作成するマークアップ言語と言われる言語で、主に文字やページの構造を構成していきます。
CSSはスタイルシートと呼ばれており、ページのデザインを作成することができます。具体的には文字の色を変えたり、要素を配置したりなどです。
本記事ではHTMLでは基本的なタグを、CSSでは基本的なプロパティを網羅しているので、最後まで読めば基本は抑えられるかと思います。
それでは、それぞれどのようなことができるのか見ていきましょう。
この記事の対象者
- HTMLやCSSに興味がある人
- Webプログラミングに入門したい人
- 簡単なWebページを作ってみたい人
準備
まずは皆さんのお手元で実際に操作することができるようにしていきましょう。
そのためには、テキストエディタと呼ばれるコードを記述してファイルを編集できるエディタを用意しましょう。
テキストエディタの種類は何でもいいのですが、お困りの場合はVScodeという有名なテキストエディタがありますので、こちらを使用してください。
テキストエディタのインストール方法などはまた別記事で紹介しようと思いますが、本記事では主題ではないので割愛させていただきます。
テキストエディタを用意したら、開いていただき、「index.html」という名前のHTMLファイルと「style.css」という名前のCSSファイルを作成しておいてください。
それではまずは「index.html」のファイルから編集してきますので、開きましょう。
そこで、VScodeの場合は「html:5」または「!」と入力してEnterを押すと自動補完でhtmlコードの雛形ができるはずです。
その中の<body></body>と書かれている中にhtmlを記述していきます。
ブラウザでの表示はindex.htmlファイルをブラウザへドラッグ&ドロップすれば表示することができます。
必要に応じてコードをテキストエディタに記述して、表示などを確かめてみてくださいね。
HTML
HTMLという言語ではタグと呼ばれるもので要素を囲むことで、文字のサイズやページ構造など形作ることができます。
具体例を下に示します。
<p>本文です</p>
タグは開始タグと終了タグの2種類があり、<p>が開始タグで</p>が終了タグです。
タグを作成する場合は終了タグをつけましょう。終了タグは「/」が必要なので、注意しましょう。
また、一部終了タグがないタグも存在するので、頭においておきましょう。
それでは、どのようなタグがあるのか見ていきましょう。
h1〜h6タグ
h1〜h6タグでは、見出しを表現することができます。
h1タグが大見出しで、h2タグはその小見出し、h3タグはさらにその小見出しというように続きます。
<h1>見出し</h1>
<h2>見出し</h2>
<h3>見出し</h3>
<h4>見出し</h4>
<h5>見出し</h5>
<h6>見出し</h6>
こちらを実際にブラウザに表示して確認してみてください。
使い方としては、基本的にh1タグの大見出しはそのページの主題となるテーマを記述しますので、できる限り1ページに1つにしましょう。
細かい話なのですが、これはもちろん適当に言っているわけではなく、SEOと呼ばれるページをインターネット上に公開した時のページの検索順位に影響してくる要因の1つとして挙げられているもので、1つのページにh1タグが多すぎるページはGoogleに評価されないのです。
難しい話ではありますが、頭の片隅に置いておきましょう。
h2タグは大見出しの中の小見出しです。例えば、本記事で言うと「HTML/CSS入門」というのがh1タグ、それに続く「準備、HTML、…」がh2タグになります。
さらにその中に見出しをつけたい場合はh3タグなどを使いましょう。
pタグ
pタグは本文の文章を書きたいときに使うタグになります。
大体はhタグと併用で使うことが多いですね。
<h1>HTML/CSS入門</h1>
<p>
こんにちは！
今回はHTML/CSS入門編ということで、HTMLとCSSの基礎を初学者にもわかりやすく解説していきます。
HTMLはページを構成する要素を作成するマークアップ言語と言われる言語で、主に文字やページの構造を構成していきます。
CSSはスタイルシートと呼ばれており、ページのデザインを作成することができます。具体的には文字の色を変えたり、要素を配置したりなどです。
それでは、それぞれどのようなことができるのか見ていきましょう。
</p>
上記は本記事の導入部分をコードで書くとこのようになるという例です。
hタグで見出しを作り、その中にpタグを使って文章を記述しています。
aタグ
aタグは別のURLに遷移させるためのタグです。
クリックすることで、外部サイトや内部の別ページなどに移動することができます。
<a href="<https://www.google.com/>">Googleへ移動</a>
aタグ内のhrefプロパティに遷移先URLを記述することによって、クリック時に該当URLにページを移動することができます。
imgタグ
imgタグは画像要素を表示させるためのタグです。
<img src="<https://i.picsum.photos/id/777/200/300.jpg?hmac=eJq2XzCPCPppgoS96ReNEmweR3Wloh4ZsbWIgec36Uo>" alt="サンプル画像">
srcプロパティには実際の画像の相対パスやインターネット上の画像のURLパスを記述します。
altプロパティには画像が表示されなかったときに表示する文字を記述します。
このaltプロパティを設定することはSEOの観点から良いとされているので、できる限り設定するようにしましょう。
divタグ
divタグは一つのかたまりとして要素を区切りたい時に使うタグです。
<div>
<h1>HTML/CSS入門</h1>
<p>
こんにちは！
今回はHTML/CSS入門編ということで、HTMLとCSSの基礎を初学者にもわかりやすく解説していきます。
HTMLはページを構成する要素を作成するマークアップ言語と言われる言語で、主に文字やページの構造を構成していきます。
CSSはスタイルシートと呼ばれており、ページのデザインを作成することができます。具体的には文字の色を変えたり、要素を配置したりなどです。
それでは、それぞれどのようなことができるのか見ていきましょう。
</p>
</div>
<div>
<h2>準備</h2>
<p>
まずは皆さんのお手元で実際に操作することができるようにしていきましょう。
そのためには、テキストエディタと呼ばれるコードを記述してファイルを編集できるエディタを用意しましょう。
テキストエディタの種類は何でもいいのですが、お困りの場合はVScodeという有名なテキストエディタがありますので、こちらを使用してください。
テキストエディタのインストール方法などはまた別記事で紹介しようと思いますが、本記事では主題ではないので割愛させていただきます。
テキストエディタを用意したら、開いていただき、「index.html」という名前のHTMLファイルと「style.css」という名前のCSSファイルを作成しておいてください。
それではまずは「index.html」のファイルから編集してきますので、開きましょう。
</p>
</div>
上記の例では、導入部とメインコンテンツ部分を一つのかたまりとしてdivタグで囲ってます。
このようにかたまりごとにdivタグで囲っていきましょう。
なぜdivタグを使うかというと、後々CSSという言語でデザインを決めていくのですが、その時にdivタグをつけているとデザインしやすいわけです。
CSSを知らないうちに説明してもわからないかと思いますので、今はこのようにかたまりごとにdivタグで囲うと覚えておきましょう。
ulタグ、liタグ
ulタグとliタグは基本的に併用して使用し、リストを作成する時に使うタグです。
以下の記述することでリストを作成することができます。
<ul>
<li>リスト1</li>
<li>リスト2</li>
<li>リスト3</li>
<li>リスト4</li>
<li>リスト5</li>
</ul>
liタグは一つ一つのリスト要素です。
ulタグはliタグを囲って使います。
headerタグ、mainタグ、footerタグ
ここで、Webページの基本構造について説明しておきます。
Webページというのは基本的に以下のようにヘッダー、メイン、フッターに分かれています。
<header>たらおブログ</header>
<main>
・・・
</main>
<footer>・・・</footer>
headerタグはページのヘッダーを作成する際に必要となるタグです。
上記の一番上に位置する、ナビゲーションメニュなどのヘッダーに対してheaderタグを適用します。
同様に、mainタグはメインとなるコンテンツに、footerタグはサイトマップやSNSリンクなどを記載する一番下の要素に対して適用します。
大半のWebページではこのような構造になっていますので、Webページを作成する際は雛形としてあらかじめ用意しておくと良いでしょう。
inputタグ
さて、ここからはフォームを構成するタグについて説明していきます。
フォームというのは、例えばお問い合わせフォームやログインフォームなど何か具体的な値をサーバーに送信するための入力欄のことです。
その最も基本となるのがinputタグです。
こちらは終了タグがありません。
記述方法は以下のようになります。
<input type="text" />
inputタグはtypeによって様々な形のフォームを作ることができます。
最も使用例が多いのはtype=”text”で、これで文字を入力するフォームができます。
また、例えばtype=”email”であればメールアドレス用の入力欄、type=”password”であればパスワード用で入力値が隠されます。
<input type="email" />
<input type="password" />
他にもtype=”checkbox”やtype=”file”などなど様々な入力フォームを形成することができます。
作りたいフォームによって調べてみると良いでしょう。
textareaタグ
textareaタグもinputタグと同様に入力フォームを作るタグです。
違いとしては、textareaの方は名前の通り、テキストつまり文章を入れるための入力フォームです。
inputタグは基本的に一文を入れるものですが、textareaは長い文章を入れる入力フォームと覚えておけば良いでしょう。
こちらには終了タグがあります。
<textarea>
文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。
文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。
文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。
</textarea>
こちらはinputの時のようなtypeの指定はありません。
selectタグ、optionタグ
selectタグは選択肢を並べて、選べるようにした入力フォームです。
selectタグはoptionタグという別のタグと併用して使用します。
<select>
<option value="1">1<option>
<option value="2">2</option>
<option value="3">3</option>
</select>
上記のコードでは「1」「2」「3」という値を選択肢として表示させています。
optionタグの中にあるvalueというプロパティは実際に送信したときに送られる値のことです。
一旦これでフォーム系のタグは終了としましょう。
navタグ
navタグはナビゲーションメニューを作成するときに使います。
<nav>
<ul>
<li><a href="/">ホーム</li>
<li><a href="/menu">メニュー</li>
<li><a href="/about">店舗情報</li>
<li><a href="/contact">お問い合わせ</li>
<li><a href="/blog">ブログ</li>
</ul>
</nav>
sectionタグ
ここからは少し発展的な内容になります。
sectionタグはWebページの一つのセクションであることを示すためのタグです。
sectionタグは章や節が複数あるような場合に使います。
<section>
<h1>見出し1</h1>
<p>見出し1の内容1</p>
</section>
<section>
<h1>見出し2</h1>
<p>見出し2の内容2</p>
</section>
<section>
<h1>見出し2</h1>
<p>見出し2の内容2</p>
</section>
よくdivタグとの違いがわからないという方がいらっしゃいますが、divタグはあくまでCSSでスタイルを指定するために使われるもので、sectionタグは章や節をまとめるというページ構造上の役割があります。
実際、divタグで囲ってもsectionタグで囲っても表示にはあまり違いはありませんが、適切なhtmlタグを使用することはSEO的な観点から良いのでできる限りsectionタグを使う場合はsectionタグを使用するようにしましょう。
articleタグ
articleタグはセクションの中で独立しており、それだけで自己完結している要素に対して使用します。
要するにその部分だけ切り取っても、一つの記事として見なすことができるかということです。
こちらもよくsectionタグとの使い分けが混乱するタグです。
<article>
<h1>HTML入門</h1>
<h2>hタグについて</h2>
<p>hタグの説明や情報など</p>
<h2>pタグについて</h2>
<p>pタグの説明や情報など</p>
</article>
<article>
<h1>CSS入門</h1>
<h2>colorプロパティについて<h2>
<p>colorプロパティの説明や情報</p>
<h2>font-sizeプロパティについて</h2>
<p>font-sizeプロパティの説明や情報</p>
</artcle>
上記のarticleタグの中身の内容は一つ切り取っても成立していますよね。
このような場合にはarticleタグを使用します。
asideタグ
asideタグはメインのコンテンツを記述する際にその補足情報などを記述する際に必要となるタグです。
<section>
<p>Webページはheaderタグ、mainタグ、footerタグで構成されます。
</section>
<aside>
<h1>用語解説</h1>
<h2>headerタグとは</h2>
<p>headerタグの説明や情報</p>
<h2>mainタグとは</h2>
<p>mainタグの説明や情報</p>
<h2>footerタグとは</h2>
<p>footerタグの説明や情報</p>
</aside>
headタグ
headタグはHTMLファイルには必ず入っているタグで、ここは少し難しいのですが、要するにHTMLの設定などを書いているタグという認識で大丈夫です。
中にはmetaタグやtitleタグが入っており、代表的なものを紹介します。
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
上記のmetaタグは文字コードの設定を記述しています。
「UTF-8」というのは要するに日本語文字ということです。
また、titleタグはブラウザで表示する際のタブの名称を設定しています。
CSS
CSSはスタイルシート呼ばれており、HTML要素に対して装飾をすることができます。
使い方としては、HTMLのタグやclass、idに対してプロパティを指定することによって装飾します。
これは説明するよりも実際に書き方を見せた方が早いでしょう。
CSSのプロパティはとても多いため、本記事では最低限のプロパティのみに絞って解説していきます。その他のプロパティについては、都度調べるようにしましょう。
CSSの指定の仕方
CSSはタグやclassやidに対して指定します。
以下はタグを指定した場合。
<!DOCTYPE>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
p {
color: red;
}
</style>
</head>
<body>
<p>本文です。</p>
<p>本文です。</p>
</body>
CSSはHTMLファイルのheadタグの中でstyleタグを作成し、その中に書いていきます。
上記の場合だとpタグに指定されている要素は全て赤色になります。
次に、classを指定した場合。
<style>
.text {
color: red;
}
</style>
<body>
<p class="text">本文です。</p>
<p>本文です。</p>
</body>
上記のように、pタグにclassプロパティを付けることによってその値をCSSで指定することによって装飾を付けることができます。
classプロパティを指定する場合は、最初に「.」をつけます。
以下はidを指定した場合。
<style>
#text {
color: red;
}
</style>
<body>
<p id="text">本文です。</p>
<p>本文です。</p>
</body>
idについても、classと同様に指定することができます。
idに関しては、「#」をつけて指定します。
idプロパティはclassと違って、同じ名前を一つしかつけることができませんので注意してください。
color
まずはpタグに対して装飾をつけてみます。
<style>
p {
color: red;
}
</style>
<body>
<p>本文です。</p>
</body>
下記のstyleタグでpタグの中の「本文です。」という文字を赤色に指定しています。
<style>
p {
color: red;
}
</style>
実際にブラウザに表示させて確かめてみてください。
font-size
また、フォントサイズを変更することもできます。
<style>
p {
font-size: 20px;
}
</style>
上記はpx単位で指定した場合です。
<style>
p {
font-size: 1.5rem;
}
</style>
こちらは比率で指定しています。
この場合だと文字サイズを1.5倍にするという指定ですね。
font-weight
font-weightはフォントの太さを指定することができます。
<style>
p {
font-weight: 600;
}
</style>
font-family
font-familyはフォントの書体を指定することができます。
<style>
p {
font-family: sans-serif;
}
</style>
他にも様々な書体があるので調べてみてくださいね。
margin
marginプロパティは外側の余白を調整する際に必要となるプロパティです。
<style>
p {
margin: 30px;
}
</style>
<body>
<p>本文です。</p>
<p>本文です。</p>
</body>
横並びになっているpタグの上下左右にそれぞれ30px分の余白を空けます。
また、上だけ指定するならmargin-top、下だけならmargin-bottom、左だけならmargin-left、右だけならmargin-rightを指定しましょう。
<style>
p {
margin-left: 30px;
}
</style>
<body>
<p>本文です。</p>
<p>本文です。</p>
</body>
また、上下左右の余白の指定を一つにまとめて指定することもできます。
<style>
p {
margin: 30px 5px 10px 25px;
}
</style>
<body>
<p>本文です。</p>
<p>本文です。</p>
</body>
上記の例では4つ指定していますが、それぞれ上・右・下・左のmarginを指定しています。
時計回りと覚えておけば良いでしょう。
padding
paddingは内側の余白を調整する際に必要となるプロパティです。
使い方はmarginと全く同じと考えて構いません。
<style>
p {
padding: 30px;
}
</style>
<body>
<p>本文です。</p>
<p>本文です。</p>
</body>
marginと同様にpadding-leftなども指定できます。
marginとpaddingは余白を調整するプロパティで非常によく混同され、初学者のつまづく原因となっています。
さらに、この2つのプロパティは非常に重要なプロパティのため、本記事ではここを深ぼって解説していこうと思います。
marginとpaddingの違い
違いを一言で言うなら、「marginは要素の外側の余白で、paddingは要素の内側の余白を調整するプロパティ」です。
例えば、以下のコード。
<style>
p {
margin-left: 30px;
}
</style>
<body>
<p>本文です。</p>
<p>本文です。</p>
</body>
これはpタグ要素の”外側の”の余白を30pxだけ空けています。
人に例えるなら、隣の人と少し距離を空けた。その分の余白がmarginです。
また、以下のコード。
<style>
p {
padding-left: 30px;
}
</style>
<body>
<p>本文です。</p>
<p>本文です。</p>
</body>
これはpタグ要素の”内側の”の余白を30pxだけ空けています。
人に例えるなら、食べ過ぎて太ってしまい、それによって体の横幅が広がった。その分の余白がpaddingです。
marginの余白分はその要素に含まれていないのに対し、paddingの余白はその要素内の余白を空けているということです。
この違いは後々非常に大きな意味を持ってくることになるかと思いますので、しっかりと頭に置いておきましょう。
width
widthは要素の幅を指定します。
<style>
p {
width: 30px;
}
</style>
<body>
<p>本文です。</p>
<p>本文です。</p>
</body>
上記の例では、pタグ要素の幅を30pxに指定しています。
height
heightは要素の高さを指定します。
<style>
p {
height: 30px;
}
</style>
<body>
<p>本文です。</p>
<p>本文です。</p>
</body>
上記の例では、pタグ要素の高さを30pxに指定しています。
background-color
background-colorは要素の背景色を指定するプロパティです。
<style>
p {
background-color: red;
}
</style>
<body>
<p>本文です。</p>
</body>
上記の例ではpタグの背景色を赤色に変えています。
text-align
text-alignは要素の位置を指定することができます。
値としてはleft・center・rightがあり、指定した位置に配置できます。
また、注意点として、このプロパティは親要素に対して付与するものでその子要素に対して位置を指定します。
<style>
div {
text-align: center;
}
</style>
<body>
<div>
<p>本文です。</p>
</div>
</body>
上記の例では、divタグがpタグの親要素となっており、親要素であるdivタグに対してtext-alignを適用しています。
実際に位置が変更になるのはその子要素であるpタグです。
border
borderは要素に対して枠線をつけることができます。
<style>
div {
border: 1px solid red;
}
</style>
<body>
<div>
<p>本文です。</p>
</div>
</body>
上記の例では、divタグに赤色で1pxの太さの枠線をつけています。
左から順に枠線の太さ、線の種類、色を指定します。
CSSのプロパティは一旦ここまでとします。
今回紹介したプロパティはCSSプロパティのほんの一部です。
他にも様々なプロパティがありますが、必要に応じて調べていけば良いでしょう。
最後に
いかがでしたでしょうか。
HTML/CSSの全体像は把握できましたでしょうか。
今回はタグごと、プロパティごとに個別に解説していきましたが、実際にはこれらを組み合わせてWebページを作っています。
Webページを作るのは、それはそれでまた練習は必要ですが、基本的には本記事で解説したようなタグやプロパティの組み合わせで作ることができます。
これから実際にどのようにWebページを作成するのかなども記事として出していきたいと考えていますので、楽しみにしていてくださいね。
それでは、今回は以上です。
ご清聴ありがとうございました。
コメント