Bootstrapはホームページ制作に必須のツール

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″ >
です。



コメントを残す

メールアドレスが公開されることはありません。