CSSBootstrap4の使い方(入門編)Bootsrtap2018.02.20Bootstrap4の使い方(入門編)ここでは、Bootstrapがどんなものであるのか概要をある程度、理解した方が実際にBootstrap4を導入する際の最初のステップについてお話していきます。Bootstrap4を使うには、ファイルを自分のサーバーにアップロードするかBootstrapのCDNを利用してファイルを読み込む必要があります。ここでは、それぞれの方法についてお話します。JSファイルを読み込ませる順番Bootstrap4をダウンロードする方法Bootstrapの公式サイトへ行きます。サイトの右上に「Download」というボタンをクリックします。JS」の下にある「Download」をクリックしてファイルをダウンロードします。zipファイルを解凍すると、中に2つのフォルダがあります。cssフォルダ内で必要なものcssフォルダ内で必要なファイルは、「bootstrap.css」もしくは、その圧縮ファイルの「bootstrap.min.css」です。bootstrapの仕組みを理解しながら使いたい方は「bootstrap.css」を、ページの読み込み速度を重視される方は「bootstrap.min.css」を使えば良いでしょう。「bootstrap-grid.css」や「bootstrap-reboot.css」の内容はすべて上記のファイルに含まれているので使いません。jsフォルダで必要なものjsファイルは「bootstrap.js」もしくは、その圧縮ファイル「bootstrap.min.js」のどちらかがあれば大丈夫です。【追記】もうひとつ、必要なファイルがあることが判明しました。「popper.min.js」というファイルがないと一部の機能が使えません。本家サイトは英語で分かりづらいので、bootstrapのDownloadのページにある下記の読み込みコードをそのまま使うか、自分のサーバーにアップロードしたい場合、下記のURLにアクセスしてファイルをダウンロードしても良いでしょう。crossorigin="anonymous"></script>Bootstrapファイルの説明ざっくりと、中のファイルについてお話しておきます。bootstrap.cssBootstrapの基本となるスタイルシートです。bootstrap-grid.cssBootstrapのグリッドシステムのスタイルシートです。bootstrap-reboot.cssブラウザ間で生じるデザインの微妙な違いをリセットするための(リセット)CSSです。bootstrap.jsメニューの開閉などの動きを実装するためのファイルです。popper.min.jsBootstrap4から必要になったライブラリです。先ほどの「css」フォルダと「js」フォルダをコピーなどしてパソコンの適当な場所に保存したら、同じ階層にindexファイルを作成しましょう。ファイルの中には、下記のソースコードを入力します。次は、ファイルをダウンロードせずにBootstrapCDNを利用する方法について見ていきます。下に完成した雛形を載せておきましたが、できるだけ最新のファイルを読み込んだ方が良いので、下記の手順に従ってファイルの読み込みコードをコピペしてください。Bootstrapの公式サイトへ行きます。サイトの右上に「Download」というボタンをクリックします。移動したDownloadページをスクロールしていくと、「BootstrapCDN」という見出しが出てきますので、その下にある読み込みコードをコピーして使います。JSファイルを読み込ませる順番jsファイルは下記の順番で読み込ませるようにしてください。jQueryPopper.jsbootstrap.min.js完成した雛形がこちらです。src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js"></script></body></html>これがBootstrap4を使うための基本となる雛形ファイルになります。今日はここまでにしたいと思います。2018.06.24Bootstrap4|グリッドレイアウト基本ここではBootstrap4を導入したあとで、知っておきたいグリッドレイアウトの基本的な仕組みについて見ていきます。Bootstrapってなんだか説明がややこしく意味が分からないと思っていませんか?ここでは、細かい説明はさておき、とりあえず使えるようになってい...2018.04.06Bootstrap4でFlexboxを使いこなすためのクラス名一覧Bootstrap4ではclass="row"に対してdisplay:flex;が初期設定として指定されているためflexboxコンテナとして使うことができます。