文字の大きさを指定するクラス
まずは文字の大きさを少し弄れる設定から。簡単そうなので。
Bulmaの見出し設定のやり方
Bulma では指定されているクラスを追加すると、H1などの見出しタグでなくても見出しになる。
Bulma の見出しには.title .is-N（Nは1〜6までの数字）の形のタイトルと、.subtitle .is-Nの形のサブタイトルがある。
[markdown]
# Title1
{: .title .is-1}
Title01
[html]
<h1 class="title is-1">Title1</h1>
手始めとして、例えば次のような目的で、このやり方が使えないだろうか。
- 一つは、特定のクラスを指定すると文字の大きさがそこだけ変えられる。
- さらに cord を表示する際にキャプションを付けたい時など、特定の目的で適当なスタイルが適応されるクラス。
- 段落中のちょっとした文字寄せを指定できるとか。
まあこのへんから手探りで作ってみよう。
文字関連のスタイル定義ファイル
とりあえず文字関連のスタイルを指定するクラスの定義ファイルから作ってみる。
_sass/framework/_font-styles.scssとしよう。クラス名は短いものがいいのだろうが、ここでは少々長くても直感的に意味の分かるものにする。_font-styles.scssに次のように書いていく。
[scss]
.font {
&.h1 { font-size: 3.0rem; }
}
クラス名に.fontと.h1という2つのクラスを付ける方式。
ただこのメインクラスとサブクラスを繋げるダブルクラスの方式も、何でもかんでもこれでやると、サブクラス名が被りやすい。例をあげると.fontと.marginという２つのメインクラスを作って、両方に.x1というサブクラスを作ったりすると、両方を指定した時にどちらかが死ぬ。SCSS上では階層で区別されていてもCSS上では並列化されるからだ。なのでこのあと出てくる.mgnクラスではダブルクラス方式を使わずハイフンで繋いで一つのクラスにした.mgn-x1などの名前ルールにしている。
このへんちょっと工夫しないと、何でもかんでも!importantを付けなきゃならなくなったり、クラス数が増えてどれが生きてどれが死んでいるかわかりにくくなり、混乱してくる。
さて、そこまで踏まえた上で、これを使って markdown で記事中に何か書いてみる。ALDsの書き方はよく{: .class}のように書いてあるが、例のようにスペースを入れずに{:.class}と書いても問題ない。２つ以上のクラス名を指定する場合も{:.class1.class2}のようにつなげてOK.
[markdown]
Font Size H1
{:.font.h1}
Font Size H1
HTML は次のように書きだされる。
[html]
<p class="font h1">Font Size H1</p>
以下 H2〜H6。Bulma では級数が一つ下がると 0.5rem 下がるのでこれに準じることにするが、最後の.font.h5と.font.h6は小さくなりすぎるので微調整。以下CSSとHTMLは省略。
{:.font.h2}
Font Size H2
{:.font.h3}
Font Size H3
{:.font.h4}
Font Size H4
{:.font.h5}
Font Size H5
{:.font.h6}
Font Size H6
実際何をするか？ 目的は？
でも markdown で見出しは簡単にできるんだし、.font.h4と.font.h5ぐらいはまだしも、これそんなに使い道ないでしょうね。実際必要なのは強調したい時にちょっと文字サイズを大きくするとか、見出しにまでしたくないけど、本文より少し大きいあるいは小さい文字がほしいとか、そういう狭い範囲のサイズ調整だろう。
と考えて、こんな設定を追加してみた(d は Decimal point の d)。
.font.x1d5
1.5em にセット
.font.x1d4
1.4em にセット
.font.x1d3
1.3em にセット
.font.x1d2
1.2em にセット
.font.x1d1
1.1em にセット
.font.x1
1.0em にリセット
.font.xd9
0.9em にセット
.font.xd8
0.8em にセット
.font.xd7
0.7em にセット
.font.xd6
0.6em にセット
.font.xd5
0.5em にセット
最後の２つは、まず使わねーな（笑）