logo

スタイル

PDF のスタイルを指定する方法は複数あり、用途に応じて最適な方法を選択できます。

ダッシュボードからのアップロード

CSS ファイルをダッシュボード > ファイルからアップロードし、HTML から参照する方法です。

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <h1 class="title">Hello World</h1>
  </body>
</html>

外部 CSS の参照

CDN など、既にインターネット上にホスティングされている CSS ファイルを直接参照することができます。

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="https://cdn.tailwindcss.com" />
  </head>
  <body>
    <h1 class="text-3xl font-bold">Hello World</h1>
  </body>
</html>

ただし、この方法には以下のようなデメリットがあります。

  • 外部ファイルの読み込みによる生成時間の増加
  • CDN サービスの一時的な障害の影響
  • 参照先のファイルが予告なく変更・削除される可能性

これらのリスクを避けるため、前述のダッシュボードからの CSS ファイルのアップロードを推奨します。

インラインスタイル

HTML ファイル内に直接スタイルを記述する方法です。<style>タグを使用する方法と、要素に直接style属性を指定する方法があります。

style タグを使用する場合

<!DOCTYPE html>
<html>
  <head>
    <style>
      .title {
        color: #333;
        font-size: 24px;
        font-weight: bold;
      }
    </style>
  </head>
  <body>
    <h1 class="title">Hello World</h1>
  </body>
</html>

style 属性を使用する場合

<!DOCTYPE html>
<html>
  <body>
    <h1 style="color: #333; font-size: 24px; font-weight: bold;">
      Hello World
    </h1>
  </body>
</html>

インラインスタイルは以下のような場合に適しています：

  • 動的に生成されるスタイルを適用する場合
  • PDF ごとに異なるスタイルを適用する場合
  • 単純な一回限りのスタイリングを行う場合
画像ページ