css作業メモ

レスポンシブ用にreset.cssなど見直しテストコードのメモです。

```ruby:html
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>TITLE</title>
<meta name="description" content="">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="format-detection" content="telephone=no">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta property="og:image" content="">
<link rel="shortcut icon" href="favicon.ico">
<link rel="stylesheet" href="./css/base.css">
<link rel="stylesheet" href="./css/content.css">
<script src="./js/hoge.js"></script>
</head>
<body>
<div class="wrapper">
  <div class="jumbotron">
    jumbotron
  </div>
  <main class="main">
    <header class="header">
      <h1>header</h1>
    </header>
    <section class="sec01">
      <h2>sec01</h2>
      <p>hogehoge</p>
      <br style="clear:both;">
    </section>
    <section class="sec02">
      <h2>sec02</h2>
      <p>fugafuga</p>
    </section>
    <footer class="footer">
      footer
    </footer>
  </main>
  <p class="page-top">nav-fixed</p>
</div><!--//.wrapper-->
</body>
</html>
```

```ruby:base.css
@charset "UTF-8";
/* Index
++++++++++++++++++++++++++++++++++++++++
- Foundation
- Layout
- Object/Component
- Object/Project
- Object/Utility
++++++++++++++++++++++++++++++++++++++++ */
/* Foundation
++++++++++++++++++++++++++++++++++++++++ */
/* reset ++++++++++++++++ */
html,
body, article, section, nav, aside, header, footer, address, h1, h2, h3, h4, h5, h6,
p, pre, blockquote, ol, ul, li, dl, dt, dd, figure, figcaption, div, main,
a, em, strong, small, s, cite, q, dfn, abbr, time, code, var, samp, kbd, sub, sup, i, b, u, mark, span,
ins, del,
img, iframe, embed, object, video, audio,
table, caption, tbody, thead, tfoot, tr, td, th,
form, label, output, fieldset, legend,
details, summary,
canvas {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  text-align: inherit;
  vertical-align: baseline;
}

*:before,
*:after {
  box-sizing: border-box;
}

article, aside, details, figcaption, figure, footer, header, main, menu, nav, section, summary {
  display: block;
}

html {
  line-height: 1;
}

ol, ul {
  list-style: none;
}

blockquote, q {
  quotes: none;
}

blockquote:before, blockquote:after, q:before, q:after {
  content: "";
  content: none;
}

table {
  table-layout: fixed;
  border-collapse: collapse;
  border-spacing: 0;
}

/* initialize ++++++++++++++++ */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  font-size: 62.5%;
}

body {
  background: #fff;
  color: #333;
  font-family: "Meiryo","メイリオ","MS PGothic","MS Pゴシック",sans-serif;
  text-align: left;
  font-size:  2.4em;
  line-height: 1.4;
}
@media screen and (max-width: 640px) {
  body {
    font-size: 3.75vw;/* 24*100/640 */
  }
}
@media screen and (min-width: 641px) and (max-width: 767px) {
  body {
    font-size: 2.4em;/* ※コンテンツ幅max640 */
  }
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
  body {
    font-size: 2.34vw;/* 24*100/1024 */
  }
}
@media screen and (min-width: 1024px) {
  body {
    font-size: 2.4em;
  }
}

a {
  color: #1a0dab;
  text-decoration: underline;
  outline: none;
  opacity: 1;
  -webkit-transition: all 0.2s ease;
  transition: all 0.2s ease;
}

a:hover {
  text-decoration: none;
  opacity: 0.7;
}

th, td {
  vertical-align: middle;
}

img {
  width: 100%;
  height: auto;
  line-height: 1;
  vertical-align: top;
}

/* Layout
++++++++++++++++++++++++++++++++++++++++ */
/* Object/Component
++++++++++++++++++++++++++++++++++++++++ */
/* Object/Project
++++++++++++++++++++++++++++++++++++++++ */
/* Object/Utility
++++++++++++++++++++++++++++++++++++++++ */
```

```ruby:content.css
@charset "UTF-8";
/* Index
++++++++++++++++++++++++++++++++++++++++
-
++++++++++++++++++++++++++++++++++++++++ */
/* sammple
++++++++++++++++++++++++++++++++++++++++ */
/* sample ++++++++++++++++ */
body {}

.wrapper {
  position: relative;
  max-width: 1860px;
  margin: auto;
  background-color: #000;
}

.jumbotron {
  position: fixed;
  top: 0;
  width: 40%;
  max-width: 744px;
  height: 100vh;
  margin: 0;
  background-color: #ff0;
}

.main {
  max-width: 100%;
  padding-left: 40%;
  background-color: #00f;
}

.header {
  margin: 1rem;
  background-color: #fff;
}

.footer {
  margin-top: 1rem;;
  background-color: #eee;
}

.main section {
  margin: 1rem;
  background-color: #fff;
}

.page-top {
  position: fixed;
  bottom: 2%;
  right: 2%;
  width: 2rem;
  height: 2rem;
  background-color: #0ff;
}
```



