css
style.css
@charset "utf-8";
/* ---------------------------------------------------------------------------------------------------------
共通
--------------------------------------------------------------------------------------------------------- */
/* ---------------------------------------------------------------------------
エレメント
--------------------------------------------------------------------------- */
/* 初期化 */
html,body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,p,blockquote,
th,td,article,aside,figure,footer,header,menu,nav,section,time,mark,audio,video {
margin: 0;
padding: 0;
}
img,body,html {
border: 0;
}
address,caption,cite,code,dfn,em,strong,th,var {
font-style: normal;
font-weight: normal;
}
h1,h2,h3,h4,h5,h6,p,li,dt,dd,th,td,address {
font-style: normal;
font-weight: normal;
word-wrap: break-word;
}
ol,ul {
list-style: none;
}
caption,th {
text-align: left;
}
article,aside,figure,footer,header,nav,section {
display: block;
}
textarea {
overflow: auto;
resize: none;
}
/* デザイン */
html {
font-size: 62.5%;
}
body {
font-family: 游ゴシック体, 'Yu Gothic', YuGothic, 'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
font-size: 1.6rem;
text-size-adjust: 100%;
}
h1,h2,h3,h4,h5,h6 {
line-height: 1.1;
}
p,li,dt,dd,th,td,pre {
line-height: 1.5;
}
table {
table-layout: fixed;
border-collapse: separate;
border-spacing: 0;
empty-cells: show;
font: 100%;
font-size: inherit;
word-wrap: break-word;
word-break: break-all;
}
/* ---------------------------------------------------------------------------
特定の役割のスタイル
--------------------------------------------------------------------------- */
/* ------------------------------
クリアフィックス
------------------------------ */
.clearfix:after {
content: "";
display: block;
clear: both;
}
.clearfix {
overflow: hidden;
zoom: 1;
}
/* ---------------------------------------------------------------------------------------------------------
スマホ
--------------------------------------------------------------------------------------------------------- */
img {
max-width: 100%;
height: auto;
}
/* ---------------------------------------------------------------------------
ヘッダー
--------------------------------------------------------------------------- */
header {
}
/* ---------------------------------------------------------------------------
フッター
--------------------------------------------------------------------------- */
footer {
}
/* --------------------------------------------------------------------------
レイアウト
--------------------------------------------------------------------------- */
.container {
}
/* --------------------------------------------------------------------------
縦と横
--------------------------------------------------------------------------- */
@media screen and (orientation: portrait) {
/* 縦 */
p {
color: red;
}
}
@media screen and (orientation: landscape) {
/* 横 */
p {
color: blue;
}
}
/* ---------------------------------------------------------------------------------------------------------
タブレット(768px以上に適用)
--------------------------------------------------------------------------------------------------------- */
@media all and (min-width: 768px) {
@media screen and (orientation: portrait) {
/* 縦 */
p {
color: yellow;
}
}
@media screen and (orientation: landscape) {
/* 横 */
p {
color: red;
}
}
/* ---------------------------------------------------------------------------
ヘッダー
--------------------------------------------------------------------------- */
header {
}
/* ---------------------------------------------------------------------------
フッター
--------------------------------------------------------------------------- */
footer {
}
/* --------------------------------------------------------------------------
レイアウト
--------------------------------------------------------------------------- */
.container {
}
}
/* ---------------------------------------------------------------------------------------------------------
PC(1025px以上に適用)
--------------------------------------------------------------------------------------------------------- */
@media all and (min-width: 1025px) {
p {
color: #333;
}
/* ---------------------------------------------------------------------------
ヘッダー
--------------------------------------------------------------------------- */
header {
}
/* ---------------------------------------------------------------------------
フッター
--------------------------------------------------------------------------- */
footer {
}
/* --------------------------------------------------------------------------
レイアウト
--------------------------------------------------------------------------- */
.container {
}
}
/* EoF */