未分類 スクロールで固定されるヘッダーを作成する方法
ウェブサイトをブラウジングしていると、スクロール途中でヘッダーが固定される動作をよく見かけます。この機能は、ユーザーがページをスクロールしても重要なナビゲーションや情報を常に表示するために役立ちます。今回は、HTML、CSS、JavaScr...
未分類
未分類 
未分類 コンテンツをコンパクトに! プラスアイコン付きアコーディオンの作り方
ウェブサイトでは、文字情報やリンク、画像などのコンテンツを効率的に表示する必要があります。そこで活躍するのが「アコーディオン」と呼ばれるUIデザインパターンです。アコーディオンではコンテンツを折りたたんで見せることができ、ユーザーが必要な情...
未分類 簡単コーディング! スクロールに合わせて表示されるTOPへ戻るボタンの作り方
長いウェブページを閲覧する際、ページの最下部までスクロールしてしまうと再びページトップに戻るのが面倒です。このような課題を解決するために、スクロールに合わせてTOPへ戻るボタンを表示させる機能を実装することをおすすめします。シンプルな機能で...
未分類 【HTML】detailsのname属性が便利！
<details>要素にname属性を与えます。同じname属性を持つ複数の<details>要素はセマンティックなグループを形成し、排他的アコーディオンとして振る舞います。つまり、<details>要素の1つを展開すると、他の展開していた...
Web技術 【Vue.js】vue.jsでモーダルを作る方法
モーダルは、Webアプリケーションでポップアップウィンドウを表示するための重要な要素です。Vue.jsを使用すると、モーダルを簡単に作成できます。この記事では、Vue.jsを使ってモーダルを作成するステップバイステップの方法を紹介します。初...
Web技術 【css】CSS変数で配列のように複数の値を扱えるようにする方法
See the Pen Untitled by 山崎毅 (@lvfthhbg-the-flexboxer) on CodePen.
未分類 【CSS】scroll-padding-topを使ってアンカーリンクの固定分ずれる不具合を解消
scroll-padding-topを使う機会があったのでメモ。以下のコードを追加するだけで解消されるのでぜひためしてみよう。html { scroll-padding-top: 100px;//ヘッダーの高さを指定}
未分類 【JS】最初からコンテンツが非表示のタブ切り替えの実装方法
html<!--ここがタブ--> <ul class="tab"> <li><a href="#tab1"><img src=" alt="tab1"></a></li> <li><a href="#tab2"><img src=" alt...
未分類 【jQuery】クリックした要素にクラスを追加し他の要素をクリックしたらクラスが外れるようにする方法について
jQuery$(function(){ $('.tab_item').click(function(){ $('.tab_item').removeClass('on'); $(this).addClass('on'); }) })
未分類 ブログ始めます。
普段は、動画編集やWeb制作をメインに活動しています。このブログでは、下記の情報を中心に配信していく予定です。よろしくお願いします。動画編集の役立ちそうな情報Web制作で役立ちそうな情報読んで良かった本の紹介実際にプレイして良かったゲームの...