WEBページを作りたい!!でも”HTML””CSS”ってなに??

WEBページを作りたい!!でも”HTML””CSS”ってなに??

HTMLとは

 

HTMLとは、Hyper Text Markup Language(ハイパーテキスト・マークアップ・ランゲージ)の略で、

Webページを作るための最も基本的なマークアップ言語のひとつです。

普段、私たちがブラウザで観ているWebページのほとんどが、HTMLで作られています。

 

記法は、下のコードのように開きタグと閉じタグで囲むような形になっています。

<タグ名></タグ名>

 

このように囲んだものが一つの要素となります。

この要素を組み合わせることによって構造を作っていきます。

例えば、下のように書けば、div要素の中にp要素が二つ入っているという感じです。

 

<div>
 <p>あいうえお</p>
 <p>かきくけこ</p>
</div>

要素の順序は、上から順に並ぶようになっています。

このように、HTMLは要素を入れ子にして記述することで、構造を表しているんです。

 

またこの要素には、idとclassを振り分けることができます。

厳密には違うのですが、イメージとしては名前をつけれると思ってもらえれば大丈夫です。

idはこのように指定します。

 

<p id=“name”>名前</p>

 

classはこのように指定します。

 

<p class=“name”>名前</p>

 

HTMLの基本はたったこれだけです。

あとはそれぞれのタグがどのような役割をしているか覚えればOKです。

しかも覚えるのは良く使うものだけでいいんです。

良く使用されるものに関しては、最後にリストアップしていきます。

 

CSSとは

 

CSSはHTMLで作った要素を装飾するスタイルを指定する言語です。

ページのデザインは基本的にCSSで記述できます。

 

CSSはデザインを指定したい要素を宣言し、その中にどのような装飾をするのかを記述するといった形になります。

下のような感じです。

 

要素名 {
プロパティ名:;
}

 

要素名はHTMLのタグ名やid、class名になります。

idとclassの指定は後で説明しますね。

プロパティ名というのは、何のデザインをいじるのか、という部分ですね。

背景をいじるのか、幅をいじるのか、高さをいじるのかなどです。

値は、そのプロパティをどんな値にするのかということです。

色を赤くしたいとか、幅を100pxにしたいとかです。

実際のCSSはこんな感じになります。

 

div {
background:red;
}

 

ここでは、div要素の背景を赤にする、という装飾を指定しています。

これが一番基本なのですが、細かい話があるので、一つずつ見ていきましょう。

 

CSSは3種類の書き方がある

 

CSSには3種類の書き方があります。

  1. HTMLタグに埋め込む
  2. HTMLファイル内に埋め込む
  3. CSSファイルに記述

この3種類です。

これで何が変わるかといえば、デザインを適用する優先順位が決まります

1のHTMLタグに埋め込んだスタイルが一番優先され、次にHTMLファイルに埋め込んだもの、一番優先されないのがCSSファイルに記述したものです。

ただし、綺麗な書き方を目指すために、できる限りHTMLタグに埋め込む書き方はやめることを推奨します。

 

ここで注意してほしいのが、このCSSの種類以外でも優先順位が決まるポイントがあることです。

何かと言うと、CSSを記述する順番なんですね。

下に書いたものほど優先されます。

このことも記憶の片隅に置いておくと、なぜだか上手く適用されていないというデザインのバグを見つけやすくなるかもしれません。

ではそれぞれの書き方を1つずつ見ていきましょう。

 

HTMLタグに埋め込む

 

ここでは下のように書きます。

<p style=“color:red;”>あいうえお</p>

この「style=””」がキーワードとなっています。

“”で囲まれた部分にCSSを書くことで、スタイルを指定します。

 

HTMLファイルに埋め込む

 

この書き方では、下のようなコードになります。

 

<style>
div {
 background:red;
}
</style>

 

これは上の例で書いたときと同じ記述方法ですが、styleタグで囲んでいます。

このstyleタグで囲まれた部分がCSSとして認識されるわけです。

 

CSSファイルに書き込む

 

これが一番一般的な書き方だと思います。

一番最初に紹介したCSSの書き方です。

div {
background:red;
}

これは独立したCSSファイルに書き込む時の書き方になります。

はてなブログでいえば、デザインCSSに当たる部分ですね。

 

idに対するCSS

 

idに対するCSSは次のようにして記述します。

#name {
background:red;
}

#をid名の前に付けることで指定するわけです。

これでidごとにCSSを記述できます。

 

classに対するCSS

 

classに対するCSSは次にように記述します。

 

.name {
 background:red;
}

 

.をclass名の前に付けることで、classに対するCSSを記述することができます。

 

 

HTMLとCSSを勉強するのは、他のプログラミング言語の勉強をするよりも簡単ではあります。

初心者向けのHTMLとCSSの基本をまとめた記事でした。

量は少し多いですが、どれも重要なポイントです。

マスターして、自分のブログやホームページをどんどんカスタマイズしていきましょう!