AsciiDocをHTMLに変換する時に指定できるCSSファイルは1つだけですが、
複数のCSSファイルを読み込ませる方法は3つ程ありますので、ご紹介します。
(1) CSSからCSSをインポートする
CSSファイルと読み込む方法として一般的なのは、HTML の link タグで読み込むことですが、CSSの @import というアットルールを使うことでも、外部のCSSファイルを読み込むことが出来ます。
// index.adoc
:stylesheet: index.css/* index.css */
@import url("https://fonts.googleapis.com/css2?family=M+PLUS+1+Code&family=Murecho&display=swap");
@import url("reset.css");
@import url("common.css");@import には他の構文や細かいルールがありますが、詳細は MDM Web Doc などでご確認していただければと思います。
(2) HTML の link タグを直接書き込む
AsciiDoc のドキュメント内で HTML を普通に書いても HTML としては認識されず、そのままの文字がブラウザに表示されます。
HTML として認識させたい場合は、HTMLとして認識させたい対象を ++++ で括ります。
++++
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=M+PLUS+1+Code&family=Murecho&display=swap"/>
<link rel="stylesheet" href="./reset.css" />
<link rel="stylesheet" href="./common.css" />
++++コードブロックの ---- と同じ要領ですね。
残念ながら head タグの中には出力できませんので、理想的な出力結果にはなりません。
ただし、script タグやインラインフレームを埋め込むこともできますので、特殊な視覚効果を出したい時や、WEB広告を埋め込む時などに ++++ は役立つと思います。
(3) Sass(SASS,SCSS)を使う
「(1) CSSからCSSをインポートする」と同じように @import を使う方法ではあるのですが、 (3) ではリリース前にコンパイルを行って複数のファイルを1つのCSSファイルにまとめてしまいます。
ページを表示するために必要なファイル数が少なくなるため、HTTPリクエストの回数も少なくなるというメリットがあります。
環境さえ整えてしまえば (1) よりも優れているのですが、
環境を整えるまでは慣れていないと少し面倒ですね。
まとめ
AsciiDocで複数のCSSファイルを使用する方法として、
CSS の @import を使用する方法と、HTML を変換せずに出力する ++++ を使う方法、そしてSassを使う方法をご紹介しました。
あまり凝らないドキュメントであれば、手軽な「(1) CSSからCSSをインポートする」で十分だと思います。
以上、この情報がお役に立てれば幸いです。
