HTMLとCSSの違いと基礎

2018年11月5日

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

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

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

2.タグの基礎

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

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

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

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

・HTMLとは

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

・CSSとは

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

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

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

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

1言で言うと

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

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

 2.タグの基礎 

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

“<(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タグを使用していきます。

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

●<p>文書<p/>

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

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

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

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

●<b>文書</b>

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

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

●<strong>文書</strong>

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

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

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

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


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

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