シリウスのテーブル幅を調整｜スマホでもPCでもカッコよく表示

大福

こんにちは、大福です。

この記事では、サイト作成ソフトSIRIUS（シリウス）のテーブル幅の調整方法について解説しています。

こんな悩みに答えます。

デフォルトの状態ではサイトの横幅いっぱいに表示

シリウスでテーブルを作成すると、デフォルトの状態ではサイトの横幅いっぱいにテーブルが表示されます。

でもコレ、ちょっとカッコ悪いなって思っちゃうことありませんか？

テーブル内によけいなスペースが多すぎて、見た目がイマイチです。

できればこんな状態の方がしっくりきませんか？

シリウスでテーブル幅を調整する方法

シリウスでテーブル幅を調整する方法を３つ紹介します。

それぞれのメリット・デメリットにも注目です！

SIRIUSの機能を使用してテーブル幅を調整する方法

まずは、一番簡単なシリウスの機能を使用してテーブル幅を調節する方法を紹介します。

デザインモードをクリック

テーブル→空のテーブルを作成をクリック

横幅の数値に任意のパーセンテージを入力することで、テーブル幅を調整することができます。

横幅を指定してテーブルを表示する方法

シリウスでテーブルを作成すると、こういったタグが表示されているはずです。

赤枠で囲まれている部分に、タグを追加していきます。

大福

widthの数値を変更することで、テーブルの幅を自由に指定できるよ。

テーブルをスクロールさせて表示する方法

これまでは、テーブル幅を縮小する方法を紹介してきましたが、ここでは横長のテーブルをスクロール表示する方法を紹介します。

例えば、こういった横長のテーブル。

PCでは問題なく表示できますが、スマホでは無理矢理縮小されてしまってとても見にくいですよね。

テーブルの横スクロール機能を使用すれば、スマホでの表示時にもテーブルが変に縮小されてしまうことはありません。

方法は簡単。

対象のテーブルタグ全体を選択

テーブルタグが選択された状態で、マウスを右クリック。

テーブルを横スクロールさせるを選択。

スマホ画面での横スクロールが可能になり、テーブルが無理矢理縮小されなくなりました。

テーブルの位置を指定する方法

赤枠で囲まれている部分に、位置を指定するタグを追加します。

margin-left:auto;margin-right:auto;を追加

margin-right:auto;を追加

margin-left:auto;を追加

番外編：PCとスマホでテーブル表示の幅をそれぞれ変更する場合

小豆

PCでは５０％サイズのテーブル、スマホでは見やすいように横幅いっぱいのテーブルを表示したいなぁ。

PCとスマホ、それぞれで最適な大きさのテーブルを表示したいときもありますよね。

これまでに紹介してきた方法では、以下のデメリットがありました。

ちょっと面倒ですが、SIRIUSに搭載の機能をうまく使うことでPC、スマホそれぞれで最適な幅のテーブルを表示することが可能です。

PC表示とスマホ表示、それぞれのテーブル幅を最適にする方法

SIRIUSには、「PCのみで表示」「スマホのみで表示」を指定することが可能な機能が搭載されています。

この機能を使用すれば、【PC表示用のテーブル】と【スマホ表示用のテーブル】を使い分けることが可能になります。

ここでは、以下の条件のテーブルを作る方法を説明します。

step
1PC表示用のテーブルタグを作成

SIRIUS機能を使用してテーブル幅を調整する方法を参考に、横幅を５０％に指定したテーブルタグを作成します。

step
2スマホ表示用のテーブルタグを表示

横幅いっぱいに表示するためのスマホ用のテーブルタグを作成します。

step
3それぞれのテーブルタグに、指定タグを挿入

PC表示用のテーブルタグ全体を選択し、右クリック

タグ挿入→PCのみで表示<pcc>を選択

PC表示タグ同様に、スマホ表示用タグ全体を選択し、右クリック

タグ挿入→iPhoneのみで表示<ipc>を選択

PCとスマホ、それぞれで最適な幅のテーブルが表示されるようになりました。

大福

この記事は以上です。設定お疲れさまでした。