今さら聞けないHTML 2022年04月04日

今さら聞けないHTML 2022年04月04日

SpringBoot × Thymeleaf タグ要素の中に式(値)を入れる方法

# はじめに
今回は、以下のように、親要素とその子要素のテキストをThymeleafの式で実装する方法について解説します。
※以下の記述にすると、親要素(h2タグ)の`th:text属性`の値しか表示されません。
“`html:sample.html


“`

# th:text属性について
ます、「なぜ、上記のような記法で親要素と子要素のどちらの値も表示できないのか」を解説します。

結論を言うと、「`th:text属性`を指定すると、**その要素の中身身全て(入れ子になっている要素も含む)** が`th:text属性`の値に置き換わるため」です。

それでも親要素と、入れ子になっている子要素に値を渡したい時があります。
そんな時にはThymeleafにある`インライン記法`を用いるとすんなり実装できます。

# インライン記法
インライン記法というのは、Thymeleafの式をth:**属性ではなく、直接HTM

元記事を表示

bootstrapで横並びレイアウトを実装

はじめに!

今回筆者は初めて記事を書くのでわかりにくい部分があるかもしれませんがご了承ください!:pray:
わかりづらいなどありましたら是非コメントをお願いします!:bow_tone1:
ではさっそく説明に入っていきたいと思います!

前提

この記事は以下の人にオススメです!
+ 楽にレイアウトを横並びにさせたい人!
+ HTMLのみを用いてレイアウトを横並びにさせたい人!
+ bootstrapのGrid(グリッド)システムを使ってみたいひと!

Gritシステムは様々な方法を用いてレイアウトを自在に変えることもできますが、今回は初心者の方のために簡単にレイアウトを横並びにする方法を紹介します!
もしGridシステムを用いて様々なことをしてみたいという方は、ネットで調べると様々な記事があると思うので是非そちらも調べてみてください!

1.bootstrapを導入する!

bootstrapを導入していない人は先にbootstrapの導入から行います!
導入を既に済まされている方は、“2.Grid(グリッド)システムとは?“進んでもらって大丈夫です!

元記事を表示

【爆速コーディング】Emmetはいいぞ!【HTML編】

# 爆速でHTMLをコーディングしよう
プログラマーの大事な要素の1つとして速さは割と大事な要素でもあります。同じ仕事をするのであれば、早いか遅いかを比較したときに早いほうが良いということは言うまでもない事実かと思います。

自分はよくHTMLのコーディングの速さにびっくりされることがあります。
ただそれは自分が爆速でタイピングをしているわけではなくある1つの知識を身に着けているからです。

この知識を早めに知ってぜひ他の同期や社員との差をつけちゃいましょう!

そしてその秘訣が明する「Emmet」です。
そして、`Emmet`の1たった0個のコツを押さえるだけで爆速コーディングが可能になります。

# Emmetとは
>Emmet(旧:Zen Coding)は既定形式の入力補完機能によりHTML、CSS、XML、XSL等を素早く編集できる、テキストエディタ用プラグインである。
(引用:wikipedia)

つまりは、HTMLやCSSを素早く編集できるプラグインを入れてそれを使っているということです。

## どうやって使うの
自分はVisual Studio Codeに標準で何も入

元記事を表示

navタグについて

## navタグとは
「navigation」の略で、HTMLではページ内の「指定部分や他のページへの誘導」を意味します。
navタグを使うことで、ユーザーがページ内のコンテンツを探す手間を省くことができます。

~~~html

  • お問合せホーム
  • 概要
  • お問合せ

~~~

上記のようにサイトのナビゲーション部分をnavタグで囲うのが一般的です。
また、ulタグやolタグのようなリスト要素とセットで使われます。

:::note warn
navタグはサイト内で複数回使えますが、使いすぎると見づらくなるので注意しましょう。
また、サイト下部の「利用規約」や「トップページに戻る」などのナビゲーションを作る場合はnavタグではなく、footerタグだけで十分です。
:::

## navタグで使用できる属性
* グローバル属性

* イベントハンドラ

| 属性 | 説明 |
|:-:|:-:|
| class | 要素にCSSスタイルを適用するた

元記事を表示

REST API(更新系)に対するCSRFにどう対処すべきか

# 結論

* 攻撃者サイトが用意したページにおける`

`での攻撃に対しては、カスタムヘッダ必須によるプリフライトチェックを入れると楽に対処できる。
* XSSに対しては、トークンチェックやカスタムヘッダ必須によるプリフライトチェックは通用しない。XSSに対して鉄壁の防御を構築するしかない。
* IEはWindows Updateしなければまだ使える(edgeの強制起動を回避できる)ので、IEの面倒を見続ける必要のあるサイトというのもあると思う。IEは[CSP](https://developer.mozilla.org/ja/docs/Web/HTTP/Headers/Content-Security-Policy)で`