v9.1.2以降のSafariでは、ブラウザのサイズを水平に変更すると、更新後にクリアされた調整済みのナビゲーションにレンダリングエラーが発生するというバグを示す。
この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。
body {
padding-top: 20px;
}
.footer {
padding-top: 40px;
padding-bottom: 40px;
margin-top: 40px;
border-top: 1px solid #eee;
}
/* メインのマーケティングメッセージとサインアップボタン */
.jumbotron {
text-align: center;
background-color: transparent;
}
.jumbotron .btn {
padding: 14px 24px;
font-size: 21px;
}
/* .nav-justifiedリンクをカスタマイズして.navbarの全領域を埋める */
.nav-justified {
background-color: #eee;
border: 1px solid #ccc;
border-radius: 5px;
}
.nav-justified > li > a {
padding-top: 15px;
padding-bottom: 15px;
margin-bottom: 0;
font-weight: bold;
color: #777;
text-align: center;
background-color: #e5e5e5; /* 古いブラウザ */
background-image: -webkit-gradient(linear, left top, left bottom, from(#f5f5f5), to(#e5e5e5));
background-image: -webkit-linear-gradient(top, #f5f5f5 0%, #e5e5e5 100%);
background-image: -o-linear-gradient(top, #f5f5f5 0%, #e5e5e5 100%);
background-image: linear-gradient(to bottom, #f5f5f5 0%,#e5e5e5 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f5f5f5', endColorstr='#e5e5e5',GradientType=0 ); /* IE6-9 */
background-repeat: repeat-x; /* グラデーションを繰り返す */
border-bottom: 1px solid #d5d5d5;
}
.nav-justified > .active > a,
.nav-justified > .active > a:hover,
.nav-justified > .active > a:focus {
background-color: #ddd;
background-image: none;
-webkit-box-shadow: inset 0 3px 7px rgba(0,0,0,.15);
box-shadow: inset 0 3px 7px rgba(0,0,0,.15);
}
.nav-justified > li:first-child > a {
border-radius: 5px 5px 0 0;
}
.nav-justified > li:last-child > a {
border-bottom: 0;
border-radius: 0 0 5px 5px;
}
@media (min-width: 768px) {
.nav-justified {
max-height: 52px;
}
.nav-justified > li > a {
border-right: 1px solid #d5d5d5;
border-left: 1px solid #fff;
}
.nav-justified > li:first-child > a {
border-left: 0;
border-radius: 5px 0 0 5px;
}
.nav-justified > li:last-child > a {
border-right: 0;
border-radius: 0 5px 5px 0;
}
}
/* レスポンシブ：縦向きタブレット以上 */
@media screen and (min-width: 768px) {
/* 先に設定したpaddingを削除 */
.masthead,
.marketing,
.footer {
padding-right: 0;
padding-left: 0;
}
}
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>等幅ナビゲーションバー</title> <link href="css/bootstrap.min.css" rel="stylesheet"> <!-- このテンプレートのカスタムスタイル--> <link href="css/justified-nav.css" rel="stylesheet"> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.3/html5shiv.js"></script> <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script> <![endif]--> </head> <body> <div class="container"> <!-- 等幅ナビゲーションメニューは、リスト項目ごとに1行で表示される。 複数行の場合は、Bootstrapによって提供されていないカスタムコードが必要。 --> <div class="masthead"> <h3 class="text-muted">プロジェクト名</h3> <nav> <ul class="nav nav-justified"> <li class="active"><a href="#">ホーム</a></li> <li><a href="#">プロジェクト</a></li> <li><a href="#">サービス</a></li> <li><a href="#">ダウンロード</a></li> <li><a href="#">概要</a></li> <li><a href="#">要望</a></li> </ul> </nav> </div> <!-- ジャンボトロン --> <div class="jumbotron"> <h1>マーケティングスタッフ！</h1> <p class="lead">後ろで大きな爆発音がした。俺は驚いて振り返った。後ろで大きな爆発音がした。俺は驚いて振り返った。後ろで大きな爆発音がした。俺は驚いて振り返った。</p> <p><a class="btn btn-lg btn-success" href="#" role="button">本日開始</a></p> </div> <!-- 列の例 --> <div class="row"> <div class="col-lg-4"> <h2>見出し</h2> <p class="text-danger">v9.1.2以降のSafariでは、ブラウザのサイズを水平に変更すると、更新後にクリアされた調整済みのナビゲーションにレンダリングエラーが発生するというバグを示す。</p> <p>この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。</p> <p><a class="btn btn-primary" href="#" role="button">詳細を見る »</a></p> </div> <div class="col-lg-4"> <h2>見出し</h2> <p>この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。</p> <p><a class="btn btn-primary" href="#" role="button">詳細を見る »</a></p> </div> <div class="col-lg-4"> <h2>見出し</h2> <p>この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。</p> <p><a class="btn btn-primary" href="#" role="button">詳細を見る »</a></p> </div> </div> <!-- サイトのフッタ --> <footer class="footer"> <p>© 会社名 2017</p> </footer> </div><!-- /.container --> <script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous"></script> <script src="js/bootstrap.min.js"></script> </body> </html>