Glacial Webwork : 駆け出し未満のデザイナー(自称)のお勉強ブログ。

【サンプルサイト付き】Bootstrap4をささっと導入しよう

まずはじめに

以前、Bootstrap4の導入の仕方をサイトの記事にしたのですが、思ってたよりアクセスがあったんですよね。細々と運営しているサイトなので、雀の涙以下のアクセス数ではありますが。(泣)
お仕事であのコードをベースにWebサイトを制作して、シンプルなhtml形式で実際に納品しました。

その辺の経験を元に、「サンプル付きでより簡単にさっさとBootstrap4を導入できる記事を書こう!」というのが本記事の趣旨でございます。

試しにBootstrap4を導入しよう

まずは前回のおさらいですが、下記のコードをコピーして貼り付ければBootstrap4の導入は完了です!Bootstrap絡みのファイルはすべてCDNで呼び出しているので設定は必要ありません。あとは<body>タグ内にコンテナやらグリッドやらを配置していくわけです。

CDNではなく、ファイルをダウンロードしてBootstrap4を使いたい場合は公式サイトから直接ダウンロードをしましょう。

Bootstrap4(公式サイト)
Bootstrap4移行ガイド(日本語の説明書)

これでBootstrap4がサイトに実装できました!
あとはBootstrap4移行ガイドをチェックしつつ、<body>タグ内にHTMLのコードを書いていけばBootstrap4を用いた綺麗なレスポンシブサイトの完成です!!

 

・・・・・・・・・

 

・・・・・・・・・

 

で、導入して終わりだったり、解説が細かすぎると結局よく分からないままで終わっちゃうんですよね。HTMLやCSSに慣れ親しんでいる人はともかく、初心者の人が理解するのは大変難しい

ソフトなし、レンタルサーバーなし、ノウハウなし!無勉強!未経験!

そこから、いきなりクライアントのwebサイトを作る仕事を任されるという無茶ぶりを受けた私も何もかもが手探り状態でしたので、よく分かります。
「訳分かんねえ!」って気持ち。

※さすがに無理がありすぎたので、Adobe Dreamweaver CCとレンタルサーバーは後日、導入の許可が下りました

Bootstrap4で作ったサンプルサイト

私個人的には、技術的な話をぐだぐだ載せるより、サンプルを載せたほうが分かりやすいと思います。そこでサイトのサンプルを用意しました!

必要最低限のシンプルな構成ですが、しっかり堅実に仕上げています。

 

実際のサイト確認はこちらからどうぞ!

DEMO

サイトのデータの一括ダウンロードはこちらから!(※画像はダミーに差し替えています)

ダウンロードする

 

サンプルサイトの中身は下記のような形で構成しています。

  • 基本はBootstrap4に忠実
  • Bootstrapをアレンジした箇所はstyle.css内に記述
  • style.css内にシンプルな装飾を記述
  • .containerのmax-widthは1140pxで固定
  • フォントは游ゴシックを優先で使用
  • ナビゲーションは必要最低限のものだけを残してアレンジしやすくした

 

外部での使用について

ソースコードは必要に応じて、ご利用ください。
(※ロゴを除く画像はフリー素材を配布しているCG.fotoさんからお借りしています)

では、次のページで上から順に簡単に解説をしていきます!



コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA