/* 擬似要素
------------------------- */
.main-content-area em::before { content: "【"; }
.main-content-area em::after { content: "】"; }
/* テキストの両端に伸びる線 */
.site-title-sub::before,
.site-title-sub::after {
content: '';
display: inline-block;
width: 140px;
height: 2px;
margin: 0 30px;
background-color: #fff;
vertical-align: middle;
}
/* position:fixedでヘッダ固定時のページ内リンクのずれを解消
------------------------- */
.header {
height: 150px;
position: fixed;
}
.main { padding-top: 150px; }
.fixed-fix {
/* 上にアキを持たせてある */
margin-top: -180px;
padding-top: 180px;
}
/* html
<a href="#about">about</a>
<h1 id="about" class="fixed-fix">XXXXXXXX</h1>
*/
/* hover
------------------------- */
/* 下線が中央から両端へ伸びる */
.nav-item a { display: inline-block; }
.nav-item a::after {
content: '';
display: block;
width: 0;
margin: 6px auto 0;
border-bottom: 1px solid #7C5119;
transition: width 0.3s ease-in-out;
}
.nav-item a:hover::after { width: 100%; }
/* 背景画像を全画面配置
------------------------- */
/* 全体に */
body {
background: url(../images/home/main-image@2x.png) center top fixed no-repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
/* 部分的に */
.main-image {
min-height: 700px;
background: url(../images/home/main-image@2x.png) center top fixed no-repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
/* シャドウ
------------------------- */
/* テキストシャドウ白 */
p { text-shadow: 0 1px 0 rgba(255,255,255,1); }
/* テキストシャドウ黒 */
p { text-shadow: 0px 0px 2px rgba(0,0,0,.8); }
/* ボックスシャドウ */
div { box-shadow: 0px 10px 15px -10px rgba(0,0,0,.4); }
/* テキストカラー
------------------------- */
/* 白 */
p { color: rgba(255,255,255,.65); }
/* 「…」（エリプシス）付与して、CSSのみで省略
------------------------- */
.caption {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
/* micro clearfix
------------------------- */
/*
2016年版：モダンブラウザ用
参考）http://coliss.com/articles/build-websites/operation/css/css-latest-clearfix.html
*/
.cf::after {
content:" ";
display:block;
clear:both;
}
/*
2011年版：IE6/7対応
参考）http://coliss.com/articles/build-websites/operation/css/css-micro-clearfix.html
*/
/* For modern browsers */
.cf:before,
.cf:after {
content:"";
display:table;
}
.cf:after {
clear:both;
}
/* For IE 6/7 (trigger hasLayout) */
.cf {
zoom:1;
}
Be the first to comment
You can use [html][/html], [css][/css], [php][/php] and more to embed the code. Urls are automatically hyperlinked. Line breaks and paragraphs are automatically generated.