/* ---------------------------
ハック
-------------------------- */
/* Edge */
@supports (-ms-accelerator:true) {
p { margin: 0; }
}
/* Firefox
------------------------- */
@-moz-document url-prefix() {
p { margin: 0; }
}
/* Chrome
------------------------- */
@media screen and (-webkit-min-device-pixel-ratio:0) {
p { margin: 0; }
}
/* Safari
------------------------- */
@media screen and (-webkit-min-device-pixel-ratio:0) {
::i-block-chrome, p { margin-top: 0; }
}
/* ---------------------------
擬似要素
-------------------------- */
/* 基本
------------------------- */
.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;
}
/* ---------------------------
背景画像を全画面配置
-------------------------- */
/* 画面全体
------------------------- */
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;
}
/* ---------------------------
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%; }
/* ズーム
------------------------- */
a {
-webkit-transition: all .4s ease;
-o-transition: all .4s ease;
transition: all .4s ease;
}
a:hover {
-webkit-transform: scale(1.05);
-ms-transform: scale(1.05);
-o-transform: scale(1.05);
transform: scale(1.05);
}
/* ---------------------------
シャドウ
-------------------------- */
/* テキストシャドウ白
------------------------- */
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.