1. ホーム /
  2. HTML

HTML

Thymeleafチートシート【Spring Boot】

thymeleafチートシート

　このチートシートでは、Spring Bootと連携して使うThymeleafの基本的な構文や使い方を一通り確認できます。変数の出力、条件分岐、ループ処理、フォームとの連携、共通パーツの再利用、JavaScriptとの連携まで、実践的なテンプレート開発に必要な知識を網羅的に確認できます。

　困ったらこのシート見れば解決できます！

続きを読む

簡単実装！jQueryで画像のズーム機能を実装する！–TamoTech–

ズーム機能サムネイル

今回は画像のズーム機能をjQueryで実装していきます！ギャラリーページや商品ページの画像にズーム機能をつけれるような関数を実装していきます．元画像上でカーソルを動かすと，そのカーソルに追従するようにズーム範囲が動く機能も実装します．今回は関数として機能を実装し，引数でズーム倍率を設定することができるようにします．

サンプルページ

続きを読む

今流行のダークモードをjQueryで実装する！！–TamoTech–

今流行のダークモードをjQueryで実装する

2020年9月20日にiOS 13のアップデートが行われ，ついに！待望の！ダークモードが実装されました！！このダークモードって見た目がかっこいいだけじゃないんです！ダークモードには，低照度時の目への負担の軽減，消費電力の低減等の利点があります．今回はWebページにおけるダークモードを「jQuery」を用いて実装していきます．

続きを読む

カスタム可能！！カーソルを追従するアニメーションを作る！–TamoTech–

マウスカーソルアニメーション

今回はカーソルの追従アニメーションについて，実際のコードを踏まえながら解説していきます．普通のサイトと比べてカーソルにちょっとしたアニメーションがあると，サイトが映えますよね！映えるサイトは小さな工夫の集まりです．ぜひカーソルのアニメーションを採用してみてください！

続きを読む