小説家になろうでのHTMLの書き方（新しめ）――fontタグは非推奨（廃止）です！

作者：板久咲絢芽

結論：fontタグは云年前から定義上廃止の非推奨です。マジで。コレ超重要。

Q.非推奨（廃止）ということは？

A.いつまで最新ブラウザがちゃんと表示してくれるかわかんねえってことだ！（集中線）

ちなみにstrongタグを強調以外（単にデザイン的に太くしたいだけとか）で使うのも現在は非推奨です。

この辺りの推奨・非推奨基準は経緯含め最後に書くね、周知したいのは現非推奨と現推奨の互換の書き方じゃもんね〜。

あと、なろう歴浅すぎてテンプレとしてどういう文章作ればいいかわかんないので、「こういうテンプレほしい」があれば、投稿後要望頻度次第である程度対応します、はい、この文句が書かれてる限り（悲しき凝り性と職業病の合せ技の顔）

いや、それで多少データ集まれば、「こういうテンプレのぞまれとるんやな」がわかって項目立てて付け足せるから……なので汎用性高いテンプレ要望ぷりーずぎぶみー。

１ページに全部収めたけど、お品書き。

望まれてるテンプレがわかったらたぶん⑥辺りがズレる。

①　文字サイズ＆色の変更

②　文字の太さ変更

③　①と②を組み合わせる＆改行について

④　リンク貼ろうぜ

⑤　中央寄せにしたいって？

⑥　プロパティいろいろ

⑦　おまけ

――――――――――――――――

①　文字サイズ＆色の変更

非推奨の書き方

<font size=3 color="red">この間は文字サイズ小さめで赤くなるよ</font>

非推奨です。非推奨なんです、これ。そもfontタグ自体が、最新のHTML事情だと10年近く前から定義上廃止の非推奨になってるので。今このタグが動くのは互換性という名の惰性か慈悲。

これを推奨の方式に書き換えると

推奨の書き方

<span style="font-size:small; color:red;">この間は文字サイズ小さめで赤くなるよ</span>

になります。

ポイントは以下の通りです。

・spanタグを使う（divタグでもいいけどspanタグの方が無難なので）

・spanタグのstyleに=と半角ダブルクォーテーションで囲った設定を渡してあげましょう（開始タグのみ有効）

　※開始タグ＝<span>。</span>は開始タグから始まったその範囲を終了するので「閉じタグ」と呼ばれることが多いです。

・styleの半角ダブルクォーテーション内の書き方はちょっと気を付けよう（この後解説）

文字サイズや色の変更の仕方がfontタグと異なってビビり散らかす方もいるでしょう、私もそうだった（ケータイサイト全盛期中高生）

と言っても、決まりに応じて打てばええんです。間違ったら打ち直しゃええんや、打ち直しゃ。

プログラミングはトライ＆エラーがなんぼだし、ちょっとHTMLしくっちゃうぐらい誰もが通る道。

styleの半角ダブルクォーテーション内の書き方は、

設定したい設定名:設定値;

後はこれの羅列です。「設定したい設定名」が長いので、以降普通に用語としても使う「プロパティ」と呼びます。

非推奨の方でfontタグに設定されていたのは文字サイズと文字色でした。

なので、ここではspanタグにも同じ設定をしています。

それで行くと、「font-size」が文字サイズを表す「プロパティ」で、「color」が文字色を表す「プロパティ」です。

なので、文字サイズと文字色を設定するには、必ずstyleの半角ダブルクォーテーション……長いので「style属性値」って呼ぶわ。

文字サイズと文字色を設定するには、必ず「style属性値」に「font-size」と「color」が必要です。

逆に文字色だけ設定したいなら「color」プロパティがあればOK。

で、肝心の設定値ですが、「color」プロパティについてはfontタグのcolorとほぼ同じでOKです。ただ、ダブルクォーテーションは取っちゃって、=をコロンにして、最後にセミコロンつけるのを忘れないでください。

#から始まるカラーコードも同じようにして使えます。

実際、「color:red;」と「color:#ff0000;」のどちらかをstyle属性値の中に組み込むと、どっちにしろ文字色は真っ赤です（webカラー基本色名のredとカラーコード#ff0000は同じ色）

問題はsize＝font-sizeな。

style属性値のfont-sizeの場合、fontタグのように1〜7の数字だけで設定できるわけではありません。うん、実はfontタグのsizeの上限って7なんだ（7超えは自動的に7扱いになる）

「font-size」プロパティに設定可能な値の書き方はめっちゃいろいろあるんだけど、それは一旦置いといて、ここではfontタグのsizeのように規定の絶対値指定を行いました。何言ってるかわかんないなら、服のサイズのような指定法を取ったと思ってくれ。

例だとsmallで指定したんだけど、この指定方法で書けるのは以下の通り。

