• 以下は大百科道:極 執筆チャレンジ!用の記述となります
• htmlとは？
• 段落分け
• 文章の一部分を修飾する
• 自由な位置への画像の挿入
• まとめ
• 掲示板

　ボカロ曲と音ゲーを中心にあれこれやりつつ、話題になっている物事によく首を突っ込む自由人。

以下は大百科道:極 執筆チャレンジ!用の記述となります

大百科道:極へようこそ。

こちらの記事に辿り着いたということは、「大百科道:書」はもう読んでいるということだと思います。読んでいますよね……？
あちらの記事では記事の書き方が紹介されていましたが、最低限の体裁を整えて投稿するまでのフローの紹介に留まっていました。
本記事ではそこから一歩踏み込んで、あなたの書いた記事をリッチに飾り立てていく方法を紹介します。

なお、本記事はPC版編集フォームを前提としています。スマホ版編集フォームは記事執筆時点では本当に初歩的な編集機能しか持っていないので……

htmlとは？

ニコニコ大百科の最大の特徴は記事の装飾をhtmlを書いて行うことです。
htmlとはWebサイトで一般に用いられている、文書構造（と補助的なレイアウト）の指定を行う形式です。ユーザー投稿により成立しているサイトにおいてユーザーがHTMLまで編集が可能なサイトは他に類を見ません。これにより、自由度の高い装飾をユーザーが行うことができるのがニコニコ大百科の強みとなっています。

記事編集中に自分が書いている記事がどういうhtmlで定義されているのか見たい場合は、編集フォームの少し上にあるHTMLエディタの有効と無効を切り替えるをクリックしてエディタを切り替えてみましょう。

実際のページがどのようなhtmlで記述されるのか、簡単な実例を見せます。
緑の枠内がページの表示内容、黒い枠内がそのhtmlです。

<h3>htmlの基本</h3>
<p>htmlでは文書構造の指定ができます。<br />
おまけとして簡易的な装飾、例えば文字の<span style="color: #ffff00; background-color: #808080;">色</span>・<span style="font-size: 8pt;">大きさ</span>や<strong>太字</strong>・<em>斜体</em>・<span style="text-decoration: underline;">下線</span>の指定もできます。</p>
<hr />
<p>文書以外のものも、Webサイトで表示したければhtmlを使って書き込む必要があります。</p>
<p><img src="https://dic.nicovideo.jp/oekaki/164733.png" alt="" width="256" height="50" /></p>

htmlでは文書の合間合間にタグを差し込んで文書を装飾していくことになります。
文書以外の埋め込みが長いのは当然ですが、文字を装飾している部分もヤバいですね。
一度に全部を解読するのは難しいので、順を追って理解していきましょう。

段落分け

ニコニコ大百科で記事を見たことがある人であれば一度は不思議に思ったことがあると思います。
改行、2種類ありますよね？

↑ここのような少し空間の開く改行と、
↑ここのような間の詰まった改行の2種類です。

これらはhtmlでは完全に別物として扱われています。

<p>改行、2種類ありますよね？</p>
<p>↑ここのような少し空間の開く改行と、<br />
↑ここのような間の詰まった改行の2種類です。</p>

詰まった改行の部分には<br />という文字列が挟まっています。
これがシンプルに改行を意味するタグです。

じゃあ、少し空間の開く改行のところにある</p><p>は何なのかという話ですが、これは段落の切れ目と段落の始まりを示すタグです。
「<p>改行、2種類ありますよね？</p>」と「<p>↑ここのような少し空間の開く改行と、<br />↑ここのような間の詰まった改行の2種類です。</p>」の2つの段落があって、ニコニコ大百科の仕様で段落の間は勝手に空間が開くようになっています。
<p>から範囲が始まって</p>でその範囲が終わるというわけですね。

イメージとしては以下の青枠のようになっています。

ニコニコ大百科で文章を書く際、通常の編集フォームを使用してEnterで改行を入れると原則として段落の切れ目（</p><p>）が挿入されます。
Shift+Enterで改行すると改行（<br />）が挿入されるので、長文を書く際は使い分けると良いでしょう。
長い文章を書いていて、文字が詰まって見えると感じたらShift+Enter（<br />）で改行。話題の区切りであればEnter（</p><p>）で段落を分ける。というふうにすると一貫性が有り理解しやすい文章になります。

