本サイトはプロモーションが含まれています。

BlueGriffon で ホームページを作成 サイドバー

BlueGriffon で サイドバー を作成する 方法を紹介します。

ホームページのレイアウト

今回は コンテンツ サイドバー の作成です。

よく見かける一般的なホームページのレイアウトにします。

<div>へ名前を付け、スタイルシートを指定します。

<div>へCSS(スタイルシート)を指定するには、id属性を使います。

<div> を選択した状態で → を押します。

div10

エンター ⏎ を押します。

エンター ⏎ を押します。

<div> をクリックします。

div8

<div>を選択し「スタイル プロパティ」「この要素のみ(ID 指定)」をクリックします。

を選択し「スタイル プロパティ」「この要素のみ(ID 指定)」をクリック

コンテンツの 位置とレイアウト

コンテンツを左に フロートし「Please enter an ID」に「contents」と入力して ok をクリックします。

コンテンツを左に フロートし「Please enter an ID」に「contents」と入力して ok をクリックします。
float

縦に並んでいた要素を横並びにすることが出来ます。

<div id="contents">の中にh2を入れます。

h2 1

h2 のスタイルシート

<h2>を選択します。

h2

要素名で指定する を選択し 文字の大きさ 揃え を指定します。

要素名で指定する を選択し 文字の大きさ 揃え を指定します。

色を指定します。

色を指定します。

サイドバーの 位置とレイアウト

<h2> を選択した状態で → を押します。

h2 4

エンター ⏎ を押します。

div11

サイドバーを右に フロートし「Please enter an ID」に「menu」と入力して ok をクリックします。

サイドバーを右に フロートし「Please enter an ID」に「menu」と入力して ok をクリックします。
float

縦に並んでいた要素を横並びにすることが出来ます。

サイドバーの枠線を指定

枠線の 種類 太さ 色 を指定します。

枠線の 種類 太さ 色 を指定します。

大きさを指定します。

大きさを指定します。

サイドバーに番号付きリストを挿入します。

サイドバーに番号付きリストを挿入します。

サイドバーの 文字の大きさ 太さを指定します。

サイドバーの 文字の大きさ 太さを指定します。

サイドバーの文字に色を指定します。

サイドバーの文字に色を指定します。

サイドバーまで出来上がりました。

Side bar
【動画解説183分】初心者のためのホームページ作成完全マニュアル入門書

ホームページの作り方 無料