ホームページビルダー18 こんな時どうしたらいいの？

ホームページビルダー18 こんな時どうしたらいいの？ https://pasonal.com/wp-content/uploads/2014/04/hpb18-icon-thumbnail.jpg 424 283 パソコン生活サポート Pasonal パソコン生活サポート Pasonal //pasonal.com/wp-content/uploads/2016/11/Pasonal-logo-default.png 2014年11月7日 2017年8月8日

ホームページビルダー18（以下、hpb18）でホームページを作成。いざ作ってみると、「画像を横に並べたいんだけど…」「間ってどうやってあけるの？」など、問題が発生します。

今回の記事は、hpb18における、初心者お役立ち操作を書きたいと思います。

新規ページの作成方法

hpb18を起動します。上部メニューから「サイト」を選ぶサイトの新規作成を選択します。

サイト名の入力

今回は新規ページを白紙で作成します。サイト名はわかりやすいものを入力しましょう。「例：Pasonalサイト」

ファイル名の保存

トップページのファイル名の入力は、「デフォルト」のままでＯＫ。ファイルの保存先も、あえて変更する必要はありません。

フレームを選択

一から作成するので、下の段からどちらかを選択します。初心者の人は「白紙のページ（左側）」のほうがよいでしょう。

フレームは少し難しいので、あまりお勧めしません。

画像の間隔の空けかた

画像を挿入したのはいいけど、隣り合う画像がくっついてしまった。そんな時は、画像どうしの間隔をあけてあげましょう！画像の間隔をあける方法は２つあります。

「テーブルレイアウト」で制御する
「CSSレイアウト」で制御する

簡単な方法はテーブルレイアウトですが、ケースバイケースの場合があります。例えば、「リンクの横に画像を表示させたい」などの場合は、テーブルレイアウトの方が簡単に実現できます。

理由は、<div>タグだと「入れ子」にしなくてはいけないため、初心者にはわかりずらいからです。

テーブルレイアウトとCSSレイアウトどっちがいいのか？

正直どっちでもかまいません。自分のやり易いほうを選択しましょう。ただCSSレイアウトで作成したほうが、ソース（HTMLタグなど）がスッキリします。

また、CSSレイアウトだと、他の箇所でも使い回しが出来るため、１回の設定で、複数個所を変更することができます。

等間隔で並べる

そのまま画像を挿入すると画像どうしが「ピタッ」とくっついてしまうことがあります。

画像を等間隔で整列させるには、hpb18の「cssレイアウト」を使用するか、「テーブルレイアウト」を使います。どちらが良いかは「ケースバイケース」です。

テーブルレイアウト

左側にリンク（文章）があり、右側に画像を挿入させたい場合は、テーブルレイアウトのほうが良いでしょう。
テーブルの黒いライン（ふち）を透明にして無くせば、綺麗に横にならんでいるように見えます。

挿入場所を決める

テーブルを挿入したい場所をクリックします。又は、ある程度のスペースを空けておきましょう！

行と列

行は「横方向」列は「縦方向」なので、それに注意して、行と列を入力する。例えば、横に画像を並べたい場合は、「１行、２列」となる。

幅を決める

テーブルを選択すると、黒い四角（ハンドル）が表示されます。ハンドルにマウスのカーソル（矢印）をもってくると、形が変わるので、伸ばしたい方向に、引っ張ります。あとで長さは調節できるので、ある程度の大きさにしておきましょう。

画像の挿入

hpb18の左側のメニュー「写真や画像の挿入」から挿入したい画像を選択します。
素材からや、自分で用意した画像も選べます。

調整

画像を挿入した状態です。挿入した画像も大きさを調整できるので、黒い四角（ハンドル）を引っ張りましょう。
このとき、「Shiftキー」を押しながら斜めに引っ張ると、等倍（最適な比率）で拡大・縮小します。
この技は結構使用するので、是非覚えておきましょう！

隙間を埋める

画像を挿入すると、画像のまわりに「すき間」があります。
左の画像では、赤い部分が「すき間」です。
これは、画像のレイアウトが「上方向」となっているため、このような現象がおきます。
この余分なすき間を削除していきます。

画像のスタイル設定

画像を左クリックした後、右クリックする。すると、画像の編集メニューが表示される。
下から３番目にある「スタイルの変更」を選択する。

マージンとパディング

上部にある、「レイアウト」のタブを選択する。すぐ下にある、「４方向とも同じ値」に切り替え、OKをクリックする。同じ画面内に「マージン」「パディング」という項目がある。これは、「画像の間隔をどのぐらいあけるか」を設定する項目である。試しに数値を入力してOKを押すと、画像の周りが変化するはずです。

画像の間隔を細かく設定したい場合は、「マージン」又は「パディング」を設定してみよう。

CSSレイアウトで制御する

まずは、HPに画像をいくつか挿入しましょう。

hpb18の左側メニュー「写真や画像の挿入」から選びましょう。

スタイルの設定

まずは全ての画像のレイアウトを整えていきます。

画像の上で、右クリックして、「スタイルの設定」を選択します。

スタイルの設定

「レイアウト」タブを選択し、「上・下・左・右・4方向とも同じ値」のいずれかに設定します。間隔をあけたい方向を選択してください。左どなりの間隔をあけたいのであれば、「左」を選択する必要があります。

最後に、パディングで数値を入力します。

まずは数値を入力してみて、どの程度間隔が変化するか試してみましょう。一度試せば、だいたいの間隔がつかめるはずです。あとは、残りの画像全てに同じ作業を繰り返します。

３．外部CSSを使う

No.２の方法でもCSSを使用していますが、実はNo.２ではHTMLファイル内のタグ（HTMLのコード）に直接「style」というタグを付けることで制御しています。一度、ソースを確認してみてください。画像の「<img src=”～” style=”padding-top:5px; ～”（画像の上部を5px間隔をあける）」のように、HTMLタグにstyle属性の記述が加えられているはずです。

一方、この外部CSSは、別のファイルを作成（CSSファイル）し、そのファイルからHTMLのレイアウトを制御する方法です。HTMLファイル内のタグに直接「style」を付けても、外部CSSを使用しても、どちらでも同じように実現できます。

が、外部CSSにすることで、利便性は格段に向上します。

外部CSSのメリット

例えば、「<img src=”～” style=”padding-top:5px; ～”（画像の上部を5px間隔をあける）」の記述が５か所あったとします。変更が必要になった時、当然５カ所とも変更しなければなりません。これでは、変更が生じるたびに、複数個所を変更しなければならないため、作業的に大変です。

これを外部CSSファイルにすれば、１ヵ所修正するだけで、指定した全ての箇所を一度で変更させることができます。しかし、外部CSSを使用するためには、ある程度の基礎知識が必要になります。制御する命令は決まっているため、ネット等で「CSSの基礎」をあらかじめ勉強しておきましょう。