空要素とは 空要素というものがあって、中身がなくても完結しているタグがあります。 brやhrとかです。 これらは、マークアップ言語によって、書き方が違います。 マークアップ言語って？ HTMLやXMLなどのことで、文章の構造を可視化する書き方です。 普通の…

クリックイベントをなくしたい <button onclick="alert('test');">押せる</button> <button onclick="alert('test');" disabled>押せない</button> <button onclick="alert('test');" style="pointer-events: none;">押せない</button> このように、ボタンを押せなくする方法はいくつかあります。 どれも押せなくなるのであればいいじゃないかと思いますが、 挙動はそれぞれ違います。 そこで問題です。 タグを多重にした場合はどうな…

HTMLとXHTMLを見分けたい <br /> これはHTMLとXHTMLどちらで書かれているでしょうか。 どちらでも動きますし、どちらかわからないですね。 このように、一般的にファイルを見たときに、どの形式で書かれているかを判断する方法は、 拡張子や何かしらの形で、『この…

タグの書き方が違う？ brタグにおいて、 <br> <br /> という２つの書き方を見たことはないだろうか。 ニコ動とかだと後者をよく見かけます。 この２つはどう違うのでしょうか。 挙動は一緒 この２つ、HTML5においては、どちらを書いても動きます。 ではなぜ二種類ある…

HTMLのhrefにjavascript:xxx() HTMLのaタグで、hrefにJavaScriptを記述することが出来る。 <a href="javascript:window.location.href='https://www.google.com/'">google</a> <a href="javascript:history.back()">戻る</a> では、この2つのボタンに対して 右クリックで新しいウィンドウを開く 右クリックで新しいタブで開く マウスホイール押してクリックする これらの結果は？…

aタグでJavaScriptを動かしたい aタグでJavaScriptを動かしたい。 onclickを使ってもいいが、hrefで動かしたい。 <span onclick="submit();">ボタン</span> こんなふうに描けば、submitが動くが、 hrefを扱ってaタグでの挙動にしたい。 あるいは、デザインとか扱いの都合でaタグを使いたい。 …

th:replaceでパーツ化したい HTMLをパーツ化したい。 partsA.html <div id="parts" th:fragment="parts-fragment"> パーツ </div> このパーツを読み出す BaseB <div th:replace="partsA::parts-fragment"> このとき、 id="parts" を使ったJavaScriptがあった。 JavaScriptもパーツ化する partsA.html <div id="parts" th:fragment="parts-fragment"> パーツ </div> </div>

改行を単語区切りにしたい 英語では、単語と単語の間にスペースがあります。 従って、単語区切りで改行ということが可能で、ブラウザで自動的に単語単位で改行をしてくれます。 日本語は単語区切りというものがないです。 なので、『焼肉定食』という文字が…

半角文字を長く書く あああああああああああああああああああああああああ aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa こんなふうに、文字を打ち込んでデザインを確認したことがあると思います。 その時に、後者だと上手く動かないパターンがあ…

HTMLのformを使う Formタグを使うときに、 送信をしたいものと、入力を途中までしてもらったけど、 送信をしてほしくないものとかがある。 <form> <div>名前</div> <input type="text" name="name"> <div>ニックネーム</div> <input type="text" name="nick-name"> </form> 名前 ニックネーム データを送信したくない このとき、ユーザーが設定で名前を使わずにニック…

tableタグでデザイン 古のHTMLタグでの記述方法として、tableタグでデザインをなんとかするというテクニックがありました。 デザインのためだけに使うのはあまり良くないとかという声もいくつかあります。 そんなこと言ったって、実害ないのでは？ そう言わ…

文字をエスケープさせる？ HTMLを書くときに、ユーザーの文字入力はエスケープさせないといけないと聞いたことはありませんか。 Laravelで【{{ }}】をつかって、【{!! !!}】を使ってはいけないと言われたことはないですか。 SpringBootで【th:text】を使って…

inputタグのtype="hidden" <input type="hidden" name="id" value="1"> このように、inputタグには、hiddenというtypeがあります。 formタグでsubmitするときに、画面には表示されないけど、一緒にデータを飛ばすことが出来るものです。 ユーザーには入力させたくないけど、でもデータは送ってほしい。…

テーブルのセル結合をしたい セルを結合したい。 前回は横に結合したが、縦に結合するにはどうしたらいいか。 名前は予想出来るが、どう動作するのか rowspan rowspan="2"で、パラメータをつけたタグの『下のセルと結合』します。 <table> <tr> <th colspan="2">名前</th> </tr> <tr> <td>名字</td> <td>名前</td> </tr> <tr> <td rowspan="2">名字</td> <td></td></tr></table>…

