More than 5 years have passed since last update.

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

Last updated at 2019-09-26Posted at 2019-09-25

企画主旨

Frontend Developer Roadmapをひたすら巡回する企画
詳しくはこちら

今回の実施内容

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

HTML

Learn the basic

MDN-MozillaのSemantics in HTMLを参考。
ポイントはsectionタグとかfooterとかたくさん使う。

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を参考に実装。

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を参考にスタイルを作成。
ルール的にまだカラムデザインにはならない、一昔前のビジュアル。

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を今回のスタンプとした。

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-メディアクエリの仕様を参考。

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を参考に実装。
keyframe初めて触ったしいろいろやりたいけど、ルール的にクオリティ追及禁止なので断念。

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

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up