エンジニアのひよこ_level10

【毎日更新!】新卒4年目エンジニアブログです!

HTML

【HTML/XHTML】空要素の書き方の違いの理由<br />と<br>【979日目】

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

【CSS】クリックイベントが出来なくなるpointer-events: noneの特性と、使うべきときではない話【978日目】

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

【HTML】HTMLとXHTMLのどちらで書かれたか見分ける方法【977日目】

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

【HTML】<br>や<br />というタグの書き方の違いって?【976日目】

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

【HTML】hrefでJavaScript動かした場合の新しいウィンドウの挙動調査(理由まではなし)【974日目】

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つのボタンに対して 右クリックで新しいウィンドウを開く 右クリックで新しいタブで開く マウスホイール押してクリックする これらの結果は?…

【HTML・JavaScript】aタグにonclickではなく、hrefでJavaScriptを動かしたい【973日目】

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

【SpringBoot】th:replaceでHTMLパーツ化したら、JSも一緒にパーツ化する【930日目】

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>

【HTML】日本語でも、単語区切りで自動改行をする【929日目】

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

【HTML】英語等をスペースなしで書くと枠からはみ出る理由を考える【927日目】

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

【HTML】disabledとreadonlyの違い【922日目】

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

【HTML】tableタグでデザインするのは良くないってお話【921日目】

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

【HTML】クロスサイトスクリプティング?なぜ文字をエスケープする必要があるのか【920日目】

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

【HTML】inputタグのhiddenは使ってはいけない???【917日目】

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

【HTML】tableタグのセルを縦に結合する方法。rowspan【904日目】

テーブルのセル結合をしたい セルを結合したい。 前回は横に結合したが、縦に結合するにはどうしたらいいか。 名前は予想出来るが、どう動作するのか 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】tableタグのセルを横に結合する方法。colspan【903日目】

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

【JavaScript】画面を表示したら、一瞬描画途中の要素が見えてしまう【892日目】

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

【HTML】画面を縮めたときに、要素が二列に折り返すようにする方法【882日目】

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

【うっかり】tableタグの罠。要素が足りなかった【764日目】

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

【HTML】tableタグの中のtrタグとかをひとまとめにしたいとき【760日目】

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

【HTML】要素をテキスト入力可能にする属性contenteditable【629日目】

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

【html・xhtml】noindexを書いてるのに、noindexが動かない対応【601日目】

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

【HTML】<!DOCTYPE HTML>を書き忘れるとCSSが変わる?【557日目】

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

【HTML】一部のフォームの情報をsubmitで送りたくないとき【508日目】

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

【HTML】IEの時だけ文字を表示させるorさせないコード【319日目】

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

【HTML】typeに何も書かなかった時のbuttonタグの挙動。【295日目】

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

【IE】Formタグのsubmitで二重送信されてエラーが出る【294日目】

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

【HTML・JS】defer。書き順関係なく、HTMLの後にJSファイルを読み込む【227日目】

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

【html】inputのhidden属性が、毎回同じ値を出す?【218日目】

こんなコードがあったそうです。 <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…

【HTML】inputタグの丸いボタン、radioボタンの書き方【214日目】

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