★前回の記事
見た目を整える最初の1歩として、ロゴを作成して表示してみましょう。Webで無料でロゴが作れるサービスはいくつかありますが、今回はLOGASTER を利用しました。
会社名に"KATAMINO SOLVER"と入力して、次へを押すと、ロゴの候補が表示されるので、好きなロゴを選んでダウンロードします。
img
フォルダの下に、logo
ディレクトリを作成し、使用したいロゴファイルをコピーします。
(今回は、1_Primary_logo_on_transparent_400x63.png
をPrimary_logo_on_transparent_400x63.png
にリネームしています。サイズを表す400x63
の部分はダウンロードしたファイルによって違います。)
実装
ページ上部にナビゲーションバーを設置し、ロゴの画像を表示します。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> <!-- 後略 -->
実行結果
実行結果です。ヘッダーが表示されました。
以上でロゴの作成とbootstrapのnavbarの設定ができました。
★次回の記事
★目次