セルを結合したい HTMLのセルを結合したい。 例えば、姓名でセルが分かれてるときに、タイトルを『名前』として一つにまとめたい。 colspan <table> <tr> <th colspan="2">名前</th> </tr> <tr> <td>名字</td> <td>名前</td> </tr> </table> colspanで、結合するセル数を指定。 これで、2つのthがセル結合されて、1つの名前というセル…

画面を描写した瞬間、ごちゃごちゃ動いてる ページを表示する時に、画面に一瞬要素の一部だけが表示されて、 その後完全な形が表示されることがある。 これは、HTMLの描写が終わった後にJavaScriptでHTMLを書き換えたりしているため。 かといって、JavaScrip…

要素が折り返す 画面を縮めた時に、文字やボタンとかが、綺麗に折り返してほしい。 結構普通なことのようで、実装すると難しいとかがあります。 ですが、これに関してもHTMLの基本をわかってると、すぐに使えます。 ということで、インライン要素の復習をし…

うっかり うっかり簡単なミスをしてしまう。 誤字、かっこの数、閉じタグ忘れ等々・・・ ケアレスミスこそ、間違いに気が付きにくい。 故に修正に時間がかかる。 そんなケアレスミスも、パターンを覚えておくと、比較的気づきやすい。 ってことで、ケアレス…

trタグをひとまとめにしたい <table> <tr>りんご</tr> <tr>ごりら</tr> <tr>ラッパ</tr> </table> こんな感じにHTMLが配置されてるときに、りんごとごりらをひとまとめにしたい。 例えば、こんな感じに出来たら問題なかった <table> <div class="hidden"> <tr>りんご</tr> <tr>ごりら</tr> </div> <tr>ラッパ</tr> </table> でも、tableタグの中でdivは書けないのでどうしよう…

divとかの文字を変えたい 既存のページとかで、たまに文字変えたいなと思うときがありませんか。 いつも、開発者ツールとかで書き換えたりしてますか。 contenteditable <div contenteditable=true> contenteditableという属性を持つと、その属性を持った要素は、クリックとかすると、</div>…

noindexをつけたい Googleのbotさんに自サイトを見てもらって、Google検索とかで表示されるようにしてもらう(インデックス)ことはありますが、 たまーに見てほしくないページもあります。投稿完了画面とか。 そういうときに、こういうようなタグをつけます。 <meta name="robots" content="noindex"></meta>…

ハマったポイント とあるプロジェクトで、同じCSS、同じHTMLの構成だと思ったのに、 どうしても同じデザインにならない。なぜだ？ってなりました。 違いはDOCTYPE そして、コードを読んでいくと、違いとしてあったのは以下。 あれ！？DOCTYPEが違う！？ 何…

フォームで、一部を送信したくない こういうときありませんか。 <form> <input name="age" type="text"> <input name="name" type="text"> </form> ユーザーが条件を満たしてなかったので、 inputの外見だけ用意して、nameを入力させたくない。 もっというと、submitの中に情報を含ませたくない。 そういうときはどうするか。 disabledを…

こんな時ありませんか ページを使っていたら、IE9以下だけ正しく動かない・・・ ページのデザインが崩れる・・・ そんな時、IE9以下だけこの文字を表示させないってコードを書きたい。 HTMLで分岐を書く これでOK! 注意 IE9までしか使えません!!! IE9以下は…

buttonタグについて質問されたので 昨日の記事でbuttonタグについて質問されたので。 よくある使い方 <form> <input></input> <button type="submit"></button> </form> これで、formのinputタグに書かれた内容を、pustで送る送信ボタンという使い方 typeを書かなかったら 自動的に、submitとして扱われます。 submitした…

こんなときがありました <form> <input></input> <button onClick="submit();"></button> </form> こんな感じの構成で、submitが想定通りに動かなかった。 私のときは、Laravelのバリデーションのエラーで、サーバーサイドを疑いそうになった。 ブラウザの問題なのに。 IEは二重送信をそのまま送る buttonタグのonClick()でsubm…

いつ使うの HTMLファイルの中でscriptタグでJSファイルを読み込むときで、 ・必ず読み込んでほしいとき ・HTMLを描画終わった後にJSファイルを読み込んでほしいとき 何書くの <script src="https://xxxxxx.jp/yyyyy.js" defer> scriptタグの最後にdeferを書く 何が起きてるの 通常:HTML読み込んでscriptタグ…

こんなコードがあったそうです。 <form> <input type="hidden" name="fruits" value="apple"> <button type="submit" value="送信"> <input type="hidden" name="fruits" value="orange"> <button type="submit" value="送信"> <input type="hidden" name="fruits" value="grape"> <button type="submit" value="送信"> </form> これで、どのボタンを押してもfr…

こんなやつ、見たことないですか？ りんごみかん 1234あ、これ押せるので試してみてください。 radioボタンって言います これはラジオボタンと呼ばれているもので、 『必ず１つだけ選ぶ』選択肢で使います。 片方を押したら、もう片方が消えるとかですね。 …