↑小

xx-small

x-small

small

medium

large

x-large

xx-large

xxx-large

↓大

8段階になってるよ、やったね。やったね？

まあ、「small」、「medium」、「large」を基本で覚えてもらって、より小さい、より大きいは頭に「x」が増えてハイフンで繋ぐと覚えてください。

これも設定値としては「color」プロパティ同様、シングルクォーテーションやダブルクォーテーションはいらないので、プロパティと設定値の間のコロン、設定値の最後のセミコロンを忘れないようにしてください。

で文字を赤く、かつ小さめフォントでとなったプロパティと設定値値を羅列するとこうなる。

font-size:small; color:red;

後はこれを「style=""」のダブルクォーテーション内にコピペですわ。

で、

<span style="font-size:small; color:red;">この間は文字サイズ小さめで赤くなるよ</span>

こうと。

――――――――――――――――

②　文字の太さ変更

次はstrongタグの代替にあたるかな。

とはいえ、strongタグは、本来的規格に基づけば「デザインだけ太字にしたい箇所」ではなく、「強調したい箇所」に使う分には一応OKではあるんだけど……タグの意味合いが変わってる以上、今後、strongタグを太字で表示してくれるブラウザばかりとは限らんので、太くしたいつもりでの使用については非推奨。

非推奨

<strong>ここは太くなるよ</strong>

推奨

<span style="font-weight: bold;">ここは太くなるよ</span>

で、簡単に太くできます。

文字サイズと色と比べるとわかるけど、「font-weight」というやつが文字の太さ設定のプロパティなわけだ。

これも、設定可能な値自体は多くあるけど、そもそも表示に使われるフォントによっても反映状態が変わるので、単純に太字にできる「bold」と、逆に太字解除する「normal」だけ覚えとけばなんとかなります。マジで、ガチで。

――――――――――――――――

③　①と②を組み合わせる＆改行について

で、今までやったことを組み合わせたいなら、こうすればいいんです。

この間は文字サイズ小さめで赤くなって、内

ここは太くなるよ。

</span>

ここは太くないよ。

</span>

これで全体的に文字サイズ小さめで赤くて、「ここは太くなるよ」だけ太くなります。

全体に文字サイズ小さめで赤くて太字を反映したいならこう。

ここは赤いし文字サイズ小さめだし太くなるよ

</span>

全体にドカ盛りしたいなら一つのタグで済むので推奨の書き方のが、これは便利（非推奨だとfontタグ内にstrongタグを入れ込むことになる）

あと、ここまで、HTMLが実際にブラウザで表示された場合の改行については触れてませんね。

この間は文字サイズ小さめで赤くなって、内

ここは太くなるよ。

</span>

ここは太くないよ。

</span>

はブラウザで表示されると、一切改行が入らず、

この間は文字サイズ小さめで赤くなって、内ここは太くなるよ。ここは太くないよ。

ってなります（今改行入ってたらそれは自動折返しの功績）

例えば、「ここは太くないよ」だけ別行にしたいなら、

この間は文字サイズ小さめで赤くなって、内

ここは太くなるよ。

</span>

<br >ここは太くないよ。

</span>

みたいに「ここは太くないよ」の前に「<br >」を入れてください（太くなるよのspan閉じタグの後でもOK）

なお、半角スペースは入ってても大丈夫だけど本来いらないです（このページ上でも改行になっちゃうから苦肉の策）

ちなみに、「br」はたぶん「区切れ目」とか「折れる」という意味もある「break」から来てる。大体HTMLは英語由来じゃ（<th>とかtable headerの略よな、アレ）

――――――――――――――――

④　リンク貼ろうぜ

ぶっちゃけこれには推奨・非推奨はありません。ここだけで全部済ませたい人用。

aタグ使えばできるからね。後は使う場所の規約とリンク先の内容次第じゃわい。

書き方は

<a href="リンク先URL">クリックしたらリンク先に移動する文字</a>

こう。

閉じタグ（</a>）忘れると悲惨なことになる（最後までリンク化する）ので注意しませう。

ちなみにaタグ自体にstyle属性の設定もできるので、応用すると

<a style="font-weight:bold;" href="リンク先URL">クリックしたらリンク先に移動する太字</a>

という風に太字にすることもできます。

勿論、font-sizeも設定できるから、リンクだけ大きめの文字にもできるよ。

colorで色変えるのもできはするけど、他のリンクと色が変わるとごちゃごちゃするので、そういう観点からは「技術的にできるけどやらない方がいい」やつです。

――――――――――――――――

⑤　中央寄せにしたいって？

今までspanタグ使ってきたけど、こればかりはすべからくdivタグでやるべし。

spanタグでやると一手増える上に、実質divタグ使うのと何も変わらんしな。

