ホームページ作成機能>ホームページを作ってみよう>ページを編集する5
PREV MENU NEXT
>>> 前のページの続き

見たい機能のアイコンをクリックすると説明にジャンプします
機能
ボタン
固定コンテンツ 文字・色・背景 ページの開き方 テンプレート ソース 文章貼り付け 文字装飾 文字装飾 段落設定 リンク アンカー 画像貼り付け テーブル 区切り線 文字装飾 Flash挿入/編集 携帯用簡易プレビュー プレビュー 保存

テーブルを使いこなす (初級応用)
  セルプロパティを変更してレイアウトを変えてみましょう。複数のセルを結合して、テーブルの構造を少し変えてみます。
 

変更前 変更後
セル1 セル2
セル3 セル4
セル5 セル6
セル1セル2
セル3 セル4
セル5 セル6


  セル結合

まずは、一番上の行のセル1とセル2を結合します。

セル1の先頭にマウスをあわせ、セル2の末尾までドラッグします。
右クリックし、セル>セル結合を選択します。

  セル背景色

一番上の行のセルが結合しました。次は背景色を変更します。

一番上のセルを選択した状態で右クリックし、セル>セルプロパティを選択します。

  セルプロパティ セルプロパティ画面で背景色を選択し、セル横の整列を中央にします。

これで変更完了です。
セル1セル2
セル3 セル4
セル5 セル6
     
     
テーブルを使いこなす (中級応用)
  セルプロパティの幅と高さ、整列を変更してレイアウトを変えてみましょう。
 

変更前 変更後
セル1 セル2 セル3
セル4 セル5 セル6
セル7 セル8 セル9
セル1セル2セル3
セル4 セル5セル6
セル4縦の配置を上に
セル7 セル8セル
セル7縦の配置を下に
セル9


  セルを結合する まずは一番上の行のセル1から3を結合します。
  セルを結合する セル5と6を結合します。結合したセル5セル6とセル8内で改行します。
  セルプロパティ セル4の縦配置を上にします。同様にセル7の縦配置を下にします。
セルプロパティを開き、「セル縦の整列」をセル4は上に、セル7は下に配列します。
  セルプロパティ

セル4、7、9の幅を50ピクセルにします。
セルプロパティを開き、「幅」を50ピクセルに設定します。

テーブルの幅が300ピクセルですので、下のように横幅が設定されます。
テーブル幅300ピクセル(px)
50px 250px
50px 200px
 
50px

これで変更は完了です。
セル1セル2セル3
セル4 セル5セル6
セル4縦の配置を上に
セル7 セル8セル
セル7縦の配置を下に
セル9
 
 
テーブルを使いこなす (上級応用)
  テーブルをネストしてより複雑なレイアウトを作ってみましょう。 (ネスト=テーブルの中にテーブルを作成する方法です)
 

完成図
テーブル1
 
 
テーブル2
   
 
テーブル3    
   
   
   


 
テーブル1を格納するセル



テーブル2を格納するセル


テーブル3を格納するセル




まずは各テーブルを格納するテーブルを作ります。
(わかりやすいよう、これ以降テーブルにはボーダーをつけて説明します。)
テーブル1
 
 
テーブル2を格納するセル


テーブル3を格納するセル




左上に3行1列のテーブルを作ります。
セルプロパティで背景色を#FFCC99に設定します。
テーブル1
 
 
テーブル2  
   
   
テーブル3を格納するセル




左上に3行2列のテーブル2を作ります。
セルプロパティで背景色を#FFCCCCに設定します。
テーブル1
 
 
テーブル2
  縦に結合
 
テーブル3を格納するセル




テーブル2の一番上の行をセル結合し、右の2行を縦に結合します。

セルを縦に結合する方法  
テーブル2
  カーソル
   
結合する上部セルをマウスで選択し、セルプロパティ画面で「縦幅(行数)を2にします。
縦2行
テーブル2
   
   
右下に表示された余計なセルをマウスを選択し、セルを削除します。
セル削除
テーブル1
 
 
テーブル2
   
 
テーブル3    
     
     
     
下に4行3列のテーブル3を作ります。
セルプロパティで背景色を#CCCCCCに設定します。
テーブル1
 
 
テーブル2
   
 
テーブル3    
   
   
   

左の1列を縦に結合します。

これで完了です。

>>> 続く



ホームページ作成機能>ホームページを作ってみよう>ページを編集する5
PREV MENU NEXT