CSSスニペット

/* 擬似要素 ------------------------- */ .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でヘッダ固定時のページ内リンクのずれを解消 ------------------------- */ .fixed-fix { margin-top: -180px; padding-top: 180px; } /* 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.