メインコンテンツの作成
先ず最初に、<main>部分を作成していきます。
<main>の中には、スライダーや紹介文、商品紹介が入ります。
今回は<header>の後に<main>要素を入れたいので、コードビューで</header>の後にカーソルを移動しておきます。
このように、場所の特定は「 DOM 」パネルからでも、カーソル移動でも可能です。
<main>要素挿入
「挿入」→「HTML」→「main」の順に選択します。
mainを挿入のダイアログが表示されますので、「挿入ポイント」を選択し、「OK」をクリックします。
これで<main></main>のコードが挿入されます。
パネルの切り替えが面倒であれば、<main></main>をタイプしても構いません。Dreamwaverにはコードヒントが搭載されていますので、こちらの方が簡単かも知れません。
「新規 main タグの内容がここに入ります」というテキストが自動で挿入されますので、コードビューで削除します。
カルーセルスライダーって？
BOOTSTRAPには、様々なスライダーが準備されていますので、その中から気に入ったものを選択することができます。
Dreamwaverに用意されているスライダーは、全機能が入っているスライダーです（不要なものは削除する、という考えです）。
Carouselを挿入する
カルーセルは<main>の中に挿入したいので、コードビューで<main>の後ろにカーソルを置いた状態から始めます。
「BOOTSTRAPのコンポーネント」→「Carousel」を選択します。
Carouselが挿入されます。
画像が指定されていないので、グレーの仮画像が入ります。
CAROUSEL部分をクリックすると、画像の編集が可能になりますので、左肩の編集メニューをクリックします。
画像の編集ダイアログが表示されますので、参照します。
「images」フォルダ内にある「slide-01.jpg」を選択し、「OK」ボタンをクリックします。
今回カルーセルは3枚の切り替えですので、2枚目・3枚目も同様にファイルを参照して変更します。
表示してみると、画像サイズが微妙なので、横幅いっぱいになるようにクラスを追加します。
各画像を選択し、「＋」ボタンから「w-100」クラスを追加します。
フル装備のカルーセル
今回挿入したカルーセルスライダーは言わばフル装備です。
写真がスライドするだけではなく、
- 左右にコントローラー（<>）
- スライダー下部にインジケーター（・・・）
- 写真内部にキャプション
と、全ての機能が入っています。
必要無いと感じるものがあれば、削除して構いません。
この時、「 DOM 」パネルを使うと失敗が無いでしょう。
サイトの見出しと紹介文を挿入する
カルーセルスライダーの下に、<h1>で見出しを、その下に<p>で紹介文を入れていきます。
「HTML」→「見出し：H1」を選択します。
中に入れるテキストは、今回ダウンロードしたフォルダ「AdobeCafe」に「AdobeCafe.txt」という名前で保存してありますので、そこからコピーペーストしてください。
同様に、「HTML」→「段落」で<p>を挿入し、紹介文もペーストしてください。
表示を確認してみると、見出しの文字が大きすぎるので、文字を小さくしたいと思います。また、スライダーと見出しが近すぎて読みにくいので、少し間隔をあけたいと思います。
文字はどちらもセンタリングしたいと思います。
見出し文字サイズのクラス
BOOTSTRAPには、見出しの文字サイズを調整するクラスが準備されています。「見出し1を見出し3のサイズにしたい」を叶える文字通りのクラス名です。
<h1 class=”h3″>
指定したクラスのサイズに変更できます。
パディングやマージンを調整したい
パディングとマージンについても、7種類の数値が準備されています。
数値は「0」「0.25rem」「0.5rem」「1rem」「1.5rem」「3rem」「auto」で、以下のような使い方が可能です。
- pt-0（padding-top: 0;）
- pb-1（padding-bottom: 0.25rem;）
- mr-3（margin-right: 0.5rem;）
- mx-4（margin-left: 1rem; margin-right: 1rem;）
文字をセンタリングしたい
テキストは、左寄せ（デフォルト）・右寄せ・センタリングの3種類のクラスが準備されています。
- 左寄せ：text-left
- 右寄せ：text-right
- センタリング：text-center
見出しの表示を調整する
DOM パネルで<h1>を選択し、クラス「text-center」「h3」「pt-5」を追加します。
<p>にも、「text-center」を追加してください。
BOOTSTRAP⑤では、4カラムのレイアウトを作ります。