質問板

何を入れたらそのコマンドになるのか、できるだけ詳しく教えていただきたいです。
また、そのほかに知っているコマンド等あればそれもよろしくお願いします。

やり方は色々あるよ

(1)
htmlタグを使うやり方……一番昔からあるやり方だけど、現在はあまり推奨できないやり方も混ざってる
……ここはこれでやってる方が多いね

<タグ名>〜修飾したい文章〜</タグ名>って書くよ

複数の修飾を重ねたい時は、タグの囲みを入れ子にすればOK
たとえば、
<タグA><タグB>◯◯◯</タグB>△△△<タグA>
って書くと、◯◯◯部分はタグA・B両方の修飾が掛かり、△△△部分はタグAの修飾だけが掛かるんだ

(1-1)
中央揃えは<center>、斜体は<i>。
……ホントは斜体じゃなくてイタリック体を指示してるんだけど、ちょっと長くなるので後は割愛。イタリックのiだね。

試してみるよ

(2)
じゃ、次はCSSとそれを使った方法……なんだけどもCSSとタグとでは書式がかなり違ってくる
基本はコレ

セレクタ名{プロパティ名:プロパティ値;プロパティ名:プロパティ値}

分かる？
セレクタってのが波括弧({})内の指示を効かせる範囲のこと
タグでは文章内に直接書いて囲んだ範囲を対象にしてたよね
その範囲の中で変更したいプロパティ【property タグで言う「要素」「属性」をまとめたものだね】ごとにセミコロン(;)で区切り【この一区切りを「宣言」って呼ぶよ】、各プロパティに与える数値や選択をコロン(:)で分けてプロパティ値って呼ぶんだ

セレクタ名はタグの名前だけでなく、classやidで「このタグを使った部分のうち、こいつらだけ(class)」、「このタグを使った部分のうち、ここだけ(id)」という風に限定することもできる
まあそれどころか実に色んなセレクタの選択の仕方があるんで、ひとまずこれだけは覚えてくれ

セレクタ名.クラス名{}
セレクタ名#ID名{}