改行は文章が読みやすい程度に文章に切れ目を入れる目的で入れるべきで、このように形
を整えるような目的で改行を入れることは非推奨とされています。ウェブページは閲覧環
境によって表示が大きく左右されるため、幅の広いパソコンで見た場合とスマートフォン
で見た場合で著しい差が生まれてしまうためです。この段落もパソコンで閲覧する分には
形が整っていて綺麗ですが、スマートフォンで閲覧すると文の途中で改行がぶつぎりに入
っていて非常に読みにくいと感じるはずです。

アスキーアートを貼り付けるなどの目的でどうしても形を整えたいという場合は<pre>～
</pre>で囲みましょう。スマートフォンで閲覧している場合でも回り込みを解除して強引
に指定した幅で表示することが出来ます。これはこれで表示が壊れやすいですが。

見出しを分けるほどではないけれど話題が完全に変わっていて段落分けだけでは不十分なときは水平罫線を<hr />で挿入するとそれっぽくなります。

文章の一部分を修飾する

次は、文章をどのように修飾すればいいのか見ていきましょう。

<p>htmlを使えば<span style="font-size: 18pt; font-family: fantasy; font-style: italic; font-weight: bold; text-decoration: underline; color: #ff0000; background: linear-gradient(#00ffff, #00ff00); opacity: 0.5;">途轍もなく滅茶苦茶な装飾</span>も可能です</p>

今回は8個の修飾を付与しました。
非常に読みにくいですね。普通の記事でここまでやる必要はないです。

よく見てみるとタグの構造は「<span style="ﾅﾝﾁｬﾗｶﾝﾁｬﾗ">途轍もなく無茶苦茶な装飾</span>」という非常にシンプルなものになっています。そのﾅﾝﾁｬﾗｶﾝﾁｬﾗが長いわけですけれど。
では、ﾅﾝﾁｬﾗｶﾝﾁｬﾗ部分を読み解いていきましょう。
style="ﾅﾝﾁｬﾗｶﾝﾁｬﾗ"のﾅﾝﾁｬﾗｶﾝﾁｬﾗの部分にはcssというものを記述します。cssが文字装飾を指定するコードです。上記の通り1つのstyle=""内に複数個を同時に挿入することも可能です。

今回は以下の8つを用いました。

• font-size: 18pt;
  • フォントサイズを18ptにする（デフォルトは12ptなので1.5倍のサイズ）
• font-family: fantasy;
  • フォントの種類を「fantasy」にする
• font-style: italic;
  • 斜体にする
• font-weight: bold;
  • 太字にする
• text-decoration: underline;
  • 下線を引く
• color: #ff0000;
  • 文字色を赤色（#ff0000）にする
