自分のホームページは10年程前に作ったきりで、最近では殆どメンテナンスしていません。何故かというと、面倒だからです。何故面倒かと言うと、HTMLとCSSおよびPHPを駆使して作っていて、その時には一生懸命勉強してなんとか作ってはみたものの、今ではKnowHowを忘れてしまって、手を着けるのが億劫だからです。
10年前には、HTMLとCSSを駆使して作るのが普通でした。その頃は、スマホも未だそれほど普及していなかったので、画面サイズは幅750ピクセル固定としてページのデザインをしていました。今では、こんなページはパソコンでしか見ることができず、スマホでは見る気にもならないでしょう。
JIMDOやWIXを使えばスマホとパソコンの両方に対応できて、しかも簡単に作成できるということは知っているのですが、既に契約しているレンタルサーバーと独自ドメインが無駄になるのも悔しいので、全面的に移行することには躊躇があります。
でも今時は、Bootstrapというパッケージを使えば、CSSなんて殆ど使わなくても、スマホからPCまで対応できる（業界用語ではレスポンシブルな・・・と言うらしい）ホームページを作成することができるらしいのです。また、Javascriptを使ってインタラクティブな（対話形式の）ページに仕上げるというのがトレンドのようなので、重い腰を上げてチャレンジすることにしました。
最初のターゲットにしたのはUYC（牛窓ヨットクラブ）のホームページです。このページはスマホで見る人が多いでしょうし、pdfのダウンロード時などにはPCで見るでしょうから、両方に対応していることが望まれているでしょう・・・多分！？。現在UYCのホームページは、独自ドメインのホームページからグーグルサイトにジャンプするようにしています。これはこれでめちゃくちゃ便利なのです。グーグルサイトはクラウドなので、どこにいてもどのデバイスからでもメンテナンスできるので、鮎釣りに行っていてもレース案内のページを更新できるのです。この良さは残しつつ、独自ドメインのホームページをレスポンシブルにすることにしました。（グーグルサイトのページは当たり前にレスポンシブルになっているので・・・）
UYCのロゴやヨットの写真などは既存のものを流用して、VSCodeとBootstrapを使ってサクサクと作ってみました。
Headerには一番シンプルなヤツ（nav-pills)加工して3つボタンにしました。Homeにはcarouselを使って5枚の写真でスライドショーを実現しました。EvnetとAboutにはcardを使いました。
画像はデバッグ中のもので、自分のパソコン上のフォルダーにあるhtmlファイルをEdgeで表示したものです。
この後、修正後のファイルをレンタルサーバーにアップロードし、スマホ（Android)でアクセスしてみました。上の画像とは少しボタンのレイアウトが異なりますが、それなりに表示されていることを確認しました。
興味があれば、このページにアクセスしてみてください。PCのブラウザであれば「ページのソースを表示」させることにより、ソースコードが丸見えです。