このように、クラス名は前にドット・ピリオド(.)を、ID名は前にハッシュ(#)を置いて区別するからね

一方、文章内でクラスやIDを宣言するのは……

<div class="クラス名">、<span id="ID名">

って書くからね

<div></div>はdivision、この範囲を「ブロック要素」として分割するよ、ってタグ
<span></span>はこの範囲を「インライン要素」として分割するよ、ってタグ
ブロック要素であるdivの中には色んなものを入れ子にできて、その内の一つがインライン要素……たとえばspan
逆にインライン要素の中にはブロック要素を入れることはできない【その地点でインライン要素が区切られる】ので注意してね
この２つをメインにして説明するからね

CSSの使い方は大きく分けて三種類
・別にCSSファイルを用意して、<link>でそれを参照する方法
・HTML内に<style>〜CSSの内容〜</style>とstyleタグを使って書いておく方法
・各タグごとに<要素名 style="プロパティ名:プロパティ値">の形でstyle属性で書いておく方法

世間一般で推奨されているのはCSSファイルを用意する方法だけど、ココではちょっと難しいよね【できなくはなさそう……試したことないけど】
ここではstyleタグを使う方法で説明するからね
これも現在では<body>内に置くのは推奨されていないので、<head>で囲むとなお良いね……まあ、面倒だし以後はやらないけど

他のCSSエディタとかでは、改行もインシデント【入れ子の階層ごとに行頭を落として視認性を高めること】も使えるけど、ここではコメント投稿→サーバーに格納→禁止ワードや改行を<br>タグに直すなどの修正をしてからHTML文書に追加……って方法を取るために余計なことをしない方がイイ……というより、そうじゃないとうまく動作しないんだ
なので、解説するときは改行込みで見やすくするけど、実際に機能しているかどうかを見る部分では改行空白無しで横にダラダラ続いててメチャ読みづらくなるからそのつもりでね

それと、HTMLのSourceを確認できるようになっててくれてると嬉しいな
それぞれのブラウザでやり方は違うから、「(使ってるブラウザ名)　HTML ソース読む方法」とかで検索掛けてね

(2-1)
さて、まずは中央揃えからだ
テキスト(これもインライン要素)の配置はtext-alignプロパティを使うよ
text-alignは指定したセレクタ内のインライン要素の水平配置を決定するんだ
中央揃えのプロパティ値はcenterだよ

まずは試してみよう
使うIDはTACenterとしようか
書いたのはこんなの↓だ

<style>
div#TACenter{text-align:center}
</style>

<div id="TACenter">
これがtext-align:centerだよ
ちょっと長い文章を書けばどうなるのか…想像できるかな？どう？思った通り？
じゃあ、もっともっと長くて改行のない文章ならどうなるか、想像できるかな？こういうことだよ、こういうこと……
スマホなら縦横を持ち替えてみて、PCならウィンドウサイズを変更してみてね

</div>

じゃ、実際に使えるように書いてみるよ

(2-2)
じゃ、次は斜体だね
これにはfont-styleのプロパティを使うよ
font-styleプロパティは指定したセレクタ内のテキストを立体(normal、普通の字体だね)・イタリック体(italic)・斜体(oblique)から選択できるんだ
フォントによってはイタリック体・斜体のフェイス【各フォントごとのバリエーション】が用意されてないなんてこともあって、その場合は……
・イタリック体選択時
イタリック体フェイス→斜体フェイス→立体をブラウザが傾ける
・斜体選択時
斜体フェイス→イタリック体フェイス→立体をブラウザが傾ける
の順に選択されるよ

先に少し触れたけど、イタリック体は歴史的・慣用的に意味があるので、ただ見た目だけを傾けたいなら斜体を指定するほうが良いね
詳しくはwikipedia:イタリック体でも参照してよ

じゃ、試してみようか
使うIDはFSObliqueとFSItalicってことで

<style>
div#FSOblique{font-style:oblique}
div#FSItalic{font-style:italic}
</style>

<div id="FSOblique">
こっちが斜体だよ
立体との違いが判るかな？
</div>

<div id="FSItalic">
こっちがイタリック体だよ
斜体との違いが判るかな？
</div>

じゃ、実際に使えるように書いてみるね

(2-3)
さて、今度は文字の色変更だね
文字の色変更に使うのはcolorプロパティだよ……一番重要・本質的な部分だから、わざわざtextと指定しなくていいんだ

色の指定にはタグの方で示した・色の名前(named-color)による記法・#RRGGBB(hex-color)による記法の他にも、『色空間関数(Color(Space)-Function)』っていうものをプロパティ値に使うことができるよ

色の名前は現在CSS ColorModule Level4っていう規格でRebeccaPurple(#663399)が追加されて、Transparent(透明、背景や背後のブロックが完全に発色される)を含めて計140色
149色名が使えるようになってる……AquaにCyan(#00FFFF)、FuchsiaにMagenta(#FF00FF)と異名が追加された他、大抵のgray系の色名がgreyでも書けるようになってるので色名の方が多いんだよね

hex-colorは書き方に色々なバリエーションが加わってる
特にアルファ値(不透明度、0で完全に透明=TransparentでFF(255)で完全に不透明)も使えるようになってるのが大きい
十六進数3桁で書く方法(#RGB)や、アルファ値を加えて4桁・8桁で書く方法(#RGBA、#RRGGBBAA)だよ

色空間関数は……俺はRGBA関数しか使わないけど、他にも色んな種類があるんだよ
本業のWEBデザイナーやScriptを使う人とかには嬉しいらしいよ
RGBA関数はrgba(赤,緑,青,アルファ値)っていう記法で表される4つの変数を持った関数で、赤緑青の3つは0〜255の範囲の整数値に、アルファ値は0(完全透明)〜1(完全不透明)の範囲の小数値に対応してる
……4・8桁のhex-colorと何が違うのか、って言われると……
2割透過とか8割透過ってときに、0〜255だと計算面倒でしょ？　あと、calc関数(計算caliculationの関数)とかを使って変数の代入したりできるんでね

じゃ、試してみようか
今回はIDじゃなくてclassを使ってみるよ
用意するclassは……red・green・blue(色名)と、yellow・cyan・magenda(hex-color)、black・gray・white・transparent(RGBA関数)とちょっと多いよ

<style>
.red{color:red}.green{color:green}.blue{color:blue}
.yellow{color:#FFFF00}.cyan{color:#0FF}.magenda{color:#FF00FFFF}
.black{color:rgba(0,0,0,1)}.gray{color:rgba(127,127,127 ,1)}
.white{color:rgba(255,255,255,1)}.transparent{color:rgba(101,100,101,0)}
</style>

<div class="red">
で、なんでこんなにいっぱい、<span class="green">しかも<span class="red">class</span>で用意したかって言うと、</span><span class="red">class</span>はひとつのHTMLドキュメント内で<span class="blue">複数回使える</span>ってことを確認してほしかったんだ
</div>

<div class="yellow">
それと、<span class="cyan">セレクタ</span>の指定でタグ名を抜いて<span class="cyan">クラス名だけ指定した</span>ことで、<span class="magenda">divでもspanでもそのclassを宣言してたらセレクタの指定に引っ掛かる</span>ってこともね
</div>

<div class="black">
あと、ついでにdivの入れ子とspanの入れ子についても確認しといてよ
<div class="gray">
ほら、ここはdivが二重の入れ子になってるよ
<div class="white">
ここは三重だね……まあ、色変えてるだけならあんまし意味のない話なんだけどね
</div>
ここは二重だよ　grayに戻ってるの分かる？
</div>
ここだとblackだよね
<span class="gray">spanの中にもspanが入っても良いんだ
<span class="white">ここはspanが二重になってるよね
<span class="transparent">ここは三重だけど……アルファ値が0だから見えないはずさ
あんまりテキストの透明化は多用しちゃだめだよ
本当は文字色をアルファ値0にするのは非推奨だからね
</span>
</span>
</span>
</div>

じゃ、実際に使えるように書いてみるよ

(2-4)
ほいじゃ、他のCSS要素のうち使いやすそうなのから
後は「どう書くか」は抜いて実際にどう機能するかしか
書かんよ

セレクタ名{background-color:プロパティ値【named-color,hexcolor,color-functionのいずれか】}
これは背景色の変更だね
class="BGRed"で背景を赤にしてみるよ

この先だけspanで括ってるよ→ここだけ背景が赤いよね←この手前だけspanで括ってるよ
この先だけdivで括ってるよ、改行は入れてないからね→

他、なんか聞きたいことあればどーぞ
あ、Sourceを（意味はともかく）読めるようになってから質問してね

えーめちゃくちゃ親切やん…
このサイトスレによって仕様が違ったりするし、
色々試行錯誤してみるの楽しくて有難い
スレ主はちゃんとお礼言うのよ

お礼やお返事、反応があると嬉しいよね
自分で調べればそんなに大したことは書いてないってわかるんだけどさ、それでもこれだけ書くのって結構大変だし……
ちょっとモチベーション上がったよ、こちらこそありがとう