2
Help us understand the problem. What are the problem?

More than 3 years have passed since last update.

posted at

updated at

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

企画主旨

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

Register as a new user and use Qiita more conveniently

  1. You can follow users and tags
  2. you can stock useful information
  3. You can make editorial suggestions for articles
What you can do with signing up
2
Help us understand the problem. What are the problem?