BlueGriffon で ホームページを作成 する レイアウト
BlueGriffon で ホームページ を作成する 方法を紹介します。
BlueGriffon を起動
新規作成 をクリックします。
![BlueGriffon で ホームページを作成 する レイアウト 1 BlueGriffonを起動し「新規作成」をクリック](https://jikuu.info/wp-content/uploads/2021/07/create-new.jpg)
Dual View をクリックして プレビューとソースの両方を表示します。
![BlueGriffon で ホームページを作成 する レイアウト 2 Dual View をクリックして プレビューとソースの両方を表示します。](https://jikuu.info/wp-content/uploads/2021/07/dual-view-1024x388.jpg)
index.html で保存します。
ホームページのレイアウト
よく見かける 一般的なホームページのレイアウトにします。
![BlueGriffon で ホームページを作成 する レイアウト 3 よく見かける 一般的なホームページのレイアウトにします。](https://jikuu.info/wp-content/uploads/2023/02/contents-1024x1024.jpg)
<div> でレイアウトを作る
サイト全体を覆う
<div> を挿入します。
![BlueGriffon で ホームページを作成 する レイアウト 4 div](https://jikuu.info/wp-content/uploads/2023/02/div.jpg)
![BlueGriffon で ホームページを作成 する レイアウト 5 div5](https://jikuu.info/wp-content/uploads/2023/02/div5.jpg)
パネル スタイルシート をクリックします。
![BlueGriffon で ホームページを作成 する レイアウト 6 「パネル」「スタイルシート」をクリック](https://jikuu.info/wp-content/uploads/2021/07/style-sheet.jpg)
スタイルシートを追加(+)をクリックします。
![BlueGriffon で ホームページを作成 する レイアウト 7 スタイルシートを追加(+)をクリックします。](https://jikuu.info/wp-content/uploads/2023/02/style-sheet2.jpg)
文書からリンクする URLをページ相対にする にチェックを入れ 新しいファイル をクリックします。
![BlueGriffon で ホームページを作成 する レイアウト 8 文書からリンクする URLをページ相対にする にチェックを入れ 新しいファイル をクリックします。](https://jikuu.info/wp-content/uploads/2023/02/style-properties.jpg)
index.html と同じフォルダに style.css で保存します。
<div>へ名前を付け、スタイルシートを指定します。
<div>へCSS(スタイルシート)を指定するには、id属性を使います。
<div> をクリックします。
![BlueGriffon で ホームページを作成 する レイアウト 9 div3](https://jikuu.info/wp-content/uploads/2023/02/div3.jpg)
<div>を選択し「スタイル プロパティ」「この要素のみ(ID 指定)」をクリックします。
![BlueGriffon で ホームページを作成 する レイアウト 10 を選択し「スタイル プロパティ」「この要素のみ(ID 指定)」をクリック](https://jikuu.info/wp-content/uploads/2021/07/id.jpg)
Webサイトの横幅サイズ(コンテンツ幅)を指定
「大きさ」「幅:1002px」と入力し「Please enter an ID」に「wrapper」と入力して ok をクリックします。
![BlueGriffon で ホームページを作成 する レイアウト 11 「大きさ」「幅:1002px」と入力し「Please enter an ID」に「wrapper」と入力して ok をクリックします。](https://jikuu.info/wp-content/uploads/2023/02/wrapper.jpg)
Webサイトの枠線を指定
枠線の 種類 太さ 色 を指定します。
![BlueGriffon で ホームページを作成 する レイアウト 12 枠線の 種類 太さ 色 を指定します。](https://jikuu.info/wp-content/uploads/2023/02/frame-border-1024x387.jpg)
style.css をダブルクリックすると スタイルシート が確認できます。
![BlueGriffon で ホームページを作成 する レイアウト 13 style.css をダブルクリックすると スタイルシート が確認できます。](https://jikuu.info/wp-content/uploads/2023/02/css-1024x265.jpg)
枠線の中にヘッダーを入れる
エンターを押して<div>を入れます。
![BlueGriffon で ホームページを作成 する レイアウト 14 div6](https://jikuu.info/wp-content/uploads/2023/02/div6-1024x255.jpg)
</dv>と<div>の場所を入れ替えて<div id="wrapper">の中に<div>を入れます。
![BlueGriffon で ホームページを作成 する レイアウト 15 div7](https://jikuu.info/wp-content/uploads/2023/02/div7.jpg)
ヘッダーの枠線を指定
枠線の 種類 太さ 色 を指定し「Please enter an ID」に「header」と入力して ok をクリックします。
![BlueGriffon で ホームページを作成 する レイアウト 16 枠線の 種類 太さ 色 を指定し「Please enter an ID」に「header」と入力して ok をクリックします。](https://jikuu.info/wp-content/uploads/2023/02/header2-1024x499.jpg)
<div id="header">の中にh1を入れます。
![BlueGriffon で ホームページを作成 する レイアウト 17 h1 2](https://jikuu.info/wp-content/uploads/2023/02/h1-2.jpg)
h1 のスタイルシート
<h1>を選択します。
![BlueGriffon で ホームページを作成 する レイアウト 18 h1 3](https://jikuu.info/wp-content/uploads/2023/02/h1-3.jpg)
要素名で指定する を選択し 文字の大きさ 揃え を指定します。
![BlueGriffon で ホームページを作成 する レイアウト 19 要素名で指定する を選択し 文字の大きさ 揃え を指定します。](https://jikuu.info/wp-content/uploads/2023/02/h1-5.jpg)
色を指定します。
![BlueGriffon で ホームページを作成 する レイアウト 20 色を指定します。](https://jikuu.info/wp-content/uploads/2023/02/h1-color-1024x363.jpg)
ヘッダーまで出来上がりました。
![BlueGriffon で ホームページを作成 する レイアウト 21 ヘッダーまで出来上がりました。](https://jikuu.info/wp-content/uploads/2023/02/header3-1024x281.jpg)
ディスカッション
コメント一覧
まだ、コメントがありません