• background: linear-gradient(#00ffff, #00ff00);
  • 背景を上端が水色（#00ffff）、下端が緑色（#00ff00）のグラデーションにする
• opacity: 0.5;
  • 全体の透明度を0.5にする（デフォルトは1、透明が0）

1つ1つ分解した状態であれば、英和辞典を使って単語と和訳を突き合わせていけば理解できる程度の内容になっていると思います。いっぺんにまとめてお出しされたからなんのこっちゃわかりにくくなっているだけです。

じゃあ、<span>はどういう意味なのかという話ですが、styleの範囲を指定するために入れているだけで<span>そのものに意味はないです。style自体は大抵のhtmlタグに適用出来ます。
<p style="ﾅﾝﾁｬﾗｶﾝﾁｬﾗ">という書き方もできますし、<pre style="ﾅﾝﾁｬﾗｶﾝﾁｬﾗ">という書き方もできますし、<hr style="ﾅﾝﾁｬﾗｶﾝﾁｬﾗ">という書き方も出来ます。
なんでわざわざ意味のない必要のない<span>を使うのかというと、余計な意味も含まないからです。

<p style="background: #eee;">適用対象は段落か？<br />文だけか？</p>

<p><span style="background: #eee;">適用対象は段落か？<br />文だけか？</span></p>

囲っている文章の範囲は全く同じなのに表示は全然違いますね。
ピンポイントで範囲を指定したいという場合は<span>を用います。

自由な位置への画像の挿入

ニコニコ大百科では画像を貼り付けることも可能です。
種類はお絵カキコ・動画のサムネイル・ニコニコ静画に限られます。その中でもお絵カキコは投稿されたレスに記事内埋め込み用のURLが表示されているため容易に挿入することが可能です。

<p><img src="https://dic.nicovideo.jp/oekaki/164733.png" alt="ニコニコ大百科" width="256" height="50" />とは、『あらゆる言葉について定義や意味、元ネタを解説する辞書・辞典』である。</p>

<p>ニコニコ大百科のTOPページにそう書かれてあるので間違いない。</p>

<img>が画像を挿入するhtmlタグです。
srcで挿入する画像のURLを指定し、widthで幅を、heightを高さを指定します。
altは今回のように文字の代わりに画像を挿入する場合に、画像が読み込めない環境で代わりに表示する文章を指定します。

ただ、文章の途中で挿入すると横幅の広いPC版で閲覧した際に以下の赤色部分のようなデッドスペースが生まれてしまいます。

回り込みを指定して、このデッドスペースを少しでも埋めてみましょう。
<img>内に「style="float: left;"」を追加するだけです。画像を左寄せにして、文字を回り込ませるというcssです。

<p><img style="float: left;" src="https://dic.nicovideo.jp/oekaki/164733.png" alt="ニコニコ大百科" width="256" height="50" />とは、『あらゆる言葉について定義や意味、元ネタを解説する辞書・辞典』である。</p>

<p>ニコニコ大百科のTOPページにそう書かれてあるので間違いない。</p>

今回はうまく行っていますが、float要素を使用する際は他の要素との干渉に注意する必要があります。

Oとは、文字の一種である。

概要

アルファベットの15番目の文字である。

<img style="float: right;" src="https://dic.nicovideo.jp/oekaki/29660.png" alt="" width="96" height="96" />

<p>Oとは、文字の一種である。</p>

<h3>概要</h3>

<p>アルファベットの15番目の文字である。</p>

概要のアウトラインが画像を貫通してしまっています。
float要素は自動では解除されないので、手動で回り込みを解除しなければなりません。
<div style="clear: both;"></div>を挿入すると、その行から先は回り込みが解除されます。

Oとは、文字の一種である。

概要

アルファベットの15番目の文字である。

<img style="float: right;" src="https://dic.nicovideo.jp/oekaki/29660.png" alt="" width="96" height="96" />

<p>Oとは、文字の一種である。</p>

<div style="clear: both;"><h3>概要</h3></div>

<p>アルファベットの15番目の文字である。</p>

さて、float要素は他の要素との干渉に注意が必要だと言いましたが、逆に言えばfloat要素を使うことで通常では実現できない2つの要素の重ね合わせを実現可能です。

<img style="float: left;" src="https://dic.nicovideo.jp/oekaki/27822.png" alt="" width="96" height="96" />

<img style="float: left; margin: 20px 0px 0px -40px;" src="https://dic.nicovideo.jp/oekaki/898950.png" width="80" height="80" />

2つの画像にfloat要素を付与し、後から貼り付けたの方に追加でmargin要素を付与しています。
marginは他の要素との距離を指定するcssで、上右下左の順に別々に距離を指定可能です。
基本的にはスペースを空けるために使うcssなんですが、どういうわけかマイナスの値も設定可能になっているのでそれを悪用しました。左側のmarginを-40pxとしてあるので、左側にある要素にめりこんでいるわけです。

まとめ

ニコニコ大百科における文字の装飾・配置について解説してきました。
ここから更に装飾に対する知見を深められる記事をいくつか紹介して本記事は終了とします。

• ニコニコ大百科:編集者向けのページ
  • 名前のとおりです。凝った記事を作りたいのであれば最下部の編集者向けページテンプレートに載っているページは一通り読んでおくと良いでしょう。
• ニコニコ大百科:HTMLタグ一覧
  • ニコニコ大百科で使用可能なhtmlタグとcssがまとめられています。
• 今週のオススメ記事
  • 運営が選出したニコニコ大百科における優秀な記事がまとめられています。ビジュアルの良いものも多いのでhtmlを覗くと勉強になる……かも？
• クリックすると内容が変わる記事一覧
  • ニコニコ大百科におけるビジュアル特化記事の極地とも言える体験型記事の一覧と、作り方の簡単な解説を読むことができます。