PHPのナビバーが正常に表示されない
解決したいこと
MySQLで作成した資産管理DBをPHPで表示させるプログラムを作っています。
index.php(メインメニュー)の上部にnavbarを追加し、
左側に「ホーム」「端末テーブル」「学校テーブル」へ遷移するリンクを追加しましたが、
画像や文字が正常に表示されません。(「ホーム」については外部アイコンとして画像を入れています)
解決策をご教示お願いします。
発生している問題・エラー
エラーは発生していないですが、
「ホーム」画面に遷移する画像が表示されず、
文字はnavbarの画面の色(青)と同化してしまい、文字の識別ができません。
該当するソースコード
index.php
<?php
try {
$db = new PDO ('mysql:dbname=deviceswithinventory;host=localhost;charset=utf8mb4', 'root','');
} catch (PDOException $e) {
echo 'DB接続エラー : ' . $e->getMessage();
}
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>メインメニュー表示</title>
<link rel="stylesheet" href="style.css">
<!-- Bootstrap読み込み（スタイリングのため） -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css">
<link rel="stylesheet" href="index.CSS">
</head>
<body>
<nav class="navbar navbar-expand-sm navbar-dark bg-primary mt-3 mb-3">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav4" aria-controls="navbarNav4" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<!-- ホームへ戻るリンク。ブランドロゴなどを置く。 -->
<a href="index.php" class="navbar-brand">
<img src="ロゴ.png" width="100" height="100" alt="">
</a>
<!-- メニュー項目 -->
<div class="collapse navbar-collapse">
<ul class="navbar-nav">
<li class="nav-item">
<a href="devices/devices.php" class="nav-link active">端末テーブル</a>
</li>
<li class="nav-item">
<a href="school/school.php" class="nav-link">学校テーブル</a>
</li>
</ul>
</div>
</nav>
<div class="col-xs-6 col-xs-offset-3 well">
<div class="center jumbotron">
<div class="text-center">
<h1>DevicesWithInventory</h1>
<h1>メインメニュー</h1>
</div>
</div>
<div class="flex_test-box">
<div class="flex_test-item">
<h2>端末テーブル</h2>
<form action="devices/devices.php" method="post">
<input type="submit" value="端末テーブルへ">
</form>
</div>
<div class="flex_test-item">
<h2>学校テーブル</h2>
<form action="school/school.php" method="post">
<input type="submit" value="学校テーブルへ">
</form>
</div>
</div>
index.css
.flex_test-box {
display: flex; /* フレックスボックスにする */
}
.flex_test-box {
background-color: #eee; /* 背景色指定 */
padding: 20px; /* 余白指定 */
}
.flex_test-item {
padding: 50px;
color: #000; /* 文字色 */
margin: 20px; /* 外側の余白 */
border-radius: 5px; /* 角丸指定 */
}
.flex_test-item:nth-child(1) {
background-color: #2196F3; /* 背景色指定 */
}
.flex_test-item:nth-child(2) {
background-color: #4CAF50; /* 背景色指定 */
}
nav {
/* 好きな色に変えてください */
background-color: #fd9a29;
color: #000;
}
0 likes