HTMLとCSSの違いと基礎

2019年3月28日

ネットビジネスD運営者の龍一です!

今回は、HTMLとCSSの違い基礎の紹介です。

1.HTMLとCSSは、違うの? 同じなの?
2.タグの基礎
3.初心者が知るべきタグの基本系

 HTMLとCSSは、違うの? 同じなの? 

HTMLとCSSは、違うの? 同じなの?

ネットビジネスするなら、細かいタグや難しい事とは別に
構成してる基礎になっているモノですから
その違いくらいは、知って置いた方が良いと思いますので
HTMLとCSSと、少し2つの簡単な基礎のタグを書いてみます。

・HTMLとは
 基本的には記述したテキストを表現する役割で使用されています。

・CSSとは
 基本的に色やフォントなど見た目に関する情報に使用されています。

例えば、HTMLは見出し、段落、箇条書きなどで
CSSは、文字の色や文字サイズ、背景カラーなど見た目の部分です。

なので、HTMLを少し勉強していると
必ずと行っていいほど、セットで登場してくるのCSSなんです。(^^:

だから、ネット上でいろいろなサイズの文字や色の文字を見て
重要な事だとか、クリックしてみようとか判断したり
アフィリエイターが、判断してもらう為に使っているのは
HTMLとCSSの組み合わせになります。

1言で言うと

HTMLにデザイン要素を持たせるのが、CSSです。

それだけも覚えておけば、文字サイズや色を変えたいのに
上手くいかない場合に「CSS」を教えてください。
と、言えるわけです。(^^:

 タグの基礎 

タグとは何?て部分から少し簡単に説明しますと

“<(less then 開始タグ)” と ”>(more than 終了タグ)”

と言う2つの記号(下↓)の間に挟まれたものです。

<   >    <  />

開始タグ終了タグによって挟まれた範囲に
それぞれの”内容”があることを示します。

例えば

例 pタグは、段落のタグになります。

<p>内容</p>

<p>ネットビジネス・その1<p/>
<p>ネットビジネス・その2<p/>
<p>ネットビジネス・その3<p/>

つまり、コンピュータは開始タグの箇所から~

あなたの記述したい内容が始まっていることを認識して
終了タグまでが、その範囲と認識して表示させている事になります。


そのため、基本的には開始タグと終了タグは
2つセットで用いる事になっています。

中には少数ですが、終了タグを必要としないタグも存在します。

例えば <br> は改行のタグなので基本的に
開始タグだけを使用すれば反映させることができます。

<hr> も、文中に引かれる横線(下のような)を1つで表示します。


 3.間に入れる属性 

では、そのタグの間に入れる内容は、どんなものが在るのかと言うと

文字色、背景色、フォントサイズ、サイズ

などを入れて指定します。

color(テキストの色)

font-size(文字の大きさ)

background-color(背景色)

初心者が知るべき基本系のタグ

●hタグ・見出し

<h1>見出しのタイトル</h1>

hタグは見出しのタグです。

タグは階層構造になっていて、上の階層から
h1,h2,h3,h4,h5という順に見出しになっていきます。

h1は一つのページにつき一つ存在し、タイトルとも言います。
本文に表示される一番大きな見出しは、h2からになります。

h2の下に小見出しを立てたい場合は
h3タグを使用するなど、hタグを使用していきます。

注意

h2の下に>h3を飛ばして、h4NGです。

数字なので解ると思いますが、順番に使いましょう。

見出しはユーザーにコンテンツを、見やすくするだけでなくて
検索エンジンに内容をアピールする役目も果たしているので
順番を守る事は、検索・SEO的にも重要な役割を果たしていますので
シッカリ、これは守って行きましょう。

<p>文書<p/>

pタグ文書が、この間にあることを示します。
見出しの後に配置される文章をpタグで挟むことで
ウェブページの本文になる文章を表現することができます。

文書の段落ごとに、この<p>タグで囲む事になっています。

*通常pタグの中で改行を行っても、反映されることは
ありませんので、ブラウザ上で改行して見える文書を
コピペしたら、長い1行だったと言う事があると思います(^^:

改行や空白を、確実に表現したい場合は
別のタグで指定します。

<b>文書</b>

簡単に言えば太文字です。
この間の文字が太く表示されます。

強調したい場合に使用します。
強調タグと見た目の変化は同じです。

<strong>文書</strong>

強調タグは、ストロングタグとも言われます。
上の太文字タグと見た目は同じですが
検索エンジン向けに、特定のキーワードですよと
アピールするタグになります。

なので、あまり多用することは良くないです。

<font size=”5″ >文書</font>

フォントのサイズを指定する場合に使用します。
本文中の文章のサイズを変更したい場合は
このタグを使用していますので、手入力ならば、上の例の数字「5」
大きい数字にすれば大文字に、小さくしたら小文字になります。


指定のない場合の文字サイズは16pxになっている場合が多いです。
太文字タグなどとの併用も可能です。

タグは他にも、たくさんありますが、まずは基本の基本だけ
覚えて、HTMLカスタムする必要がある時に
1つずつ覚えていきましょう。