Apidog Markdown構文
  1. コンポーネント
Apidog Markdown構文
  • Apidog Markdown 概要
  • 基本的記法と機能
    • タイトルとテキスト
    • リストとテーブル
    • 画像
    • ビデオ
    • コード
    • アイコン
    • Tailwind CSSサポート
  • コンポーネント
    • お知らせ
    • ハイライトブロック
    • 折りたたみブロック
    • 折りたたみグループ
    • 複数列
    • カード
    • カードグループ
    • 画像の枠線
    • 画像の背景
    • ステップ
    • タブ
    • ヒント
    • クリックして文字をコピー
    • テキストのツールチップ
    • コンテナ
    • チャートの利用 - Mermaid
      • フローチャート
      • タイミングチャート
      • クラス図
      • 状態図
      • 関係図
      • ジャーナル図
      • ガントチャート
      • 円グラフ
    • 数式
      • インライン式
      • ブロックレベルの式
  • その他の問題
    • ショートカットキー
  1. コンポーネント

複数列

テキストやコンテンツを複数列で表示します。

効果#

列 1
こちらは列 1 のコンテンツです
列 2
こちらは列 2 のコンテンツです
列 3
こちらは列 3 のコンテンツです
コード:
<Columns>
  <Column>
    **列 1**
    こちらは列 1 のコンテンツです
  </Column>
  <Column>
    **列 2**
    こちらは列 2 のコンテンツです
  </Column>
  <Column>
    **列 3**
    こちらは列 3 のコンテンツです
  </Column>
</Columns>
列のコンテンツはMarkdownの記法に従います。

幅の定義#

1 列目
これは1列目の内容で、幅は20%です。
2 列目
これは2列目の内容で、幅は20%です。
3 列目
これは3列目の内容で、幅は300pxです。
コード:
<Columns>
  <Column width="20%">
    **1 列目**
    これは1列目の内容で、幅は20%です。
  </Column>
  <Column width="20%">
    **2 列目**
    これは2列目の内容で、幅は20%です。
  </Column>
  <Column width={300}>
    **3 列目**
    これは3列目の内容で、幅は300pxです。
  </Column>
</Columns>

class 属性を使用したTailwind CSSスタイルの適用#

複数列コンポーネントは、Tailwind CSSを使用したスタイルのカスタマイズをサポートしています。 Columns と Column の両方のコンポーネントで、class 属性を使用してTailwind CSSクラスを追加できます。
Photographs of scenery
This photograph was captured by André Cook
Photographs of scenery
This photograph was captured by André Cook
コード:
<Columns>
    <Column class="bg-gray-100 p-3 rounded">
        <p class="text-lg font-bold text-pink-500">
            Photographs of scenery
        </p>
        This photograph was captured by André Cook
        
        ![](https://api.apifox.com/api/v1/projects/4444182/resources/439706/image-preview)
    </Column>
    <Column class="bg-gray-100 p-3 rounded">
        <p class="text-lg font-bold text-orange-500">
            Photographs of scenery
        </p>
        This photograph was captured by André Cook
        
        ![](https://api.apifox.com/api/v1/projects/4444182/resources/439706/image-preview)
    </Column>
</Columns>

style を使用したスタイルの直接定義#

Photographs of scenery
This photograph was captured by André Cook
Photographs of scenery
This photograph was captured by André Cook
代码:
<Columns>
    <Column style="background-color: #f0f0f0; padding: 10px;">
        <p class="text-lg font-bold text-pink-500">
            Photographs of scenery
        </p>
        This photograph was captured by André Cook
        
        ![](https://api.apifox.com/api/v1/projects/4444182/resources/439706/image-preview)
    </Column>
    <Column style="background-color: #f0f0f0; padding: 10px;">
        <p class="text-lg font-bold text-orange-500">
            Photographs of scenery
        </p>
        This photograph was captured by André Cook
        
        ![](https://api.apifox.com/api/v1/projects/4444182/resources/439706/image-preview)
    </Column>
</Columns>

パラメータ説明#

Column
width
number 
可選
幅:パーセンテージとピクセル値をサポートし、"30%" や "240" などが使用できます。デフォルトでは、自動的に均等な列に分割されます。
class
string 
可選
HTML要素に1つ以上のクラス名を割り当てます。Tailwind CSSがサポートされています。
style
string 
可選
インラインスタイル属性を使用すると、CSSスタイルを直接定義できます。
更新日時 約1年前
前へ
折りたたみグループ
次へ
カード
Built with
目次
効果
幅の定義
class 属性を使用したTailwind CSSスタイルの適用
style を使用したスタイルの直接定義
パラメータ説明