ボックスというものを理解すれば大抵のものは作れるのです。ルールを知ればどんなふうに改造できるか分かるのです。
まずはすべての基礎になるボックスについての事前知識を入れておきます。
一番よく使うボックス。どんな要素にでも適用可能なので、確実に理解しておいてください。
特にブロック要素のボックスとインライン要素のボックスはスタイルの適用が異なるので注意が必要です。
まずはボックス領域から勉強します。これがスタイルの基本となるので必ず覚えてください。
レイアウトの基本でもありますので。
まず要素を生成した場合はボックス領域が作られます。
ボックス領域は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
このようになります。
ちなみにですが余白は-側にも設定できます。
頑張れば枠からはみ出させることも可能です。
<div style="margin:10px;background:#f1f1f1;font-size:20px;">margin10px</div>
<div style="margin:0;background:#f1f1f1;font-size:20px;">margin0px</div>
<div style="margin:-10px;background:#f1f1f1;font-size:20px;">margin-10px</div>
<div style="margin:-20px;background:#f1f1f1;font-size:20px;">margin-20px</div>
こんな感じに決められた枠からはみ出して重ねることも可能です。
その気になれば画面を広げて拡張することもできます。
（とはいえ、迷惑な行為なのでやめましょう）
とりあえず、ボックス領域を理解していると魔改造しやすくなるのできちんと理解しましょう。
ちなみにですが、ボックス領域の初期値は要素によって変わります。
なろうのCSSによって定められています。
こんな感じです。
※PC版
body, div, pre, p, blockquote, form, fieldset, input, textarea, select, option, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, table, th, td, embed, object {
margin: 0px;
padding: 0px;
vertical-align: baseline;
}
なろうのCSSでは活動報告で使える要素のほとんどが
margin: 0px;
padding: 0px;
に設定されています。
基本的に0以外にしたい場合に指定してください。0の場合は指定不要です。
またborderもない状態にされているので、使いたいときに指定してください。
（そもそも初期値にborderが指定されていると使いにくいことこの上ないですが）
- - - ✂切り取り✂- - -
さて、次にサイズです。
サイズ指定する方法はいくつかあります。
・px指定：絶対値指定
・em指定：相対値指定 基準フォントサイズの相対値
・％指定：相対値指定 親要素（割烹では枠幅）の相対値
他にもありますが、よく使うものを挙げてみました。
<div style="padding:10px;">絶対値指定</div>
<div style="padding:1em;">相対値指定</div>
<div style="padding:10%;">相対値指定</div>
こんな感じに指定します。
普通の使い方だと相対値にしておいた方が何かと便利な場合もありますが、小説家になろうの活動報告ではどちらでもいいと思います。
相対値の方が都合がいいというのは、全体の大きさを変えたくなった時に楽だからです。絶対値指定だと全部を書き換えないといけないので、相対値であればもとになっている数値だけで済みます。
全体を見て大きさを設定するのであれば相対値指定、個別に使うものであれば絶対値指定がいいかと思います。個別に使う場合は、親要素の影響をなるべく受けない形の方が便利なので。
こういったことが、コードの保守性、メンテナンス性が高いのですが、小説家になろうの活動報告では要素一つ一つに装飾していくので作り直すときの手間はそこまで変わらないと思います。
どちらかというと、自分が使いやすい方で選ぶといいですね。
- - - ✂切り取り✂- - -
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>
こんな感じに指定できます。使うのはどれでもいいのですが、できるならどれかに統一するといいです。その方が修正しやすいです。
カラーコードについては色々なサイトがありますので自分に合ったものを探してみるといいですね。
自分がよく使うサイトを紹介しておきます。
Web色見本
https://www.colordic.org/
多くの色合いが載っていて便利。
伝統色のいろは
https://irocore.com/
和色がいっぱい載っていて、淡い色合いを探すときに使ってます。和風をイメージしたいときはオススメ。
- - - ✂切り取り✂- - -
次は文字の設定について見ていきます。
文字サイズ：font-size
行間：line-height
文字間：letter-spacing
位置ぞろえ：text-align
太字：font-weight
主に使うのはこれくらいですかね。
<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>
簡単に説明します。
文字サイズは特に説明不要ですね。
行間はline-height:xx;で指定します。
1が詰め詰めの状態で、基本的に1.5~2あたりを指定すると読みやすいと入れています。
なろうだと1.7が基本。
2以上に指定すると、行間が一行分以上あくことになりますね。
文字間はあんまり指定することはない気もします。letter-spacing:0;が基準です。
letter-spacing: 5px;くらいにすると結構文字間が空いているような気分。
何か強調したい時などに使うといいかも。
位置ぞろえですね。
text-align:left;
text-align:center;
text-align:right;
で指定します。
左揃えがデフォルトです。
太字はfont-weight:bold;で指定します。
文字数削減のために<b></b>を使うこともありますが、スマホ版の色合いバグなどを考えるとこちらを使う方が無難です。
- - - ✂切り取り✂- - -
なお、説明では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>
顕著ですよね。
全体に適用させる場合はブロック要素、一部分だけの場合はインライン要素を使うようにしましょう。
さて、とりあえず、ボックスの基礎についてはこれで終わり。
次から本番ですね。
この項目を理解していると後が楽になります。
まぁ正直、コンテンツ・padding・border・marginの使い方を知った時点であとは応用になります。
これだけ確実に抑えることが大事です。
なお、実際のWebページの作成でもこれを理解しているのと理解していないのでは、難易度が全然違うので、Webデザインをしたい人は勉強するといいですよ。
