カバーは、シンプルで美しいホームページを構築するための1ページのテンプレート。テキストをダウンロードして編集し、独自のフルスクリーン背景写真を追加して独自の写真にする。
/*
* 全体の設定
*/
/* リンク */
a,
a:focus,
a:hover {
color: #fff;
}
/* カスタムデフォルトボタン */
.btn-default,
.btn-default:hover,
.btn-default:focus {
color: #333;
text-shadow: none; /* `body`からの継承を防ぐ */
background-color: #fff;
border: 1px solid #fff;
}
/*
* ベース構造
*/
html,
body {
height: 100%;
background-color: #333;
}
body {
color: #fff;
text-align: center;
text-shadow: 0 1px 3px rgba(0,0,0,.5);
}
/* テーブル様式で上下左右のセンタリングの追加のマークアップとスタイル */
.site-wrapper {
display: table;
width: 100%;
height: 100%; /* 少なくともFirefox用 */
min-height: 100%;
-webkit-box-shadow: inset 0 0 100px rgba(0,0,0,.5);
box-shadow: inset 0 0 100px rgba(0,0,0,.5);
}
.site-wrapper-inner {
display: table-cell;
vertical-align: top;
}
.cover-container {
margin-right: auto;
margin-left: auto;
}
/* 間隔のためのpadding */
.inner {
padding: 30px;
}
/*
* ヘッダ
*/
.masthead-brand {
margin-top: 10px;
margin-bottom: 10px;
}
.masthead-nav > li {
display: inline-block;
}
.masthead-nav > li + li {
margin-left: 20px;
}
.masthead-nav > li > a {
padding-right: 0;
padding-left: 0;
font-size: 16px;
font-weight: bold;
color: #fff; /* IE8プルーフィング */
color: rgba(255,255,255,.75);
border-bottom: 2px solid transparent;
}
.masthead-nav > li > a:hover,
.masthead-nav > li > a:focus {
background-color: transparent;
border-bottom-color: #a9a9a9;
border-bottom-color: rgba(255,255,255,.25);
}
.masthead-nav > .active > a,
.masthead-nav > .active > a:hover,
.masthead-nav > .active > a:focus {
color: #fff;
border-bottom-color: #fff;
}
@media (min-width: 768px) {
.masthead-brand {
float: left;
}
.masthead-nav {
float: right;
}
}
/*
* カバー
*/
.cover {
padding: 0 20px;
}
.cover .btn-lg {
padding: 10px 20px;
font-weight: bold;
}
/*
* フッタ
*/
.mastfoot {
color: #999; /* IE8 proofing */
color: rgba(255,255,255,.5);
}
/*
* Affixとセンター
*/
@media (min-width: 768px) {
/* ヘッダーとフッターを固定 */
.masthead {
position: fixed;
top: 0;
}
.mastfoot {
position: fixed;
bottom: 0;
}
/* 縦方向のセンタリングを開始 */
.site-wrapper-inner {
vertical-align: middle;
}
/* 幅を扱う */
.masthead,
.mastfoot,
.cover-container {
width: 100%; /* 横方向の配置の％またはピクセルである必要がある */
}
}
@media (min-width: 992px) {
.masthead,
.mastfoot,
.cover-container {
width: 700px;
}
}
<!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/cover.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="site-wrapper"> <div class="site-wrapper-inner"> <div class="cover-container"> <!-- ヘッダ --> <div class="masthead clearfix"> <div class="inner"> <h3 class="masthead-brand">カバー</h3> <!-- ナビゲーション --> <nav> <ul class="nav masthead-nav"> <li class="active"><a href="#">ホーム</a></li> <li><a href="#">特徴</a></li> <li><a href="#">要望</a></li> </ul> </nav> </div> </div> <!-- カバー --> <div class="inner cover"> <h1 class="cover-heading">あなたのページをカバー。</h1> <p class="lead">カバーは、シンプルで美しいホームページを構築するための1ページのテンプレート。テキストをダウンロードして編集し、独自のフルスクリーン背景写真を追加して独自の写真にする。</p> <p class="lead"> <a href="#" class="btn btn-lg btn-default">もっと詳しく知る</a> </p> </div> <!-- フッタ --> <div class="mastfoot"> <div class="inner"> <p>Cover template for <a href="http://getbootstrap.com">Bootstrap</a>, by <a href="https://twitter.com/mdo">@mdo</a>.</p> </div> </div> </div><!-- /.cover-container --> </div><!-- /.site-wrapper-inner --> </div><!-- /.site-wrapper --> <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>