エンジニアスタンプラリー～フロントエンド編＃1

## 企画主旨
[Frontend Developer Roadmap](https://roadmap.sh/frontend)をひたすら巡回する企画 
詳しくは[こちら](https://qiita.com/tonchan1216/items/8d5f072cf769dfe1bc4f)

## 今回の実施内容
HTMLとCSS
それぞれ複数の内容が記載されているため、適当に抜粋。
基本的にコピペ？になりがち。

## HTML

#### Learn the basic

MDN-Mozillaの[Semantics in HTML](https://developer.mozilla.org/en-US/docs/Glossary/Semantics#Semantics_in_HTML)を参考。
ポイントはsectionタグとかfooterとかたくさん使う。

```html:index.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Frontend Developer Roadmap スタンプラリー</title>
  </head>
  <body>
    <p>This is my stamp</p>
  </body>
</html>
```

#### Writing Semantic HTML

MDN-Mozillaの[Getting started with HTML](https://developer.mozilla.org/ja/docs/Learn/HTML/Introduction_to_HTML/Getting_started)を参考に実装。

```html:index.html
<body>
  <section>
    <h1>Frontend Developer Roadmap スタンプラリー</h1>
  </section>

  <section>
    <h2>フロントエンド</h2>

    <section>
      <h3>HTML</h3>
      <p>This is my <a
          href="https://developer.mozilla.org/ja/docs/Learn/HTML/Introduction_to_HTML/Getting_started">Stamp</a></p>
    </section>

    <section>
      <h3>CSS</h3>
      <p></p>
    </section>

    <!-- 中略 -->

    <aside>
      <p>広告ブロック</p>
    </aside>
  </section>

  <footer>
    <p>(c) 2019 tonchan1216</p>
  </footer>
</body>
```

#### Basic SEO
年々良いとされる指針が変わったり、結果がすぐでないので今回は割愛
ただ、Semantic HTMLを守っていれば順位が上がるとか。

#### Accessibility
こちらも今回は割愛
Semantic HTMLを守っていればAccessibility向上につながるとか。

## CSS
#### Learn the basics
タイトルからして今回のスタンプはコイツ
[MDN-CSS basics](https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/CSS_basics)を参考にスタイルを作成。
ルール的にまだカラムデザインにはならない、一昔前のビジュアル。

```css:style.css
html {
  font-family: "Open Sans", sans-serif;
  background-color: #00539F;
}

body {
  width: 600px;
  margin: 0 auto;
  background-color: #FF9500;
  padding: 0 20px 20px 20px;
  border: 5px solid black;
}

h1 {
  font-size: 40px;
  text-align: center;
  margin: 0;
  padding: 20px 0;
  color: #00539F;
  text-shadow: 3px 3px 1px black;
}

p, li {
  font-size: 16px;
  line-height: 2;
  letter-spacing: 1px;
}
```

#### Making Layouts
主にFlex Boxを触ってみた。
Bootstrapになれると、この辺は意外と初体験。
[MDN-Flexbox](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox)を今回のスタンプとした。

```css:style.css
#menu {
  display: flex;
  align-items: center;
  justify-content: space-around;
}

#contents {
  display: flex;
  flex-flow: row wrap;
}

.skill {
  flex: 1 200px;
  padding: 10px;
  margin: 10px;
  background: aqua;
}
```

#### Media Queries
レスポンシブの基本。
本当は印刷用とかにも適用できるみたいだが、今回はレスポンシブデザインのみ実施。
[MDN-メディアクエリの仕様](https://developer.mozilla.org/ja/docs/Web/CSS/Media_Queries/Using_media_queries)を参考。

```css:style.css
@media screen and (max-width: 480px) {
  /*画面幅が480pxまでの時*/
  body {
    width: 100%;
    padding: 0;
    border: 0;
  }
  h1 {
    font-size: 30px;
  }
}
@media screen and (min-width: 781px) {
  /*画面幅が781px以上の時*/
  body {
    width: 80%;
  }
}
```

#### Learn CSS 3
個人的にCSS3=アニメーションという偏見があったので、[MDN- animation](https://developer.mozilla.org/ja/docs/Web/CSS/animation)を参考に実装。
keyframe初めて触ったしいろいろやりたいけど、ルール的にクオリティ追及禁止なので断念。

```css:style.css
h1 {
  animation-name: fadeInTitle;
  animation-duration: 3s;
  animation-timing-function: ease-in;
}
@keyframes fadeInTitle {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
```

## 成果物
デザインはダサいけど、本当に最低限の要素が詰まっています。
https://tonchan1216.github.io/WDR-frontend/v1/
https://github.com/tonchan1216/WDR-frontend/tree/1.0