企画主旨
Frontend Developer Roadmapをひたすら巡回する企画
詳しくはこちら
今回の実施内容
HTMLとCSS
それぞれ複数の内容が記載されているため、適当に抜粋。
基本的にコピペ？になりがち。
HTML
Learn the basic
MDN-MozillaのSemantics in HTMLを参考。
ポイントはsectionタグとかfooterとかたくさん使う。
<!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を参考に実装。
<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を参考にスタイルを作成。
ルール的にまだカラムデザインにはならない、一昔前のビジュアル。
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を今回のスタンプとした。
#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-メディアクエリの仕様を参考。
@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初めて触ったしいろいろやりたいけど、ルール的にクオリティ追及禁止なので断念。
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