## レイアウトテスト2

（横並び擬似インラインフレーム）

```ruby:base.css
@charset "UTF-8";
/* Index
++++++++++++++++++++++++++++++++++++++++
- Foundation
- Layout
- Object/Component
- Object/Project
- Object/Utility
++++++++++++++++++++++++++++++++++++++++ */
/* Foundation
++++++++++++++++++++++++++++++++++++++++ */
/* reset ++++++++++++++++ */
html,
body, article, section, nav, aside, header, footer, address, h1, h2, h3, h4, h5, h6,
p, pre, blockquote, ol, ul, li, dl, dt, dd, figure, figcaption, div, main,
a, em, strong, small, s, cite, q, dfn, abbr, time, code, var, samp, kbd, sub, sup, i, b, u, mark, span,
ins, del,
img, iframe, embed, object, video, audio,
table, caption, tbody, thead, tfoot, tr, td, th,
form, label, output, fieldset, legend,
details, summary,
canvas {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  text-align: inherit;
  vertical-align: baseline;
}

*:before,
*:after {
  box-sizing: border-box;
}

article, aside, details, figcaption, figure, footer, header, main, menu, nav, section, summary {
  display: block;
}

html {
  line-height: 1;
}

ol, ul {
  list-style: none;
}

blockquote, q {
  quotes: none;
}

blockquote:before, blockquote:after, q:before, q:after {
  content: "";
  content: none;
}

table {
  table-layout: fixed;
  border-collapse: collapse;
  border-spacing: 0;
}

/* initialize ++++++++++++++++ */
html {
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  font-size: 62.5%;
}

body {
  background: #fff;
  color: #333;
  font-family: "Meiryo","メイリオ","MS PGothic","MS Pゴシック",sans-serif;
  text-align: left;
  line-height: 1.4;
  font-size:  2.4em;
}
@media screen and (max-width: 640px) {
  body {
    font-size: 3.75vw;/* 24*100/640 */
  }
}
@media screen and (min-width: 641px) and (max-width: 767px) {
  body {
    font-size: 2.4em;/* max size */
  }
}
@media screen and (min-width: 768px) and (max-width: 1689px) {
  body {
    font-size: 1.42vw;/* 24*100/1690 */
  }
}
@media screen and (min-width: 1690px) {
  body {
    font-size: 2.4em;/* max size */
  }
}

a {
  color: #1a0dab;
  text-decoration: underline;
  outline: none;
  opacity: 1;
  -webkit-transition: all 0.2s ease;
  transition: all 0.2s ease;
}

a:hover {
  text-decoration: none;
  opacity: 0.7;
}

th, td {
  vertical-align: middle;
}

img {
  width: 100%;
  height: auto;
  line-height: 1;
  vertical-align: top;
}

/* Layout
++++++++++++++++++++++++++++++++++++++++ */
/* responsive layout ++++++++++++++++ */
.l-wrapper {
  overflow: hidden;
  min-width: 320px;
}

.l-hero {
  float: left;
  width: 40%;
  max-width: 744px;
  height: 100vh;
}

@media screen and (min-width: 768px) {
  .l-main {
    overflow: auto;
    height: 100vh;
    -webkit-overflow-scrolling: touch;
  }
}

@media screen and (min-width: 768px) {
  .l-main-inner  {
    max-width: 1014px;/* 900+24+90 */
    margin-left: auto;
    margin-right: auto;
    padding-left: 1em;/* max 24px */
    padding-right: 3.75em;/* max 90px */
  }
}

.l-content-width {
  width: 94%;
  max-width: 600px;
  margin-right: auto;
  margin-left: auto;
}
@media screen and (min-width: 768px) {
  .l-content-width {
    width: 100%;
    max-width: none;
  }
}

/* responsive display control */
@media screen and (max-width: 767px) {
  .l-disp-none-sp {
    display: none;
  }
}
@media screen and (min-width: 768px) {
  .l-disp-none-pc {
    display: none;
  }
}

/* Object/Component
++++++++++++++++++++++++++++++++++++++++ */
/* Object/Project
++++++++++++++++++++++++++++++++++++++++ */
/* Object/Utility
++++++++++++++++++++++++++++++++++++++++ */
```

