LP制作を始めて作成している、ねこらのん（@nekoranon256）です。
完全初心者で2月から独学でHTML&CSSとJavaScriptを学び、無料の職業訓練でJavaを受け9月から晴れてサーバーサイドエンジニアになった友人がついでにレスポンシブデザインのyoutubeも送ってくれたのでまとめていきます。
レスポンシブデザインの動画 No1
この動画を見て作ったものは以下のとおりです。
それぞれHTMLとCSSのコードを記載していきます。
HTML
HTMLのコードです。
html<!DOCTYPE html><html lang="en"><head><metaname="viewport"content="width=device-width, initial-scale=1.0" /><metacharset="UTF-8" /><metaname="viewport"content="width=device-width, initial-scale=1.0" /><metahttp-equiv="X-UA-Compatible"content="ie=edge" /><linkrel="stylesheet"href="style.css"type="text/css" /><title>レスポンシブデザイン</title></head><body><section><divclass="content"><div><h2>フロントエンドエンジニア</h2><p>あああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ</p><ahref="#">Learn More</a></div></div><divclass="imgBx"><imgsrc="img/dog.png" /></div><ulclass="nav"id="nav"><li><ahref="#">Home</a></li><li><ahref="#">About</a></li><li><ahref="#">Blog</a></li><li><ahref="#">contact</a></li><li><ahref="#">Profile</a></li></ul><ulclass="sci"><li><ahref="#">Facebook</a></li><li><ahref="#">Twitter</a></li><li><ahref="#">Instgram</a></li></ul></section></body></html>
HTMLはこれまでしたことがあったものでした！
CSS
次はCSS。
html@import url("https://googleapis.com/css?family=Open-Sans:300,400,600,700,800&display=swap");* {margin: 0;padding: 0;box-sizing: border-box;font-family: "Open-Sans", sans-serif;}section {position: relative;widows: 100%;min-height: 100vh;background: #d5c3a9;display: flex;justify-content: space-between;align-items: center;}section:before{content:'';position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: #ffffff;clip-path: polygon(52%0, 100%0, 100%100%, 84%100%);animation: fade-in 0.5sease-inforwards;animation-delay: 1.5s;opacity: 0;}section .content {position: relative;padding: 100px50px100px150px;box-sizing: border-box;animation: left-in 0.5sease-inforwards;animation-delay: 0.5s;opacity: 0;}section .content h2 {color: #4b3e3a;font-size: 3em;font-weight: 800;}section .content p {color: #4b3e3a;font-size: 1.2rem;}section .content a {position: relative;display: inline-block;padding: 15px30px;margin-top: 20px;background: #cfa19a;color: #4b3e3a;text-decoration: none;text-transform: uppercase;font-size: 0.95em;font-weight: 700;letter-spacing: 2px;}section .imgBx {position: relative;padding-right: 100px;}section .imgBx img {max-width: 500px;animation: fade-in 0.5sease-inforwards;animation-delay: 1.5s;opacity: 0;}.sci {position: absolute;bottom: 75px;left: 150px;display: flex;animation: left-in 0.5sease-inforwards;animation-delay: 1s;opacity: 0;}.sci li {list-style: none;}.sci li a {text-decoration: none;color: #999999;margin-right: 30px;font-size: 0.9em;}.sci li a:hover {color: #4b3e3a;}/* nav */.nav {position: absolute;top: 75px;left: 150px;display: flex;border-left: 5pxsolid#fff;padding-left: 20px;animation: left-in 0.5sease-inforwards;animation-delay: 0%;opacity: 0;}.nav li {list-style: none;}.nav li a {text-decoration: none;color: #999999;margin-right: 30px;font-size: 0.9em;text-transform: uppercase;font-weight: 700;}.nav li a:active,.nav li a:hover{color: #fff;}@keyframes fade-in{0%{opacity: 0;}100%{opacity: 1;}}@keyframes left-in{0%{transform: translateX(-200px);opacity: 0;}100%{transform: translateX(0px);opacity: 1;}}
CSSは不明な点が多かったので調べていきます。
別の記事へ。
動作しなかったこと【修正点】
犬の部分はアニメーションができていましたが、左のテキスト部分のアニメーションが表示されませんでした。
原因は『セミコロン』を忘れていたこと。
セミコロンをつけたことで表示されました！
今後は、
- 波線
- 赤線
- 白文字
などエラーのようなものがあればすぐに対処していこうと思います。
レスポンシブデザインの動画No2
レスポンシブデザインは次の動画だったので、次の記事でこちらはまとめています。
おまけ
作成していたときに友人の結婚式の写真が届いたので、上記のものを結婚式バージョンに変更！
すっごい喜んでくれたので、もっとちゃんとしたものを作れるようになりたいな！
おわりに
今回、動画の模写をしていて知らないCSSがたくさんあったので模写の重要性を感じました。
もりけん塾（@terrace_tech）
Thanks：もりけんさん