はじめに ノードがHTML内に存在するとは、開発ツール(DevTools)でHTMLを見たときノードが存在するということです。 HTML内に存在しないノードは、削除したノードやcreateElementで作成したばかりのノードです。これらはプログラミング内で変数として存在し得るがHTML内に存在しません。 ReactなどのSPAなページで動的に変化するノードをブックマークレットやユーザースクリプトから操作しようとしたときノードがHTML内に存在しないことが問題になることがあります。 6つの方法 1. getBoundingClientRectを使う方法 function exist_in_html_1(node) { var bcr = node.getBoundingClientRect(); return bcr.height > 0 || bcr.bottom !== 0; } 2. closestを使う方法 function exist_in_html_2(node) { return Boolean(node.closest('html')); } 3. containsを使う方法 function exist_in_html_3(node) { return document.contains(node) } 4. compareDocumentPositionを使う方法 function exist_in_html_4(node) { return !(document.compareDocumentPosition(node) & Node.DOCUMENT_POSITION_DISCONNECTED); } 5. compareBoundaryPointsを使う方法 function exist_in_html_5(node) { var range = document.createRange(); range.selectNode(document.body); try { var sourceRange = document.createRange(); sourceRange.selectNode(node); range.compareBoundaryPoints(Range.START_TO_START, sourceRange); } catch (error) { return false; } return true; } 6. isConnectedを使う方法 function exist_in_html_6(node) { return node.isConnected; } 最後に 最適解は最後に紹介した方法です。最適解を知らなかったので5つも自作することになりました。MDN Web Docsの英語のドキュメントに日本語訳がないので最適解をご存じない方も多いのではないでしょうか。最適解と5つの自作方法を紹介しました。

はじめに こんにちは。東京のコロナ感染者すごい増えてますね... 重傷者が少ないことを祈るばかり さて、今回は知人に紹介した拡張機能なのですが、これいいぞ！ってあまり宣伝している人がいなかったので、宣伝しようと思います！ 結論 これです↓ なにができるのか ちょっとHTML, CSS, JavaScriptを試せるエディタが出現します！ コンソールも出るので、JavaScriptのデバッグもできます ライブラリも簡単に追加できます おわりに 今回は低糖質な記事ですが、とても便利な拡張機能のご紹介でした。 ぜひインストールしてみてはいかがでしょうか！ それでは！

Every Qiita #22 のんびり独学初学者投稿 22日目 今回は・・・ HTMLのinput dateで初期値を当日に設定＋今日以前を選択できないように設定した時の備忘録です。 処理フローを考える 当日の日付を取得 input dateの形式に変換（形式：YYYY-MM-DD) valueをjavascriptで出力 minをjavascriptで出力 上記のフローを1つずつ分解して実装していきましょう！ 1.当日の日付を取得 javascriptでDateオブジェクトを使うと当日の日時を取得できます。 date.js const today = new Date(); 出力結果 Tue Jul 27 2021 13:45:38 GMT+0900 (日本標準時) 2.input dateの形式に変換 input dateのvalueはYYYY-MM-DDで出力されるので、javascriptで成形していきます。dateオブジェクトには年・月・日をそれぞれ取得できるメソッドがありますので順番に取得しreplace関数を使って整えていこうと思います。 replace関数は、第一引数に変換対象の文字列、第二引数に変換する文字列を配置します。 date.js function dateFormat(today, format){ format = format.replace("YYYY", date.getFullYear()); format = format.replace("MM", ("0"+(date.getMonth() + 1)).slice(-2)); format = format.replace("DD", ("0"+ date.getDate()).slice(-2)); return format; } 独自関数の第二引数にYYYY-MM-DDを配置します。（formatで受け取っています） getFullYearで年を4桁で取得し、YYYYを変換します。 getMonth + 1で月を取得します。 月は0〜11で出力されますので、+1をすれば正確な月を取得できます。 2桁で取得したいので0を前に付け、末尾から2文字を取得するようにします。 getDateで日付を取得します。上記と同様に2桁で取得できるようにします。 出力結果 2021-07-27 value・minをjavascriptで出力 最後に成形したデータを初期値と最小値に設定すれば完了です。 date.js const data = dateFormat(new Date(),'YYYY-MM-DD'); const field = document.getElementById(dateに付与した任意ID); field.value = data; field.setAttribute("min", data); 関数を呼び出し、取得した要素のvalueとminを設定しています。 これで当日が初期値として認識され、以前の日付を選択できないようにできます。 date.js const today = new Date(); function dateFormat(today, format){ format = format.replace("YYYY", date.getFullYear()); format = format.replace("MM", ("0"+(date.getMonth() + 1)).slice(-2)); format = format.replace("DD", ("0"+ date.getDate()).slice(-2)); return format; } const data = dateFormat(today,'YYYY-MM-DD'); const field = document.getElementById(dateに付与した任意ID); field.value = data; field.setAttribute("min", data);

