2019年5月13日
PHPの勉強で「金沢近郊の激安の中古住宅を紹介」という掲示板とデータベースを駆使したサイトを製作したのですが、その時に参考にしたプログラムでBootstrapというものに出会いました。
Bootstrapは、最も有名なWEBフレームワークだそうです。WEBページでよく使われるフォーム、ボタン、メニューなどの部品がcssのテンプレートとして用意されていてモバイル対応にも優れているそうです
Bootstrapの公式サイトからDownload Bootstrapをクリックしてダウンロードして、解凍したファイルをそのままサイトにアップロードします。
必要なファイルは限られているようですが、全部アップロードしたほうが安心です。
jQueryの公式サイトからダウンロードした最新の「jquery.min.js」をJSフォルダにアップロードします。今回の最新のものはjquery-3.4.1.min.jsでした。
これで準備ができます。
もし他のサイトを参考に、そのままソースファイルを使う場合は、Bootstrapのバージョンを合わした方が無難です。バージョンが違っていると正常に動作しない場合があります。
<head> と </head>の間に
<link rel=”stylesheet” href=”https://******.***/css/bootstrap.min.css”>
<link rel=”stylesheet” href=”https://******.***/css/bootstrap-theme.min.css”>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
を挿入します。アドレス（******.***）は自分がアップロードしたアドレスを記入します。
</body>のすぐ後に
<script src=”https://******.***/js/jquery-3.4.1.min.js”></script>
<script src=”https://******.***/js/bootstrap.min.js”></script>
を挿入します。jquery-3.4.1.min.jsはバージョンによって数字の部分が違っています。
bootstrap.min.jsとbootstrap.min.cssとbootstrap-theme.min.cssは同じバージョンのものを使う方が無難です。今回はバージョン3.3.7を使いました。
https://getbootstrap.com/docs/3.3/getting-started/
サイトを希望の幅にする場合は、<head>と </head>の間に、
<STYLE>
<!–
@media (min-width: 800px) {
.container {
max-width: 800px;
}
}
–>
</STYLE>
を挿入します。
今回は、参考にしたプログラムを修正するだけにBootstrapを調べてみたのですが、いろんなケースで利用できそうなので、もうちょっと踏み込んで使ってみようと思います。
とりあえず、今年作ったシルバーエイジの金沢での生活情報をBootstrapを使って作り変えています。
参考になるサイトは
https://techacademy.jp/magazine/6270
http://proengineer.internous.co.jp/content/columnfeature/12468
http://websae.net/twitter-bootstrap-grid-system-21060224/
https://www.sejuku.net/blog/75031
https://getbootstrap.com/docs/3.4/css/
https://qiita.com/akatsuki174/items/53b7367b04ed0b066bbf
サイドデーブルでメニューなどを入れている場合は下記のようにすると、スマートフォン環境でメニューが下に表示するようになります。
<div class=”container”>
<div class=”row”>
<div class=”col-sm-9 col-xs-12″>
メインの部分を挿入
</div>
<div class=”col-sm-3 col-xs-12″>
メニューの部分を挿入
</div>
</div><!– /row –>
</div><!– /container –>
Bootstrapでサイドバーでメニューを入れる場合、左側にメニューを入れる場合、スマートフォンではメニュー部分は本文より先に表示されて、右側にメニューを入れる場合、スマートフォンではメニュー部分は本文より後に表示されるように決まっているいるようです。
tableの罫線に色をつけるときに
<TABLE bgcolor=”#fbe48c” >と<TD bgcolor=”#ffffff”>の組み合わせを多用しているのですが、機能しなくなりました。
機能しなくなった原因が分からないのですが、<head>と</head>との間に
<STYLE>
<!–
.line { border-style: solid;
border-color:#fbe48c;}
–>
</style>
を挿入し
<TABLE cellspacing=”1″ bgcolor=”#fbe48c” border=”1″ class=”line”>
で対応することにしました。Bootstrapでは罫線が見えなくなることが多いようです。
スマートフォンでは表示させない部分を設定する場合は下記のページを参考にしました。
http://studio-key.com/Bootstrap/glidDecoration03.html
<div class=”hidden-xs”>
スマートフォン環境で消したい部分を挿入
</div><!– / hidden-xs–>
Bootstrapは便利だけど出来る事は限られていて万能ではないです。特にサイドバーの設置については、出来ることは少ないです。基本的にはサイドバー無しのページを作る場合の便利なツールといえます。
でも利用する価値はあると思います。
メルカリで「Bootstrapファーストガイド : CSS設計の手間を大幅に削減!」を800円で購入しました。
2019年5月15日
シルバーエイジの金沢での生活情報をBootstrapを使って作り変えました。
すっきりとしたページになりました。
2019年5月16日
「Bootstrapファーストガイド : CSS設計の手間を大幅に削減!」は沖縄からの出品だったので、届くのが遅くなると思っていたのですが、意外と早く着きました。
さっと内容を見ると、画像のサイズを自動調整したり、画像の上に文字を入れたり、画像を丸く切り取ったり、表示する画像を入れ替えたり、いろいろ出来るようです。
2019年5月17日
「Bootstrapファーストガイド : CSS設計の手間を大幅に削減!」を読んで、今まで理解できなかった基本的なことが、やっと理解できるようになりました。
やっぱり、ネットだけではなく、ちゃんとしたテキストも必要だと実感しました。
それにしても、読めば読むほどBootstrapは便利です。スマートフォン対応には必須のツールだと思います。今までスタイルシートは避けてきたのですが、スタイルシートの詳しい知識が無くてもプロのようなページが作れます。
特に、一番上に設置するメニューの種類は豊富ですし、テーブルを多用したページをスマートフォン対応にするには最高のツールだと思います。
不動産のページのBootstrapを使った部分を自分好みに変更しようと思います。
2019年5月18日
Bootstrapでラインや背景の色を変更するには<head>と</head>との間に
.form-custom {
background-color: #fef3e2;
color:#fff;
border-radius:0;
border-color: #fbe48c;
}
を挿入して、class=”form-control” のところに class=”form-control form-custom” のようにform-customを挿入します。form-customは任意の名前で良いです。
border-radius:0; は角丸の設定です。
パーツを任意の幅で中央に表示するには、例えば幅を全体の半分にするには
<div class=”col-sm-6 col-sm-offset-3″ >
幅を全体の3分の2にするには
<div class=”col-sm-8 col-sm-offset-2″ >
です。