HTML＆CSS①では、HTMLとは？
から始まりhead内の記述について説明しました。

本記事HTML＆CSS②では
HTMLの基本とbodyの中身について触れていきます。

超初心者にも分かりやすいようじっくり説明していきます。

HTML書き方の基本

HTMLを書くにあたって様々なタグが存在します。

タグとは＜？？？＞　＜／？？？＞と書かれたものです。

様々なタグを用いてその中に文字を書いていくのがコーディングです。

タグの基本

＜開始タグ＞中身＜/終了タグ＞

開始タグと終了タグがあり

これの間に文字を書き、
WEBサイトに表示します。

※例外もあります。後に説明します。

タグの種類

では次に、タグの種類を見ていきます。

タグの種類は膨大な数ありますので、よく使う必須タグだけ紹介します。

＜h1＞—＜/h1＞

見出しタグといい、h1からh6まで存在します。

h1は１記事あたり１つしか使用しないことを推奨します

h2は中見出し、h3は小見出しとだんだん小さくなっていきます。

ここで注意点：h1の下にh2があり、その中にh3、h4と続いていくので

タグの数が

h1＜h2＜h3＜h4＜h5＜h6

と、ならなければいけません。

＜ｐ＞—＜/ｐ＞

Pタグでは、この中にWEBサイトに表示する文字を書きます。

Pタグなしでも文字を書くことが出来ますが、逐一Pタグ内に文字を書いた方が良いです。

＜div＞—＜/div＞

＜div＞で囲った部分をブロック要素としてグループ化出来ます。

簡単に言うと、いくつもの要素をひとまとめにします。

以下をご覧ください

<div>
<h1>見出し１</h1>
<p>内容２</p>
</div>

左がコーディングで、右側がそのプレビューです。

h1とpにdivで囲いまとまっています。

divにオレンジ色を追加した結果、その中に記述したh1とpも同じ色になりました。
※色の付けかたはCSSでご紹介します。

この3つが一番頻繁に使います。

他にもたくさんタグはありますが、よく使う3つをすご紹介しました。
他のタグは出てくるたびに説明致します。

CSSの書き方

では、HTMLの基礎を深めていく前にCSSの書き方を説明します。

HTMLもCSSも一気に覚えられないと思うかもしれませんが、HTMLとCSSは二人で一つ

レッツプリkｙ・・・・・・・・

二つでセットなので安心して簡単に覚えられます！

CSSの書き方には2種類あり、まずはそれを紹介します。

方法1

ステップ１：ファイルから新規作成を選びpractice.cssというファイル名でテキストを作成します。

拡張子を「.css」にすることでそのテキストがCSSとなります。

ステップ２：入門①で説明した、htmlファイルのheadの中に

＜link rel=”stylesheet href=”practice.css”＞

と書き込むことでCSSファイルと連携することが出来ます。

これは方法２と違い1度書いたCSSを様々なhtmlのhead内に書くことで、共通化することが出来ます。

方法2

htmlファイルの＜/html＞の後に、＜script＞＜/script＞を記述し、そのscriptの中にCSSを書くことが出来ます。

これは方法１と違いCSSをリンクさせる必要はありませんが、
書き込んだHTMLファイル内でしか反映できないCSSになります。

CSS実践

ステップ１：HTML

＜p＞こんにちは＜/p＞に

＜p class=”practice1″＞こんにちは＜/p＞か

＜p id=”practice1″＞こんにちは＜/p＞のどちらかor両方をつけます。

classの部分はidでも可能ですが、微妙な違いがあります。

HTML側の見本です↓

<p class="practice1">こんにちは</p>
<p id="practice2">こんにちは</p>

classとidの違い

下記のようにclassは、何回も使いまわすことができます。

使いまわすことで、一度のCSSコーディングで一気にカスタマイズできます。

しかし、idは一度しか使うことができません。

<p class="practice1">こんにちは</p>
<p class="practice1">こんにちは</p>
<p class="practice1">こんにちは</p>
<p id="practice2">こんにちは</p>

ステップ2：CSS

classで付与したなら.practice1{}

idで付与したなら#practice1{}

とCSS部分に書きます。

CSS側の見本↓

.practice1{
/*ここにCSS内容を記載*/
}
#practice2{
/*ここにCSS内容を記載*/
}

ステップ3：CSS内部

{}の中に、実際にCSSを書いていきます。

CSSの中身はたくさんありますので、この先で例を一つ。

そして詳しい中身はこちらで紹介します。

ステップ4：CSS

{}の中に、記載するルールは、

色を赤にしたい場合、

color:red;

色を青にしたい場合、

color:blue;

と書きます。

：と；を忘れないようにしましょう。

HTML＆CSS実践

では、実際ににHTML＆CSSを書いてみましょう。

以下は左が結果で右がコーディング。先ほどと同様です。

今回はCSSの記述方法２の書き方でご説明します。

<div>
<h1>ブログの書き方</h1>
<p>練習１</p>
<p>練習２</p>
</div>

もしCSSがなかったらコーディング結果は左に詰められて、上に詰められ、見にくい結果になります。ここでCSSの出番！

<div>
<h1 class="sample1">ブログの書き方</h1>
<p class="sample1">練習１</p>
<p  id="sample2">練習２</p>
</div>
<style>
.sample1{
   color:red;
}
#sample2{
   color:blue;
}
</style>

と、こうなります。

これは把握まで一例で、コーディングによって様々なことが出来ます。

ので、出来ること別に記事を作成していますので、自身の作成したいものにあった記事をお読みください。

ここまでご閲覧ありがとうございました。