なぜ作ろうと思ったか
Web白熱教室のBootstrapコンテンツを学習して、これなら簡単にポートフォリオを作れるのでは？と思った。
完成したサイト
https://atlansien.github.io/Bootstrap4_portforio1/
コード
作った際に調べたもの
Position:fixedを適応したい
Bootstrap4では、fixedを適用する場合、クラス値に
fixed-top
と記入する。なお、その際は他のエレメントに重ならないようbodyに
padding-top
を入れる必要がある。
中央寄せの方法
ブロックを中央寄せする場合は
mx-auto //マージン左右をauto
と入力する。また、文字の中央揃え(text-align:center)の場合は
text-center
と入力する。
navbarのボタンをクリックすると指定のコンテンツに飛ぶようにした。
指定のコンテンツのid値を設定し、ボタンのhrefにid値を入力した。
横幅いっぱいの写真の上に文字を置けるようなブロックを作りたい
親要素の横方向全てを使用できるjumbotron-fluidを使用した。
自己紹介欄を作りたい
gridシステムを利用して画面を縮小した際も紹介文が見えるようにした。
Bootstrap4の説明文を横いっぱいに広がらないようにしたい。
widthに％を使うことで画面を切り替えても左右に一定の空きが出るようにした。
つまづき
・各コンテンツに移動する際にnavbarを連動してactiveにしたかったが方法がイマイチわからなかった。
・各コンテンツに移動する際アニメーション効果をつけてスクロールさせたいと思いProgateで学んだScrolltopを使用してみたがうまく動かなかった。（違う方法があるのかも）
・今あるコンテンツの下に無料のテンプレート一覧紹介を作りたかったがサムネイルを綺麗に並べることができず消去した。
参考：https://blackrockdigital.github.io/startbootstrap-creative/
・自分のスキルをグラフで表示できるようにしたかったがそのような機能はBootstrapになかったので断念した。
感想
やはり構築自体が簡単にできるとは言っても、フレームワークやデザインを学んでいない完全な初心者がテンプレートもなしに０からサイトを作るのは難易度が高いと感じた。（制作時間のうち半分はデザインを考えていた）またコード自体も検索して出てきたコードをそのまま打ち込んだだけとういう部分もあるのでなぜここにこの値が必要なのかというのもふんわりとしかわかっておらず、まだまだ知識不足であると痛感した。
次回作る際にはもう少し学習をして挑みたい。