スタイルとレイアウト

Kifu for JSの盤面と周辺機能は、SVG画像として出力されます。ウィジェットを画像のように拡大縮小して扱え、レイアウト調整が容易です。大きさは次のとおりです。

通常の再生盤：横3:縦4 (300:400)
静的図面：横6:縦5 (300:250)

モバイル/デスクトップ両対応レイアウト

デフォルトで、描画された<svg>要素にはmax-width: 400pxが指定されています。これにより、モバイルなどの縦長の画面では横幅いっぱいに伸び、デスクトップなどの横長の画面では最大でも横400px縦533px（静的図面は横400px縦333px）まで伸び、多くの場合で適切な大きさで表示されます。

`max-width`を指定する/解除する

max-widthをデフォルトの400pxから変更したり、解除していくらでも伸びるようにすることもできます。最大横幅をご覧ください。

`max-width`を指定しない場合、横長画面のデスクトップやタブレット等で異様に大きくなってしまう場合に注意してください。例を開く：

CSSを当てる

これだけでは足りない場合、盤の<svg>要素にCSSを当ててスタイルを調整することもできます。svg要素にはclass="kifuforjs-lite"が付与されるため、次のように全ての盤に対して一括してCSSを適用することができます。

<style>
  .kifuforjs-lite {
    border: 1px black solid;
  }
</style>

個別の盤に対してCSSを当てるには、次のようにします。

タグ方式
JavaScript関数方式
Reactコンポーネント方式

タグ方式では、<script>要素の直後に<ins>要素が挿入され、その中にsvg要素が描画されます。

<script type="text/kifu" data-src="./files/kif/jt201409130101.kif" id="board-1">
<ins>
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 400" style="font-family: serif; user-select: none; max-width: 450px; aspect-ratio: 300 / 400;">
    <g ...>
    ...
  </svg>
</ins>

こういった構造を利用して、<ins>要素にCSSを当てることができます。

<style>
  #board-1 + ins > svg {
    border: 1px black solid;
  }
</style>

JavaScript関数方式では、コンテナ要素の中にsvg要素が描画されます。

<div id="board-1">
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 400" style="font-family: serif; user-select: none; max-width: 450px; aspect-ratio: 300 / 400;">
    <g ...>
      ...
  </svg>
</div>
<script>
  KifuForJS.load({src: "./files/kif/jt201409130101.kif"}, "board-1");
</script>

#id を指定してCSSを当てることができます。

<style>
  #board-1 svg {
    border: 1px black solid;
  }
</style>

<KifuLite> コンポーネントに style propを渡すことで、svg要素に直接CSSを当てられます。

import {KifuLite} from "kifu-for-js";

export const MyComponent = () => {
  return <>
    <KifuLite src="/kifu/jt201409130101.kif" style={{border: "1px black solid"}} />
  </>;
};

配色

配色は、多くのサイトのデザインにマッチしやすいよう考慮されています。

盤駒、棋譜、棋譜コメントは、そこで使用されている文字色をそのまま使用します。 (CSSのcolor プロパティ)
背景色は、そこで使用されている背景色をそのまま使用します。
ボタンや枠は無彩色であるグレーになっており、なるべくデザインの邪魔をしないようになっています。

ダークモード対応

これにより、ダークモードに対応しているサイトに埋め込んでも、なるべく違和感なく表示されるようになっています。このサイトも実はダークモードに切り替えられます。メニューバーからお試しください。

配色例

CSSを当てることで、盤駒の色を指定できます。ここでは、配色の例をいくつか紹介します。

info

この例は、このドキュメンテーションで使用されているテーマが原因で、ダークモードではうまく表示されません。ライトモードでご覧ください。

背景色が次のように白でも黒でもない場合、特に指定なしで表示すると次のようになります。これでも使えますが、やや盤面が見づらい場合も考えられます。

一つの方法は、白地に黒文字（ダーク系ページの場合、黒地に白文字）を指定する方法です。

<style>
  .kifuforjs-lite {
    background-color: white;
    color: black;
  }
</style>

背景に透明度を指定すると、よりサイトの雰囲気に馴染みます。

<style>
    .kifuforjs-lite {
        background-color: rgba(255, 255, 255, 0.8);
        color: black;
    }
</style>

また、次のように背景画像の細部が気になる場合は、

ぼかしのバックドロップフィルタを入れ、不透明度を高めると良いです。

<style>
  .kifuforjs-lite {
    background-color: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    color: black;
  }
</style>

スタイルとレイアウト

モバイル/デスクトップ両対応レイアウト​

max-widthを指定する/解除する​

CSSを当てる​

配色​

ダークモード対応​

配色例​

モバイル/デスクトップ両対応レイアウト

`max-width`を指定する/解除する

CSSを当てる

配色

ダークモード対応

配色例