【Bootstrap】よく使うコードをまとめてテンプレート化してみた【コピペ可】

アイキャッチ画像 Bootstrap
コーディングする手
スポンサーリンク

こんにちは朱夏です。

今回はコードのテンプレート化のお話です。
練習などで何度かコーディングをしていくと、こんなことを考えるようになると思います。

朱夏
朱夏

サイトを作るたびに使うナビゲーションバーやカラムは、毎回1から作ると大変だなぁ。

すぐコピペできるようにテンプレートを作ったら効率がいいんじゃないかな?

 

 

ということで、よく使うコードをテンプレート化して、いつでもコピペで使えるようにしてみました。
作成したテンプレートの特徴は以下です。

  • Bootstrapを使用(重要)
  • 表示エリアが解りやすいように背景色を色分け
  • 細かいコメントを挿入

 

今回紹介するテンプレートは、勝手にコピペして使ってもらっても構いませんが、一つだけ注意が必要です。
それは、「私が良く使う形にテンプレート化している」ということです。
そのまま使うよりも、自分好みにカスタマイズして利用する事をお勧めします。

あと、

それでは紹介していきます。

[おしながき]
ナビゲーションバー
トップ画像
メインコンテンツ
フッター

 

ナビゲーションバー

ナビゲーションバーの特徴としては以下。

  • レスポンシブ対応済のものをベースに作成
  • 画面上端に固定
  • ブランドにロゴ画像、テキスト両方表示
  • リンクの装飾は最低限に

コードはこちらです。

 

トップ画像

サイトトップに表示するアイキャッチ画像です。
ナビゲーションバーを使用する場合、セットで使用した方がいいです。

理由は、画面上端で固定する機能を使っていると、ナビゲーションバーに重なって隠れる部分が出来てしまうためです。
ナビゲーションバーを常時固定させる場合、基本的には重なってしまうので、以下の様な方法で回避する必要があります。

  • margin-topで余白を取って隠れない様に調整する
  • 多少隠れても支障ない画像などを配置して埋める
  • ナビゲーションバーの背景を透過させる

今回は隠れても支障のない画像を配置する事で重なっている部分に情報が隠れる事を回避しています。

 

メインコンテンツ

メインコンテンツを表示します。
コンテンツタイトル、画像、テキストの構成で準備しています。

コンテンツの表示は1カラム、2カラム、3カラムを用意しました。

 

 

 

 

フッター

フッターは、3カラムの枠だけ用意したイメージです。
この枠でよく使うのは、Twitter埋め込み、プロフィール、MAP、内部リンク、概要紹介などでしょうか。

 

あとがき

今回はコピペで使えるテンプレートを公開してみました。
カラムなどはサイト1つ作成するうちに何度も繰り返し使うこともあるので、同じパターンのものを使いまわす事が出来れば、作業効率はぐっと上がると思います。

そして、作成したテンプレートは品質を上げていくことで、コードの書き間違いを減らすことにも役立ちます。

テンプレートをうまく活用して、良いサイトを作っていきましょう。

今回は以上です。
次回もよろしくお願いします。

 

タイトルとURLをコピーしました