HPB19 | HPB18 コンテンツ一覧
ホーム > HPB19 > ホームページビルダー19 タブメニューのつくり方 ページ切替用タブ
目次 | 元のページ 前のページ | 次のページ サイトマップ | ページEND

ホームページビルダー19 タブメニューのつくり方 ページ切替用タブ


ホームページビルダー19 タブメニューのつくり方 ページ切替用タブ



テーブルレイアウトを利用して、タブメニュー(タブ風に装飾されたリンク)を作成する方法についてご説明します








はじめに、2行 2列のテーブルを 2個作成します

※.テーブルの作成方法は、「 ページのレイアウトに表を活用しよう 」 参照 (別タブ(ウィンドウ)が開きます)






下の行の 2つのセルをドラッグし、右クリックメニューから 「選択セルの結合」 で、1つのセルにまとめます




それぞれの 1行目の左右のセルが、下のセルのタブに見えるように、「スタイルの設定」 → 「レイアウト」 で、上下左右に枠線を引きます

※.テーブルの作成方法は、「 ホームページビルダー19 枠線の引き方 」 参照 (別タブ(ウィンドウ)が開きます)






選択されていない方のタブを見分けられるよう、セルに対し背景色を設定します

※.背景色のつけ方は、「 ホームページビルダー19 背景色のつけ方 色のぬり方 」 参照 (別タブ(ウィンドウ)が開きます)


メニュー1 メニュー2
ここに、「メニュー1」
の内容を記述します




メニュー1 メニュー2
ここに、「メニュー2」
の内容を記述します
「メニュー1」、「メニュー2」、それぞれに、該当するページへのリンクを設定します

※.リンク下線の消し方は、「 ホームページビルダー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) の円弧に丸めよという記述です


メニュー1 メニュー2
ここに、「メニュー1」
の内容を記述します

メニュー1 メニュー2
ここに、「メニュー2」
の内容を記述します

それなりに、タブっぽく見えると思いますが、いかがですか
目次 | 元のページ 前のページ | 次のページ サイトマップ | ページTOP
ホーム > HPB19 > ホームページビルダー19 タブメニューのつくり方 ページ切替用タブ
   

© 2014 abhp.net All Rights Reserved.

参考情報


3-7 角の丸い「タブ」をHTMLとCSSで作る方法 [ホームページ作成] All About

ページTOP
ページTOP
ページTOP
ページTOP
ページTOP
ページTOP