ヤッチーのブログ

PHP,Bootstrap,J Query,Swiftやサーバ管理、トラウトのルアー釣り、ハードロック等の記録です

Bootstrap Honoka でCSS余白調整、スライダー設置などしてTOP PAGEを作る

ホームページを作成するのに、今まで大よそ20年間、HTMLファイル、CSSファイルをゴリゴリとエディターで手書きしていたのですが、パソコンだけでなく、iPhoneAndroidに対応したレスポンシブホームページが常識になっている現在、ゼロベースでCSSファイルを作成するのは非常に効率が悪くなってきました。

作業の最終形デモ https://burrn.work/honoka/top1.html

これをきっかけにBootstrap Honokaでホームページを作ってみることにしました。
※Bootstrap Honokaとは、日本語も美しく表示できる Bootstrap テーマとの事です。
日本語の可読性を考慮したHonokaを使わせていただくことにしました。感謝感謝。

最初にBootstrap Honoka を自分のサーバに置いて、CSSを調整してみることに。

1.Bootstrap Honokaのダウンロード
https://github.com/windyakin/Honoka/releases/tag/v4.1.3
こちらからHTMLファイル、CSSファイルを一式含むbootstrap-honoka-4.1.3-dist.zipをダウンロードしました。こちらを解凍しました。

2.解凍したファイル・フォルダのUPLOAD

f:id:php-7com:20181006084906j:plain

bootstrap.htmlとcssフォルダ、jsフォルダをご自分のサーバにUPLOADしました。

※実際に必要なのは、htmlファイルとcss内のbootstrap.cssと、js内のbootstrap.min.js

ブラウザでbootstrap.htmlを確認しました。私は最初に下の余白が気になりました。

f:id:php-7com:20181006090548j:plain

Navbarsの上部の空いた幅が気になりました。Bootstrap Honokaはsectionとsectionの余白が大きいのでした。これを小さくしました。

bootstrap.html内の16行目当たり、margin-topを8から2に変更しました。

@media (min-width: 768px) {
.bs-docs-section {
 margin-top: 2em;
}

作業の最終形デモ https://burrn.work/honoka/top1.html

このように余白が縮まったことを確認しました。

bootstrap.htmlファイルを見ると気づきますが、HTMLファイル内にCSSの記述が有りましたので、./css/bootstrap.css内に入れました。

3.上部メニューの上部にh1要素やp要素などの文字を入れる。

Bootstrap Honokaの標準の上部メニューの更に上部にサイトのタイトルや文字を入れてみました。トップページに多いパターンにしたかったからです。

f:id:php-7com:20181006094816j:plain

最初は、<header>~</header>の下部にあった、<div class="page-header" id="banner">を<header>より上に貼り付けました。その際に、<div class="container">で挟みました。 f:id:php-7com:20181006112706j:plain

このように上部メニューバーの上に移動しました。これも余白が勿体無いように思いました。余白1,余白2、余白3を小さくするには、CSSの何処の箇所を調整するのか調べなければなりません。Google Chromeの検証で当たりをつけることができます。

f:id:php-7com:20181006114147j:plain

余白1、余白3を小さくするには、bootstrap.cssファイル内の「.mt-4,.my-4」と「.mb-4,.my-4」を調整すれば良いことが分かります。margin-top、margin-bottomの値を小さくしました。

.mt-4,.my-4 {  margin-top: 0.5rem !important;  }

.mb-4,.my-4 {    margin-bottom: 0.5rem !important;  }

同様に余白2も小さくするために、

.display-3 内を
 line-height: 1.0;
 margin-bottom:0 !important;
としました。

薄いグレーの上部メニューも幅が有り過ぎるように思いましたので、

.navbarのpaddingを調整しました。

f:id:php-7com:20181006124435j:plain

4.h1要素の右に キャッチフレーズや問合せ先などを入れる

キャッチフレーズやお問い合わせはコチラのような文字を上部メニューの右上に配置します。

f:id:php-7com:20181006131348j:plain

htmlファイル内の<p class="lead">~</p>下に、<div>要素を二つ入れました。

bootstrap.css ファイルの最下部に以下を追記しました。

.header-right-1{
 position: absolute;
 right: 15px;
 top: 15px;
 font-size: 0.85rem;
 padding: 5px 15px;
 border: solid 1px #D6D6D6;
}
.header-right-2{
 position: absolute;
 right: 15px;
 top: 50px;
 font-size: 0.95rem;
 padding: 5px 5px;
}

f:id:php-7com:20181006132218j:plain

上部メニューの右上に配置されていることを確認しました。

作業の最終形デモ https://burrn.work/honoka/top1.html

5.スマホ用にCSS調整

Google Chromeデベロッパーツールでスマホでの状態を確認すると、酷いことになっています。h1要素に他のdiv要素が重なっています。leadクラスも二行になっていて格好良くないです。CSSの調整が必要です。

f:id:php-7com:20181006140540j:plain

p の「Bootstrap Honokaでスマートなホームページを作成」leadクラスがスマホになっても一行になるように、ブラウザ幅が768pxよりも小さくなった場合に、自動的に文字の大きさを小さくするようにします。

.lead {
 font-size: 0.85rem;
 font-weight: 400;
 margin-bottom:5px;
}
@media (min-width: 768px) {
 .lead {
  font-size: 1.15rem;
 }
}

div の「Boostrapを使ったサイト構築に自信があります」がスマホの場合、非表示になるように、HTMLファイルのdiv要素に<div class="header-right-1 hidden-sm">のように、hidden-smクラスを追加します。

CSSファイルに以下のように追記します。

@media (max-width: 767px) {
  .hidden-sm { display: none !important; }
}

divの「お問合せはコチラまで!」がスマホで閲覧しても、他の要素に重ならないようにCSSを以下のように調整します。

.header-right-2{
 position: absolute;
 right: 15px;
 top: 50px;
 font-size: 0.95rem;
 padding: 5px 5px;
}
@media (max-width: 767px) {
 .header-right-2{
  position: initial;
  right: initial;
  top: initial;
  font-size: 0.95rem;
  padding: 0 5px 10px;
  text-align:right;
 }
}

以下のように改善されました。

f:id:php-7com:20181006142335j:plain

6.スライダーの設置

上部メニューの下にsliderを配置してみます。

本家bootstrap 

こちらを参考にして、<div class="container">の下部に、スライダーに相当する記述をします。

f:id:php-7com:20181006155439j:plain

1800×532pxの画像を3枚用意しました。あっけなくスライダー設置できました。

f:id:php-7com:20181006155838j:plain

 恰好良くなりました!

作業の最終形デモ https://burrn.work/honoka/top1.html