HTML/CSSの基礎を勉強しておくと後が楽になるのですよね。自分で魔改造したい人はHTML/CSSの基礎は必ず勉強しましょう。

HTML（HyperText Markup Language）とはWebページを作るために必要な言語です。1989年、CERNの職員が提案し1990年にコード化されました。スイス生まれのエリート。

情報を整理するために作られました。多くの情報の中から必要な情報をコンピューターが解析できるようにしたかったのです。文書構造を明確にするために作られました。

HTMLは時代とともにバージョンが上がって、使える機能も変化していっています。

1993年　HTML 1.0　一番初期のHTML。

1995年　HTML 2.0　

1997年　HTML 3.0

1997年　HTML 4.0　ケータイ小説ブームやレンタルスペースでHTMLを書いていた人にとって一番なじみがあるバージョン。そのころにHTMLを覚えた人にとってはこれがHTML。

2014年　HTML 5　現在のHTMLの主流。

HTML 4 まではまだまだインターネットも黎明期で言語としての方向性が完全に定まっておらず、ブラウザ間での仕様の違いもあってなかなかにカオスな状況でした。すぐに変わる仕様に振り回された人も多かったようです。（だいたいIEのせい）

HTML 5ではブラウザ間の差異も少なくなって、安定した感じになっています。役割や使い方に関しても大体定まったように思われます。

HTML4 とHTML5で一番大きく変わったのは、HTMLの役割です。（変わったというか元に戻ったという方が正確かも）

『文書構造を定義するための言語として徹底する』

もともとHTMLは文書構造を整理するために作られたのですが、HTML4では多くの装飾用のタグが作られたりしてやりたい放題でした。

それがHTML5になって、原点に戻ってきたということです。

そのためHTML5になってそれまで使っていたタグが非推奨になりました。文書構造を表すのではなく装飾を目的としたタグは大体非推奨となっています。

例えば非推奨タグはこんな感じ。（これ以外にもいっぱいあります）

<big>大きめの文字

<blink>文字の点滅

<center>センタリング

<font>フォントのサイズ・色・種類

<marquee>文字のスクロール

これらは文書構造ではなく、装飾を意味しているのでなるべく使わないようにしましょう。使えないわけではないのですが、使っているとあまりいい印象は持たれません。（ただ、bとかiとかは広まりすぎて非推奨でもよく使われていたり）

特に本職の人はこういった非推奨タグを葬り去ることを頑張っている人もいて、見ただけで消したくなる衝動に駆られる人もいれば、そうか君はそのころの人間なんだなと認識されることもあります。

親の仇のような目で見られたりもするので、まじで注意しましょう。（怖）

人に教えるときは、非推奨タグでの装飾はなるべくやめてください。それでも教える場合はこういった背景があることを教えましょうね。

まぁ、自分が理解して使う分には問題ないです。（覚悟しているのであれば）

-　-　- ✂切り取り✂ -　-　-

じゃあ、どうやって装飾したらいいの？　と思われる人もいると思います。ちゃんとそのための言語も作られています。

それがCSSです。

CSS（Cascading Style Sheets）はHTMLとともに使う言語で、装飾するために特化したものです。

文書構造はHTML、装飾はCSSという役割分担となっています。HTML4のころはまだまだでしたが、今ではできる限り装飾はCSSを使うようになっています。

CSSは1994年にCERNで誕生しました。スイス生まれのエリート。

1996年　CSS1　

1998年　CSS2

2012年　CSS3　現在のCSS

ケータイ小説全盛期にHTML/CSSを覚えた人はHTML4/CSS2が基本になっている人が多いと思われます。

ですが、今はHTML5/CSS3ですので一度覚え直しをするのがいいと思います。

多くのことが変わっていますので、最新の書き方が気になる方は是非勉強してみることをお勧めします。

-　-　- ✂切り取り✂ -　-　-

さて、ここまで長々と説明してきましたが、ここからが使い方となります。

まず、HTMLの使い方です。

HTMLを使う大原則は、<>で挟むことです。

<XXXXX>や</XXXX>がたくさん使われます。

これらは『タグ』と呼ばれます。

文書構造を表すために、HTMLを使います。

例として挙げると、

<h1>見出し</h1>

<p>段落ですよ</p>

といった感じです。

hは見出し、pは段落を表すタグです。

こんな風に文書内の構造を整理するのがHTMLの役割です。

開始タグから終了タグに囲まれる部分をコンテンツ、それ全体を要素といいます。

終了タグには/が入ります。

要素の中に他の要素を入れることも出来ます。

例えば、<p>私の小説に<strong>レビュー</strong>が書かれました！</p>

<strong>は強調要素です。強調したい部分に使います。

ただ、どんな要素でも中に入れられるかというとそうではありません。

文書構造的におかしいものは中に入れられません。文法違反となり、ブラウザ側で適切なように処理されます。

例えば<p>段落の中に<h1>見出し</h1>があるっておかしくない？</p>

段落の中に見出しがあるのは不自然です。この場合は文法違反となります。

