5-創作文 物書き生活と道具箱

でんでんコンバーターでスタイルを変更する方法2(アルテさんと僕)

その1:でんでんコンバーターでスタイルを変更する方法(アルテさんと僕)


「できました」
ダウンロードしたファイルを解凍し、中に含まれていたdefault_vertical.cssを開く。テキストエディタには200行ほどのコードが表示された。

screenshot

「これが標準のスタイルシートね。私たちがテキストファイルだけで電子書籍を作成すると、このシートが自動的に適用されるわけ。シンプルだけど必要最低限な要素がきちっと押さえられているわ。美しいスタイルシートね」
「はあ……」
トラックパッドを操作して、アルテさんはエディタの表示をスライドさせていく。一行ごとはとても短いが、何が書いてあるのかは僕にはわからない。ときどき単語が読み取れるぐらいだ。でも、アルテさんはそこに何かを見出しているのだろう。夢中になっているのか顔がどんどんディスプレイに寄っていく。それはつまり僕の顔に近づいてくるということなのだが、特に気にした様子はない。ふんわりとした香りが僕の左すぐ横から漂ってくる。
「CSSのすべてを説明するのは尺的に難しいから、ごく基本的な要素に絞ります」とアルテさんは言った。すがすがしいほど事務的な口調で、雰囲気という文脈は粉々に砕け散った。
「……はい」
「そんなに残念がらなくてもいいわ。基本がわかれば応用が利くし、Google大先生にお尋ねすればわからないこともフォローできるはずよ」
「……はい」
僕のリアクションがいまいち飲み込めないのか、小首をかしげるアルテさん。しかし、0.25秒後には気を取り直して説明を続ける。「わかりそうもないことは気にするな」がアルテさんのモットーなのだ。
「まず、スタイルシートの基礎を押さえるわね」

h1 {
font-size: 2em;
margin-right: 0.625em;
margin-left: 0.625em;
}

「これはHTMLのh1タグのスタイルを指定している部分。h1は、でんでんコンバーターでは何で表現するんだっけ?」
「シャープマーク一個(#)です」
「その通り。この箇所では、#を付けた部分の表示スタイルを指定しているの。具体的には、フォントサイズを2emにして、左右のマージンを0.625emに指定している」
「フォントサイズは文字の大きさということですよね」
「だね」
「でも、emという単位がよくわかりません。あとマージンって利ざやのことですか?」
「一つ一ついきましょう。emは、文字の大きさを基準にした単位なの。詳しい話をまるっと割愛すると、1emは標準の文字の大きさ、2emは標準の文字の二倍の大きさ、となります。この場合であれば、h1の文字サイズは普通の文字の2倍にせよ、ということ」
「なるほど」
「あと、マージンだけど、これは”余白”とか”空白”という意味。margin-rightはh1の右側に開ける空白、margin-leftは左側に開ける空白の広さを指定しているの」
「なるほど。売上高から売上原価を差し引いて残った部分が”利ざや”ですからね」
「よくわからないけど、理解してくれたのならそれでいいわ」
「ということは、このh1の左右の空白は、文字一個の半分よりちょっと広いぐらい空く、ということですか?」
「そういうことね」
「では、”font-size: 2em;”を”font-size: 3em;”に書き直せば、h1はもっと大きくなる?」
「そうなるわね。オススメしないけども」
「ちなみにこの指定は、電子書籍内に登場する全てのh1に適用されるんですか?」
「もちろん。それがスタイルシートの強力さの一つでもあるわ。ただしh1は頻繁には登場しないわね。h1はトップの見出しだから、本のタイトル部分にだけ使われるのが一般的」
「なるほど。他の要素はどんなものがあるんですか」
「たとえば、font-familyがあるわ。要するにフォントの指定よ。”font-family: serif, sans-serif;”は、セリフがあればセリフに、なければサンセリフに指定して、という表記なの。書き方を逆にして”font-family: sans-serif,serif;”と書くと、サンセリフが優先になるわ」
「なるほど。他には?」
「好奇心が旺盛なのは良いことだけども、まずは、そこにあるスタイルシートをじっくり眺めてみるといいんじゃないかしら。検索すれば、解説ページもきっと見つかるでしょうから。まあ、一応あとで表にまとめておくけれども」
なんだかんだ言ってアルテさんは優しいのだ。ただちょっと尺を気にしすぎるだけで。
「ありがとうございます!」
「もう一つだけ補足しておくと、何かを引用するときに使う「>」は、blockquoteというタグを生成するの。標準のスタイルシートにも出ているわね。

screenshot

もし、引用部分の文字下げ幅がちょっと広いなと感じたら、この数字を少し小さくしてみるといいわ。あまり狭めすぎると、引用部分かどうかがわかりにくくなるから、その点には注意。まあ、君は文芸書きだから、あまり使わないかもしれないけども」
僕はふと思いついたアイデアをアルテさんにぶつける。
「たとえば、本文のフォント指定と、引用部分のフォント指定を逆にしておく、という手はありですか?」
「そういうのもありね。ともかく、ここは引用箇所です、ということがはっきりしていれば問題なし」
「なるほど。でも、ここで指定しちゃうと、全ての見出しとか引用箇所のスタイルが変わっちゃうんですよね。表現上ある一部分だけ変えたい、という場合はどうすればいいんでしょうか?」
「前回話したこととも繋がりがあるんだけど、今回は尺的にもうここまで。続きは次回」

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です