ただdivタグは<div>の前と</div>の後に自動改行（厳密にはちと違うけど動きはそれ）されちゃうので気をつけてください。

<div style="text-align:center;">ここ中央寄せ</div>

style属性内にtext-alignプロパティにcenterを設定すると中央寄せになります。

カンの良い人は気づくかもしらんけど、centerでなくrightを設定すると右寄せになります。leftは左寄せだけど日本語な以上は標準だから設定する必要はない。

ちなみに、あまり使わないjustifyを設定するといわゆる「均等割付け」が発動します。私もこれ使ったことない。

また、spanとdivは表示時の枠の挙動（タグ区切れ目の自動改行の有無）が異なるだけで、それ以外は同じです。

なので、これまでspanタグに設定してきた文字サイズ、太さ、文字色は同じようにdivタグにも使えます。

<div style="text-align:center;color:red;">ここ中央寄せで赤文字</div>

とか、

ここ中央寄せで太字<br >

<span style="color:red;">ここだけ赤文字</span>

</div>

みたいに。

――――――――――――――――

⑥　プロパティいろいろ

styleで設定できるプロパティはマジでいろいろあります。設定値もいろいろあります。

background-colorはcolorみたいに色を指定して、背景色設定できる、とか。

font-sizeはsmallだけじゃなく、Wordみたいに10pt、12ptとか、ピクセル指定で20pxでも設定できる、とか。

text-decorationにunderlineを設定すると下線が引ける、とか。

spanタグでもdisplayにblockを設定すると、実質divタグみたいになる、とか。

そんな感じでいろいろあります。

ここに書いてない内容で設定したい場合、「css　やりたいこと」でググってみてください。

そうして出てきたページでは、spanタグやdivタグのstyle属性に設定するという形式は少なく、

.sample{

プロパティ:設定値;

}

みたいな記述をしている場合が多いと思います。

この場合、{}の中だけ抜き出して、style属性のダブルクォーテーションの中に突っ込んじゃってください。

「style=""」のダブルクォーテーションの中に、{}の間の内容だけ突っ込んでください（重要なことなので2回）

