デジタルカメラを使おうWEBサイトで情報発信しようパソコンについて学ぼう遊びながら学ぼうヘルプ

WEBサイトで情報発信しよう

パソコンについて学ぼう

WEBサイトによる情報発信

WEBサイト作成方法(基礎)

WEBサイト作成方法(応用)

画像処理の方法

WEBサイト作成方法(応用)

ページに表を入れよう


 表を上手に利用すると見栄えのよいレイアウトにすることができます。表は本来、データを整理するためのものですが、標準モードでホームページを作成するときは、自分の思いどおりの場所に画像や文字を配置するためのレイアウトの道具として使われることが多いようです。 ここでは、行や列の網かけや罫線の色など、あらかじめデザインが適用された表を「標準モード」で作成してみましょう。


■表を挿入する
動画を見る

表の挿入位置にカーソルを移動し、ナビメニューから「表の挿入」をクリックします。 「 表の挿入」ダイアログが表示されます。




行数と列数をそれぞれ指定します。
[表の属性]で[表にスタイルを適用する]にチェック マークが付いていないことを確認します。
[OK]ボタンをクリックするとカーソル位置にデザインが適用されないシンプルな表の枠が挿入されます。




■表の中に文字や画像を入れる
表を構成する個々の枠を「セル」と呼びます。セルの中に文字を入力するには、文字を入力したいセルにカーソルを移動し、セルの周囲に■(ハンドルマーク)が表示され、カーソルが点滅した状態にします。
そこに文字を入力してみましょう。

文字を入力するにしたがって、セルの幅が広がります。
文字を入力した左側のセルに画像を挿入してみましょう。
画像を挿入したいセルにカーソルを移動し、ナビメニューから「写真や画像の挿入」→「素材集から」を選択します。「素材集から開く」ダイアログが表示されます。
素材集以外の画像ファイルを選ぶときは、「写真や画像の挿入」→「ファイルから」を選びます。

挿入する画像ファイルを選択して、[開く]ボタンをクリックするとセルに画像が挿入されます。
■行や列の幅を調整する

作成した表の列の幅や行の高さは、あとから自由に変更することができます。

幅を調整するにはセルを選択し、セルに周囲に■(ハンドルマーク)が表示されたら、そこにマウスポインタを合わせ、ポインタが両方向の矢印に変わったところでドラッグします。




セルの幅が決まったらマウスのボタンを離しましょう。
セルの幅がドラッグした大きさに広がります。




表全体を拡大または縮小したいときは、次の手順で行います。
表全体を選択し、表の周囲にハンドルマークが表示されたら、マウスポインタをハンドルマークに合わせ、カーソルが両方向の矢印の形になったら、マウスをドラッグします




セルの幅が指定されていると、マウスのドラッグ操作でセル幅を変更できなくなる場合がありますが、この場合には、次の方法でセルの幅と高さに設定された数値をいったんクリアする必要があります。

1.表のすべてのセルをドラッグして選択します。
2.ツールバーの[属性の変更]をクリックします。
3.[タグ]が[表]になっていることを確認します。
4.[セル]タブを選択し、セルの幅・高さの欄に入っている数値を削除します。
5.[OK]ボタンをクリックし、ダイアログを閉じます。

■行や列を追加、削除する
表の行や列が足りなくなったら、あとから好きな場所に追加、挿入することができます。また不要な行や列の削除もできます。

選択したセルの下に1行追加してみましょう。列の追加も同じような操作で行えます。
追加したい場所の隣にある任意のセルを選択します。




メニューバーから「表」→「行の追加」→「下へ1 行追加」を選択すると、選択したセルの下側に行が追加されます。同じ要領でセルの上や左右にも追加できますから、好きな場所に行や列を追加してみましょう。




一度にまとめて複数の行(または列)を追加するには、メニューバーから「表」→「指定して追加」を選択します。「行または列の追加」ダイアログでは、次の項目を指定して[OK]ボタンをクリックします。

1.[ 行]または[列] 2.追加したい場所 3.追加したい行数(列数)
■行または列を削除する
任意のセルをクリックし、メニューバーから「表」→「行の削除」(または「列の削除」)を選択します。初期設定では、行(または列)を削除するとセルの内容も消えてしまいます。行(または列)を削除してもセルの内容が消えないようにするには、あらかじめメニューバーから「ツール」→「オプション」を選択し、[編集]タブをクリックして、[表の削除時にセルの内容も削除]のチェックマークを外してください。こうしておくと、削除した行(または列)の内容が前の行(または列)に移動します。


■セルを結合する
複数のセルをまとめて1 つのセルに結合することができます。
結合したい複数のセルをドラッグして選択し、メニューバーから「表」→「選択セルの結合」を選択します。




選択したセルが結合されます。必要に応じて他のセルも同様に結合します。




■セルの背景に色を付ける

デザインが適用されていない表には、カラーパレットを使ってセルの背景に色を付けることができます。

メニューバーから「表示」→「カラー パレット」を選択し、カラー パレットを表示させておきましょう。

色を付けたいセルを選択します。複数セルの場合はドラッグして選択します。
セルが選択された状態になります。カラー パレットには「セル背景色」と表示されます。




カラー パレットから好きな色をクリックして選択し、[適用]ボタンをクリックします。
セルの色が選択した色に変わります。




■セルの枠に色を付ける
デザインが適用されていない表の枠に色を付けてみましょう。

表全体を選択し、ツールバーの[属性の変更]をクリックします。
「 属性」ダイアログまたは「レイアウト枠に含まれる表」ダイアログが表示されます。
[表]タブをクリックし、[背景]にある[色]で任意の色を選択します。ここで設定した色が表の枠の色になります。この時点では表全体が指定した色に変わります。




[セル]タブをクリックし、[背景]にある[色]をページの任意の色(ここでは白色)に設定します。




[OK]ボタンをクリックすると、表の枠に色が付きます。




この他にも表を使ってレイアウトをしたり、スタイルシートを使用し枠線を変更したりと、使い方次第では表は大変便利です。しかし、良い点ばかりではなく、表は何も入っていないセルでも記述されていくという特性を持っています。
例えば、上の画像で説明すると、合計19個のセルの表を作り、その中の7個のセルしか使っていなくて他のセルは色も枠もない(文字や画像の入力がない)状態でも19個のセルの記述をします。
 これが大規模な表で、細かな作りの表になってくるともの凄い容量を食い、作成していって気が付いた時には膨大な容量のページになっている事もあるので、表を作っていき、余分な所や何も入れない所が連続していたら、それらのセルを選択して、「選択セルの結合」 で、1つのセルにしていく事が大切です。

また、先ほど簡単に説明しましたが、実際には表の枠線などはスタイルシートを使用するほうが、より自由度の高い編集が可能ですのでスタイルも合わせて使ってみてください



▲ページトップ


line

copyright

back