区切り線

ホームへ | このサイトについて | サイトマップ | 問い合わせ | 管理人プロフィール

区切り線

ホームページビルダー使い方トップへ>テーブルの配置と編集

テーブルの配置と編集

次は、メインコンテンツの下の部分。小さい商品写真と商品名、値段が並んでいる部分を作っていきたいと思います。

今、作っているのはサンプルのホームページですので、商品写真も「Sampleimage」と書いてあるサンプル写真を使いたいと思います。

本当は、ここにみなさんの商品写真を並べてください。

まず、4行目は、1列多いので、一番右のセルとその隣のセルを結合します。

4行目の右から二番目のセルをクリックして指定し、「右のセルと結合」ボタンをクリックします。

写真マーク ↓「右のセルと結合」ボタン

セルの結合ボタン

これで、2つのセルを1つに結合することができます。

次に、4行目は、さらにテーブルが入っています。テーブルの中にさらにテーブルが配置されている状態になっています。

写真マーク ↓テーブルの中にさらにテーブルが入っていることを確認してください。(緑の部分)

テーブルレイアウトの大まかな形を確認

テーブルでラフなレイアウトを作る」でやったように、4行目の一番右のセルをクリックして指定し、「表の挿入」ボタンをクリックして、4行6列の表を挿入してください。

動画マーク ↓ここまでの解説を動画で見る。

テーブルが配置できたら、以前にやったようにHTMLを編集して、枠を消して幅を調節します。

今、作成したテーブルの一番左上のセルをクリックすると、下のHTMLソースの表示領域に、

<table border="1">

、という部分が表示されます。

つまり、外枠が「1」のサイズで表示され、幅の設定はまだされていません。

これを、

<table border="0" width="590">

に変更してください。

動画マーク ↓ここまでの解説を動画で見る。

これでテーブルの枠を消すことができ、幅も広げることができました。

次は、写真を配置していきましょう。

戻る   進む

Search

サイト内を検索することができます。

Web製作おすすめ本

↓ホームページビルダーの使い方の基本をおさえたい方におすすめの本です。

できるホームページ・ビルダー12 Windows Vista/XP対応

↓できるシリーズのスタイルシート版です。スタイルシートの基本を押さえておきたいおすすめの本。

できるホームページスタイルシート入門―Windows対応 (できるシリーズ)

↓ホームページビルダーで満足できなくなったら、プロが使うソフトであるドリームウィーバーに乗り換えましょう。

Dreamweaver CS3 Windows版

↓おすすめのエックスサーバー!月額1,050円で1GB+マルチドメイン

↓とりあえずという方のためにおすすめのレンタルサーバーが月額263円からのロリポップ!

ホームページビルダー使い方トップへ>テーブルの配置と編集