```ruby:content.css
@charset "UTF-8";
/* Index
++++++++++++++++++++++++++++++++++++++++ */
/* sammple
++++++++++++++++++++++++++++++++++++++++ */
.jumbotron {
  padding: 1em 0;
  background-color: #ffa;
}

.main-header {
  padding: 1em 0;
  background-color: #aaf;
}

.main-appeal {
  padding: 4em 0;
  background-color: #afa;
}

.footer {
  padding: 6em 0;
  background-color: #faf;
}


main section h2 {
  background: #666;
  color: #fff;
  text-align: center;
}

/* btn application */
@media screen and (max-width: 767px) {
  .btn-application {
    overflow: hidden;
    width: 3em;
    height: 2em;
  }
}
@media screen and (min-width: 768px) {
  .btn-application {
    position: fixed;
    top: 10em;
    right: 0;
    width: 3.5em;
    max-width: 80px;
  }
}

/* btn pagetop */
.btn-pagetop {
  position: fixed;
  bottom: 6%;
  right: 0;
  width: 3.5em;
  max-width: 80px;
}


/**/
.sec01,.sec02 {
  margin-bottom: 40em;
}
```

```ruby:html
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>TITLE</title>
<meta name="description" content="">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="format-detection" content="telephone=no">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta property="og:image" content="">
<link rel="shortcut icon" href="favicon.ico">
<link rel="stylesheet" href="./css/base.css">
<link rel="stylesheet" href="./css/content.css">
<script src="./js/hoge.js"></script>
</head>
<body>
<div class="l-wrapper">
  <div class="jumbotron l-hero l-disp-none-sp">
    jumbotron
  </div>
  <main class="l-main">
    <div class="l-main-inner">
     
      <header class="header">
        <div class="main-header">
          <p>main-header</p>
          <p class="btn-application"><img src="images/btn-application.png"></p>
        </div>
        <div class="jumbotron l-disp-none-pc">
          jumbotron
        </div>
        <div class="main-appeal">
          <h1>appeal-catch</h1>
          <p class="appeal-point">appeal-point</p>
        </div>
      </header>
      
      <section class="sec01">
        <h2>sec01 ttl</h2>
        <div class="l-content-width">
          <p>hogehoge</p>
        </div>
      </section>
      
      <section class="sec02">
        <h2>sec02 ttl</h2>
        <div class="l-content-width">
          <p>hogehoge</p>
        </div>
      </section>
      
      <div class="btn-pagetop"><img src="images/btn-pagetop.png"></div>
      
      <footer class="footer">
        <div class="l-content-width">
          <p>footer</p>
        </div>
      </footer>
      
    </div>
  </main>
</div><!--//.wrapper-->
</body>
</html>
```

## レイアウトテスト3

（横並びpos:fixed）

```ruby:base.css
@charset "UTF-8";
/* Index
++++++++++++++++++++++++++++++++++++++++
- Foundation
- Layout
- Object/Component
- Object/Project
- Object/Utility
++++++++++++++++++++++++++++++++++++++++ */
/* Foundation
++++++++++++++++++++++++++++++++++++++++ */
/* reset ++++++++++++++++ */
html,
body, article, section, nav, aside, header, footer, address, h1, h2, h3, h4, h5, h6,
p, pre, blockquote, ol, ul, li, dl, dt, dd, figure, figcaption, div, main,
a, em, strong, small, s, cite, q, dfn, abbr, time, code, var, samp, kbd, sub, sup, i, b, u, mark, span,
ins, del,
img, iframe, embed, object, video, audio,
table, caption, tbody, thead, tfoot, tr, td, th,
form, label, output, fieldset, legend,
details, summary,
canvas {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  text-align: inherit;
  vertical-align: baseline;
}

*:before,
*:after {
  box-sizing: border-box;
}

article, aside, details, figcaption, figure, footer, header, main, menu, nav, section, summary {
  display: block;
}

html {
  line-height: 1;
}

ol, ul {
  list-style: none;
}

blockquote, q {
  quotes: none;
}

blockquote:before, blockquote:after, q:before, q:after {
  content: "";
  content: none;
}

table {
  table-layout: fixed;
  border-collapse: collapse;
  border-spacing: 0;
}

/* initialize ++++++++++++++++ */
html {
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  font-size: 62.5%;
}

body {
  background: #fff;
  color: #333;
  font-family: "Meiryo","メイリオ","MS PGothic","MS Pゴシック",sans-serif;
  text-align: left;
  line-height: 1.4;
  font-size:  2.4em;
}
@media screen and (max-width: 640px) {
  body {
    font-size: 3.75vw;/* 24*100/640 */
  }
}
@media screen and (min-width: 641px) and (max-width: 767px) {
  body {
    font-size: 2.4em;/* max size */
  }
}
@media screen and (min-width: 768px) and (max-width: 1689px) {
  body {
    font-size: 1.42vw;/* 24*100/1690 */
  }
}
@media screen and (min-width: 1690px) {
  body {
    font-size: 2.4em;/* max size */
  }
}

a {
  color: #1a0dab;
  text-decoration: underline;
  outline: none;
  opacity: 1;
  -webkit-transition: all 0.2s ease;
  transition: all 0.2s ease;
}

a:hover {
  text-decoration: none;
  opacity: 0.7;
}

th, td {
  vertical-align: middle;
}

img {
  width: 100%;
  height: auto;
  line-height: 1;
  vertical-align: top;
}

/* Layout
++++++++++++++++++++++++++++++++++++++++ */
/* responsive layout ++++++++++++++++ */
.l-wrapper {
  overflow: hidden;
  min-width: 320px;
}

@media screen and (min-width: 768px) {
  .l-hero {
    position: fixed;
    top: 0;
    left: 0;
    width: 40%;
    max-width: 744px;
    height: 100vh;
  }
}

@media screen and (min-width: 768px) {
  .l-header,
  .l-main,
  .l-footer {
    padding-left: 40%;
  }
}

.l-header-inner {
  width: 94%;
  margin-right: auto;
  margin-left: auto;
}

@media screen and (min-width: 768px) {
  .l-header-inner,
  .l-main-inner,
  .l-footer-inner {
    width: auto;
    max-width: 1014px;/* 900+24+90 */
    margin-left: auto;
    margin-right: auto;
    padding-left: 1em;/* max 24px */
    padding-right: 3.75em;/* max 90px */
  }
}

.l-content-width {
  width: 94%;
  max-width: 600px;
  margin-right: auto;
  margin-left: auto;
}
@media screen and (min-width: 768px) {
  .l-content-width {
    width: 100%;
    max-width: none;
  }
}

/* responsive display control */
@media screen and (max-width: 767px) {
  .l-disp-none-sp {
    display: none;
  }
}
@media screen and (min-width: 768px) {
  .l-disp-none-pc {
    display: none;
  }
}

/* Object/Component
++++++++++++++++++++++++++++++++++++++++ */
/* Object/Project
++++++++++++++++++++++++++++++++++++++++ */
/* Object/Utility
++++++++++++++++++++++++++++++++++++++++ */
```

