2/52

割烹で使えるHTML/CSSと使い方と注意点

ここから真面目に説明します。

まず最初に割烹で使えるHTML/CSSについて説明します。（スキップ可）なお、割烹で使えるものは仕様変更により変更される場合がありますので注意してください。

情報は2022年11月25日時点のものです。

まずは割烹で使えるHTMLタグについてです。

これは割烹を投稿するページに書かれていますので抜き出してみます。

■基本構造系

■テキスト系

<p></p> , <em></em> , <strong></strong> , <del></del> , <ins></ins> ,<abbr></abbr> , <dfn></dfn> , <blockquote></blockquote> , <q></q> ,<cite></cite> , <sup></sup> , <sub></sub> , <pre></pre> , <code></code> ,

■テキスト表現系

■レイアウト系

<hr>

■リンク系

<a></a>

■リスト系

■画像系

<img>

■テーブル系

色々と使えるものはあるのですが、基本的に使うものは限られているので全部は覚えなくて問題ないです。

よく使うものを並べましたので、これだけ覚えてください。

<div></div> 　・・・段落に装飾を行うときに使う

<span></span>　・・・文章の一部に装飾を行うときに使う

<a></a>　　　・・・リンクさせる場合に使う

<img>　　・・・画像を使用するときに使う

主に4つ。これだけで問題ないです。それ以外は余裕があればで結構です。厳密には上の説明は間違ってますが、なろうの割烹で使う際には間違ってはいないです。

興味がある方は勉強すればいいと思いますが、なろうの割烹でのHTML/CSSは普通の使い方ではないです。色々と制限があるので普通ではない使い方をして装飾を行っていきます。

-　-　- 閑話休題（それはさておき） -　-　-

あとはCSSですね。CSSはHTMLタグで囲った部分に対して装飾を行うものになります。使えるCSSはなろうさんは公開していませんが調べましたので以下に列挙します。これ以外にも使えるものがあるかもしれません。

color …… 文字色（前景色）を指定する

background …… 背景に関する指定をまとめて行う

background-color …… 背景色を指定する

background-image …… 背景画像を指定する

background-repeat …… 背景画像のリピートの仕方を指定する(repeat/norepeat)

background-position …… 背景画像の表示開始位置を指定する

font …… フォントに関する指定をまとめて行う

font-style …… フォントをイタリック体・斜体にする

font-weight …… フォントの太さを指定する

font-size …… フォントのサイズを指定する

font-family …… フォントの種類を指定する

line-height …… 行の高さを指定する

text-align …… ブロックコンテナ内の行の揃え位置・均等割付を指定する

text-decoration …… テキストの線・色・スタイルをまとめて指定する

white-space…… 改行や空白の扱いの指定

letter-spacing …… 文字の間隔を指定する

word-spacing …… 単語の間隔を指定する

width …… 幅を指定する

height …… 高さを指定する

max-width …… 幅の最大値を指定する

min-width …… 幅の最小値を指定する

max-height …… 高さの最大値を指定する

min-height …… 高さの最小値を指定する

margin …… マージンに関する指定をまとめて行う

padding …… パディングに関する指定をまとめて行う

border …… ボーダーのスタイル・太さ・色を指定する

border-color …… ボーダーの色を指定する

border-style …… ボーダーのスタイルを指定する

border-width …… ボーダーの太さを指定する

float …… 左または右に寄せて配置する

clear …… 回り込みを解除する

list-style …… マーカーに関する指定をまとめて行う

table-layout …… テーブルのレイアウト

border-collapse …… テーブルのやつ

border-spacing …… テーブルのやつ

よく使うのを以下に列挙しますので参考にしてみてください。

color …… 文字色を変更するときに使う

font-size …… 文字サイズを変えるときに使う

line-height …… 行間を変えるときに使う

text-align …… 文字揃えを変えるときに使う

margin …… 外余白を調整するときに使う

padding …… 内余白を調整するときに使う

border …… 枠線を設定するときに使う

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

ここからHTML/CSSの使い方の説明をやっていきます。よくわかっている人は次に進んでもらって結構です。あんまりよくわかってない人は眺めてみてください。

まず、HTMLの使い方です。

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

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

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

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

例として挙げると、

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

といった感じです。

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

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

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

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

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

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

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

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

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

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

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

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

のように処理されます。

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

例えば画像タグです。

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

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

といっても、割烹では使えるタグとスタイルが限られているので、文書構造はかなり適当に作らざるを得ない部分も出てきます。このエッセイではほとんどdiv(意味を持たないブロック要素)を使います。

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

さて、次は装飾ですね。装飾には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を使って指定します。

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

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

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

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

割烹では、head内のコードはいじれないため、インラインに書くことで装飾を行います。

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

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

あと最後に割烹の注意点を説明します。

小説家になろうの割烹は厳密にいうと4つの種類があります。

装飾をしない場合はあまり関係ないですが、装飾をする場合はそれぞれで効果が違いますので必ず知っておきましょう。

知らないと認識に齟齬が発生する恐れがあります。

全般的に言えるのですが、小説家になろうのレイアウト設定はPC版とスマホ版で分かれています。

また、誰でも見られるページ（読者ページ）と、作った人しか見られないページ（作者ページ）があります。

そのため計4つのページが存在します。普段1つのデバイスでしか見てない人はあまり意識することはないですが、PC版とスマホ版では同じ装飾を使っても違うように見えることがあります。

装飾の仕方によっては片側では見やすくても、もう片側では見づらいこともよくあります。

まずはそこを理解しましょう。図にするとこんな感じです。

なお見分け方は、作者ページでは編集や削除メニューが表示されます。読者ページでは表示されません。またURLも異なります。

作者ページ：https://syosetu.com/userblogmanage/view/blogkey/～

読者ページ：https://mypage.syosetu.com/mypageblog/view/userid/～

この作品内では、誰でも見られるページを読者ページ、作った人しか見られないページを作者ページと呼ぶことにします。

なお、作者ページは作った人しか見られないのでこの作品内では無視します。多少レイアウトが崩れる場合もありますが、読者ページではきちんとなるので無視します。

よく、割烹のリンク先として作者ページのURLを教える人がいますが、自分しか見ることができないのでやめましょう。

4つのページで微妙にデフォルトで適用されているCSSが異なります。このエッセイではそれを理解したうえで装飾を行います。

基本的に読者ページで見た時にきれいになるような彩り方をしていますので、作者ページではずれて見えるものもあります。

それを理解しておいてください。

ちょっと長くなりましたが、今回は以上です。次回はboxモデルについて説明を行います。このboxモデルが頭にあるとカスタマイズが楽になるので是非理解してみてください。

参考：

HTML：https://developer.mozilla.org/ja/docs/Learn/Getting_started_with_the_web/HTML_basics

CSS：https://developer.mozilla.org/ja/docs/Learn/Getting_started_with_the_web/CSS_basics