前々から考えていたのだが、
うちのサイトをちゃんとレスポンシブ対応したい。
Bootstrap とか使えば楽にできるはず。
というわけで、ちょこちょこ作業開始。
うちのサイトのレンタルサーバーはロリポップで
Bootstrap の簡単インストールオプションがついている。
なので Bootstrap のダウンロードは不要。
CSS、jQuery、Javascript は http(s) 参照でいける。
楽ちん。
■TECHMODE
ロリポップレンタルサーバーのPHPファイルにBootstrapを使ってみる
https://it-ti.work/php-bootstrap4/
Bootstrap のレスポンシブ対応の考え方は
このあたりの解説が分かりやすい。
■SKILLHUB
Bootstrapのグリッドを理解する【図解たっぷりBootstrap入門】
https://skillhub.jp/courses/168/lessons/915
Bootstrapのブレークポイントを理解して実装する【図解たっぷりBootstrap入門】
https://skillhub.jp/courses/168/lessons/929
■Qiita
こうすれば理解できるBootstrap 4のレスポンシブWebデザインとそのCSS
https://qiita.com/tonkotsuboy_com/items/7c01460b59c3ca5ee047
■Bootstrapのグリッドシステムの使い方を初心者に向けておさらいする
http://websae.net/twitter-bootstrap-grid-system-21060224/
ほっほー！！なるほどねー！！
こりゃ楽できそうだわ！！
というわけでいざコーディング
･･･してみたのだけど、
既に書いたコードに Bootstrap を追加であててる形だからなのか、
どうも意図と違ったレイアウトになる。
Bootstrap の便利なレイアウト制御が全然効いてないように見えるし、
Bootstrap あてる前は綺麗に表示された部分が崩れてるし。
でも、ブラウザの開発者ツールで見ても
どのコードが邪魔してるのか分からない。
もう！！何なん！！
グリッドシステムはそこそこ使えた。
おおー！！
メンバーが横に並んだり縦に並んだりしてるよ～！！
（メンバー紹介ページ）
でも、
col-sm-xx って書いてるのに
1段階上の md のときに xx が発動してる気がするのよね･･･
何でかしら。まぁいいわ。
独自にゴリゴリ作りこんだページって、
あとからレイアウト変えようとするとやっぱ面倒ね。
ホント、仕事でこれ回ってきたら
うぇぇぇ～ 負の遺産～
とか言うやつだわ。
でもさ、
仕方ないじゃん今さら！！
･･･というよりは、
コツコツ手作りしたやつ今さら捨てたくないんじゃぁ！！
って感じ。
だから改装するにしても、コツコツ、コツコツ。
その結果、見た目が原型とどめてない状態になったとしても、
いいの、いいの。
ゼロスクラップするのとは違うんだ。
気持ちの問題でしかないけどさ。
でもそういうことなのよ。
だからコツコツ、コツコツ。