発生した問題 メイン画像を貼った時に、画面いっぱいに表示させようと思ったのだが、どうしても周りにスペースができてしまった。 解決法 body { margin: 0; padding: 0; } 原因 原因は「user agent stylesheet」と呼ばれるもの。 「user agent stylesheet」とは、ブラウザ毎に設定されているデフォルトのCSS設定のこと。 これがあると、自分が設定した覚えのないCSSもブラウザによって反映されることがある。 対策 自分が設定した覚えのないCSSもブラウザによって反映されることがあるのでリセットCSSで対策する。

はじめに 学習するに至った経緯 2020年より、未経験からエンジニアへの転職を目指し、某プログラミングスクールへ通う。 入学後、『Ruby』を未経験から学ぶ人が多いのと『Ruby』の求人が思っていた以上に少ないので、 卒業後、フロントエンドのエンジニアを目指す事に。 HTMLの学習した事を言語化し、認識の深化による備忘録として記載。 tableタグの基本的な使い方 ① tableタグはtrタグ、tdを組み合わせて使う。 ② tableタグにtrタグ、tdタグを入れ子にして使う。 使用例 <table> <tr> <td>たい焼き</td> <td>茶色</td> <td>あまい</td> </tr> <tr> <td>なし</td> <td>黄緑</td> <td>甘い</td> </tr> </table> ※ tr：１つの行を意味します ※ td：セルの内容の記述 たい焼き 茶色 あまい なし 黄緑 甘い tableタグで指定出来る属性 talbeタグの中に属性を指定してtableの罫線についての設定をする事が可能。 ① border：表の外枠の罫線の太さ ② cellpadding :セル内の文字と罫線との間隔 ③ cellspacing：セルとセルの間隔 をそれぞれpxで指定する。 使用例 <table border="2" cellpadding="6" cellspacing="5"> <tr> <td>たい焼き</td> <td>茶色</td> <td>あまい</td> </tr> <tr> <td>なし</td> <td>黄緑</td> <td>甘い</td> </tr> </table> たい焼き 茶色 あまい なし 黄緑 甘い 表にキャプション、説明情報をつける tableタグ内の一番先頭にcaptionタグを入れて表に説明情報をつけることができる。 サンプル <table border="1" cellpadding="6" cellspacing="0"> <caption>食べ物について</caption> <tr> <td>たい焼き</td> <td>茶色</td> <td>あまい</td> </tr> <tr> <td>なし</td> <td>黄緑</td> <td>甘い</td> </tr> </table> 食べ物について たい焼き 茶色 あまい なし 黄緑 甘い 項目名について thタグ 表は１行目にその列の項目の種類を記述するのが一般的で、 tableタグでそれを表現する時は、tdタグの代わりにthタグを使う。 thタグ内の文字は、中央揃えを強調して表示される。 サンプル <table border="1" cellpadding="6" cellspacing="0"> <caption>食べ物について</caption> <tr> <th>名前</th> <th>色</th> <th>味</th> </tr> <tr> <td>たい焼き</td> <td>茶色</td> <td>あまい</td> </tr> <tr> <td>なし</td> <td>黄緑</td> <td>甘い</td> </tr> </table> 食べ物について 名前 色 味 たい焼き 茶色 あまい なし 黄緑 甘い セルを結合する 隣接しているセルの内容が同じだった場合は、隣接しているせる同士を結合してまとめて表示した方が表が見やすく、そんな時は,rowspan,colspanをいう属性を指定する。 ① 縦のセルを揃えたい場合、rowspan 結合したいセルの中で一番上のセル(tdタグ)内でrowspan属性を指定する。 rowspan=”結合するセルの数” サンプル <table border="1" cellpadding="6" cellspacing="0"> <caption>食べ物について</caption> <tr> <th>名前</th> <th>色</th> <th>味</th> </tr> <tr> <td>りんご</td> <td>赤</td> <td rowspan="2">甘い</td> </tr> <tr> <td>なし</td> <td>黄緑</td> </tr> </table> 食べ物について 名前 色 味 りんご 赤 甘い なし 黄緑 ② 横のセルを揃えたい場合、colspan 結合したいセルの中で一番左のセル(tdタグ)内でcolspan属性を指定する。 colspan=”結合するセルの数” <table border="1" cellpadding="6" cellspacing="0"> <caption>食べ物について</caption> <tr> <th>名前</th> <th>値段</th> <th>味</th> </tr> <tr> <td>りんご</td> <td>200円</td> <td>甘い</td> </tr> <tr> <td>トリュフ</td> <td colspan="2">買ったこと食べたことないので不明</td> </tr> </table> 食べ物について 名前 値段 味 りんご 200円 甘い トリュフ 買ったこと食べたことないので不明 列、行をグループ化して色をつける ①列をグループ化するときはtableタグ内の最初にcolgroup要素を指定する。 colgroupとすると列がグループ化され、styleで背景色を指定すると色が付き、 colgroupは指定された順番に１列目、２列目という風にグループ化する。 <table border="1" cellpadding="6" cellspacing="0"> <caption>食べ物について</caption> <colgroup style="background:red"> </colgroup> <colgroup style="background:skyblue"> </colgroup> <tr> <td>名前</td> <td>値段</td> <td>味</td> </tr> <tr> <td>りんご</td> <td>200円</td> <td>甘い</td> </tr> </table> 食べ物について 名前 値段 味 りんご 200円 甘い ② colgroupタグ内で、col span=”2″とすると２列分をまとめてグループ化できる。 <table border="1" cellpadding="6" cellspacing="0"> <caption>食べ物について</caption> <colgroup> <col span="2" style="background:red"> </colgroup> <tr> <td>名前</td> <td>値段</td> <td>味</td> </tr> <tr> <td>りんご</td> <td>200円</td> <td>甘い</td> </tr> </table> 食べ物について 名前 値段 味 りんご 200円 甘い ③ 行のグループ化はthead,tbody,tfootの３要素で分ける事ができる。 thead：一番上の行 tbody：一番上と一番下の間にある行（tbodyは複数指定出来る） tfoot：一番下の行 tbodyは複数指定出来るので、無限にグループを作る事ができます。 それぞれの使い方は、グループ化したい行のtrタグをそれぞれのタグで囲む。 <table border="1" cellpadding="6" cellspacing="0"> <caption>食べ物</caption> <thead style="background:red"> <tr> <th>名前</th> <th>色</th> <th>味</th> </tr> </thead> <tbody style="background:yellow"> <tr> <td>りんご</td> <td>赤</td> <td>甘い</td> </tr> </tbody> <tfoot style="background:skyblue"> <tr> <td>たい焼き</td> <td>茶色</td> <td>甘い</td> </tr> </tfoot> </table> 食べ物 名前 色 味 りんご 赤 甘い たい焼き 茶色 甘い <table border="1" cellpadding="6" cellspacing="0"> <caption>食べ物</caption> <tbody style="background:red"> <tr> <th>名前</th> <th>色</th> <th>味</th> </tr> </thead> <tbody style="background:yellow"> <tr> <td>りんご</td> <td>赤</td> <td>甘い</td> </tr> </tbody> </table> 食べ物 名前 色 味 りんご 赤 甘い 参考サイト 【HTML】table (テーブル) タグの基本！表の作り方・tr、th、tdの使い方も【サンプルあり】