◼️ タイトルにもある通り、文字列と数値は連結できない。もし、文字列と数値を連結したいなら下記の書き方を覚える必要がある。 書き方： puts "１日は" + (24 * 60 ).to_s + "分です。" 上記のように数字の値の辺りに( ).to_s という記号を加えるだけでOK！！ 今日の投稿は以上です。 wagaでした！
概要 この記事は、以下のUdmeyの講座のセクション6の52,53の内容をまとめたものです フォーム送信時に指定した項目に、空欄もしくは未選択がある場合にイベントが発火し、フォームの送信を中断し、アラートを出す実装内容です。 コード概要 2つのメソッドを用いて実装します checkBlankメソッド：空欄があるかどうかのチェック。ある場合には、アラートを表示&falseを返す $("#f").submit：フォームにイベントを登録。送信されると発火 実装内容 想定されるフォーム <form action="/" name="f" id="f"> <label>名前</label> <input type="text" id="name" name="name" value="Mike" class="form-control" /> <label> <input type="checkbox" id="chck" name="ok" value="ok" checked /> ok? </label> <p>趣味</p> <label> <input type="checkbox" id="hbyMovie" name="hbyMovie" checked /> 映画 </label> <label> <input type="checkbox" id="hbyComic" name="hbyComic" checked /> マンガ </label> <p>性別</p> <label> <input type="radio" id="sexMale" name="sex" value="male" /> 男性 </label> <label> <input type="radio" id="sexFemale" name="sex" value="female" /> 女性 </label> <p>リスト</p> <select class="form-control" id="lst" name="lst" multiple size=4> <option value="lst1" selected>リスト1</option> <option value="lst2">リスト2</option> <option value="lst3" selected>リスト3</option> <option value="lst4">リスト4</option> <option value="lst5">リスト5</option> </select> <p>自由記入</p> <textarea class="form-control" rows="3" id="free" name="free">aaaaa</textarea> <button type="submit" class="btn btn-default" id="btnSubmit">Submit</button> </form> フォームを中断・アラートを出すメソッド // 入力内容が空かどうか判断する var checkBlank = function() { if (("#name").val() == "") { alert("名前が空です") return true } if (("#free").val() == "") { alert("自由記入欄が空です") return true } if (("input[name=sex]:checked").val() === undefined) { alert("[性別]が選択されていません") return true } if (("#lsts").val() === null) { alert("[リスト]が選択されていません") return true } return false } // [Submit]ボタンによりイベントが発火 $("#f").submit(function() { var isBlank = checkBlank(); if (isBlank) { console.log("stop") return false; } }); おわりに 実際に開発現場で開発を行うにあたり、自身のフロントエンドの技術力の乏しさを実感したので、今後JSを中心に学習を進め、その内容を発信していこうと思います！ 最後までお読みいただきありがとうございました！
表 <table> <thead> <tr> <th>見出し1</th> <th>見出し2</th> </tr> </theadv> <tbody> <tr> <td>内容1</td> <td>内容2</td> </tr> </tbody> <tfoot> <tr> <td>フッタセル1</td> <td>フッタセル2</td> </tr> </tfoo> </table> タグの説明 タグ 説明 備考 <thead> 「table header」表の行（水平方向）をグループ化するタグです。<thead>～</thead>で囲まれた内容は、表のヘッダ部分としてグループ化され、<table>の中はヘッダ部分を表す<tread>～</tread>部分、ボディ（表の本体）部分<tbody>～</tbody>、フッタ部分<tfoot>～</tfoot>に分けられます。このように分けることでブラウザはヘッダとフッタを先読みして表示したり、ヘッダとフッタを固定表示したままボディ部分だけをスクロールさせたりすることができます。ただし、これらのタグに対応していないブラウザの場合は、フッタをボディより上に表示してしまうことがあります。https://html-coding.co.jp/annex/dictionary/html/thead/ <tr> 「table row」の略で表の行部分（横方向）を指定するタグです。https://html-coding.co.jp/annex/dictionary/html/tr/ <th> 「table header」の略で、表の見出しやタイトルとなるヘッダセルを作成するタグです。https://html-coding.co.jp/annex/dictionary/html/th/ <td> 「table data」の略で、テーブルセルの内容を指定します。https://html-coding.co.jp/annex/dictionary/html/td/
見出しが横向きの表 <table border="1"> <thead> <tr> <th>見出し1</th> <th>見出し2</th> </tr> </thead> <tbody> <tr> <td>内容1</td> <td>内容2</td> </tr> </tbody> <tfoot> <tr> <td>フッタセル1</td> <td>フッタセル2</td> </tr> </tfoot> </table> タグの説明 タグ 説明 備考 <thead> 「table header」表の行（水平方向）をグループ化するタグです。<thead>～</thead>で囲まれた内容は、表のヘッダ部分としてグループ化され、<table>の中はヘッダ部分を表す<tread>～</tread>部分、ボディ（表の本体）部分<tbody>～</tbody>、フッタ部分<tfoot>～</tfoot>に分けられます。このように分けることでブラウザはヘッダとフッタを先読みして表示したり、ヘッダとフッタを固定表示したままボディ部分だけをスクロールさせたりすることができます。ただし、これらのタグに対応していないブラウザの場合は、フッタをボディより上に表示してしまうことがあります。https://html-coding.co.jp/annex/dictionary/html/thead/ <tr> 「table row」の略で表の行部分（横方向）を指定するタグです。https://html-coding.co.jp/annex/dictionary/html/tr/ <th> 「table header」の略で、表の見出しやタイトルとなるヘッダセルを作成するタグです。https://html-coding.co.jp/annex/dictionary/html/th/ <td> 「table data」の略で、テーブルセルの内容を指定します。https://html-coding.co.jp/annex/dictionary/html/td/ 条件一致で表示 <html lang="ja" xmlns:th="http://www.thymeleaf.org"> <!--中略--> <!--一覧表示--> <div th:if="${sampleList} !=null"> <table class="table" border="1"> <thead> <tr> <th>名前</th> <th>年齢</th> <th>趣味</th> </tr> </thead> <tbody> <tr th:each="entity:${sampleList}" th:object="${entity}"> <td><a th:href="@{/hoge(sampleName=*{sampleName})}" th:text="*{sampleName}"></a>名前にはリンク</td> <td th:text="*{age}">年齢</td> <td th:text="*{hoby}">趣味</td> </tr> </tbody> </table> </div> th:each属性の基本形 構文 解説 th:each="変数名 : コレクション" entityクラスとGetter,Setterを作っておくこと コレクション内の要素が変数（繰り返し用変数）に入り、「${変数名}」や「${変数名.プロパティー名}」で使用できる。 https://www.ne.jp/asahi/hishidama/home/tech/java/spring/boot/thymeleaf/th_each.html 見出しが縦向きの表 <table border="1"> <thead> <tr> <th>見出し1</th><td>内容1</td> </tr> </thead> <tbody> <tr> <th>見出し2</th><td>内容2</td> </tr> <tr> <th>見出し3</th><td>内容3</td> </tr> </tbody> <tfoot> <tr> <th>見出し4</th><td>フッタセル1</td> </tr> </tfoot> </table>
404 (Not Found)がでる Failed to load resource: the server responded with a status of 404 (Not Found) sassで記述するときパスがわかりづらい 統合先のstyle.cssからの相対パスを入力 記述中のVSCodeの補完機能のパスは、各scssからの相対パスになっているので、惑わされず統合先のstyle.cssの階層からの相対パスを入力する もしくはHTMLのタグに記述する 背景系はこちらの方がわかりやすかったりする 背景色 <body style="background: url(images/yellow.jpg);"> divタグにも <div class="animal" style="background-image: url(images/dog.jpg)"></div> デメリット *記述箇所が多いとHTMLコードの見た目が煩雑になる それでも適用されない場合 HTMLで記述したタグ名内に余分スペースがないか確認する （気づかないときは本当に気づかない） 1時間ハマった #タグ名のあとに半角スペースが２つある <body style= <div class="animal"
sassで画像を相対パスで記述すると変換がうまくいかず、画像が見つからないとき、HTMLのタグに記述する 背景色 <body style="background: url(images/yellow.jpg);"> divタグにも <div class="animal" style="background-image: url(images/dog.jpg)"></div>
