仮想のポートフォリオサイト（トップページ）制作課題の中でも、ちょっとコーディングに迷う部分のヒントを掲載します。
ヒーロー画像の中央にテキストを配置する
ヒーローエリアの中心にテキストを表示させる方法はいくつかありますが、bootstrapで用意されているクラスで簡単に実装できるflex関連プロパティを活用してみます。
ボックス内にあるアイテムを中央に配置するには、フレックスコンテナとなるdivに対して下記2プロパティの値を「center」にするとできます。
- justify-content プロパティ(基本的にはコンテナ幅内の配置位置)
- align-items プロパティ(基本的にはコンテナ高さ内の配置位置)
bootstrapのutilitiesにはどちらもクラス化されたものが用意されていますから、背景画像を設定しているdivにそのクラスを加えてみてください。
自己紹介カード(About me)部分
ヒーロー画像下の自己紹介部分は、bootstrapのグリッドシステムを入れ子にして作っていきます。
まず、大きなグリッドを配置します。
写真と名前など部分は更に「row」クラスを追加してフレックスコンテナ化、
２カラムになるようにそれぞれを囲うdivに「col」クラスを追加します。
それぞれのdiv内にコンテンツを入れていき、 最後にmarginやpaddingのクラスを加えて見た目を調節しましょう。
スライダー部分
この課題スライダーがBootstrap講座のスライダーと大きく異なるのは、画像はスライドしないこと・スライダー内コンテンツが中央に配置されていることの２点です。 また、テキスト部分はフルワイドに伸びきっていない事にも注意しましょう。
大まかなボックス設計としては下図の通りになります。
ブログエリア
ブログ部分はbootstrapのグリッドシステム+カードテンプレートをベースに作成します。
「Travel」と書かれたラベルのような部分を、positionプロパティを使って本来の位置からずらした場所に配置するところがポイントになっています。
positionプロパティ
positionプロパティはその要素がどのように配置されるかを指定するcssプロパティです。
「position: absolute;」と指定された子要素は「position: relative;」となっている要素（親要素）からの距離を設定することで、入力した値の位置に強制的に配置されます。
詳細解説：position-MDN
見本では図のようなBOX組みで配置しています。
