ボックスモデルについての説明と基本的な装飾

まずはボックス領域から勉強します。これが装飾の基本となります。

要素を生成した場合はボックス領域が作られます。

ボックス領域は4つの部分に分けられます。

・コンテンツ（中身）

・padding（内側余白）

・border（枠線）

・margin（外側余白）

図で書くとこんな感じですね。

どのように指定するかというと、こんな感じです。

<div style="padding:50px;border:50px solid #000;margin:50px;">中身ですよ</div>

padding:50px　で内側余白を50px

border:50px solid #000 で枠線幅50pxの実線、#000色

margin:50px で外側余白50px

このようになります。

装飾をする場合は、このボックスモデルを考えながらpadding,border, marginを調整しつつ、色や大きさを整えるのが基本になります。

HTMLタグを作ったらどの要素でもこれは発生しますので、よく覚えておいてください。

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

さて、次にサイズです。

サイズ指定する方法はいくつかあります。

・px指定：絶対値指定

・em指定：相対値指定　基準フォントサイズの相対値

・％指定：相対値指定　親要素（割烹では枠幅）の相対値

他にもありますが、よく使うものを挙げてみました。

<div style="padding:10px;">絶対値指定</div>

<div style="padding:1em;">相対値指定</div>

<div style="padding:10%;">相対値指定</div>

こんな感じに指定します。

小説家になろうの割烹では14px=1emになってます。親要素にフォントサイズを指定しない限りはこれが成り立ちます。（他のサイトだと16px=1emになっていることが多いので、間違えないようにしましょう）

普通の使い方だと相対値にしておいた方が何かと便利な場合もありますが、小説家になろうの割烹では絶対値表記がいいと思います。

何故かというと、あまり修正しないこと、なろう本体のCSSの影響を受けにくいことが挙げられます。また直感的に理解しやすいので絶対値のpx表記をお勧めします。

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

次はborderの使い方。

borderは線太さ、線の種類、色を指定します。この中で線の種類は確実に指定しましょう。それ以外は省略可能です。

/* 種類 */

border: solid;

/* 幅 | 種類 */

border: 2px dotted;

/* 種類 | 色 */

border: outset #f33;

/* 幅 | 種類 | 色 */

border: 1px dashed green;

のようにできます。

線の種類はいくつかあります。

/* キーワード値 */

dotted;点線

dashed;破線

solid;実線

double;二重線

groove;凹んだように見える境界線

ridge;出っ張ったように見える境界線

inset;要素が埋め込まれて見える境界線

outset;要素が出っ張って見える境界線

<div style="border:dotted;">点線</div>

<div style="border:dashed;">破線</div>

<div style="border:solid;">実線</div>

<div style="border:double;">二重線</div>

<div style="border:groove;">凹んだように見える境界線</div>

<div style="border:ridge;">出っ張ったように見える境界線</div>

<div style="border:inset;">要素が埋め込まれて見える境界線</div>

<div style="border:outset;">要素が出っ張って見える境界線</div>

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

次は、特定の方向だけの指定です。

先ほど説明した、padding、border、marginは特定の方向だけ指定することも可能です。

margin-left:50px;

margin-right:50px;

margin-top:50px;

margin-bottom:50px;

のように一部だけ指定可能です。

borderが視覚的に分かりやすいので比べてみましょう。

<div style="border-top:5px solid #000;background:#f1f1f1;">上ボーダー</div>

<div style="border-right:5px solid #000;background:#f1f1f1;">右ボーダー</div>

<div style="border-left:5px solid #000;background:#f1f1f1;">左ボーダー</div>

<div style="border-bottom:5px solid #000;background:#f1f1f1;">下ボーダー</div>

またpadding, marginはtop-right-bottom-leftの順番に一括に指定することもできます。

margin:0 50px 20px 0;

みたいな。

なお基本の形がこれで、省略することにより複数にかけることができます。

値を1つ指定した場合：指定した値が[上下左右]

margin:50px;

値を2つ指定した場合：記述した順に[上下][左右]

margin:50px 20px;

値を3つ指定した場合：記述した順に[上][左右][下]

margin:50px 20px 10px;

値を4つ指定した場合：記述した順に[上][右][下][左]

margin:0 50px 20px 0;

基本的に文字数を節約したいので複数指定が無難ですね。いちいち-bottomとか付けると大変です。

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

さて、次は色ですね。文字色や背景色、枠線色について勉強しましょう。

文字色：color

背景色：background

枠線色：border

でそれぞれ変更します。

なお色の指定はいくつか方法があります。

・色名指定：red

・RGB関数指定：rgb(255,0,0)

