今日の積み上げ 184~187日目 成果 ※ずっと看病していました
疲れていたんでしょうか。。笑
\宣言した内容はこちらです/
あわせて読みたい
![](data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==)
![](https://cercidiphyllum-blog.com/wp-content/uploads/2022/03/3509bb651fff20ee6549a72693cd23fc-300x155.png)
【プログラミング・Web制作勉強ログ#0】宣言します(9月6日更新:開業しましたので、立ち上げた想いを…
こんにちは!こちらのページに、プログラミングを勉強した経緯や、立ち上げた仕事の概要や想いを綴っています。ぜひご覧ください。
本日の学び
デザインカンプ初稿提出!!⇒子どもたちRS感染!!
心が晴れた矢先、上の子の熱が出てしまい・・・
救急病院へ行ったり、かかりつけの病院へ行ったりとした結果、RSウィルスの感染だと判明(コロナは陰性)。
下の子も、咳がこんこん出ているので同様に感染しているでしょうとのこと。
上のツイートのように、しばらく付きっ切りで看病していました。
辛そうでかわいそうでしたが、上の子はわがままレベルが最高潮に…。
いや~。全国の親御さん、本当にお疲れ様です。
ようやく、小刻み睡眠から3時間毎の睡眠になってきて、ブログを書く時間が確保できました。
メンターさんからの修正事項
看病しているうちに、メンターさんからの修正依頼が・・!
よっしゃ~こいこい!となぜかテンションマックスでした笑
指摘を受けた修正事項はコチラです↓
- ハンバーガーボタンは白い背景色部分もカーソルをポインターにする
⇒ (修正内容)背景色に cursor: pointer;プロパティを追記。
- ヘッダー背景の透明色の挙動を確認する
※ PCサイズの時のみ文字色が変わるタイミングで背景色が付くようにjsを記載したが、PCサイズからSPサイズに変えた時にも背景色が残ってしまうとのこと。
※ SPサイズになった時にbackground-colorを上書きするか、SPサイズで背景色がついた時にも違和感が無いようにスタイルの調整の指示。
⇒ (修正内容)headerとheader内containerの高さをスマホサイズで50pxにするよう追記(指示内容の後者を選択)。
(疑問)SPサイズで背景色を付けないようにコーディングしたはずなのについてしまう。
※「//PC処理」下の「//背景色部分」のみコーディングをしたので、「//スマホ処理」内では、「//背景色部分」のコーディングが効かないと認識していたのに、効いているように見える(↓コーディング内容参照)。メンターさんに相談済み。
//ヘッダーメニュー(ABOUTエリアまでスクロールしたらフォントのカラーを黒にする)//
//処理を効かせるための高さを定義
$(function () {
$(window).on("scroll", function () {
const sliderHeight = $('#main').height();
//ここから処理内容
if (window.matchMedia('(max-width: 768px)').matches) {
//スマホ処理
$(document).scroll(function() {
if (sliderHeight -30 < $(this).scrollTop()) { //メインエリア以降スクロールすると起動
$('.header_title').css('color', '#000');
$('.header-nav ul li a').css('color', '#fff');//スクロールしてもメニュー内リンクはデフォルト値で維持
} else {
$('.header_title').css('color', '#fff'); //スクロールしていないときはデフォルト値設定
};
});
} else if (window.matchMedia('(min-width:769px)').matches) {
//PC処理
$(document).scroll(function() {
if (sliderHeight - 50 < $(this).scrollTop()) { //メインエリア以降スクロールすると起動
$('.header').css('background-color', 'rgba(255,255,255,0.5)'); //背景色部分
$('.header_title').css('color', '#000');
$('.header-nav ul li a').css('color', '#000');
$('.header-nav ul li a').addClass('active');
} else { //スクロールしていないときは起動しない(デフォルト値設定)
$('.header').css('background-color', 'unset');
$('.header_title').css('color', '#fff');
$('.header-nav ul li a').css('color', '#fff');
$('.header-nav ul li a').removeClass('active');
}
});
};
});
});
- モーダルをクリックした時、コンソールにモーダル名が表示されるのを修正する
※ 必要のないコードは極力減らし、読み込みを早くする!
⇒ (修正内容)jsのconsole.logの記述を削除。 - SPサイズ時のトップへ戻るボタンの位置を調整する
⇒ (修正内容)SPサイズのbottomとrightを60pxから20pxに変更。
隙間時間を見ながら、なんとか修正して再提出。
現在はメンターさんチェック待ちです。ドキドキ。
本日の反省
とにかく前を見続ける
人生は一度しかないので、どうせ同じ人生を送るなら、とにかくウルトラポジティブでいようと思います。
子どものお世話とかでイライラすることもあるけど、それも自分!
自分自身をある程度受け入れて、できることを積み上げていけば、きっと見える景色が変わるんじゃないかと思います。
頑張っていきましょう!
今日も諦めなかった自分、お疲れ様でした!
Twitterでも勉強ログを呟いています。よかったら覗いてみてください♪
コメント