yucatio@システムエンジニア

趣味で作ったものいろいろ

ロゴの作成とbootstrapのnavbarの設定 (KATAMINOを解くプログラムを作成する)

★前回の記事

yucatio.hatenablog.com

見た目を整える最初の1歩として、ロゴを作成して表示してみましょう。Webで無料でロゴが作れるサービスはいくつかありますが、今回はLOGASTER を利用しました。

会社名に"KATAMINO SOLVER"と入力して、次へを押すと、ロゴの候補が表示されるので、好きなロゴを選んでダウンロードします。

f:id:yucatio:20191005125849p:plain

f:id:yucatio:20191005125907p:plain

f:id:yucatio:20191005125920p:plain

imgフォルダの下に、logoディレクトリを作成し、使用したいロゴファイルをコピーします。 (今回は、1_Primary_logo_on_transparent_400x63.pngPrimary_logo_on_transparent_400x63.pngにリネームしています。サイズを表す400x63の部分はダウンロードしたファイルによって違います。)

f:id:yucatio:20191005125935p:plain

実装

ページ上部にナビゲーションバーを設置し、ロゴの画像を表示します。bootstrapのnavbarのページ ( Navbar · Bootstrap ) を参考に実装します。

shadow-smで影をつけています (参考: Shadows · Bootstrap)。 mb-5はbottomのマージンの指定です (参考: Spacing · Bootstrap)。

index.html

<!-- 前略 -->
  <body>
    <!-- 追加ここから -->
    <nav class="navbar navbar-expand-md navbar-light shadow-sm mb-5">
      <!-- ファイル名はダウロードしたファイルごとに違うので、適宜書き換えてください -->
      <img class="navbar-brand" src="img/logo/Primary_logo_on_transparent_400x63.png" />
    </nav>
    <!-- 追加ここまで -->
    <h1>Hello, world!</h1>
<!-- 後略 -->

今回はロゴの色に合わせて背景色を変更します。前回までのCSSの内容は全て削除します。

css/main.css

nav {
  /* 好きな色に変えてください */
  background-color: #fd9a29;
}

css/main.cssを読み込みます。

index.html

<!doctype html>
<html lang="ja">
  <head>
    <!-- 中略 -->

    <!-- 追加 -->
    <link rel="stylesheet" href="css/main.css">
    <title>KATAMINO SOLVER</title>
  </head>
<!-- 後略 -->

実行結果

実行結果です。ヘッダーが表示されました。

f:id:yucatio:20191005125949p:plain

以上でロゴの作成とbootstrapのnavbarの設定ができました。


★次回の記事

yucatio.hatenablog.com

★目次

yucatio.hatenablog.com