Column
コラム
ホームページ制作・運用・地方 Web マーケティングについて、現場の経験から発信しています。
全 29 件中 29 件を表示
-
UI実装【CSS】YouTubeをレスポンシブ対応で埋め込む方法！自動再生などのカスタマイズ方法も紹介します。
こんにちは。 すずき です。 この記事では、 WebサイトにYouTubeをレスポンシブ対応で埋め込む方法 と、 自動再生などのカスタマイズ方法 を紹介します。 このような人にオススメ YouTube動画をウェブページに埋め込みたいが、CS…
2026.04.11
- UI実装
【CSS】初心者でも簡単にできる！角丸のtableを作成する方法
こんにちは。 すずき です。 本記事では CSS で角丸のテーブルを作成する方法を紹介します。 このような人にオススメ 角丸のテーブルを作成する方法が分からない。 自分で角丸のテーブルを作ろうとするとなぜかうまくいかない。 既存のテーブルを…
2026.04.11
- UI実装
ハンバーガーメニュー展開時に背景をスクロールさせない方法
ハンバーガーメニューを開いた時、bodyタグをスクロールさせない ハンバーガーメニューを閉じた時、開いた時の位置に戻したい このような悩みにお答えします。 この記事では、ハンバーガーメニューが開いている間、 背景のスクロールを防ぐ方法につい…
2026.04.11
- UI実装
【超簡単】CSSのみでページトップボタンを実装する方法
ページトップボタンの実装方法がわからない。 ページトップボタンの動作の実装方法がわからない。 このような悩みに答えます。 webサイトでよく見かけるページトップボタン。スルスル〜っとトップまで移動してくれるので便利ですよね。 特にLPなど、…
2026.04.11
- 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
- UI実装
jsはコード1行だけ！rellax.jsで簡単にパララックスを実装する方法
こんにちは。すずきです。 この記事では、簡単にパララックスを実装できるプラグイン「rellax.js」の使い方を紹介します。 こんな人にオススメ パララックスを手軽に実装したい 複雑なjsコードは苦手 レスポンシブ対応が難しい 画像だけでな…
2026.04.11
- UI実装
【ScrollHint】要素がスクロール可能な時にヒントを表示するプラグインと使い方を紹介します！
この記事ではスクロール可能な要素にヒントを表示するプラグイン「 ScrollHint 」について解説します。 このような人にオススメ 横スクロールできることを伝える方法がわからずない ScrollHintの使い方がわからない スクロールヒン…
2026.04.11
- UI実装
【CSS】アニメーションで魅せる！アンダーラインにアニメーションをつける方法
こんにちは。 すずき です。 この記事ではCSSを使ったアンダーラインのアニメーション実装方法について解説します。 このような人にオススメ CSSでアンダーラインを付ける方法が分からない アンダーラインを付けたいが、そのままでは物足りない…
2026.04.11
- UI実装
ページ内リンクでハンバーガーメニューが閉じない原因と解決する方法
スマホサイトでよく使われるハンバーガーメニューですが、 ページ内リンクをクリックしてもメニューが閉じない 、というトラブルに遭遇したことはありませんか？ この記事では、 ページ内リンクをクリックした際にハンバーガーメニューを自動で閉じる方法…
2026.04.11
- UI実装
【CSS】counterを2桁で表示する方法を解説！01から始まる番号の作り方
こんにちは。 すずき です。 この記事では、 CSS の counter を2桁で表示する方法について解説 します。 昨日、以下のような投稿をしました。 CSSのcounter、これまで h2:before { content: "0" c…
2026.04.11
- UI実装
【jQuery】簡単！縦スクロールに合わせて要素を横に動かす方法
こんにちは。 すずき です。 縦スクロールに合わせて要素を横に動かしたい 横の動きも入れて立体的なパララックスを入れたい このようなお悩みに答えます。 縦スクロールのサイトで、スクロールに応じて要素を横に動かしたい時がありますよね。 自分も…
2026.04.11
- UI実装
【CSS】テキストの行数を制限し、文末3点リーダーにする方法
こんにちは。 すずき です。 テキストが長すぎてレイアウトが崩れる。 スマホでの表示が乱れて読みにくい。 テキスト省略の方法を知りたい。 複数行のテキストを省略したい。 本記事では、このような悩みにお答えします。 デバイス幅によってテキスト…
2026.04.11
- UI実装
【CSS&jQuery】スクロール時にふわっと表示するアニメーション実装方法
スクロールでふわっと表示するアニメーションを実装したい スクロールでふわっと表示するアニメーションにバリエーションが欲しい このような悩みにお答えします。 スクロールに応じてコンテンツをアニメーションさせる動作はよく要望される仕様の1つです…
2026.04.11
- UI実装
【CSS + jQuery】ハンバーガーボタンの作り方
ハンバーガーボタンの作り方がわからない ハンバーガーボタンの線が崩れる retina対応のハンバーガーボタンを作りたい このような悩みに答えます。 多くのwebサイトに実装されているハンバーガーメニュー。 メニューを表示するための3本線のボ…
2026.04.11
- UI実装
【コピぺOK】ハンバーガーメニューの中にアコーディオンメニューを入れる方法
ハンバーガーメニューにアコーディオンメニューを入れたい 自作WordPressテーマでもアコーディオンを入れたい このような悩みに答えます。 ハンバーガーメニューとアコーディオンは、サイトを見やすくするのに効率的です。 しかし、なかなか上手…
2026.04.11
- UI実装
【JavaScript】let、const、varの違いと使い分けを徹底解説
var , let , const の違いがわからない var , let , const ってどう使い分けるの？ このような悩みにお答えします。 JavaScript の文法でよく使う var , let , const ですが、 違いや…
2026.04.11
- UI実装
【CSS】最初の文字を大文字にする方法、最初の文字のデザインを変更する方法
CSSで英字の最初を大文字にしたい 最初の文字だけ色を変えたい 最初の行だけデザインを変えたい このような悩みに答えます。 この記事では、 ::first-letter や ::first-line を使った見出しの装飾方法、さらに tex…
2026.04.11
- UI実装
【MicroModal】モーダルを簡単に実装できるJSプラグインを紹介
モーダルウィンドウの作り方がわからない 使いやすいモーダルウィンドウの実装方法を知りたい。 パフォーマンスに影響を与えずモーダルウィンドウを実装したい。 このような悩みに答えます。 モーダルウィンドウは、ユーザーの注意を惹ける便利なツールで…
2026.04.11
- UI実装
【レスポンシブ対応】videoタグで読み込む動画をブレイクポイント毎に切り替える
スマホとPCで動画を出し分けたい スマホとPCで読み込む動画を変更したい 必要な動画だけ読み込みたい このような悩みに答えます。 この記事では、 JavaScriptを活用してビデオソースを動的に出し分ける方法とその利点 について詳しく解説…
2026.04.11
- UI実装
【JavaScript】実務でよく使うおすすめプラグイン一覧
おすすめのjsプラグインが知りたい プラグインの使い方について知りたい 簡単にサイトに動きを実装したい このような悩みに答えます。 JavaScriptとjQueryのプラグインは非常に重要なツールです。 これらのプラグインを理解し、適切に…
2026.04.11
- UI実装
【簡単】CSSのみでページトップボタンを実装する方法
※当サイトはアフィリエイト広告を使用しています。 ページの一番下まで読み進めた後、「上に戻る」までが遠い。 そんな小さなストレスを一発で解消するのがページトップボタンです。 実装はシンプル。 <body> にアンカーを置き、そこへ内部リンク…
2026.04.11
- UI実装
共通パーツをインクルード化！効率よくコーディングする方法
HTMLの共通パーツのインクルード方法がわからない方 インクルードのメリットとデメリットを知りたい方 JavaScriptを使ったインクルード方法を学びたい方 このような悩みを持つ方にオススメです。 この記事では、HTMLの共通パーツをイン…
2026.04.11
- UI実装
【初心者向け】ハンバーガーメニューの作り方【コピペOK】
ハンバーガーメニューは、スマホサイトではもう定番のナビゲーションです。 でも、実装となると案外やっかいなことが多くて、 ネットで拾ったコードが微妙に動かない 開閉アニメーションがぎこちない キーボード操作やスクリーンリーダーに対応していない…
2026.04.11
- UI実装
【ScrollHint】スクロール可能な要素にヒントを表示するプラグインと使い方を紹介
横スクロールできることをユーザーに伝える方法がわからない ScrollHintの使い方がわからない スクロールヒントの細かな設定方法を知りたい この記事では、スクロール可能な要素にヒントを表示するプラグイン「 ScrollHint 」につい…
2026.04.11
- UI実装
ハンバーガーボタンの作り方と実装ポイント【コピペOK】
※当サイトはアフィリエイト広告を使用しています。 スマホサイトやレスポンシブデザインで定番になっているのが「ハンバーガーボタン」です。 三本線のアイコンを押すとメニューが展開する仕組みで、ナビゲーションをコンパクトにまとめるときによく使われ…
2026.04.11