@charset "UTF-8"; /* ------------------------------------------------------------------------- Web font ------------------------------------------------------------------------- */ @import url(https://fonts.googleapis.com/earlyaccess/notosansjapanese.css); @import url(https://fonts.googleapis.com/css?family=Lato:400,700i); /* ------------------------------------------------------------------------- Foundation ------------------------------------------------------------------------- */ /* Variable */ /* brakepoints */ /* base color */ /* $color_sub : ; */ /* text color */ /* background color */ /* base font size */ /* $basic_font_size : 13, 81.25%; */ /* $basic_font_size : 15, 93.75%; */ /* $basic_font_size : 16, 100%; */ /* font family */ /* width */ /* Function */ /* フォントサイズをパーセントに変換して返す関数 ```sass .heading_lv1{ font-size:fs(30); } ``` 指定が2重になる場合は、第2引数に親要素で指定したサイズを入れる ```sass .heading_lv1{ font-size:fs(30); span{ font-size:fs(14,30); } } ``` */ /* パーセントを返す関数 ```sass .section{ margin-bottom:per(30px, 960px); } ``` */ /* Mixin */ /* clear */ /* メディアクエリ ブレークポイント定義 ```sass $breakpoints:( tablet: 959px, sp: 679px ); ``` ● max-widthで指定する ```sass @include mq(sp) { height:40px; } ``` ```output css @media screen and (max-width: 679px) { height: 40px; } ``` ● 範囲指定する場合は、引数に2つ入れる ```sass @include mq(sp tablet) { height:40px; } ``` ```output css @media screen and (min-width: 680px) and (max-width: 959px) { height: 40px; } ``` ● min-widthで指定する場合は第2引数をtrueにする ```sass @include mq(tablet, true) { height:40px; } ``` ```output css @media screen and (min-width: 960px) { height: 40px; } ``` */ /* ブレイクポイントごとのキーワードとマージンの組み合わせを作る ```sass @include create_margins( ( default:( l:50px, m:40px, s:30px, xs:20px ), tablet:( l:40px, m:30px, s:25px ), sp:( l:30px, m:25px, s:20px, xs:15px ) ) ) ``` それぞれのキーワードに対する上下左右のマージン用クラスを ブレークポイントの数だけ出力します ```output css .rmb_l { margin-bottom: 50px !important; } .rmt_l { margin-top: 50px !important; } .rmr_l { margin-right: 50px !important; } .rml_l { margin-left: 50px !important; } ～略～ @media screen and (max-width: 959px) { .rmb_l { margin-bottom: 40px !important; } .rmt_l { margin-top: 40px !important; } .rmr_l { margin-right: 40px !important; } .rml_l { margin-left: 40px !important; } ～略～ } @media screen and (max-width: 679px) { .rmb_l { margin-bottom: 30px !important; } .rmt_l { margin-top: 30px !important; } .rmr_l { margin-right: 30px !important; } .rml_l { margin-left: 30px !important; } ～略～ } ``` */ /* 章番号用mixin (IE8以上) キャプションに章番号をつける場合 ```sass $counterName: oreoreCounter; .parent-section { @include resetCounter($counterName); h2 { @include addCounter($counterName, '第', '章'); } } ``` 入れ子になってるリストに通し番号(1-1-1など）を付ける場合 ```sass $counterName: listCounter; ol { @include resetCounter($counterName); li { @include addCounters($counterName, '-'); } } ``` */ /* グリッドレイアウト用mixin (IE8以上) 引数で分割数を指定して呼び出す ```sass @include grid_system(12); ``` ```html
← このdivへの幅指定はNG
┐
├ 子要素は合計が分割数になるようにクラス名を付ける
┘
``` グリッドの間隔は「gutter--N」で指定する 通常はパーセントですが、「gutter--Npx」にするとピクセルになります。 ブレークポイントで変える場合は、「tablet_」「sp_」など、$breakpointsで定義したキーの接頭辞を付ける ```html
``` */ /* sp heighlight */ /* Base */ /* html5doctor.com Reset Stylesheet v1.6.1 Last Updated: 2010-09-17 Author: Richard Clark - http://richclarkdesign.com Twitter: @rich_clark */ html , body , div , span , object , iframe , h1 , h2 , h3 , h4 , h5 , h6 , p , blockquote , pre , abbr , address , cite , code , del , dfn , em , img , ins , kbd , q , samp , small , strong , sub , sup , var , b , i , dl , dt , dd , ol , ul , li , fieldset , form , label , legend , table , caption , tbody , tfoot , thead , tr , th , td , article , aside , canvas , details , figcaption , figure , footer , header , hgroup , menu , nav , section , summary , time , mark , audio , video , main { margin: 0; padding: 0; vertical-align: baseline; font-size: 100%; font-weight: normal; border: 0; outline: 0; background: transparent; } body { line-height: 1; } article , aside , details , figcaption , figure , footer , header , hgroup , menu , nav , section , main { display: block; } ol , ul { list-style: none; } blockquote , q { quotes: none; } blockquote:before , blockquote:after , q:before , q:after { content: ""; content: none; } a { margin: 0; padding: 0; vertical-align: baseline; font-size: 100%; background: transparent; } /* change colours to suit your needs */ ins { text-decoration: none; color: #000; background-color: #ff9; } /* change colours to suit your needs */ mark { font-weight: bold; font-style: italic; color: #000; background-color: #ff9; } del { text-decoration: line-through; } abbr[title] , dfn[title] { cursor: help; border-bottom: 1px dotted; } table { border-spacing: 0; border-collapse: collapse; } /* change border colour to suit your needs */ hr { display: block; height: 1px; margin: 1em 0; padding: 0; border: 0; border-top: 1px solid #ccc; } input , select { vertical-align: middle; } input , textarea { margin: 0; padding: 0; } small { font-size: smaller; } sup { vertical-align: super; font-size: .7em; } sub { vertical-align: baseline; font-size: .7em; } /* YUI 3.9.1 (build 5852) Copyright 2013 Yahoo! Inc. http://yuilibrary.com/license/ */ /** * Percents could work for IE, but for backCompat purposes, we are using keywords. * x-small is for IE6/7 quirks mode. */ body { font: 87.5%/1.231 arial, sans-serif; *font-size: small; /* for IE */ *font: x-small; /* for IE in quirks mode */ } /** * Nudge down to get to 13px equivalent for these form elements */ select , input , button , textarea { font: 99% arial,sans-serif; font-family: "Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", sans-serif; } /** * To help tables remember to inherit */ table { font: 100%; font-size: inherit; } /** * Bump up IE to get to 13px equivalent for these fixed-width elements */ pre , code , kbd , samp , tt { font-family: monospace; line-height: 100%; *font-size: 108%; } /* YUI CSS Detection Stamp */ #yui3-css-stamp.cssfonts { display: none; } input[type="submit"] , input[type="button"] , button { -webkit-box-sizing: content-box; -webkit-box-sizing: border-box; box-sizing: border-box; border: none; -webkit-appearance: button; -moz-appearance: button; appearance: button; } input[type="submit"]::-webkit-search-decoration , input[type="button"]::-webkit-search-decoration , button::-webkit-search-decoration { display: none; } input[type="submit"]::focus , input[type="button"]::focus , button::focus { outline-offset: -2px; } /* プロジェクトにおける基本的なスタイル （ページ全体の背景や、基本的なタイポグラフィ） ※ クラスは使わない */ @font-face { font-family: YuGothicM; font-weight: normal; src: local("YuGothic-Medium"), local("Yu Gothic Medium"), local("YuGothic-Regular"); /* Windows8.1ではMediumがないのでRegularを指定 */ } @font-face { font-family: YuGothicM; font-weight: bold; src: local("YuGothic-Bold"), local("Yu Gothic Bold"); /* Chrome用 */ } html * { -webkit-box-sizing: border-box; box-sizing: border-box; } body { font-family: YuGothicM, YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", sans-serif; word-wrap: break-word; -webkit-text-size-adjust: 100%; } @media all and (-ms-high-contrast: none) { body { font-family: "メイリオ",Meiryo,"ヒラギノ角ゴ Pro","Hiragino Kaku Gothic Pro",sans-serif; } } img { vertical-align: bottom; } @media screen and (max-width: 1200px) { img { max-width: 100%; height: auto; } } a { -webkit-transition-duration: .3s; transition-duration: .3s; text-decoration: none; color: #000; } a img { -webkit-transition-duration: .3s; transition-duration: .3s; background-color: rgba(255, 255, 255, .01); } @media screen and (min-width: 768px) { a img:hover { opacity: .7; } } figure { max-width: 100%; line-height: 1; } figure img { display: inline-block; }