・16進数指定：#ff0000

<span style="color:red;">色を変えるぞい</span>

<span style="color:rgb(255,0,0);">色を変えるぞい</span>

<span style="color:#ff0000;">色を変えるぞい</span>

こんな感じに指定できます。使うのはどれでもいいのですが、できるならどれかに統一するといいです。その方が修正しやすいです。

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

次は文字の設定について見ていきます。

文字サイズ：font-size

行間：line-height

文字間：letter-spacing

位置ぞろえ：text-align

太字：font-weight

フォント種類：font-family

主に使うのはこれくらいですかね。

<div>祝福は苦悩の仮面をかぶって訪れる</div>

<div style="font-size:20px;">神社とは、お願いをしに行くところではなくて、お礼を言いにいくところだよ</div>

<div style="letter-spacing: 5px;text-align:center;font-weight:bold;">他者と比較するのではなく、過去の自分と比較する</div>

<div style="font-size:22px;line-height:2;letter-spacing: 5px;text-align:center;font-weight:bold;">自分はいま幸福かと自分の胸に問うてみれば、とたんに幸福ではなくなってしまう</div>

<div style="font-size:16px;line-height:1.7;text-align:right;">千里の道も一歩から</div>

<div style="font-size:24px;line-height:2;text-align:center;font-family:'Noto Sans Japanese', 'メイリオ', Meiryo,'Lucida Grande', sans-serif;">深淵をのぞく時、深淵もまたこちらをのぞいているのだ</div>

簡単に説明します。

文字サイズは特に説明不要ですね。

行間はline-height:xx;で指定します。

1が詰め詰めの状態で、基本的に1.5~2あたりを指定すると読みやすいと入れています。なろうだと1.8が基本。2以上に指定すると、行間が一行分以上あくことになりますね。

文字間はあんまり指定することはない気もします。letter-spacing:0;が基準です。letter-spacing: 5px;くらいにすると結構文字間が空いているような気分。

何か強調したい時などに使うといいかも。

位置ぞろえですね。

text-align:left;

text-align:center;

text-align:right;

で指定します。左揃えがデフォルトです。

太字はfont-weight:bold;で指定します。

文字数削減のために<b></b>を使うこともあります。お好きな方をどうぞ。

フォントの種類も変えることはできますが、閲覧デバイスに入っているものだけが反映されます。以下のように複数種類を適用することも可能です。基本的にはiOS用とWindows用のフォントを指定するのがいいですね。

font-family:'Noto Sans Japanese', 'メイリオ', Meiryo,'Lucida Grande', sans-serif;

明朝体にしたい場合は以下のようにするといいですね。Androidは明朝体フォントが入っていれば明朝体で表示されます。

font-family: serif;

まぁ、フォントは端末ごとに考える必要があるので、フォントに詳しい人でない限りは変更しなくていいと思います。

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

なお、説明ではdiv要素で説明していますが、他の要素でも使い方は同じです。

ただ、要素によってブロック要素とインライン要素に分けられるのでそこの区別はきちんとしないと予期せぬ動作をしてしまします。

ブロックレベル要素は、見出し・段落・表など、文書を構成する基本となる要素で、一つのブロックとして認識されます。

それ単体で成り立つ文書構造に適用されるものです。

div, p, ul, h1などが該当されます。

それに対してインライン要素は、主にブロックレベル要素の内容として用いられる要素で、文章の一部として扱われます。 ブロックの中の一部分に役割を与えるときに使います。

a, span, strongなどが該当します。

なお、ブロック要素の中にインライン要素は入れられますが、その逆は不可です。文法違反となります。

ブロック要素とインライン要素の違いはborderやpadding、marginの適用にも効いてきます。

<div style="margin:10px;background:#f1f1f1;font-size:20px;border:5px solid #000">これはブロック要素である。これはブロック要素である。これはブロック要素である。これはブロック要素である。これはブロック要素である。これはブロック要素である。これはブロック要素である。これはブロック要素である。これはブロック要素である。これはブロック要素である。</div>

<span style="margin:10px;background:#f1f1f1;font-size:20px;border:5px solid #000">これはインライン要素である。これはインライン要素である。これはインライン要素である。これはインライン要素である。これはインライン要素である。これはインライン要素である。これはインライン要素である。これはインライン要素である。これはインライン要素である。</span>

顕著ですよね。

全体に適用させる場合はブロック要素、一部分だけの場合はインライン要素を使うようにしましょう。ボックスの基礎についてはこれで終わりです。お疲れ様です。

この項目を理解していると後が楽になります。

言葉足らずな部分もあると思うので疑問に思った部分は自分で調べてみるといいかもです。