ブログ

BLOG

CATEGORY

よく使うCSSコピペ用

要素の回転

transform: rotate( ●●deg ); /* 回転 */
transform: rotateX( ●●deg ); /* x軸回転 */
transform: rotateY( ●●deg ); /* y軸回転 */
transform: rotateZ( ●●deg ); /* z軸回転 */

矢印アイコン

#ctabox .ctabtn a {
position: relative;
}
#ctabox .ctabtn a:after {
content: "";
position: absolute;
margin: auto;
display: block;
border: .04rem solid transparent;
border-right-color: #FFF;
border-top-color: #FFF;
transform: rotate(45deg);/* 回転 */
top: 0;
border-radius: .04rem;
bottom: 0;
right:.25rem;
}
@media (min-width:768px), print {
#ctabox .ctabtn a:after {
width: .05rem;
height: .05rem;
}
}

@media (min-width:768px), print {
#ctabox .ctabtn a:after {
width: .025rem;
height: .025rem;
}
}
@media (max-width: 767px) {
#ctabox .ctabtn a:after {
width: 4vw;
height: .4vw;
}}

【游ゴシック体主体のフォントファミリー】

font-family: '游ゴシック体', 'Yu Gothic', 'メイリオ', Meiryo,'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', YuGothic, Osaka, 'MS Pゴシック', 'MS PGothic', sans-serif

【游明朝主体のフォントファミリー】

font-family: "游明朝","ヒラギノ明朝 ProN W6", "HiraMinProN-W6", "HG明朝E", "MS P明朝", "MS PMincho", "MS 明朝", serif

【text-shadow】

-moz-text-shadow: 0px 0px 5px #999;
-webkit-text-shadow: 0px 0px 5px #999;
text-shadow: 0px 0px 5px #999;

【border-radius】

border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;

【table 余白リセット】

border-collapse: collapse;
border-spacing: 0;

【iPhoneのinputスタイルリセット】

-webkit-appearance: none;
border-radius:0;

【border-image】

border: 14px solid transparent;
border-image: url(../../common/images/sp/bg_bl_01.png) 14 14 14 14 stretch;
-moz-border-image: url(../../common/images/sp/bg_bl_01.png) 14 14 14 14 stretch;
-webkit-border-image: url(../../common/images/sp/bg_bl_01.png) 14 14 14 14 stretch;
padding: 35px 0 0;
-o-border-image: url(../../common/images/sp/bg_bl_01.png) 14 14 14 14 stretch;
position: relative;

アニメーション

アニメーションさせながら、背景色を追加する時など

#header {
-webkit-transition: .3s ease-in-out;
transition: .3s ease-in-out;
}
body.fixedBody #header {
background-color: rgba(255, 255, 255, .9);
}