ブラウザにもよりますが、だいたい<p>段落の中に</p><h1>見出し</h1><p>があるっておかしくない？</p>

のように処理されます。

なお、コンテンツを持たない要素もあります。その場合終了タグは不要です。

例えば画像タグです。

<img src="">

このようにコンテンツ、終了タグは不要です。

大体、基本の説明が終わったので、文書構造を表すタグを簡単に紹介していきます。（全部ではないです）

html:

HTMLの文書を表す

head:

ブラウザには表示されない設定部分を記述するところ。

body：

ブラウザに表示する部分

h1,h2,h3,h4,h5,h6:

見出し。6段階の見出しが用意されている。ただ使うとしてもh1~h3程度

p：

段落を表す

div:

意味を持たないブロック要素。とてもよく使う

span:

意味を持たないインライン要素。一部分を装飾したいときによく使う。

img:

画像を表示する

strong:

強調要素。

small:

著作権や、法的表記。コピーライトなんかを表示するときに使う。

br:

改行

table:

表を作るときに使う。

ul, ol:

番号なしリストul, 番号付きリストolの中にliタグを使います。

a:

リンク

header:

ヘッダー部分

nav:

ナビゲーション

article:

記事全体

section:

一つのテーマを持った部分

main:

メインの部分

aside:

補足情報

footer:

フッター

これらの要素を組み合わせて文書構造を作るのがHTMLのお仕事になります。

といっても、小説家になろうの活動報告では使えるタグとスタイルが限られているので、文書構造はかなり適当に作らざるを得ない部分も出てきます。

小説家になろうで使う（使える）のは主に

div　

span　

p　

a　

br　

img　

ul

ですね。

この中でもdiv　、span　、img　、a　だけで十分です。正直縛りが多いのでほとんどが意味を持たないブロックのdivか意味を持たないインラインのspanを使います。

まぁ、小説家になろうでの活動報告では普通のHTMLの使い方ではないことだけ理解してください。

-　-　- ✂切り取り✂ -　-　-

さて、次は装飾ですね。装飾にはCSSを使います。

CSSはHTML 文書の要素に選択的に装飾（スタイル）を適用できます。

例えば、HTML ページのすべての段落要素を選択し、その中のテキストを赤色にするには、次のような CSS を記述します。

p {

color: red;

}

一度に複数のプロパティ値を変更するには、セミコロンで区切って次のように記述します。

p {

color: red;

width: 500px;

border: 1px solid black;

}

なお、この記述はhead内に<link rel="stylesheet" href="styles.css">でCSSファイルを読み込むか、style要素を適用するかで反映させることができます。

特定のタグにだけ適用する場合はclassやidを使って指定します。

これは小説家になろうのHTMLですけど、こんな風にid=xx、class=xxで文書内に識別子を用意してCSSで設定します。

idはそのページで1個までしか同じ名前を付けられません。、classはいくつでも大丈夫です。

それぞれ#, .で指定します。

#id{

スタイル

}

.class{

スタイル

}

基本的にCSSはHTMLと分けるために外部ファイルに記述しておいて、それを読みだす形にすることが一般的です。

それ以外にもう一つ装飾方法があります。style属性を利用してインラインに書き込むことでも適用されます。

<p style="color: red;width: 500px;border: 1px solid black;">こんな感じ</p>

これはよく見たことがあるかもしれません。

小説家になろうの活動報告では、head内のコードはいじれないため、インラインに書くことで装飾を行います。

ただ、どうしても使わざるをえない状況でなければ、インラインスタイルを使うのは避けましょう。

小説家になろうの活動報告ではこれでしか自分の思ったままに装飾することができないので、使いますが、こういったインラインに書き込むやり方は普通ではないことを覚えておいてください。

この方法はメンテナンスが難しくなるのと、可読性が非常に悪くなります。推奨されていませんので、小説家になろうの装飾以外ではなるべく使わないようにしましょう。

それでは最後に小説家になろうでよく使うstyle属性を説明しておきます。

color：

文字色を指定

background：

背景色を指定

background-image：

背景画像を指定

backgraound-repeat：

背景画像の繰り返しを指定

border：

枠線を指定

font-weight：

文字太さを指定

font-size：

フォントサイズを指定

line-height：

行間を指定

text-align：

位置ぞろえを指定

letter-spacing：

文字間を指定

width：

横幅を指定

height：

高さを指定

margin：

外側余白を指定

padding：

内側余白を指定

これらを組み合わせて装飾していきます。

具体的な使い方は後々説明します。

とりあえずHTML/CSSの基礎的な部分の説明でしたが、小説家になろうの活動報告では普通の使い方はしません。

それだけ理解してください。小説家になろうの活動報告の使い方が普通だと思ったらひどい目にあいます。

特殊なやり方をしないと思ったように装飾できないのですよね……。

これ以降は小説家になろうの活動報告に特化したやり方を教えるので、普通の使い方を勉強したい人は、前書きにある参考リンクを見てみるといいかもしれません。