```ruby:content.css
@charset "UTF-8";
/* Index
++++++++++++++++++++++++++++++++++++++++ */
/* sammple
++++++++++++++++++++++++++++++++++++++++ */


.jumbotron {
  padding: 1em 0;
  background-color: #ffa;
}

.l-header {
  background-color: #aaf;
}

.main-header{
  padding: 4em 0;
  background-color: #afa;
}

.l-footer {
  background-color: #faf;
}

main section h2 {
  background: #666;
  color: #fff;
  text-align: center;
}

/* btn application */
@media screen and (max-width: 767px) {
  .btn-application {
    overflow: hidden;
    width: 3em;
    height: 2em;
  }
}
@media screen and (min-width: 768px) {
  .btn-application {
    position: fixed;
    top: 10em;
    right: 0;
    width: 3.5em;
    max-width: 80px;
  }
}

/* btn pagetop */
.btn-pagetop {
  position: fixed;
  bottom: 6%;
  right: 0;
  width: 3.5em;
  max-width: 80px;
}

/* section */
.sec01,.sec02 {
  margin-bottom: 40em;
}
```

```ruby:html
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>TITLE</title>
<meta name="description" content="">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="format-detection" content="telephone=no">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta property="og:image" content="">
<link rel="shortcut icon" href="favicon.ico">
<link rel="stylesheet" href="./css/base.css">
<link rel="stylesheet" href="./css/content.css">
<script src="./js/hoge.js"></script>
</head>
<body>
<div class="l-wrapper">
  <header class="l-header">
    <div class="l-header-inner">
      <p>header</p>
      <p class="btn-application"><img src="images/btn-application.png"></p>
    </div>
  </header>
  
  <div class="jumbotron l-hero">
    jumbotron
  </div>
  
  <main class="l-main">
    <div class="l-main-inner">
     
      <header class="main-header">
        <h1>main-header-h1</h1>
        <p class="main-header-catch">main-header-catch</p>
      </header>
      
      <section class="sec01">
        <h2>sec01 ttl</h2>
        <div class="l-content-width">
          <p>hogehoge</p>
        </div>
      </section>
      
      <section class="sec02">
        <h2>sec02 ttl</h2>
        <div class="l-content-width">
          <p>hogehoge</p>
        </div>
      </section>
      
    </div>
  </main>
  
  <div class="btn-pagetop"><img src="images/btn-pagetop.png"></div>
  
  <footer class="l-footer">
    <div class="l-footer-inner">
      <div class="l-content-width">
        <p>footer</p>
      </div>
    </div>
  </footer>
</div><!--//.wrapper-->
</body>
</html>
```

ありがとうございました。