今日の積み上げ 170日目 成果
＼宣言した内容はこちらです／
あわせて読みたい
【プログラミング・Web制作勉強ログ#0】宣言します（９月６日更新：開業しましたので、立ち上げた想いを…
こんにちは！こちらのページに、プログラミングを勉強した経緯や、立ち上げた仕事の概要や想いを綴っています。ぜひご覧ください。
本日の学び
アニメーション:モーダル完成～ボタンプルプルアニメーション
先輩のコーディングをTTPをしても、エラーは必ず起きる。
そりゃそうだ。先輩と私が書いている、HTML＆Sassのクラス名や構造がすべて全く同じではないから。
TTPをしても、自分のコーディングの構造をチェックしながら修正したりすることで、勉強になるし、動きも理解できるし。一石三鳥くらいなメリットを実感しています。
ちなみに、完成したモーダルのコーディングはこちら。
<section id="works" class="works">
<h2 class="title">WORKS</h2>
<p class="title_ja">施工事例</p>
<div class="container">
<div class="works_flex_wrapper">
<div class="works_box">
<a href="#works_modal_01" id="modal_01">
<div class="works_box_imgarea">
<picture>
<source media="(min-width: 769px)" srcset="images/PC_WORKS_01.png 1x, images/PC_WORKS_01@2x.png 2x" alt="Works_01">
<source media="(max-width: 768px)" srcset="images/SP_WORKS_01.png 1x, images/SP_WORKS_01@2x.png 2x" alt="Works_01">
<img src="images/PC_WORKS_01.png 1x, images/PC_WORKS_01@2x.png 2x" alt="Works_01">
</picture>
</div>
<div class="works_box_txtarea">
<p>【新築】<br class="sp-none">長崎県T.O様自宅</p>
</div>
</a>
</div>
<div class="works_box">
<a href="#works_modal_02" id="modal_02">
<div class="works_box_imgarea">
<picture>
<source media="(min-width: 769px)" srcset="images/PC_WORKS_02.png 1x, images/PC_WORKS_02@2x.png 2x" alt="Works_02">
<source media="(max-width: 768px)" srcset="images/SP_WORKS_02.png 1x, images/SP_WORKS_02@2x.png 2x" alt="Works_02">
<img src="images/PC_WORKS_02.png 1x, images/PC_WORKS_02@2x.png 2x" alt="Works_02">
</picture>
</div>
<div class="works_box_txtarea">
<p>【リノベーション】
<br>京都府カトリック丹波教会</p>
</div>
</a>
</div>
<div class="works_box">
<a href="#works_modal_03" id="modal_03">
<div class="works_box_imgarea">
<picture>
<source media="(min-width: 769px)" srcset="images/PC_WORKS_03.png 1x, images/PC_WORKS_03@2x.png 2x" alt="Works_03">
<source media="(max-width: 768px)" srcset="images/SP_WORKS_03.png 1x, images/SP_WORKS_03@2x.png 2x" alt="Works_03">
<img src="images/PC_WORKS_03.png 1x, images/PC_WORKS_03@2x.png 2x" alt="Works_03">
</picture>
</div>
<div class="works_box_txtarea">
<p>【新築】<br>東京都A.F様自宅件事務所</p>
</div>
</a>
</div>
<div class="works_box">
<a href="#works_modal_04" id="modal_04">
<div class="works_box_imgarea">
<picture>
<source media="(min-width: 769px)" srcset="images/PC_WORKS_04.png 1x, images/PC_WORKS_04@2x.png 2x" alt="Works_04">
<source media="(max-width: 768px)" srcset="images/SP_WORKS_04.png 1x, images/SP_WORKS_04@2x.png 2x" alt="Works_04">
<img src="images/PC_WORKS_04.png 1x, images/PC_WORKS_04@2x.png 2x" alt="Works_04">
</picture>
</div>
<div class="works_box_txtarea">
<p>【都市開発】<br>山形県銀山温泉協同組合</p>
</div>
</a>
</div>
</div>
<div class="modal-area"> //モーダル部分ここから
<div class="modal-bg modal-close"></div>
<div class="modal-content">
<div id="works_modal_01" class="modal-box modal-inner">
<img src="images/PC_WORKS_modal_01@2x.png" alt="長崎県T.O様自宅">
<p>【新築】
長崎県T.O様自宅</p>
<div class="modal-cancel modal-close"></div>
</div>
<div id="works_modal_02" class="modal-box modal-inner">
<img src="images/PC_WORKS_modal_02@2x.png" alt="京都府カトリック丹波教会">
<p>【リノベーション】
京都府カトリック丹波教会</p>
<div class="modal-cancel modal-close"></div>
</div>
<div id="works_modal_03" class="modal-box modal-inner">
<img src="images/PC_WORKS_modal_03@2x.png" alt="東京都A.F様自宅件事務所">
<p>【新築】
東京都A.F様自宅件事務所</p>
<div class="modal-cancel modal-close"></div>
</div>
<div id="works_modal_04" class="modal-box modal-inner">
<img src="images/PC_WORKS_modal_04@2x.png" alt="山形県銀山温泉協同組合">
<p>【都市開発】
山形県銀山温泉協同組合</p>
<div class="modal-cancel modal-close"></div>
</div>
</div>
</div>
</div>
</section>引き続き、ググりながら、TTPしながら進めていきたいと思います。
まずは、課題を終わらせよう！時間がない。
本日の反省
ちょっとぼーっとする時間が多かった気がする
この日はとても暑かったですね。32度くらいあったとか。
夫が電気工事士の試験日だったので、怪獣たちを連れて義実家へ行き、近くの海で海遊び。
義実家に行くと、必ずお母さまか妹ちゃんのお友達（＋誰かしらの子どもたち）がいらっしゃるので、お友達と遊ぶのが好きな娘にとって、とてもありがたい場所。
しかしながら、こんな暑いのにず～っと遊べる子どもの体力＆集中力に拍手。
その体力と集中力、少し分けておくれよ。と思いながら、子どもたちをぼーっと見ていました。
怒涛の休日が終わり、平日はコーディングする時間が比較的多いので、なるべくコーディングをして課題を終わらせます！今週中に初稿提出！できれば５月中！！
今日も諦めなかった自分、お疲れ様でした！
Twitterでも勉強ログを呟いています。よかったら覗いてみてください♪
コメント