みなさま、こんにちは＾0＾
本日もWebflowを用いての無料ホームページ作成No.3へようこそ！
最近は朝晩の気温差がだんだんあるように感じてきました。
みなさまも風邪など引かないようにお体気を付けてください。
（私は、毎朝起きた直後にくしゃみを3連発するのが日課になってきています…….＾＾；）
さて、今日のブログでは前回お伝えした下記の図のようなHP画面の作成を2回に分けてお伝えしていきたいと思います。↓
まずは、前回の最後のこちらの画面をだしましょう。（プロジェクトの一番左の方の）↓
では、まず用語の説明をしていきます。
ピンク□で囲んでいる部分の中に、BodyとSectionがあります。
✓Bodyとは、ナビゲーターを消したときに、見える白い部分全部のことを差します。
ホームページでいうと1ページすべてのことを差します。
このBodyの中に、作りたいHPの素材を入れていくような感じになります。
一つの線で包括していくような感じかなと思います。⇒実際操作してみていただいた方がイメージ沸きやすいと思います
✓Sectionとは、Bodyの中でこの一部に素材を入れていくようなイメージです。
Sectionの文字をクリックして、ナビゲーターを消すと、自動的にブルーのライン が出てきます。このラインの中を1 Sectionと私は呼びます。
1 Bodyに何個のSectionを入れることも出来ます。
ただし、Sectionを多く作るにつれ、出来上がったホームページは1ページが長く なります。（最後まで見るのに、スクロールをたくさんしなければならない）
⇒ 
次に、①一番上の図の中にある左上の黄色の〇を選択してください。
すると、HPを作成する際の様々な素材があります。
Ex. Layoutのカテゴリーには、写真や動画、文章をキレイに配置できるようにする素材が入ってます。
Basic のカテゴリーにはよく使われる素材が入っています。（ボダン押したら違うページや URLへ移動するなど）
今回、使用する素材は、1.Container 2.Grid 3.Image 4.Paragraph の四つの予定です。
②Layoutの中にあるContainer（黄色の〇）を左ドラックしながらSectionの中に放り込んでください。
（白のHPの白紙の上でSectionと表記が出てくるところに移動します、真ん中の上の方になるかと思います）↓
⇒
✓Containerとは、素材を一定の範囲内で整列させる役割のことを差す。ブロックみたいなイメージですね。
素材をContainerの中に放り込み、サイズ調整をすることによってContainerや
Sectionの大きさが変わっていきます。（今はまだ何も素材入れてないので、範囲が小さいです）
ルールがあることで追加要素に対応しやすいや管理しやすいという役割もあります。
に、することができます。
今のこの状態で、もう一度ナビゲーターを開くと、Sectionの中にContainerが入っているのがわかります。↓
③次に、Gridという素材をコンテナに入れていきます。
上と同じようにGridの素材をクリックしながら、今度はContainerの中に入れていきます。
実はもう一つ簡単に素材を追加する方法があります。
白紙の所でContainerを選択し、そのまま「Ctrl+E」を押していただいて、検索バーが出てきます、検索バーにGridと入力し、Enterを押すと追加されます。↓
⇒
Gridを入れたときの画面がこちらになります ↓
✓Gridとは、格子状のマス目があり、列を増やすことと、行を増やすことも出来ます。
好きな順番に配置したり結合したりすることで、様々なレイアウトが可能になります。
この格子のマスにさらに素材を入れていくと、HPの出来上がりがキレイに並べられます。
④上記の画面のままで、今回作成するHP画面に調整していきます。
今回は、1行、3列となります。
右側に赤の〇と緑の〇で囲んであるところが列と行の調整する場所です。↓
⑤今回は、3列、1行なので、まずは3列にしていきます。
下の図のように赤○内+ボタンを押したら、列がさらに1列増えます。
⇒ 
⑥次は1行を削除していきます。↓
同じように下の図の緑〇内のごみ箱をクリックしたら行が消えます。
⇒ 
このように、必要に応じて、追加や削除することが出来ます。
⑦最後に、必要なGridに変更し終えたら、真ん中下のDoneを押すと完了になります。
ナビゲーターを開くと、Sectionの中にGridが入ってるのが分かります。↓
ちょっと長くなりましたが、本日のブログはここで一旦休憩に入ります＾＾；
続きはまた次回のブログでお伝えします。
ご覧いただきありがとうございます。
今後もよろしくお願いいたします。