犬の手も借りたいあなたに最適な記事を届けます

【超初心者編】WEB制作始め方・HTML&CSS入門②

スポンサーリンク


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

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

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

[temp id=2]

HTML書き方の基本

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

タグとは<???> </???>と書かれたものです。

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

タグの基本

<開始タグ>中身</終了タグ>

開始タグ終了タグがあり

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

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

タグの種類


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

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

<h1>—</h1>


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

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

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

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


タグの数が

h1<h2<h3<h4<h5<h6

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

<p>—</p>


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

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

<div>—</div>


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

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

以下をご覧ください

コーディング内容

<div>
<h1>見出し1</h1>
<p>内容2</p>
</div>

コーディング結果

見出し1

内容2


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

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

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

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

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

CSSの書き方


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

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

レッツプリky・・・・・・・・

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

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

方法1


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

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

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

<link rel=”stylesheet href=”practice.css”>

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

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

方法2


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

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

CSS実践

ステップ1: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の記述方法2の書き方でご説明します。

コーディング結果

<div>
<h1>ブログの書き方</h1>
<p>練習1</p>
<p>練習2</p>
</div>

コーディング内容

ブログの書き方

練習1

練習2


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

コーディング結果

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

コーディング内容

ブログの書き方

練習1

練習2


と、こうなります。

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

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

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

[temp id=2]

スポンサーリンク

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です