BlueGriffon で ホームページを作成 サイドバー
BlueGriffon で サイドバー を作成する 方法を紹介します。
目次
ホームページのレイアウト
今回は コンテンツ サイドバー の作成です。
![BlueGriffon で ホームページを作成 サイドバー 1 よく見かける一般的なホームページのレイアウトにします。](https://jikuu.info/wp-content/uploads/2023/02/contents-1024x1024.jpg)
<div>へ名前を付け、スタイルシートを指定します。
<div>へCSS(スタイルシート)を指定するには、id属性を使います。
<div> を選択した状態で → を押します。
![BlueGriffon で ホームページを作成 サイドバー 2 div10](https://jikuu.info/wp-content/uploads/2023/02/div10.jpg)
エンター ⏎ を押します。
![BlueGriffon で ホームページを作成 サイドバー 3 エンター ⏎ を押します。](https://jikuu.info/wp-content/uploads/2023/02/div9.jpg)
<div> をクリックします。
![BlueGriffon で ホームページを作成 サイドバー 4 div8](https://jikuu.info/wp-content/uploads/2023/02/div8.jpg)
<div>を選択し「スタイル プロパティ」「この要素のみ(ID 指定)」をクリックします。
![BlueGriffon で ホームページを作成 サイドバー 5 を選択し「スタイル プロパティ」「この要素のみ(ID 指定)」をクリック](https://jikuu.info/wp-content/uploads/2021/07/id.jpg)
コンテンツの 位置とレイアウト
コンテンツを左に フロートし「Please enter an ID」に「contents」と入力して ok をクリックします。
![BlueGriffon で ホームページを作成 サイドバー 6 コンテンツを左に フロートし「Please enter an ID」に「contents」と入力して ok をクリックします。](https://jikuu.info/wp-content/uploads/2023/02/contents2.jpg)
float
縦に並んでいた要素を横並びにすることが出来ます。
<div id="contents">の中にh2を入れます。
![BlueGriffon で ホームページを作成 サイドバー 7 h2 1](https://jikuu.info/wp-content/uploads/2023/02/h2-1.jpg)
h2 のスタイルシート
<h2>を選択します。
![BlueGriffon で ホームページを作成 サイドバー 8 h2](https://jikuu.info/wp-content/uploads/2023/02/h2.jpg)
要素名で指定する を選択し 文字の大きさ 揃え を指定します。
![BlueGriffon で ホームページを作成 サイドバー 9 要素名で指定する を選択し 文字の大きさ 揃え を指定します。](https://jikuu.info/wp-content/uploads/2023/02/h2-2.jpg)
色を指定します。
![BlueGriffon で ホームページを作成 サイドバー 10 色を指定します。](https://jikuu.info/wp-content/uploads/2023/02/h2-color-1024x368.jpg)
サイドバーの 位置とレイアウト
<h2> を選択した状態で → を押します。
![BlueGriffon で ホームページを作成 サイドバー 11 h2 4](https://jikuu.info/wp-content/uploads/2023/02/h2-4.jpg)
エンター ⏎ を押します。
![BlueGriffon で ホームページを作成 サイドバー 12 div11](https://jikuu.info/wp-content/uploads/2023/02/div11.jpg)
サイドバーを右に フロートし「Please enter an ID」に「menu」と入力して ok をクリックします。
![BlueGriffon で ホームページを作成 サイドバー 13 サイドバーを右に フロートし「Please enter an ID」に「menu」と入力して ok をクリックします。](https://jikuu.info/wp-content/uploads/2023/02/layout2.jpg)
float
縦に並んでいた要素を横並びにすることが出来ます。
サイドバーの枠線を指定
枠線の 種類 太さ 色 を指定します。
![BlueGriffon で ホームページを作成 サイドバー 14 枠線の 種類 太さ 色 を指定します。](https://jikuu.info/wp-content/uploads/2023/02/menu2-1024x378.jpg)
大きさを指定します。
![BlueGriffon で ホームページを作成 サイドバー 15 大きさを指定します。](https://jikuu.info/wp-content/uploads/2023/02/menu3.jpg)
サイドバーに番号付きリストを挿入します。
![BlueGriffon で ホームページを作成 サイドバー 16 サイドバーに番号付きリストを挿入します。](https://jikuu.info/wp-content/uploads/2023/02/list-1024x409.jpg)
サイドバーの 文字の大きさ 太さを指定します。
![BlueGriffon で ホームページを作成 サイドバー 17 サイドバーの 文字の大きさ 太さを指定します。](https://jikuu.info/wp-content/uploads/2023/02/menu4-1024x436.jpg)
サイドバーの文字に色を指定します。
![BlueGriffon で ホームページを作成 サイドバー 18 サイドバーの文字に色を指定します。](https://jikuu.info/wp-content/uploads/2023/02/menu-color-1024x367.jpg)
サイドバーまで出来上がりました。
![BlueGriffon で ホームページを作成 サイドバー 19 Side bar](https://jikuu.info/wp-content/uploads/2023/02/side-bar-1024x482.jpg)
ディスカッション
コメント一覧
まだ、コメントがありません