2024年5月– date –

タブメニューは、タブ選択によって 表示するコンテンツを切り替える機能を持ったメニューです。Heartタブを選択すると、Heartのアルバムの情報が表示れます。（ちなみに初期状態はHeartタブが選択する選択された状態となっています） ここで、Nightwishタ...

アコーディオンメニューとは、WEBサイトでは、よくある質問（FAQ）などで、よく使われる。例えば、初めは質問文の領域のみ表示し、その領域をクリックすれば、回答文を表示し、もう一度質問文をクリックすれば閉じる動作をするアニメーションである。 ①初...

AOSとは、下にスクロール時に、コンテンツまでスクロールしたタイミングで、そのコンテンツがふわっと表示されるアニメーションの仕組みのこと早速、HTMLとJSを記述します。 １）HTMLまず、ふわっとさせたいコンテンツの先頭に以下のように記述します <...

スムーススクロールとは、ヘッダーの項目などをクリックして同じページ内の別の位置に移動するときに、滑らかに動いてスクロールする表現のことです。HTMLでページ内リンクを作るだけでは、クリックしたときに瞬時にスクロールしてしまうので、閲覧者に違...

スマートフォンでのWEBサイトの画面で、画面の右上に上、中、下の三本線の図形が表示されている。これはハンバーガーメニューと言われ、そこをクリック（スマホではタップ）すると、メニューの項目が表示される。表示されたメニューの右上に×ボタンがあり...

ある地点まで縦にスクロールすると、上部の固定されたヘッダーの背景色や項目の色が反転するステッキーヘッダーについて今回は記述する。 今回は、ヘッダーの高さ分スクロールすれば反転するようにコードを記述する １）HTML <header class="heade...

WEBサイトのヘッダー作成は、初学者がつまずきやすい所で、またさまざまなパターンがあるので時間がかかりがちである。そこで、頻出のパターンを洗いだしました。 【１行のヘッダー】 １行のヘッダーで左端に会社のロゴ、右よりにメニュー項目、更に右端に...

WEBサイト制作でかなりの頻度で出てくるカードタイプのコンテンツ３枚横並びを記述してみました。なお、最近ではグリッドレイアウトで記述する人もいるかと思いますが、ここでは古典的な？フレックスボックスで記述してみました。 ①HTML <div class=&qu...

ホバーすると左から右に背景と文字色が反転するボタンです ①HTML <div class="detail-btn"> <a href="#">詳しく見る</a> </div> ➁CSS .detail-btn { background: #333333; color: #ffffff; font-size: 20px; ...

WEBサイトを作成する上で必ずといっていいほど、ボタンがあります。ボタンの場合、ある程度パターン化されているので、スニペットを作成しました。 【 タイトルのみのボタン　】 ①背景色のないボタン <div class="contact-btn"> <a hre...