「{」の手前の文字（ここだと.sampleのとこ）に「:」が出てきてない限りはそれでうまくいきます。出てきてたら、なろうの仕様上それは使えません。

ので、そういうところに注意して、よきHTML配置をしてくださーい。

――――――――――――――――

以下、読みたい人だけ読んでねなおまけ。

⑦　おまけ

HTMLの歴史とか推奨・非推奨の基準とか、ここまで書いた設定がどうして何やってるのかのあれやこれや

まあ私も全部を全部理解してるわけではないのですけど（ブラウザ開発者ではないので）

HTMLというのはHyper Text Markup Languageの略なのだけど、要は特殊な形式（いわゆるリッチ形式みたいな）の文書を表すための表記法のこと。

その表記法に基づいて、HTMLの設定値を解析・反映した結果実文書として我々に見せてくれるのが、Chromeやsafari、firefoxなどのwebブラウザと呼ばれるソフトウェアくんたちである。

……いいか？　IEくんはこないだ死んだんだ、死んだんだよ。Edgeくんの中でIEモードとしてゾンビしてる？　いいや死んだんだ、彼は死んだんだよ、だって彼は最新のテクノロジーについてこれないもん！（私怨はあります）

そういう風に、webブラウザというのも多様に開発されているわけだが、しかし！

webブラウザがHTMLの設定値を解析・反映してみせてくれるのならば、webブラウザの基本挙動は同じでなければならない＝標準化されなければならないのである。

「このお菓子なーんだ」で

Chrome「回転焼」

safari「今川焼き」

firefox「大判焼き」

Edge「御座候」

Opera「ベイクドモチョチョ」

っていうようなことをwebブラウザのHTMLの解析・表示でされちゃ困るんですよ。

赤くしてるはずのところを青にされても黄色にされても困るみたいなもんです。

※並び順は思い浮かんだ順なので普及率とかそういう他意はないし、強いて言うなら私は「今川焼き」呼び派です。

まあ、これは顕著すぎる例を上げたけど、大体はめっちゃ細かい部分の仕様が違って、クロスブラウザ対応（複数のブラウザで見ても問題なく同じ動きを組み上げる対応）はちょいちょい中指立てたくなる時あるんだけど……（実体験）

まあ、そんな標準化しようぜーというわけで、webブラウザ開発におけるHTMLの標準化に向けて作られた団体がふたーつ。

一つがW3C、World Wide Web Consortium。

もう一つがWHATWG、Web Hypertext Application Technology Working Group。

最初にW3Cがあって、開発者たちが「うちらのこと考慮してくれへんやんけ」と立ち上げたのがWHATWG。

今の世のHTMLはWHATWG主導で作られたHTML Living Standardという規格が一般的。

その前はW3C主導のHTML5（5.1、5.2）が標準規格として扱われてて、そのさらに前がHTML4.0。

んで、fontタグ廃止はなんとHTML5（5.1）からなんですね、ははは。

fontタグがなんとかまだ有効なのは互換性という名の慈悲あるいは惰性で生かされているからです。

なんでそうなったかというと、HTML5とそれより前で大きく変わった点の一つが、文書構造とデザイン設定の切り離しだったのだ。

このデザイン設定の切り離しに関係するのが、CSSという存在、カスケーディングスタイルシートの普及。

これはタグの名前や、タグ内に設置するidやclassといった属性や属性値を指定して、その指定されたタグの範囲には設定したプロパティをデザインとして適用する、というもの。

デザイン設定の切り離し、つまり「fontタグのように色とかも全部HTML上で指定しなきゃいけない」からの脱却がここから可能になったわけです。

実際そっちの方が、Aに関する箇所だけ色変えたいって場合に

　CSSなしだとHTML内を全部探して色変える

だったのが、Aに関する箇所さえ先にclass属性つけてグルーピングできてれば

　CSSのAに関する箇所のclassに紐付けた色の設定だけ変えればOK

になったわけです。……ラク！　……圧倒的に、ラク！

まあ、CSSのプロパティの設定の挙動も、ものによってはブラウザで違ってそこがまた「この、おのりゃ……」ってなるんだけど。そして、その観点からもIEくんの死は喜ばれてしまったんですよね……最新についてこれないから……

そいで、このCSSの設定の書き方には三種類ありまして、

Ⅰ　別ファイル型

　cssファイルとして別にファイル用意しといて、適用するHTML上で対象のファイルの読み込み指示を書いてあげる。

Ⅱ　HTML内に記述型

　headタグ内にstyleタグで作った領域に記述する。

Ⅲ　対象のHTMLタグに記述型

　対象のHTMLタグにstyle属性の値としてプロパティを直接記述する。

です。

気付く方は気付いたかと思いますが、推奨への置換として取ってる手段はⅢなわけですね。

たーだ、さっきの文書構造とデザインの切り分けの話からすると、実は邪道なんだなこれが。

でも「小説家になろう」の仕様上、これでしか対応しようがないので、これ使います。

「望ましい記述の仕方ではない」が、fontタグと違って「非推奨（廃止）ではない」ので。

実際Javascript利用した動的ページ（ユーザのクリックとかに反応してでろんってメニュー表示したりするやつ）作る場合、style属性がっちゃがっちゃいじくり回す場合もあるので、非推奨寄りだけどまだ完全なる想定内の記述方法なわけです。

よっぽどの技術革新がない限りなくなることはないでしょう。

ああ、あとstrongタグについて。

文書構造とデザインの切り分けという観点から、「太字にしたいところ」ではなく、「本当に強調せねばならないところにつけること」が推奨されるようになりました。

「字の太さ」だけなら強調ではなく、デザインの側の話になるからね。

あとstrongタグ、聞いた話だと、ものによっては読み上げツールとかが反応する可能性があるんじゃなかったっけかな、という観点からも太字にしたいためだけに使うのはやめた方がいい、アクセシビリティ的に。

ここで言うアクセシビリティはユニバーサルデザインとかの観点ですね。

この世の中でも、今どきではない感じのページとかもあるけど、その裏には実はアクセシビリティという観点から変えがたい部分があったりします。

ターゲット層だけが使いやすくあればいいページと違って、公共性が高いページは特にね。

アクセシビリティという観点でよく言われるのは、「色だけで判別させるな」ですね。

色覚特性、色盲といったユーザーを想定した時、色だけで判別させるのは良くない。おまけに使ってるディスプレイによっても色味って変わるし。

なので、モノクロにしてもはっきりわかるレベルの色の違いを使うか、色以外の効果、太字とか下線とか文字サイズとかを有効活用すべきなのです。

色覚特性や色盲の方でも、色の明暗というのはわかるのでね。

二つの色の輝度差や色差を出す計算式とかもあるから、そういう人でも見やすい色の組み合わせになってるか判別するのはまだできるんだけどね、数学とか物理とかは苦手なので計算式の意味はよくわかってないですね（プログラム任せで手計算したことない顔）

ガチでできる人は一つ色決めたら逆算して色候補出せるんだろうなあ……調べてたどり着いた解説の行列計算でギブアップしたけど。

話を戻して、とはいえ、プロパティとかも日進月歩なので、私のこの知識も最新かと問われると微妙。

EdgeのベースがChromeと同じになって、どっちも開発者ツールに色覚特性（一型〜三型まで）と色盲と弱視の見え方のエミュレータが組み込まれたぐらいまでは把握してるけど。

とまあ、そんな感じなんですよ、web系の画面開発とかその辺りってというおまけでした。