【Webデザイン勉強8日目】〜Part2〜
はいどうも！
今日も作業を積み上げました！
今日もJavaScriptの勉強を進めました！
use strict = エラーを発見しやすくしてくれる
const = 代入
Math.floor = 小数点以下を切り捨てる
Math.random() = 0〜1の間で、小数点以下の数字がランダムで選ばれる
for ( let i = 0; i < num; i++) = iは0で、num(今回で言うと5より小さい数字まで)まで、i++される（1ずつ増える）
const div = document.createElement('div'); = divを作成
div.classList.add('box'); = class属性のboxを追加
「クリックしたとき、iがwinnerと一緒だったらテキストはwinと表示させて、classはwinを適用。それ以外(else)の時、loseを適用」
div.addEventListener('click' , () => {
if ( i === winner) {
div.textContent = 'Win';
div.classList.add(win');
} else {
div.textContent = 'Lose';
div.classList.add('lose');
「document.body.appendChild(div);」
divの親要素であるbodyに上記の指示を出さないとディスプレイに表示されないため、この指示は必須です。
以下はjsファイルを別で作って読み込む記述です。
HTMLファイル
jsファイル
\n = 改行
\t = タグ（大きめの余白）
デベロッパーツールのConsoleで見るとこんな感じ。
今日の作業は以上です！
今日は、ここまで！
【Webデザイン勉強7日目】〜Part2〜
はいどうも！
今日も作業を行いました！
今日は、JavaScriptの勉強をしました！
ずっと気になっていたけど手を出せていなかったJavaScript！
動きが出せると楽しいですね〜♪
今日はhtmlファイルにstyleとscriptを記述して一つのファイルでできる指示を行いました！
四角を作成し、クリックすると丸にする記述です。
【コード】
【クリック前】
【クリック後】
.boxで四角を表示させて、クリックした後の表示を.circleで記述しています。
transition = 秒数
transform = 回転の角度
JavaScriptはbodyタグの一番下に記述するのが一般的ということでした！
最初は記述になれないかもしれないですが、何度か書いていれば慣れそうです。
const target = document.getElementById('target');
conts＝定数であり、置換の意味です。 この記述だと【document.getElementById('target')】 ＝ target と置換できるので、記述のミスや追加・編集に強くなるという特性があります。
以下の target ＝ 代入されています。
target.addEventListener('click') , () => {
target.classList.toggle('circle');
});
↑id名のtargetをクリックしたときに、class名＝circleの指示を出すという意味です。
つまり、styleに記述したcircleの指示（円にして360度回転する）が実行されるという意味です。
今日は、ここまで！
【Webデザイン勉強6日目】〜Part2〜
はいこんばんは！
ハンバーガーメニューの作成でつまずきました！
SPサイズ＝ハンバーガーメニュー
PCサイズ＝グローバルナビ
ってのを表現したいなと思い、PCサイズのグローバルナビはできたんですがSPサイズにしたときのハンバーガーメニューの作成でつまずきました！
【コピペで作成可能】
ってサイトを見て作成したんですが、自分が望む表現ができず、分からないことがわかりました。笑
HTMLとCSSだけでも作成が可能だというぺーじもあったんですが、JavaScriptを使って表現する方法が多く出てきたことに加え、JavaScriptも勉強をしようと思っていたため、いいタイミングだと思い明日はドットインストールでJavaScriptの基礎を勉強し、ハンバーガーメニューの作成に取り掛かろうと思います！
今日は、ここまで！
【Webデザイン勉強4日目】〜Part2〜
はいどうも！
今日も作業を行いました
今日は過去の自分のブログを読み返し、作業をしました。
justify-content: space-betweenとか
画像を中央に寄せるときにtext-align: center; で中央に配置できるのが勉強＆復習になりました！
メンターの方からいただいた課題のPC版は終了したので、FBもらって直すところは直して、SP版を作成してサクサク前に進んで行こうと思います！
今日は、ここまで！
【Webデザイン勉強3日目】〜Part2〜
はいどうも！
今日は自分の過去のブログを見直していました。
やっぱり忘れている部分が多かったです。
特にflexのところjustfy-contentあたりです。
整列、余白の部分です。
今日は過去の自分のブログを新しいもの（Airbnbサイトの模写を除く）から順番に見ていって60日のところまで読みました。
明日はそれより過去のブログを読み返し40日のところ（HTML,CSSの内容の初期）の部分を全部読んでからメンターの方にだしてもらった課題に取り組もうと思います。
読み直していると、ちょっとずつ記憶が戻りますね。
昨日着手した時は「完全に忘れたぞ」と焦って、コードを書いていたのですが今日の復讐後見直すだけでもちょっとわかりづらいコードだなと思う部分がみつかりました。
明日で40日までのブログを読み、作業着手させて取り急ぎPC版くらいはささっと完成させようと思っています。
模写が完成じゃなくて、案件納品して収益をあげるのが目標なのでそれまでメンターの方に手伝っていただき走って行こうと思います！
今日は、ここまで！
【Webデザイン勉強1.2日目】〜Part2〜
はいどうも！
久々すぎる更新ですｗ
なんでかっていうと、教えてもらえる人がいないから一人で悩みまくって挫折したって感じです。
とはいえ、辞めようと思っていたわけではなく教えてくれる人を探そうって思って探して、再開しようと思った頃には3週間ほど経っていたという感じです。
約3週間作業しなかっただけで、結構忘れていることがあるなって思う一方、元々できなかっただけじゃないかって思ったりもしています。笑
でも今までの僕と違うのは、教えてくれている人がいるということです。
目標を設定し、メンター さんと二人三脚で走って行こうと思います！
【直近の目標】
①2.3月に5~10万円収益達成
②5月末に安定的に20万円稼げる状態
③今の会社を辞めてフリーランス・作業に全力コミット
これを目標にやっていきます！
昨日、今日はメンターさんにいただいた課題をやっています！
すごく簡単に見えるので「楽勝じゃん！」と思いつつ作業を始めたのですがナビゲーションのflexでつまずきました。
継続して作業をやっていれば覚えていたであろう内容も、三週間全くやっていないと忘れてしまうなと痛感しました。
今までの自分のブログを読み直し、明日も作業を積み上げていきます！
今日は、ここまで！
