Joy CMSのオンラインマニュアルです

表の作成(基本)

ホームページ作成には、表の作成はつきものです。表を作成するなんて難しいのではと思っておられる方も多いのでは。

ここでは、表の作成について説明してゆきます。慣れてしまえば心配することはありません。

手始めに横2列3行の表を作ってみましょう。表を作成するには、ツールバーの一番左の上から3番目のボタンをクリックします。

表の作成ボタン

表の挿入/編集ダイアログが表示されますので「列」に2を「行」に3を入力します。その下にあるCellpaddingは表とその中の内容物、例えばテキストとか画像とかと表との間の余白です。

Cellpaddingをデフォルトの0のままにした場合、表の中にテキストを入れると見苦しくなりますので適当な値を入れます。3以上の数値を指定した方が良いでしょう。逆に余り値が大きすぎると間が抜けた感じになります。ここでは5を指定しています。

枠線は枠の太さの指定です。ここでは1にしましたが、デフォルトの0のままですと枠線無しとなって表示されません。

その下の表の幅は、表示される表の全幅を指定します。JoyCMSの場合500以内の数値を指定します。
515以上の数値を指定した場合、表示が崩れます。ここでは500(ピクセル)を指定しています。

最後にダイアログの下にある「挿入」ボタンをクリックします。

表の挿入/編集ダイアログ

作成された表は、列の幅が右左均等になっています。表のセル(升目)にテキストや画像を入れれば自動的に幅が調整されますが、強制的に幅を指定することが可能です。

この例のように2列の場合は、左側のセルの幅を指定するだけで良いでしょう。右側のセル幅は自動的に表の全幅から左側のセル幅を引いた値にセットされますから。

左側のセル幅を指定するには、作成された表の一番上の左側のセルにカーソルを持って行き、マウスを右クリックします。そうしますと、下図のようなポップアップが表示されますので「セル」→「セルのプロパティ」をクリックします。

表のセル幅を指定する

「セルのプロパティ」のダイアログでは、「配置」と「幅」を指定します。ダイアログで一番上の「配置」は水平方向の配置の指定です。ここでは「中央揃え」を指定しています。

また、セル幅は150を指定してみます。値を入力したらダイアログの一番下にある「更新」ボタンをクリックします。

セルのプロパティ

下図は、今までの操作で作成された表です。左側のセル幅が右側より狭くなっているのが確認できます。

表

表のセル内にテキストを挿入するには、セル内をクリックしてから文字を打ち込むとテキストが表示されます。

テキストの挿入

 

セルの中の内容物の配置を指定する

表のセル(升目)の中にあるテキストや画像などの内容物の配置を指定するには、編集するセル内にカーソルを置いて右クリックし、表示されたポップアップから「セル」→「セルのプロパティ」を選択します。

セルのプロパティ

表示された「セルのプロパティ」ダイアログの一般タブをクリックします。(デフォルトでは最初に一般タブが開きますのでこの操作は実際には不要です)

一般タブでは「配置」と「垂直方向の配置」がありますが、「配置」は、水平方向の配置です。
下の例では、垂直方向の配置に「中央揃え」を指定しています。

配置の指定

「垂直方向の配置」の右側に「スコープ」がありますが、これは、現在編集しているセルを基準に「行」や「列」を一度に現在の配置設定に設定することができます。

例えば、この「スコープ」で行を選択した場合、編集しているセルと同じ行のセルに現在の設定を有効にすることができます。

スコープ

 

セルに色を付ける

これまで、基本的な表の作成方法や、セルの内容物の配置について述べてきましたが、次にセルの背景に色を付ける方法を説明します。

前提として、表が既に作成されているものとします。まず、背景色を付けたいセルの内側をクリックします。

次に右クリックするとポップアップが表示されますので「セル」→「セルのプロパティ」をクリックします。

セルのプロパティ

「セルのプロパティ」ダイアログが表示されたら、「上級者向け」タブをクリックします。

上級者向けタブ

「色の選択」のダイアログが「セルのプロパティ」ダイアログに重なるように表示されますので「既定色」タブをクリックします。※ここでは「既定色」タブを選択しましたが、「カラービッカー」や「パレット」から選択することもできます。

既定色の選択

色を選択して「色の選択」ダイアログの下の方にある「適用」ボタンをクリックします。これでセルに色が付きました。

 

横に画像とテキストを表示させる

下のような2列1行の表を作成し、左側にテキスト、右側に画像を表示させて見ましょう。

下はサンプル投稿です。

俺は、野良猫のにゃん太だ。
以前は、飼い主もいたが今じゃ気ままな独り暮らしよ。

にゃん太

 まず、最初にツールバーの表の作成ボタンをクリックします。

表の作成ボタン

表示される「表の挿入/編集」ダイアログを下図のような値にします。

表は横2列縦1行ですのでその値を入力し、「枠線」は0にして枠を非表示とします。また、枠とテキストや画像の隙間(余白)を5ピクセルとするためにCellpaddingは5とします。

表の幅は500ピクセルにセットします。

表の

「表の挿入/編集」ダイアログの「挿入」ボタンをクリックすると、下図のような表が挿入されます。ちょっと薄くてわかりづらいかも知れません。赤い破線で示している場所に表が作成されています。

表の作成

次に、セル(升目)を指定します。全幅で500ピクセルですので、左右のセル幅を均等にするために左側のセル幅を250ピクセルに設定します。

左側のセル内をクリックした後にマウスの右クリックでポップアップを表示させ、「セル」→「セルのプロパティ」をクリックします。

セルのプロパティ

「セルのプロパティ」のダイアログでは、幅を250にするだけです。値を入力したら「更新」ボタンをクリックします。

セルのプロパティ

これで左右のセル幅が均等に設定されたはずですから、左側のセルに下図のようにテキストを入力します。

テキストの入力

左側のセルのテキストの入力が完了したら、右側のセル内にカーソルを置いてツールバーのフォントサイズの下の画像の挿入/編集のアイコンをクリックします。(下図の矢印のアイコン)

画像の挿入/編集アイコンをクリック

すでにアップロードされている画像を挿入する場合は、「画像の挿入/編集」ダイアログの参照ボタンをクリックします。

画像の挿入/編集ボタン

ポップアップでアップロードされている画像の一覧が表示されますので、その一覧の中から画像の右側にある「挿入」ボタンをクリックします。

画像の一覧

右側のセル幅は左側のセル幅と同じ250ピクセルですが、Cellpadding(余白)を5ピクセルに設定していますので画像の横幅を、セル幅250ピクセルから左右の余白を引いた値240ピクセルに修正します。

「画像の挿入/編集」ダイアログの「表示」タブをクリックします。

表示タブ

開いた「表示」タブで「縦横比の保存」にチェックが入っていることを確認してサイズの横幅(左側)を240に修正し、サイズの右側の値をクリックします。

最後に「ダイアログ」の下にある「挿入」ボタンをクリックします。

サイズの編集

これでエディタ内の表が完成されました。エディタ内では枠が破線で表示されていますが、「表の挿入/編集」ダイアログで枠線を0に設定していますので、実際にはこの枠は表示されません。

表の完成