スニペット/HTML/CSS
HTML
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | <!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8"> <meta name="description" content=""> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="format-detection" content="telephone=no"> <link rel="stylesheet" href=""> <link rel="icon" type="image/vnd.microsoft.icon" href=""> </head> <body> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> <script src=""></script> </body> </html> |
1 | ～ |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | #accordion dt::before { content: ""; width: 8px; height: 8px; position: absolute; top: 50%; left: 8px; margin-top: -5px; border-top: 1px solid white; border-right: 1px solid white; -webkit-transform: rotate(45deg); transform: rotate(45deg); } #accordion .active::before { top: 45%; left: 10px; -webkit-transform: rotate(135deg); transform: rotate(135deg); } |
1 2 3 4 5 6 7 8 | width: px; height: px; position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; |
CSS/Sass
1 2 3 4 5 | .cf::after { content: ""; display: block; clear: both; } |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 | @charset "utf-8"; body, h1, h2, h3, h4, h5, h6, blockquote, dl, dd, figure, ol, ul, p, pre { margin: 0; } * { box-sizing: border-box; } html { overflow-y: scroll; } body { text-size-adjust: 100%; -webkit-overflow-scrolling: touch; } html, body { height: 100%; } // タップ時ハイライト a { -webkit-touch-callout: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } a:active, a:focus, button:focus, input[type="button"] { outline: none; } // IE8以下 article, aside, details, figure, figcaption, footer, header, main, nav, section { display: block; } address, em, i { font-style: normal; } img { max-width: 100%; height: auto; border: 0; // IE10以下 } ol, ul { list-style-type: none; padding: 0; } li { vertical-align: top; } table { border-collapse: collapse; border-spacing: 0; } tr { vertical-align: top; } th, td { padding: 0; } |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 | @charset "utf-8"; // フォントサイズ @mixin fs($num) { font-size: $num + px; font-size: ($num / 16) + rem; // font-size: percentage($num / 16); } // テキストを画像置換 @mixin hide { text-indent: 100%; white-space: nowrap; overflow: hidden; } // リストのマーカーデフォルト @mixin ul($pd: 40, $marker: disc) { list-style-type: $marker; padding-left: $pd + px; } @mixin ol($pd: 40, $marker: decimal) { list-style-type: $marker; padding-left: $pd + px; } // 矢印 @mixin arrow { content: ""; position: absolute; border-top: 1px solid; border-right: 1px solid; transform: rotate(45deg); } // opacity @mixin op($opacity) { filter: progid:DXImageTransform.Microsoft.Alpha(opacity=#{$opacity * 100}); opacity: $opacity; } // clearfix @mixin cf { &::after { content: ""; display: block; clear: both; } } // ブレークポイント @mixin min($width) { @media screen and (min-width: $width + px) { @content; } } @mixin max($width) { @media screen and (max-width: $width + px) { @content; } } // iOS, Android @mixin rt { @media (-webkit-min-device-pixel-ratio: 2) { @content; } } // nth系 @mixin f { &:first-child { @content; } } @mixin f-not { &:not(:first-child) { @content; } } @mixin l { &:last-child { @content; } } @mixin l-not { &:not(:last-child) { @content; } } @mixin ft { &:first-of-type { @content; } } @mixin ft-not { &:not(:first-of-type) { @content; } } @mixin lt { &:last-of-type { @content; } } @mixin lt-not { &:not(:last-of-type) { @content; } } @mixin n($num) { &:nth-child(#{$num}) { @content; } } @mixin nt($num) { &:nth-of-type(#{$num}) { @content; } } |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | @charset "utf-8"; @import "reset"; @import "mixin"; body { font-family: "メイリオ", "Meiryo", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ＭＳ Ｐゴシック", "MS PGothic", "Osaka", sans-serif; } a { text-decoration: none; transition: 0.3s; &:hover { text-decoration: underline; } img { transition: 0.3s; &:hover { @include op(0.7); } } } |
コメントを投稿する