Column
コラム
ホームページ制作・運用・地方 Web マーケティングについて、現場の経験から発信しています。
全 68 件中 12 件を表示
-
UI実装【レスポンシブ】tableタグを縦並びで表示する方法
こんにちは。 すずき です。 この記事では、 <table> タグを使った縦並びにする方法について紹介します。 こんな人にオススメ <table> タグを縦並びに表示する方法がわからない PCとスマホとで <table> タグの表示を切り替…
2026.04.11
- UI実装
【コピペOK】ハンバーガーメニューの作り方を徹底解説【jQuery】
ハンバーガーメニューの作り方がわからない 使っているハンバーガーメニューが合っているのか不安 実務で使えるハンバーガーメニューを知りたい このような悩みに答えます。 現代ではほとんどのサイトに使用されているハンバーガーメニューですが、 HT…
2026.04.11
- UI実装
【CSS + jQuery】よく使うハンバーガーメニューの開閉アニメーション4選
こんにちは。 すずき です。 この記事では 実際によく使われるハンバーガーメニューの開閉アニメーション を紹介します。 こんな人にオススメ ハンバーガーメニューの開閉をオシャレにしたい ハンバーガーメニューの実装方法で指示を受けている ハン…
2026.04.11
- UI実装
【CSS】tableの列（行）をスクロール時に固定する方法
こんにちは。 すずき です。 この記事ではtableのスクロール時に列や行を固定する方法について解説します。 このような人にオススメ テーブルのヘッダーを画面上部に固定したい テーブルの行をスクロール時に固定したい 列を固定したテーブルの実…
2026.04.11
- UI実装
【コピぺOK】jQueryでスムーススクロールを実装する方法
こんにちは。 すずき です。 webサイトにスムーススクロールを実装したい ヘッダーの高さ分、スムーススクロールの位置をずらしたい 他のページに移動する時もスムーススクロールで遷移したい このような悩みに答えます。 スムーススクロールとは、…
2026.04.11
- CSS設計
【SCSS】色を変更できる便利な関数まとめ
こんにちは。 すずき です。 この記事では、SCSSの色を変更する関数で、自分がよく使うものをまとめました。 SCSSでは色の明度などを自動で計算して出力してくれますので、コーディングを効率的に行うことができます。 こんな人にオススメ CS…
2026.04.11
- CSS設計
【SCSS】Bootstrapのようにボタンの文字色と背景色を自動生成したい
こんにちは。 すずき です。 Bootstrapのようにボタンの色を指定すると、文字色とホバー色が自動で指定されるのが便利と思い Bootstrap以外でも使えるように自作して見ました。 実際のコード こちらが実装したコードです。 HTML…
2026.04.11
- UI実装
jsはコード1行だけ！rellax.jsで簡単にパララックスを実装する方法
こんにちは。すずきです。 この記事では、簡単にパララックスを実装できるプラグイン「rellax.js」の使い方を紹介します。 こんな人にオススメ パララックスを手軽に実装したい 複雑なjsコードは苦手 レスポンシブ対応が難しい 画像だけでな…
2026.04.11
- CSS設計
Bootstrapの使い方は？導入から実装まで初心者にもわかりやすく解説
こんにちは。 すずき です。 今回はBootstrapの使い方について解説します。 このような人にオススメ Bootstrapの使い方がわからない Bootstrap情報が多くてどれを見れば良いのかわからない Bootstrapのカスタマイ…
2026.04.11
- UI実装
【ScrollHint】要素がスクロール可能な時にヒントを表示するプラグインと使い方を紹介します！
この記事ではスクロール可能な要素にヒントを表示するプラグイン「 ScrollHint 」について解説します。 このような人にオススメ 横スクロールできることを伝える方法がわからずない ScrollHintの使い方がわからない スクロールヒン…
2026.04.11
- UI実装
【CSS】アニメーションで魅せる！アンダーラインにアニメーションをつける方法
こんにちは。 すずき です。 この記事ではCSSを使ったアンダーラインのアニメーション実装方法について解説します。 このような人にオススメ CSSでアンダーラインを付ける方法が分からない アンダーラインを付けたいが、そのままでは物足りない…
2026.04.11
- UI実装
ページ内リンクでハンバーガーメニューが閉じない原因と解決する方法
スマホサイトでよく使われるハンバーガーメニューですが、 ページ内リンクをクリックしてもメニューが閉じない 、というトラブルに遭遇したことはありませんか？ この記事では、 ページ内リンクをクリックした際にハンバーガーメニューを自動で閉じる方法…
2026.04.11