直線上に配置
メニューを開く

資料小分類

  • 白紙からページ作成
  • はじめに
  • ページを作成する
  • 文字を入力する
  • ロゴを作成する
  • 画像を貼る
  • 壁紙やBGMの設定
  • 表を作成する
  • ページを保存する
  • リンクでつなぐ
  • ブラウザで確認する

資料大分類

  • 問い合わせ
  • 資料トップへ戻る
  • 基礎編
  • 白紙からページ作成
  • トップページを作成
  • サブページを作成
  • サイト管理
  • Web ページ
  • HTML 練習
  • CSS 練習
  • レイアウト作成
  • レイアウト編集
  • 参加者作品
  • HP勉強会トップ

白紙からのページ作成 ~表を作成する~

表を利用して、見栄えの良いレイアウトにしてみます。

表の枠を作成する

表を作成するには、まず、ページに表の枠組みを挿入します。

➊hoshikawa_onsen.htmlを開き、表を挿入したい位置にカーソルを移動します。

➋ナビメニューから[表の挿入]を選択します。

  • ナビメニューの[表の挿入]
    • 表の挿入を選択
    • ➊表を挿入する位置にカーソルを移動する。➋ナビメニューの[表の挿入]をクリックして[表の挿入]ダイアログを表示する。

[表の挿入]ダイアログ

➌行数と列数をそれぞれ指定します。

  • [表の挿入]ダイアログ
    • 表の指定
    • ➌表のサイズを行数と列数で指定する。ここではそれぞれ「5」と「4」を指定する。❹[表の属性]で[表の枠を表示する]にチェックを入れる。❺[最初の行を見出しセルにする]にチェックを入れ、[OK]ボタンをクリックする。

➍[表の属性]で[表の枠を表示する]をオンにします。

➎[最初の行を見出しセルにする]をオンにして、[OK]をクリックします。

  • 表の枠の挿入
    • 表が挿入された
    • ページに5行4列の表の枠が挿入される。[表示モード]は[編集優先]で行うのが好ましい。
  • ヒント [表の幅をページ幅に合わせる]をオフにして表を挿入する
    [表の幅をページ幅に合わせる]をオフにして、表を挿入したので、挿入された表の列幅は狭くなっています。
    このあとセルの中に文字を入力すると、列の幅や行の高さが自動的に広がります。

  • ヒント [空白セルに空白コードを自動挿入する]をオフにして表を挿入する
    初期設定では、空白文字が一字挿入されることになっている。これがあると、文字を入力した時に揃っていないなど、意外と面倒である。そのため最初から空白文字を挿入しない表で始める。初期設定の変更は[ツール]→[オプション]で、[編集]タブを選び、[表の属性]グループで指定する。

  • ヒント 表示モードを[編集優先]にして表を挿入する
    表示モードを[表示優先]にして、[表の枠を表示する]をオフにし、[空白セルに空白コードを自動挿入する]もオフにして、文字を入力前の状態で表を挿入すると枠の点線も何も表示されない。表の存在も分からなくなる。こうした場合は表示モードを[編集優先]にすると、枠線が点線で表示され、編集しやすくなる。

  • ヒント 表を削除する
    作成した表を削除するには、表の任意のセルをクリックし、メニューバーから[表→表の削除]を選択します。
    初期設定では、表を削除すると表の内容も消えます。表を削除しても表の内容が消えないようにするには、メニューバーから[ツール→オプション]を選択し、[編集]タブをクリックして、[削除]の[表の削除時にセルの内容も削除する]をオフにします。

表の中に文字を入れる

➊文字を入力したいセルにカーソルを移動します。

  • ►セルの周囲にハンドルマーク■が表示され、カーソルが点滅します。
  • 表(文字入力前)

➋文字を入力します。

  • ►文字を入力すると、セルの幅が広がります。
  • 文字を一部入力した表

➌操作➊~➋を繰り返して、他のセルにも文字を入力します。

  • 文字入力後の表
  • ヒント セル内の文字や画像の配置を変更する
    セルに挿入した文字や画像は、[左揃え]、[中央揃え]、[右揃え] のどれかに設定することができます。
    セルを選択 (セルの周囲にハンドルマークを表示) してから、ツールバーの [左揃え]、[中央揃え]、[右揃え] のいずれかをクリックします。

  • ヒント 行の高さや列の幅を調整する
    幅や高さを調整したい行や列のセルを選択します。セルの周囲に表示されるハンドルマーク■にポインターを合わせ、ポインターが両方向の矢印になったらドラッグします。
    セルの大きさを数値で指定するには、セルを選択してツールバーの[属性の変更]をクリックして行います。

  • ヒント 行や列追加・削除する
    挿入した表に行や列を追加したり、削除したりすることができます。
    追加するときは、追加したい場所の隣のセルを選択します。
    削除するときは、削除したい場所にあるセルを選択します。

セルを結合する

➍隣り合った複数のセルをドラッグして選択します。

  • 結合するセルをドラッグして選択する

➎メニューバーから[表→選択セルの結合]を選択します。

  • ►セルが結合されます。
  • 結合されたセル

表の枠に色を付ける

➊表全体を選択します。

  • 表の選択
    • 表全体を選択
    • すべてのセルを反転表示して表全体を選択する。
  • ヒント 表全体を選択する
    全てのセルを選択するには、表の一番左上のセルから一番右下のセルにかけてドラッグするか、表の一番左上のセルを選択してから[Shift]キーを押しながら表の一番右下のセルをクリックします。

➋ツールバーの[属性の変更]をクリックします。

  • ▶[属性]ダイアログボックスが表示されます。

➌表の背景色=表枠線の色の指定

  • 表の背景色の指定で枠線の色を指定する
    • 表の枠線の色の設定
    • ➌[タグ]が[表]になっていることを確認して、[表]タブをクリックし、[背景]の[色]で色を選択する。ここで設定した色が表の枠の色になる。ここでは、黒色を選択する。
  • ヒント 表の枠の太さを変更する
    [枠表示]とは、表の外枠のことで、これを表示するかどうか、表示する場合その太さを指定できます。一方、[罫線の幅]に値を入力すると、セルとセルの間の枠線の太さを変更できます。
    外枠、罫線の幅、内枠の関係については、罫線の幅、セル内の余白、枠表示の関係 を参照ください。

➍セル背景色=セルの色の指定

  • セル背景色の指定
    • セルの背景色の設定
    • ❹[セル]タブをクリックし、[背景]の[色]をページの壁紙の色(例えば白色)に設定する。

➎[OK]をクリックします。

➏ 表以外の場所をクリックします。

  • 表の枠に色が付く
    • 表の枠に色が付いた

セルの背景に色を付ける

➊メニューバーから[表示→カラーパレット]を選択します。

  • ▶カラーパレットが表示されます。

➋色を付けたいセルを選択します。

  • カラーパレットを表示し、見出しセルを複数選択
    • 見だしセルに色を付ける
    • ➊[カラーパレット]を表示し、➋見出しセルを複数選択する。セルが選択された状態になります。カラーパレットには[セル背景色]と表示されます。

➌色を選択する。

  • 色の選択
    • カラーパレットで色を選択する
    • ➌カラーパレットで好きな色、ここでは、#00cccc を選択し、[適用]をクリックします。

➍色を確認します。

  • 選択セルに色がついた
    • セルの色が変わった
    • ❹選択したセル以外の場所をクリックし、セルの色が選択した色に変わるのを確認する。

➎上書き保存します。

次は、ページを保存するです。

直線上に配置

| |