【Bootstrap4】Webサイトのタイトルを中央に配置する方法

スポンサーリンク

専業ブロガーのかわんです。

Bootstrap4で悩みに悩んだ末、Webサイトのタイトルを中央に配置する方法を発見しました!

注意事項

今回の方法は、僕の環境下で上手くいったものです。

皆さまの環境では上手くいかない場合があります。

その時はごめんなさい。他サイト様の記事をお読み下さい。

なお、HTMLやCSSをいじる為、バックアップをしてから作業して下さい。

何か問題が発生しても僕ではサポート出来ませんので自己責任で作業して下さい。

justify-content-centerを割り当てる

今日は、とっても簡単です。まずはHTMLコードをご確認頂きます。

<nav class="navbar justify-content-center">
    <h1><a href="index.html" class="navbar-brand">HTML Coder Kawan</a></h1>
</nav>

ごくごくシンプルなコードです。ポイントは「justify-content-center」です。

navに対して justify-content-centerを割り当てます。

たったこれだけ。シンプル(笑)。

Bootstrap4の場合、navには様々なクラスが割り当てられていますが、最後に「justify-content-center」を付け足せばOKです。

3時間ほど悩んだ・・・

中央寄せは、「text-align: center」が有名ですが、頑なにタイトルは動いてくれません(笑)。

片っ端からクラスに「text-align: center」を書きましたが、変化なし(笑)。

そこで、ググってみたところ、「justify-content-center」でOKという情報を掴み、実践したらちゃんと中央寄せにする事が出来ました!

今回、この方法は全然掴むことが出来ませんでしたが、何とか情報を掴むことに成功しました。

まとめ

Bootstrap4のCSSは難解です。解析しても良く分かりません(笑)。

なので、僕の場合はCSSを別で作成して、Bootstrap4のCSSを上書きしています。

全てそうしている訳ではなく、変えたいところだけ、上書きします。

なお、直接Bootstrap4のCSSをいじってはいけません。えらい事になります(笑)

変えたいところだけ用意したCSSに書く感じです。

僕はこの方法でBootstrap4を使っています。

使い方は色々とありますが、上でも書いたようにBootstrap4のCSSを直接いじってはいけませんよ!

そんな感じで、Bootstrap4を使っている方の参考になれば幸いです。