HTML①【初心者向け30代40代からOK】

HTMLはホームページを作ったことのある人は組んだことのあるプログラムだと思います。

HTMLは基本的には表示するのみの比較的簡単なプログラムで

簡単に言えば文字をタグというHTML特有の記号で囲みます。タグとは決して難しいものではなく開始タグ<>終了タグで成り立っていてそれがホームページを構成しています。

タグの使用例を上げると見出し（タイトル）をWeb上で表示しようとすると以下のようになります。

サンプル
<h1>タイトル</h1>

このようにタグで囲むとWeb上では

<h1></h1>
のタグは消えて単なる

タイトル

という太字のみが表示される状態になります。

段落を表示する場合は<p></p>というタグで囲みます。

サンプル
<p>これが記事です。</p>

Web上では「これが記事です。」と表示されて
<h1>で囲んだ場合と比べて小さく細い文字で表示されます。

これがHTMLの基本です。
Web上ではHTMLで表示することがホームページ制作の基本になっていて世の中の全てのホームページはHTMLで表示されていますので勉強しても損することはないですしアフィリエイトやブログをしたい人にも役立つ比較的簡単なプログラミングなので是非勉強していただきたいと思います。

CSSの基本

CSSの基本的な1例を挙げると次のような感じになります。

　　

CSSの書き方はセレクタに対してプロパティと値が対になって成立しています。
プロパティは英語で所有権、所有、財産、(ものの)特質、特性といった意味です。
この場合特性という意味でしょう。

#sampleの色の特性は赤（値）という感じです。青であればblueに変えれば良いです。
ちなみに色を表す値はred、blueという書き方以外に赤の場合は#ff0000、青の場合は、#0000ffという感じのカラーコードで書いても同じ意味になります。
カラーコードの方が色の表現がより細かくできるので一般的にはカラーコードを使うことが多いです。
プログラムは基本、英語なので少し馴染みにくいのですが、慣れてしまえば簡単です。

1つのセレクタに対して複数のプロパティを設定することが出来ます。

普通に書けば

#sample{background-color:blue;width:300px;height:200px;}

となりますがこれだと読み辛いのでプロパティを1つ書くごとに改行します。
こんな感じです。

 #sample{
  background-color:blue;
  width:300px;
  height:200px;
}

このように書いたほうが一つ一つのプロパティが読みやすいです。
background-colorは青、widthは幅300px、heightは高さ200pxという意味です。

基本的にはCSSはHTMLに対してこのような色、幅、高さなどに設定するためにあります。なのでHTMLが無ければCSSは書きようがありません。

先ほどの例で説明しますと、CSSの#sampleはHTMLでは<div id="sample"></div>と書かれています。
#sampleの#はHTMLではidになります。
この例とは別に.sampleという書き方もあり"."の場合はHTMLではclassになります。
<div class="sample"></div>という感じです。

classとidの違いはidはその1枚のファイルの中に一つしか設定出来ません。逆にclassはいくつも設定出来ます。