HTML CSS スクロールでロゴとヘッダーが切り替わるヘッダーの作り方【サンプルコードあり】
今回はヘッダーのロゴを画面スクロールでメインビジュアルを過ぎたところで別のロゴに変更する方法を記事にしました。デモコードも一緒に掲載しているので、ぜひ参考にしてみてください。最初のページ表示では通常ロゴが表示。スクロールが進み、今回はファー...
JavaScript
HTML CSS 
HTML CSS 【簡単実装】スクロールでテキストをフェードイン！HTML・CSS・JSの実践コード付き
今回は画面をスクロールして指定の場所が表示される時にテキストをフェードインで表示する方法を記事にしてみました。レスポンシブも簡単に行ってます。フォントは自作のフォントサイズ自動変更の値を使用してます。各セクションや画像はサンプル用で高さ固定...
HTML CSS 【CSS自作ツール】clamp()でpadding/marginもスマートに自動制御！リアルタイム計算＋コピー機能つき
clamp() はフォントサイズだけじゃないpadding や margin にも使えるので、今回その設定数値を計算して記入するためのコードを表示するツール作成してみた。padding や margin をclamp()で設定することで、 ...
HTML CSS 【CSS初心者向け】font-size: clamp() 自動計算ツールを自作！リアルタイム計算＆コピー機能付き
今回は、レスポンシブ対応で font-size を柔軟に設定したいけど、clamp() の計算が面倒…スマホでもPCでもバランス良いフォントサイズを自動で調整されるように設定したい。そんなあなたのために、今回は HTML・CSS・JavaS...
HTML CSS Popover APIを使ってオシャレなヘッダーを作ろう！【初心者向け・図解つき】
こんにちは 今回は最近話題のPOPOVER APIを使って、ヘッダーにポップオーバーメニューを作ってみました。今回は下記のようなヘッダーを作成しました。。Popover APIとは 簡単に言うと HTMLと少しのJavaScriptだけでモ...
JavaScript JavaScript switch文の使い方 サンプルコードあり
JavaScript switch文の使い方switch文基本的な書き方switch文は、指定した変数の値によって処理を分けることが可能になる。taisyouの中と、caseに記載した値が一致すれはtrueとなって、console.logの...
JavaScript JavaScript for文 繰り返し処理の指定 サンプルコード
JavaScript for文よく見るので覚えた方がいいかも、fo文は設定した条件がfalseを返すまで、処理をくり返す。例えばこんな感じになります。for (let i = 1; i < 50; i++){console.log(i);}...
JavaScript JavaScript条件分岐 if文の使い方 【サンプルコードあり】
JavaScriptで条件分岐をしたい場面は多くあると思います。例えば、「もし〇〇だったら、〇〇をする」などのような場面。そんな時は、if文を使うと指定可能です。if文の参考例1上記の式で、条件式の所にもし〇〇だったらの式を記入。例えば、定...
JavaScript drawer.js でドロワーメニューを簡単作成 でもjQueryのプラグインがあると動かない場合ある。【サンプルコードあり】
今回、drawer.js でドロワーメニューが簡単に装着できると効いたので早速実装してみました。実装はほんとに簡単で、head内にdrawer.cssなどを追加、body内に決められたコードを挿入。最後</body>の直前にscriptコー...
JavaScript 【サンプルコードあり】ハンバーガーメニューページ内リンク飛ばない時の解消はJavaScriptコード追加で簡単に出来た。
ハンバーガーメニューページ内リンク飛ばない時の解消JavaScriptを使って作成したハンバーガーメニューで、リンクをクリックした時に、ハンバーガーのウインドウが消えない状態の解消方法を書いていきます。ハンバーガーメニューから、リンクをクリ...