Web制作

JavaScript

ページトップボタンを実装【React】

ある程度スクロールした後にWebページの最上部へ戻るボタン「ページトップボタン」。これをReactコンポーネントとして作成しました。本記事ではその中身について解説していきます。
JavaScript

ローディングアニメーションを連発させない【React】

Next.js(Reactフレームワーク)上でローディングアニメーションを実装した。しかし画面遷移のたびにローディングアニメーションが発動して鬱陶しい。そこで、「1セッションに対してローディングアニメーションを1回だけ発動させる」実装をやっ...
JavaScript

ReactでGSAP実装【デモサイトあり】

React学習がてらにデモサイトを制作しました。そのときにGSAPでローディングアニメーションを実装したので、そのときの備忘録を残していきます。
Web制作

バリデーションで使う正規表現を分解してみた

普段はコピペしたりしてなんとなく使っている正規表現。そんな正規表現について細かくみていきたいと思います。今回見ていくのは、メールアドレスが正しい形式であるかどうかを確認するための正規表現です。
HTML/CSS

メタディスクリプションがスニペットに反映されない?

スニペットはブラウザ検索からのユーザーに対して最初に伝える情報。そのため、コンパクトな文章にまとめ、検索結果に反映させたいところ。しかし、ディスクリプションがスニペットとして表示されないことがある。今回はスニペットが想定と異なるときの対応策について。
Web制作

【AWS】取得済みのドメインをRoute 53でDNS設定

AWS Route53にドメインを移管せず、現在のドメイン管理サービスをそのまま利用してAWS Amplifyでの独自ドメイン公開をしてみたので、その備忘録。
Git

【AWS Amplify】独自ドメインで静的Webサイト公開【Route53】

AWS AmplifyとRoute 53を活用すれば、静的サイトを簡単に公開し、独自ドメインで運用できます。手動アップロード不要の効率的なデプロイ環境が整い、スムーズにサイト運用が可能に。静的Webサイトを独自ドメインで公開する方法は色々ありますが、運用のしやすさはAWS AmplifyとRoute 53が圧倒的です。
HTML/CSS

【XServer Static】「公開設定ファイルの取得に失敗しました」【XServerドメイン】

Xserver Staticを使って静的Webサイトを無料で公開し、XServerドメインで取得した独自ドメインで公開できるようにしたい。しかし「公開設定ファイルの取得に失敗しました」というエラーに。設定手順を見直し、原因を探ってみた。
HTML/CSS

ExcelデータをJavaScriptでHTMLに反映【JSON】

クライアントから支給されたExcelデータをHTMLに反映しないといけないという場面に遭遇。そのデータは100行以上に渡るボリュームで、工夫なくHTMLに反映していけば一生終わらない。そこでJSONを使ってJavaScriptでHTMLを生成させることに。今回はそのときの備忘録と後日作ったデモ制作について紹介。