ホームページをbootstrap4を使ってリニューアル

何年ぶりかのトップページ再々リニューアル

何年間もこのまま

何年か前にリニューアルしたホームページのトップページを再リニューアル。このところ毎日bootstrapを使ったレスポンシブページの作り方をYouTubeで見ていたので、少しは以前よりは良いページになるかも?とおもい、少しづつやってみました。

 

DreamweaverからCoda2 そしてVisual Studio Code

以前やった時にはAdobeのDreamweaver を使っていたので、コードの打ち込みは無かったのですが、金の掛かるDreamweaver からCoda2 そして今は Visual Studio Code 。Coda2からはコードの打ち込みだけになってしまい、それまでとは全く違った環境になりましたが、これがDreamweaver 使っていた時より楽しい作業なのです。鈍足のDreamweaver と違い動きが軽いという事も楽しく感じる理由の一つなのかもしれません。 Coda2からVisual Studio Codeに換えたら、動きはより軽くなったような気がしますが、これはパソコンが高性能なものに変わったという事もあるのでしょう。 コードを打ち込んでいくと、リアルタイムでそのページが仕上がっていくのを見る事も出来、これなら金の掛かるDreamweaver など使う人も減っているのかもしれません。 以前はYouTubeに沢山あったDreamweaver関連の新しい動画は全くといって良いほどありませんでした。

 

bootstrap3から4に進化してた！

さて、始めてみようと取りかかったところ、bootstrap のバージョンが以前作った時のbootstrap3 ではなく4になっていて、その文法違いに四苦八苦。 現在の最新パージョンはbootstrap5 まで進化しているようです。 かなりの部分が部品化されていて、それを使えば楽に出来るらしいのですが、そこから少しでも外れようとした途端にわからなくなってしまいます。 文字や画像のセンター表示だけでも一苦労。 こんな単純な事がなぜ出来ないのだ?　と言いながら３歩進んでは２歩下がる。

 

何とか完成

苦労の甲斐あって前作よりは少しはまともになったように思うけど、所詮、材料がそれ程ないのだから、大きく変わりようもないのです。 トップページのリニューアルもこれが最後になるのでしょう。

Visual Studio Codeを使ってリニューアル