自己紹介カードのような部分は、Bootstrapのグリッドシステムを入れ子状に設置していくことで作ります。
1.グリッドの設置
まず、大きなグリッドを配置していきましょう。
更に左側、写真と名前などが表示されている部分。
rowクラスのdivで囲い、２カラムにグリッドを配置します。
【HTML】
※ id=about
はナビゲーションでページ内リンクを動かすのに使用します。
2.グリッドの中に各々のパーツを入れていく
1.写真+名前などの部分
imgタグには写真がはみ出さないようにimg-fluid、角を少し丸くするためのroundedクラスを追加。
Nameなどの部分は少し大きめの太字にするため、spanタグにtitle-sという独自クラスを追加してオリジナルのcssを設定します。
ブラウザで表示を確認してみましょう。
下図のように表示されていれば上手くいっています。
2.写真下のプログレスバー
1で作った部分の下にプログレスバーを入れます。
Bootstrapからプログレスバーのコードをコピー。 1で作成したrowクラスのdiv閉じタグの下にペーストします。 ついでに「Skill」のテキストも入れましょう。
一番上のプログレスバーは「HTML」「85%」。
テキストを追加して、下図のようにプログレスバーの値を変更します。
<p class="title-s">Skill</p>
<span>HTML</span> <span class="float-right">85%</span>
<div class="progress mb-3">
<div class="progress-bar" role="progressbar" style="width: 85%;" aria-valuenow="85" aria-valuemin="0" aria-valuemax="100"></div>
</div>
ブラウザで表示を確認し、下図のようになっていればOKです。
作ったHTMLの部分をコピー＆ペーストして、下に続く各プログレスバーを作りましょう。
3.右側部分を作る
次は右側に表示されるdiv( .col-md-6)の中身、About me以下部分を入れます。
左側とは違いこちらはシンプルにテキスト加えていけばOKです。
見出しとして使用するh2の部分は、下線が表示されるようにオリジナルcssを設定しましょう。
ブラウザ表示を確認し、下図のようになっていれば完成です。
4.全体の調整をする
マージンなどを設定して見やすくなるように調節します。 bootstrapで用意されているマージンよりも大きく設定したい部分は、オリジナルCSSクラスを作って対応します。
【設定部位の例】
- 全体を囲っているcontainerに
mt4remクラスを追加 - 上記divの下にあるrowに
bg-white shadow py-4クラスを追加 - プログレスバー部分を囲うdivを追加し、
bootstrapのクラスを使って配置を調節
・・・などなど。 他のdivやhタグなども調節し、完成見本に近付けていきましょう。
