HTML CSS スクロールでロゴとヘッダーが切り替わるヘッダーの作り方【サンプルコードあり】
今回はヘッダーのロゴを画面スクロールでメインビジュアルを過ぎたところで別のロゴに変更する方法を記事にしました。デモコードも一緒に掲載しているので、ぜひ参考にしてみてください。最初のページ表示では通常ロゴが表示。スクロールが進み、今回はファー...
HTML CSS
HTML CSS 
HTML CSS サイトにYouTube動画を埋め込む方法と、クリックで再生させる実装手順をご紹介！
今回はサイトの中にYouTubeの特定の動画を埋め込み、クリックするとサイト内で再生される方法を動画にしてみました。動画をクリックすると、わざわざYouTubeに飛ばされずにその場で再生できたら便利なのにと思ったことないですか？今回は、Yo...
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だけでモ...
HTML CSS VSCodeでコード編集作成時に自動で保存されるように設定する方法
VSCodeで自動保存を設定する方法を図解で説明VSCodeでコード記入時の保存方法はデフォルト状態だと、入力・保存nosetteide. 後に手動で保存する必要があります。よく保存するのを忘れる場合があります。VSCodeの設定で、自動で...
HTML CSS テキストボックスにテキストを入力すると テキストの文字数をカウントするテキストボックスを作成しました！【サンプルコードあり】
今回は テキストボックスにテキストを入力すると テキストの文字数をカウントするテキストボックスを作成しました作成したのはこんな感じのものになります。指定した文字数を超える場合は エラーが表示されるようなテキストボックスを作成してみました。テ...
HTML CSS 【CSS初心者必見】サブグリッドで簡単にカード型デザインを作成する方法
CSSのグリッドレイアウトを活用し、効率的にデザインを整えたいと思ったことはありませんか？特にカード型デザインを統一感のあるレイアウトにしたい場合、サブグリッドを使うと驚くほど簡単に実現できます。この記事では、サブグリッドを使って、カード型...
HTML CSS ContactForm7 ラジオボタンリストの作成とカスタマイズする方法
ContactForm7で、ラジオボタンの選択項目を作成ContactForm7で、ラジオボタンの選択項目を作成する場合ContactForm7の設定画面で簡単に設定できます。ラジオボタンの選択項目を作成したいところにカーソル置いた状態にす...