はじめに 今回はjQueryを使ってアウトプットをしてみました！ （間違いや、こうした方がより良い！などありましたらご指摘いただけると嬉しいです！） できあがったもの 卵のタイマーにした理由は、家族それぞれで茹で時間がバラバラだったので複数個タイマーあればいいな〜と思ったからです（笑） 機能 startボタンでカウントスタート stopボタンでカウントストップ resetボタンでカウントリセット それぞれのタイマーで別の動きをする HTMLとCSSを記述する HTML <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="style.css"> <title>Timer</title> </head> <body> <h1>たまごタイマー</h1> <p>※沸騰したお湯からの茹で時間</p> <div class="container"> <div class="element"> <div class="count" data-time="360"></div> <div class="display"></div> <button class="start-btn">start</button> <button class="stop-btn">stop</button> <button class="reset-btn">reset</button> </div> <div class="element"> <div class="count" data-time="480"></div> <div class="display"></div> <button class="start-btn">start</button> <button class="stop-btn">stop</button> <button class="reset-btn">reset</button> </div> <div class="element"> <div class="count" data-time="600"></div> <div class="display"></div> <button class="start-btn">start</button> <button class="stop-btn">stop</button> <button class="reset-btn">reset</button> </div> <div class="element"> <div class="count" data-time="720"></div> <div class="display"></div> <button class="start-btn">start</button> <button class="stop-btn">stop</button> <button class="reset-btn">reset</button> </div> </div> <script src="libs/jquery-3.5.1.min.js"></script> <script src="main.js"></script> </body> </html> タイマー１つだけつくる場合はid指定していましたが、今回は複数つくるためclass指定にしました。 また、data属性を使ってそれぞれのタイマーに時間を設定しています。 参考：data属性について https://developer.mozilla.org/ja/docs/Learn/HTML/Howto/Use_data_attributes CSS body { color: #515151; } .count { display: none; } h1 { margin: 0; font-size: 40px; text-align: center; } p { text-align: center; font-size: 18px; color: #28CECE; margin-bottom: 20px; } .container { display: flex; justify-content: space-between; } .element { width: 300px; height: 360px; background-color: #F7d233; border-radius: 50%; position: relative; } .display { font-family: 'Dotum'; color: #515151; position: absolute; top: 70px; right: 45px; font-size: 40px; text-align: center; letter-spacing: 0.8rem; width: 200px; height: 60px; background-color: white; border-radius: 15px; } button { font-size: 30px; color: #515151; background-color: white; border: solid #515151; border-radius: 50px; width: 100px; height: 50px; box-shadow: 0 5px 0 #515151; outline: none; } button:active { transform: translateY(4px); box-shadow: none; } .start-btn { position: absolute; top: 170px; left: 30px; } .stop-btn { position: absolute; top: 170px; right: 40px; } .reset-btn { position: absolute; top: 250px; right: 100px; } 見た目は卵を意識してつくりました（笑） あとボタンをクリックした時に沈むような動きをつけるのにtranslateYというやり方を使いました。（知らなかった） jQueryを記述する $(() => { $('.element').each(function () { const countBox = $(this).children('.count'); const start = $(this).children('.start-btn'); const stop = $(this).children('.stop-btn'); const reset = $(this).children('.reset-btn'); const display = $(this).children('.display'); //タイマーの秒数 let setTime = countBox.data('time'); //残りの秒数 let timeLeft = setTime; //setIntervalのための変数 let testTimer; //分を表示する let minutes; //秒を表示する let seconds; //残りの秒数を表示する関数 const displayText = () => { minutes = Math.floor(timeLeft / 60); seconds = timeLeft % 60; if (String(minutes).length == 1) minutes = "0" + String(minutes) if (String(seconds).length == 1) seconds = "0" + String(seconds) display.text(minutes + ":" + seconds); }; //1ずつカウントダウンする関数 const countDown = () => { timeLeft--; displayText(); }; //カウントをストップする関数 const stopCount = () => { clearInterval(testTimer); }; //1000ミリ秒ごとに処理を繰り返す関数 const timerStart = () => { testTimer = setInterval(function () { if (timeLeft <= 0) clearInterval(testTimer); else countDown(); }, 1000); return; }; //ボタンを押したらカウントダウンスタート start.on('click', () => { stopCount(); timerStart(); }); //ボタンを押したらカウントストップ stop.on('click', () => { stopCount(); }); //ボタンを押したらカウントリセット reset.on('click', () => { stopCount(); timeLeft = setTime; displayText(); }); displayText(); }) }); コードを説明 DOM操作に必要なIdを取得 $(() => { $('.element').each(function () { const countBox = $(this).children('.count'); const start = $(this).children('.start-btn'); const stop = $(this).children('.stop-btn'); const reset = $(this).children('.reset-btn'); const display = $(this).children('.display'); まずDOM操作に必要なIDを取得します。 ${'.element'} で複数の要素を取得し、eachメソッドを使ってループ処理してます。 ここの $(this) は $('.element') をさしていて、childrenを使うことで.elementの子要素を取得してます。 補足 一番上にある $(() => { は readyイベント関数というもので、見た目は似ていますがJavaScriptで使われる即時関数とは別物です。 即時関数については前回の記事参照 → https://qiita.com/ki01chi/items/abb986ebc59bc684b4d7 上記は一部分だけですが全体で見ると readyイベント関数 $(document).ready(function() { //実行したい内容 }); このような形で使われます。 今回は省略して $(() => {}); としています。 readyイベント関数を使うことで、HTMLが全部読み込まれてからfunction( )以降の処理が行われるようになります。 参考：jQueryの基本 - $(document).ready 変数定義 //タイマーの秒数 let setTime = countBox.data('time'); //残りの秒数 let timeLeft = setTime; //setIntervalのための変数 let testTimer; //分を表示する let minutes; //秒を表示する let seconds; タイマーの秒数はdata()メソッドを使って取得。 HTML内でデータ属性を使って指定したdata-timeをここで取得してます。 参考：data()メソッドについて https://www.sejuku.net/blog/38263 //残りの秒数を表示する関数 const displayText = () => { minutes = Math.floor(timeLeft / 60); seconds = timeLeft % 60; if (String(minutes).length == 1) minutes = "0" + String(minutes) if (String(seconds).length == 1) seconds = "0" + String(seconds) display.text(minutes + ":" + seconds); }; countBoxに残り秒数を表示するよう指定。 秒で表示されているのを分で表示したいのでMath.floorを使って計算式をつくってます。 例） 360秒 を 6分と表示したい！ 分 → 360 ÷ 60 = 6 そして6分という表示をタイマーっぽく 06:00 という表示にしたかったため、数字が1桁ならその数字の前に0を付け足すようにしました。 もしif文を書かなかったら 6:0 という表示になります。 //1ずつカウントダウンする関数 const countDown = () => { timeLeft--; displayText(); }; 1ずつカウントダウンする関数を作成します。 //1000ミリ秒ごとに処理を繰り返す関数 const timerStart = () => { testTimer = setInterval(function () { if (timeLeft <= 0) clearInterval(testTimer); else countDown(); }, 1000); return; }; 最初につくっておいた変数testTimerにsetIntervalの処理を入れます。 setIntervalは繰り返し処理をおこなってくれる関数です。 ですが、setIntervalだけでは半永久的に繰り返し処理が行われてしまうので、この繰り返し処理を停止させるためにclearIntervalを使っています。 上記コードの場合、timeLeft(残りの秒数)が0になったらclearIntervalが実行されて繰り返し処理が停止します。 0秒になるまでは1000ミリ秒（＝1秒）ずつタイムが減っていきます。 //カウントをストップする関数 const stopCount = () => { clearInterval(testTimer); }; setInterval処理を停止させるための関数です。 //ボタンを押したらカウントダウンスタート start.on('click', () => { stopCount(); timerStart(); }); 関数が一通り作れたのであとはクリックイベントです。 まずスタートボタンを押したとき。 スタートを２回以上クリックしたときに起きる変な挙動（setIntervalの繰り返し処理が複数回起きて正常にカウントされない）を防ぐために、最初にstopCount();を書いています。 //ボタンを押したらカウントストップ stop.on('click', () => { stopCount(); }); そしてストップボタンを押した時の挙動。 //ボタンを押したらカウントリセット reset.on('click', () => { stopCount(); timeLeft = setTime; displayText(); }); displayText(); }) }); 最後にリセットボタンを押したとき。 stopCount(); を最初につけることでリセットを押したあと、勝手にカウント開始されないようにしています。 残り時間に初期値であるsetTimeを入れてあげることでリセット完了です。 さいごに ようやくまとめれました、、よかった。 今見返すとスタートボタンを1回押したら連続でクリックできないようにするとか他のやり方があったなぁと思いつつ、今回は過去の私が知恵をしぼって書いたものをそのまま載っけました（笑） 最後まで読んでいただきありがとうございました！
今回はjQueryを使ってアウトプットをしてみました！
（間違いや、こうした方がより良い！などありましたらご指摘いただけると嬉しいです！）
卵のタイマーにした理由は、家族それぞれで茹で時間がバラバラだったので複数個タイマーあればいいな〜と思ったからです（笑）
HTML <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="style.css"> <title>Timer</title> </head> <body> <h1>たまごタイマー</h1> <p>※沸騰したお湯からの茹で時間</p> <div class="container"> <div class="element"> <div class="count" data-time="360"></div> <div class="display"></div> <button class="start-btn">start</button> <button class="stop-btn">stop</button> <button class="reset-btn">reset</button> </div> <div class="element"> <div class="count" data-time="480"></div> <div class="display"></div> <button class="start-btn">start</button> <button class="stop-btn">stop</button> <button class="reset-btn">reset</button> </div> <div class="element"> <div class="count" data-time="600"></div> <div class="display"></div> <button class="start-btn">start</button> <button class="stop-btn">stop</button> <button class="reset-btn">reset</button> </div> <div class="element"> <div class="count" data-time="720"></div> <div class="display"></div> <button class="start-btn">start</button> <button class="stop-btn">stop</button> <button class="reset-btn">reset</button> </div> </div> <script src="libs/jquery-3.5.1.min.js"></script> <script src="main.js"></script> </body> </html>
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="style.css"> <title>Timer</title> </head> <body> <h1>たまごタイマー</h1> <p>※沸騰したお湯からの茹で時間</p> <div class="container"> <div class="element"> <div class="count" data-time="360"></div> <div class="display"></div> <button class="start-btn">start</button> <button class="stop-btn">stop</button> <button class="reset-btn">reset</button> </div> <div class="element"> <div class="count" data-time="480"></div> <div class="display"></div> <button class="start-btn">start</button> <button class="stop-btn">stop</button> <button class="reset-btn">reset</button> </div> <div class="element"> <div class="count" data-time="600"></div> <div class="display"></div> <button class="start-btn">start</button> <button class="stop-btn">stop</button> <button class="reset-btn">reset</button> </div> <div class="element"> <div class="count" data-time="720"></div> <div class="display"></div> <button class="start-btn">start</button> <button class="stop-btn">stop</button> <button class="reset-btn">reset</button> </div> </div> <script src="libs/jquery-3.5.1.min.js"></script> <script src="main.js"></script> </body> </html>
タイマー１つだけつくる場合はid指定していましたが、今回は複数つくるためclass指定にしました。 また、data属性を使ってそれぞれのタイマーに時間を設定しています。
参考：data属性について https://developer.mozilla.org/ja/docs/Learn/HTML/Howto/Use_data_attributes
CSS body { color: #515151; } .count { display: none; } h1 { margin: 0; font-size: 40px; text-align: center; } p { text-align: center; font-size: 18px; color: #28CECE; margin-bottom: 20px; } .container { display: flex; justify-content: space-between; } .element { width: 300px; height: 360px; background-color: #F7d233; border-radius: 50%; position: relative; } .display { font-family: 'Dotum'; color: #515151; position: absolute; top: 70px; right: 45px; font-size: 40px; text-align: center; letter-spacing: 0.8rem; width: 200px; height: 60px; background-color: white; border-radius: 15px; } button { font-size: 30px; color: #515151; background-color: white; border: solid #515151; border-radius: 50px; width: 100px; height: 50px; box-shadow: 0 5px 0 #515151; outline: none; } button:active { transform: translateY(4px); box-shadow: none; } .start-btn { position: absolute; top: 170px; left: 30px; } .stop-btn { position: absolute; top: 170px; right: 40px; } .reset-btn { position: absolute; top: 250px; right: 100px; }
body { color: #515151; } .count { display: none; } h1 { margin: 0; font-size: 40px; text-align: center; } p { text-align: center; font-size: 18px; color: #28CECE; margin-bottom: 20px; } .container { display: flex; justify-content: space-between; } .element { width: 300px; height: 360px; background-color: #F7d233; border-radius: 50%; position: relative; } .display { font-family: 'Dotum'; color: #515151; position: absolute; top: 70px; right: 45px; font-size: 40px; text-align: center; letter-spacing: 0.8rem; width: 200px; height: 60px; background-color: white; border-radius: 15px; } button { font-size: 30px; color: #515151; background-color: white; border: solid #515151; border-radius: 50px; width: 100px; height: 50px; box-shadow: 0 5px 0 #515151; outline: none; } button:active { transform: translateY(4px); box-shadow: none; } .start-btn { position: absolute; top: 170px; left: 30px; } .stop-btn { position: absolute; top: 170px; right: 40px; } .reset-btn { position: absolute; top: 250px; right: 100px; }
見た目は卵を意識してつくりました（笑） あとボタンをクリックした時に沈むような動きをつけるのにtranslateYというやり方を使いました。（知らなかった）
$(() => { $('.element').each(function () { const countBox = $(this).children('.count'); const start = $(this).children('.start-btn'); const stop = $(this).children('.stop-btn'); const reset = $(this).children('.reset-btn'); const display = $(this).children('.display'); //タイマーの秒数 let setTime = countBox.data('time'); //残りの秒数 let timeLeft = setTime; //setIntervalのための変数 let testTimer; //分を表示する let minutes; //秒を表示する let seconds; //残りの秒数を表示する関数 const displayText = () => { minutes = Math.floor(timeLeft / 60); seconds = timeLeft % 60; if (String(minutes).length == 1) minutes = "0" + String(minutes) if (String(seconds).length == 1) seconds = "0" + String(seconds) display.text(minutes + ":" + seconds); }; //1ずつカウントダウンする関数 const countDown = () => { timeLeft--; displayText(); }; //カウントをストップする関数 const stopCount = () => { clearInterval(testTimer); }; //1000ミリ秒ごとに処理を繰り返す関数 const timerStart = () => { testTimer = setInterval(function () { if (timeLeft <= 0) clearInterval(testTimer); else countDown(); }, 1000); return; }; //ボタンを押したらカウントダウンスタート start.on('click', () => { stopCount(); timerStart(); }); //ボタンを押したらカウントストップ stop.on('click', () => { stopCount(); }); //ボタンを押したらカウントリセット reset.on('click', () => { stopCount(); timeLeft = setTime; displayText(); }); displayText(); }) });
$(() => { $('.element').each(function () { const countBox = $(this).children('.count'); const start = $(this).children('.start-btn'); const stop = $(this).children('.stop-btn'); const reset = $(this).children('.reset-btn'); const display = $(this).children('.display');
まずDOM操作に必要なIDを取得します。
${'.element'} で複数の要素を取得し、eachメソッドを使ってループ処理してます。 ここの $(this) は $('.element') をさしていて、childrenを使うことで.elementの子要素を取得してます。
${'.element'}
$(this)
$('.element')
一番上にある $(() => { は readyイベント関数というもので、見た目は似ていますがJavaScriptで使われる即時関数とは別物です。
$(() => {
readyイベント関数
即時関数については前回の記事参照 → https://qiita.com/ki01chi/items/abb986ebc59bc684b4d7
上記は一部分だけですが全体で見ると
$(document).ready(function() { //実行したい内容 });
このような形で使われます。 今回は省略して $(() => {}); としています。
$(() => {});
readyイベント関数を使うことで、HTMLが全部読み込まれてからfunction( )以降の処理が行われるようになります。
参考：jQueryの基本 - $(document).ready
//タイマーの秒数 let setTime = countBox.data('time'); //残りの秒数 let timeLeft = setTime; //setIntervalのための変数 let testTimer; //分を表示する let minutes; //秒を表示する let seconds;
タイマーの秒数はdata()メソッドを使って取得。 HTML内でデータ属性を使って指定したdata-timeをここで取得してます。
data()メソッド
参考：data()メソッドについて https://www.sejuku.net/blog/38263
//残りの秒数を表示する関数 const displayText = () => { minutes = Math.floor(timeLeft / 60); seconds = timeLeft % 60; if (String(minutes).length == 1) minutes = "0" + String(minutes) if (String(seconds).length == 1) seconds = "0" + String(seconds) display.text(minutes + ":" + seconds); };
countBoxに残り秒数を表示するよう指定。 秒で表示されているのを分で表示したいのでMath.floorを使って計算式をつくってます。
例） 360秒 を 6分と表示したい！ 分 → 360 ÷ 60 = 6
そして6分という表示をタイマーっぽく 06:00 という表示にしたかったため、数字が1桁ならその数字の前に0を付け足すようにしました。 もしif文を書かなかったら 6:0 という表示になります。
//1ずつカウントダウンする関数 const countDown = () => { timeLeft--; displayText(); };
1ずつカウントダウンする関数を作成します。
//1000ミリ秒ごとに処理を繰り返す関数 const timerStart = () => { testTimer = setInterval(function () { if (timeLeft <= 0) clearInterval(testTimer); else countDown(); }, 1000); return; };
最初につくっておいた変数testTimerにsetIntervalの処理を入れます。 setIntervalは繰り返し処理をおこなってくれる関数です。 ですが、setIntervalだけでは半永久的に繰り返し処理が行われてしまうので、この繰り返し処理を停止させるためにclearIntervalを使っています。
変数testTimer
setInterval
clearInterval
上記コードの場合、timeLeft(残りの秒数)が0になったらclearIntervalが実行されて繰り返し処理が停止します。 0秒になるまでは1000ミリ秒（＝1秒）ずつタイムが減っていきます。
//カウントをストップする関数 const stopCount = () => { clearInterval(testTimer); };
setInterval処理を停止させるための関数です。
//ボタンを押したらカウントダウンスタート start.on('click', () => { stopCount(); timerStart(); });
関数が一通り作れたのであとはクリックイベントです。 まずスタートボタンを押したとき。 スタートを２回以上クリックしたときに起きる変な挙動（setIntervalの繰り返し処理が複数回起きて正常にカウントされない）を防ぐために、最初にstopCount();を書いています。
stopCount();
//ボタンを押したらカウントストップ stop.on('click', () => { stopCount(); });
そしてストップボタンを押した時の挙動。
//ボタンを押したらカウントリセット reset.on('click', () => { stopCount(); timeLeft = setTime; displayText(); }); displayText(); }) });
最後にリセットボタンを押したとき。 stopCount(); を最初につけることでリセットを押したあと、勝手にカウント開始されないようにしています。 残り時間に初期値であるsetTimeを入れてあげることでリセット完了です。
ようやくまとめれました、、よかった。 今見返すとスタートボタンを1回押したら連続でクリックできないようにするとか他のやり方があったなぁと思いつつ、今回は過去の私が知恵をしぼって書いたものをそのまま載っけました（笑）
最後まで読んでいただきありがとうございました！
どうも7noteです。デザインからコーディングする時の彩度の問題の解決方法。 「ちゃんとイラレのカラーピッカーの数値をコピーしたのに違う色になった！」 1クリックで解決できます （これをイラレのカラーピッカーで見ても#FF0000になる） この「プロセスカラー（クリックして変換）」という四角いアイコンをクリックするとなんと、彩度を考慮した16進数*に変換されます。 －－－－－－変換後－－－－－－－－－－－－ （#FF0000の彩度10%は、16進数に直すと#FFE5E5になった） まとめ 地味に厄介な彩度の調整。いままで別のカラーピッカーソフトなどでわざわざ色を取得していましたが、イラレ上で1クリックで変換できるとは知りませんでした。Adobeさんさすがです、脱帽ものですこれは。 めんどくさがりの人はカラーピッカーアプリ（ソフト）を使う方法も便利なのでお試しあれ windowsでおすすめは「カラーピッカー(Color Picker)」 macでおすすめは「DigitalColor Meter（標準ソフト）」 おそまつ！ ~ Qiitaで毎日投稿中!! ~ 【初心者向け】HTML・CSSのちょいテク詰め合わせ
「ちゃんとイラレのカラーピッカーの数値をコピーしたのに違う色になった！」
（これをイラレのカラーピッカーで見ても#FF0000になる）
この「プロセスカラー（クリックして変換）」という四角いアイコンをクリックするとなんと、彩度を考慮した16進数*に変換されます。
－－－－－－変換後－－－－－－－－－－－－
（#FF0000の彩度10%は、16進数に直すと#FFE5E5になった）
地味に厄介な彩度の調整。いままで別のカラーピッカーソフトなどでわざわざ色を取得していましたが、イラレ上で1クリックで変換できるとは知りませんでした。Adobeさんさすがです、脱帽ものですこれは。
~ Qiitaで毎日投稿中!! ~ 【初心者向け】HTML・CSSのちょいテク詰め合わせ
ローカルで表示されていたsvgが、サーバー環境で表示されないとき。 xfreeのサーバーでアップロードし作成したサイトを見たときsvgの部分だけ表示出来ませんでした。(他のpngとかは問題なし) 画面でいうとこんな感じです。 最初はアセットパイプラインかなんかが影響してるのかなって思ったのですが、調べていると拡張子のメタ情報が追加されてないことが原因とわかりました。 実際には以下のコードを.htaccssに追加し、svgをサーバー環境で認識させました。 AddType image/svg+xml .svg .svgz AddEncoding gzip .svgz これで無事SVG画像が表示されました。 ちなみにAddTypeとAddEncodingを調べてみましたが、AddTypeがメタ情報に.svgと.svgzを認識させるコードで、AddEncodingが.svgzがgzipである事を認識させるコードらしいです。 補足 .htaccess(ドット エイチティ アクセス)はwebサーバーの動作制御系のファイルです。 サーバーのhome dir(ホームディレクトリ)配下に配置します。 ※ホームディレクトリとは基本的にはエントリーポイントであるindex.htmlが設置されている階層のことです。
xfreeのサーバーでアップロードし作成したサイトを見たときsvgの部分だけ表示出来ませんでした。(他のpngとかは問題なし)
画面でいうとこんな感じです。
最初はアセットパイプラインかなんかが影響してるのかなって思ったのですが、調べていると拡張子のメタ情報が追加されてないことが原因とわかりました。
実際には以下のコードを.htaccssに追加し、svgをサーバー環境で認識させました。
AddType image/svg+xml .svg .svgz AddEncoding gzip .svgz
これで無事SVG画像が表示されました。
ちなみにAddTypeとAddEncodingを調べてみましたが、AddTypeがメタ情報に.svgと.svgzを認識させるコードで、AddEncodingが.svgzがgzipである事を認識させるコードらしいです。
.htaccess(ドット エイチティ アクセス)はwebサーバーの動作制御系のファイルです。
サーバーのhome dir(ホームディレクトリ)配下に配置します。 ※ホームディレクトリとは基本的にはエントリーポイントであるindex.htmlが設置されている階層のことです。
私の備忘録です。 まだまだ初心者の私ですが、 ポートフォリオの野暮ったさが少しでも無くなるかもしれないフロント実装の一つとして ロード時にページ全体を、真っ白な画面から徐々に再生させる（フェードインさせる）という実装をしました。 ロード時にページ全体をフェードインしたい 単純に、以下のコードをCSSファイルに追記です。 index.css 1 .all { 2 animation: fade 3s; 3 } 4 5 @keyframes fade { 6 0% {opacity: 0; 7 } 8 100% {opacity: 1; 9 } 10 } 個別の解説 「fade」キーフレームを.all（<body>でも可）に適用し、3秒で再生するように指定。 ※再生するまでの秒数はお好みで！ index.css 1 .all { 2 animation: fade 3s; 3 } 「fade」キーフレームの設定。 index.css 5 @keyframes fade { 10 } 始点（0%）の不透明度opacityを「0」に指定。 index.css 6 0% {opacity: 0; 7 } 終点（100%）の不透明度opacityを「1」に指定。 index.css 8 100% {opacity: 1; 9 }
私の備忘録です。 まだまだ初心者の私ですが、 ポートフォリオの野暮ったさが少しでも無くなるかもしれないフロント実装の一つとして ロード時にページ全体を、真っ白な画面から徐々に再生させる（フェードインさせる）という実装をしました。
単純に、以下のコードをCSSファイルに追記です。
1 .all { 2 animation: fade 3s; 3 } 4 5 @keyframes fade { 6 0% {opacity: 0; 7 } 8 100% {opacity: 1; 9 } 10 }
<body>
※再生するまでの秒数はお好みで！
1 .all { 2 animation: fade 3s; 3 }
5 @keyframes fade { 10 }
6 0% {opacity: 0; 7 }
8 100% {opacity: 1; 9 }
VScodeの小ネタを紹介します ※役に立つかはわかりません? ・コメントアウトしたコードに// (スラッシュ2回)入力すると取り消し線がでます ・コメントアウトしたコードに*(アスタリスク)を入力すると、コメントアウトの部分が少し明るくなります お疲れ様です??VScodeの小ネタ紹介・コメントアウトしたコードに// (スラッシュ2回)入力すると取り消し線がでます?・コメントアウトしたコードに*(アスタリスク)を入力すると、コメントアウトの部分が少し明るくなります? pic.twitter.com/RXl0iEDi3m— ミキ?@プログラミング (@mikiprogram) November 26, 2020
※役に立つかはわかりません?
・コメントアウトしたコードに// (スラッシュ2回)入力すると取り消し線がでます
・コメントアウトしたコードに*(アスタリスク)を入力すると、コメントアウトの部分が少し明るくなります
お疲れ様です??VScodeの小ネタ紹介・コメントアウトしたコードに// (スラッシュ2回)入力すると取り消し線がでます?・コメントアウトしたコードに*(アスタリスク)を入力すると、コメントアウトの部分が少し明るくなります? pic.twitter.com/RXl0iEDi3m— ミキ?@プログラミング (@mikiprogram) November 26, 2020
お疲れ様です??VScodeの小ネタ紹介・コメントアウトしたコードに// (スラッシュ2回)入力すると取り消し線がでます?・コメントアウトしたコードに*(アスタリスク)を入力すると、コメントアウトの部分が少し明るくなります? pic.twitter.com/RXl0iEDi3m
VS Codeの小ネタを紹介します ※役に立つかはわかりません? Better Comments Better Commentsという拡張機能をインストールすると、以下のようなことができます。 入力例 効果 // 通常のコメント // * ちょっと明るくなります // // 取り消し線がでます お疲れ様です??VScodeの小ネタ紹介・コメントアウトしたコードに// (スラッシュ2回)入力すると取り消し線がでます?・コメントアウトしたコードに*(アスタリスク)を入力すると、コメントアウトの部分が少し明るくなります? pic.twitter.com/RXl0iEDi3m— ミキ?@プログラミング (@mikiprogram) November 26, 2020
Better Commentsという拡張機能をインストールすると、以下のようなことができます。
//
// *
// //
はじめに 私はプログラミング初学者である為、間違った記述をしている可能性が高いと思われます。もし、間違いなどがございましたら、ご指摘のほどよろしくお願いします。 CSSの詳細度とは 簡単に説明すると、複数のルールが適用されたときの優先度である。 idはclassより優先度が高く、classは何もないものより優先度が高い。 下記の場合、redが適用される #title { color: red; } .a { color: blue; } h1 { color: green; } 何故、idがclassよりも優先度が高いのかについてはスコアリングを理解すると良い。 スコアリングの見方について 基本的にはスコアリングというものでCSSの記述が反映され、スコア値として1000,100,10,1がある。 スコア値 セレクター 1000 style属性（インラインスタイル）内にある場合、セレクターがないので常に1000 100 全体のセレクターの内部にあるidセレクター 10 全体のセレクターの内部にあるclassセレクター・属性セレクター・擬似クラス 1 全体のセレクターの内部にある要素セレクターまたは疑似要素 重要なのは、詳細度の合計で表示が決まるのではなく、あくまでもスコア内で同じ点数があるかどうかで決まる、ということである。優先順位としては、1000→100→10→1→詳細度の合計で判断する。 画像内では、3番目は10*2+1*2=22、4番目は100*1=100となっているが、10や1を多用して100を超えたとしても、上記の優先順位により4番目の記述が反映される。 反映される順番としては、1000,100,10,1の順で同じ点数を取っているかどうかで決まる。同じ点数を取っていたら下の方を見て判断して、最終的に全て同じ数であれば詳細度の合計で判断する。 例 #title { color: green; } .a.b.c.d.e.f.g.h.i.j.k { color: blue; } 上記の場合、詳細度の合計値はid指定が100、class指定が110でclass指定の方が反映されると思いきや、先ほど述べたようにスコア内で同じ点数があるかどうかで決まる為、idは100というスコアをもっている為、classの10スコアが組み合わさった110よりも優先順位が上となる。 !importantについて また、!importantというものがあり、これを使用するとこれまでに述べてきた優先順位に関係なく!importantと書かれているもの表記が優先される。しかし、MDNなどでは使用しないことを強く推奨している為、使用しない方が良いと思われる、、、。 終わりに 初学者ではありますが、少しでもお役に立てれば幸いです。 参考文献 カスケードと継承 - ウェブ開発を学ぶ | MDN
私はプログラミング初学者である為、間違った記述をしている可能性が高いと思われます。もし、間違いなどがございましたら、ご指摘のほどよろしくお願いします。
簡単に説明すると、複数のルールが適用されたときの優先度である。 idはclassより優先度が高く、classは何もないものより優先度が高い。 下記の場合、redが適用される
id
class
red
#title { color: red; } .a { color: blue; } h1 { color: green; }
何故、idがclassよりも優先度が高いのかについてはスコアリングを理解すると良い。
基本的にはスコアリングというものでCSSの記述が反映され、スコア値として1000,100,10,1がある。
1000
100
10
1
重要なのは、詳細度の合計で表示が決まるのではなく、あくまでもスコア内で同じ点数があるかどうかで決まる、ということである。優先順位としては、1000→100→10→1→詳細度の合計で判断する。
画像内では、3番目は10*2+1*2=22、4番目は100*1=100となっているが、10や1を多用して100を超えたとしても、上記の優先順位により4番目の記述が反映される。 反映される順番としては、1000,100,10,1の順で同じ点数を取っているかどうかで決まる。同じ点数を取っていたら下の方を見て判断して、最終的に全て同じ数であれば詳細度の合計で判断する。
#title { color: green; } .a.b.c.d.e.f.g.h.i.j.k { color: blue; }
上記の場合、詳細度の合計値はid指定が100、class指定が110でclass指定の方が反映されると思いきや、先ほど述べたようにスコア内で同じ点数があるかどうかで決まる為、idは100というスコアをもっている為、classの10スコアが組み合わさった110よりも優先順位が上となる。
110
また、!importantというものがあり、これを使用するとこれまでに述べてきた優先順位に関係なく!importantと書かれているもの表記が優先される。しかし、MDNなどでは使用しないことを強く推奨している為、使用しない方が良いと思われる、、、。
!important
初学者ではありますが、少しでもお役に立てれば幸いです。
こんがらがった際にチラ見して最低限思い出せる用の個人メモ。 (随時追加予定...) 「コンテンツ位置」 を真中に配置 1. positionを使う場合 親要素に以下を追加 position: relative; 子要素に以下を追加 position: absolute; top:50%; left:50%; transform: translate(-50%,-50%); See the Pen yLaLYrE by non Man (@nonMan21) on CodePen. 小要素に兄弟要素がある場合でも基本的に関係ない。 2. flexを使う場合 親要素に以下を追加 display: flex; justify-content: center; align-items: center; See the Pen jOMObXY by non Man (@nonMan21) on CodePen. 小要素に兄弟要素がある場合、兄弟要素のくくりごと真中になる。 (1つ小要素に対して上記のような使い方はあまりしない。flexについては別記事でまとめ中) 3. ○○-alignを使う場合 親要素に以下を追加 text-align:center; display: table-cell; vertical-align: middle; See the Pen eYdYpPj by non Man (@nonMan21) on CodePen. 「テキスト」 をコンテンツ領域の真中に配置 対象に以下を追加 display: flex; justify-content: center; align-items: center; See the Pen OJRJVKJ by non Man (@nonMan21) on CodePen. ランキングとか通知などのコンテンツ実装時、テキストしか入らない場合はこれ入れるだけなのでスムーズ。 親要素関係なくスタイルできるので、他の大きなコンポーネントへの影響を切り離したい小さいパーツなどにも良いかもです。
こんがらがった際にチラ見して最低限思い出せる用の個人メモ。 (随時追加予定...)
親要素に以下を追加
親要素
position: relative;
子要素に以下を追加
子要素
position: absolute; top:50%; left:50%; transform: translate(-50%,-50%);
See the Pen yLaLYrE by non Man (@nonMan21) on CodePen.
小要素に兄弟要素がある場合でも基本的に関係ない。
display: flex; justify-content: center; align-items: center;
See the Pen jOMObXY by non Man (@nonMan21) on CodePen.
小要素に兄弟要素がある場合、兄弟要素のくくりごと真中になる。 (1つ小要素に対して上記のような使い方はあまりしない。flexについては別記事でまとめ中)
text-align:center; display: table-cell; vertical-align: middle;
See the Pen eYdYpPj by non Man (@nonMan21) on CodePen.
対象に以下を追加
対象
See the Pen OJRJVKJ by non Man (@nonMan21) on CodePen.
ランキングとか通知などのコンテンツ実装時、テキストしか入らない場合はこれ入れるだけなのでスムーズ。 親要素関係なくスタイルできるので、他の大きなコンポーネントへの影響を切り離したい小さいパーツなどにも良いかもです。
