|
|
© 2014 abhp.net All Rights Reserved. | |
ホームページビルダー19 タブメニューのつくり方 ページ切替用タブ |
ホームページビルダー19 タブメニューのつくり方 ページ切替用タブテーブルレイアウトを利用して、タブメニュー（タブ風に装飾されたリンク）を作成する方法についてご説明します |
|
|
|
はじめに、2行 2列のテーブルを 2個作成します ※．テーブルの作成方法は、「 ページのレイアウトに表を活用しよう 」 参照 （別タブ（ウィンドウ）が開きます） |
|||||||||
|
|
|
下の行の 2つのセルをドラッグし、右クリックメニューから 「選択セルの結合」 で、1つのセルにまとめます |
|||||||||
|
|
|
それぞれの 1行目の左右のセルが、下のセルのタブに見えるように、「スタイルの設定」 → 「レイアウト」 で、上下左右に枠線を引きます ※．テーブルの作成方法は、「 ホームページビルダー19 枠線の引き方 」 参照 （別タブ（ウィンドウ）が開きます） |
|||||||||
|
|
|
選択されていない方のタブを見分けられるよう、セルに対し背景色を設定します ※．背景色のつけ方は、「 ホームページビルダー19 背景色のつけ方 色のぬり方 」 参照 （別タブ（ウィンドウ）が開きます） |
|||||||||
|
|
「メニュー１」、「メニュー２」、それぞれに、該当するページへのリンクを設定します ※．リンク下線の消し方は、「 ホームページビルダー19 リンクの下線を消す 色を変える 」 参照 （別タブ（ウィンドウ）が開きます） |
|||||||||
| さらに、ひと工夫 （お好みでどうぞ） それぞれのタブをクリックして、ホームページビルダーの画面上部にあるタブメニューから 「HTMLソース」、もしくは、「ページ／ソース」 を選択して、HTMLソースを表示させると、クリックした部分のHTMLソース部分が黄色く表示され、その行に 「style="～;"」 という記述を見つけることができるかと思います この記述 （style） は、そのセルの見栄えを定義しているところで、先の 「スタイルの設定」 → 「レイアウト」 で、上下左右に枠線を引いた際に書き込まれています その 「style="～;"」 記述の一番後ろ、「;」 と 「"」 の間に、以下の記述を追記します 「border-top-left-radius: 12px;border-top-right-radius: 12px;」 意味は、それぞれ、セルの左上角 （border-top-left）、右上角 （border-top-right） を 半径 （radius） 12ピクセル （12px） の円弧に丸めよという記述です |