親バカエンジニアのナレッジ帳

webのエンジニアをやっており、日頃の開発で詰まったことや書き残しておきたいことを載せています。

HTML

CSSで設定するclampとはどのような場面で使用するのか

CSSのclampとは? clampを使った実装例 clampのメリットとデメリット CSSのclampとは? CSSのclamp()関数は、指定された値の範囲内で値を制限するために使用されます。 この関数は、3つのパラメータを受け取ります:最小値、希望する値、最大値。 ブラウザは…

SpringBootでThymeleafの変更をビルドや再起動なしで反映させる方法

通常のThymeleafの変更反映 application.ymlもしくはapplication.propertiesにprefixの設定を追加 application.ymlの場合 application.propertiesの場合 通常のThymeleafの変更反映 SpringBootでテンプレートエンジンとして使用されるThymeleafですが、デフ…

amp-list内でsetStateで設定した値を使用する方法

amp-list内で条件次第で出し分けする方法 amp-list内にtemplateを設定すればsetStateの値を使用できる amp-list内で条件次第で出し分けする方法 amp-listはjsonを使用してリスト表示するパターンの使用が多いと思いますが、条件次第で出し分けしたいことがあ…

amp-date-pickerの初期値を今日(ページを開いた当日)にする方法

amp-date-pickerの初期値 dateオプションにPODを設定 amp-date-pickerの初期値 AMPでもカレンダー機能を使用するためには、amp-datepickerが便利ですが、オプションの設定は普通のJavascriptのdatepickerに比べてわかりづらく、詰まるポイントになります。 A…

AMPのcssを別ファイルに分けて記述する方法

AMPを記述する際のCSSの書き方 テキストファイルとして読み込ませる AMPを記述する際のCSSの書き方 AMPでHTMLを記述する際、CSSは基本的に外部ファイルに分けて記述することはできませんよね。 例えば以下の書き方でスタイルシートを読み込もうとするとエラ…

target="_blank"にはrel=noopenerを付けないと超怖い

target="_blank" rel="noopener"を付けないとどうなる? どんな場面で悪用されてしまうのか まとめ target="_blank" 外部ページへ遷移する際に使われるtarget="_blank"。 あまり知られていないのですが、そのまま使うと実はセキュリティ的なリスクをはらんで…

はてなブログのAMPページで記事ごとに手動でAdsenseを設置!

はてなブログのAMPページ デザインのカスタマイズの設定が効かない Google AdsenseをAMPページで反映 はてな記法の場合 Markdown記法の場合 Headにamp-adのJavascriptは必要? はてなブログのAMPページ はてなブログでは、有料アカウントであるPROになるとペ…

Vue.jsで配列の値をAPIでPOSTする方法

値を配列でPOST 方法1 dataで定義する変数を配列で初期化してv-modelに設定 チェックボックスの例) 複数のテキストフォームがある時の例) 方法2 POSTする前に配列にまとめてしまう方法 チェックボックスの例) 複数のテキストフォームがある時の例) まとめ 値…

box-shadowを使ったなんちゃってオーバーレイ

オーバーレイの通常の設置方法 なんちゃってオーバーレイ なんちゃってオーバーレイの欠点 オーバーレイの通常の設置方法 webサイトでモーダルを使用する場合、併せて背景にオーバーレイを入れますよね。 オーバーレイの設置する方法は少々面倒です。 モーダ…

Spring Boot Thymeleafで多言語化

多言語対応でサイトを作ることが多い現代だからなのか、 最近のフレームワークは多言語対応がとても簡単です。ここではThymeleafに表示される文字を多言語対応する方法を共有します。 基本的にはmessages_ja.propertiesや、messages_en.propertiesというよう…

FC2ブログで記事の直下にアフィリエイトリンクを貼る

私はFC2ブログでも記事を書いてますが、 アフィリエイト広告を載せています。 アフィリエイトはサイドメニューなどに載せてもいいですか、 きっと記事の下に毎回表示したいと考えている人もいるかと思います。 そんな人たちのために手順を共有しますので、参…

ファビコン(favicon)でアイコン設置

ファビコン(favicon)とは? ファビコンとは、いわゆるウェブサイトのシンボルマークです。 favorite icon (お気に入りアイコン)の略称になりまして、元々はウェブサイトをお気に入りやブックマーク登録した際に、お気に入りリストやブックマークリストの中で…