コラム

YouTube埋め込みレスポンシブ対応：崩れる原因と直し方

【JavaScript】実務でよく使うおすすめプラグイン一覧

おすすめのjsプラグインが知りたい プラグインの使い方について知りたい 簡単にサイトに動きを実装したい このような悩みに答えます。 JavaScriptとjQueryのプラグインは非常に重要なツールです。 これらのプラグインを理解し、適切に…

【レスポンシブ対応】videoタグで読み込む動画をブレイクポイント毎に切り替える

スマホとPCで動画を出し分けたい スマホとPCで読み込む動画を変更したい 必要な動画だけ読み込みたい このような悩みに答えます。 この記事では、 JavaScriptを活用してビデオソースを動的に出し分ける方法とその利点 について詳しく解説…

【MicroModal】モーダルを簡単に実装できるJSプラグインを紹介

モーダルウィンドウの作り方がわからない 使いやすいモーダルウィンドウの実装方法を知りたい。 パフォーマンスに影響を与えずモーダルウィンドウを実装したい。 このような悩みに答えます。 モーダルウィンドウは、ユーザーの注意を惹ける便利なツールで…

【CSS】最初の文字を大文字にする方法、最初の文字のデザインを変更する方法

CSSで英字の最初を大文字にしたい 最初の文字だけ色を変えたい 最初の行だけデザインを変えたい このような悩みに答えます。 この記事では、 ::first-letter や ::first-line を使った見出しの装飾方法、さらに tex…

【CSS + jQuery】ハンバーガーボタンの作り方

ハンバーガーボタンの作り方がわからない ハンバーガーボタンの線が崩れる retina対応のハンバーガーボタンを作りたい このような悩みに答えます。 多くのwebサイトに実装されているハンバーガーメニュー。 メニューを表示するための3本線のボ…

【CSS&jQuery】スクロール時にふわっと表示するアニメーション実装方法

スクロールでふわっと表示するアニメーションを実装したい スクロールでふわっと表示するアニメーションにバリエーションが欲しい このような悩みにお答えします。 スクロールに応じてコンテンツをアニメーションさせる動作はよく要望される仕様の1つです…

【jQuery】簡単！縦スクロールに合わせて要素を横に動かす方法

こんにちは。 すずき です。 縦スクロールに合わせて要素を横に動かしたい 横の動きも入れて立体的なパララックスを入れたい このようなお悩みに答えます。 縦スクロールのサイトで、スクロールに応じて要素を横に動かしたい時がありますよね。 自分も…

【CSS】counterを2桁で表示する方法を解説！01から始まる番号の作り方

こんにちは。 すずき です。 この記事では、 CSS の counter を2桁で表示する方法について解説 します。 昨日、以下のような投稿をしました。 CSSのcounter、これまで h2:before { content: "0" c…

【超簡単】CSSのみでページトップボタンを実装する方法

ページトップボタンの実装方法がわからない。 ページトップボタンの動作の実装方法がわからない。 このような悩みに答えます。 webサイトでよく見かけるページトップボタン。スルスル〜っとトップまで移動してくれるので便利ですよね。 特にLPなど、…

【CSS】YouTubeをレスポンシブ対応で埋め込む方法！自動再生などのカスタマイズ方法も紹介します。

こんにちは。 すずき です。 この記事では、 WebサイトにYouTubeをレスポンシブ対応で埋め込む方法 と、 自動再生などのカスタマイズ方法 を紹介します。 このような人にオススメ YouTube動画をウェブページに埋め込みたいが、CS…

【JavaScript】let、const、varの違いと使い分けを徹底解説

var , let , const の違いがわからない var , let , const ってどう使い分けるの？ このような悩みにお答えします。 JavaScript の文法でよく使う var , let , const ですが、 違いや…

【CSS】テキストの行数を制限し、文末3点リーダーにする方法

こんにちは。 すずき です。 テキストが長すぎてレイアウトが崩れる。 スマホでの表示が乱れて読みにくい。 テキスト省略の方法を知りたい。 複数行のテキストを省略したい。 本記事では、このような悩みにお答えします。 デバイス幅によってテキスト…

ページ内リンクでハンバーガーメニューが閉じない原因と解決する方法

スマホサイトでよく使われるハンバーガーメニューですが、 ページ内リンクをクリックしてもメニューが閉じない 、というトラブルに遭遇したことはありませんか？ この記事では、 ページ内リンクをクリックした際にハンバーガーメニューを自動で閉じる方法…

【CSS】アニメーションで魅せる！アンダーラインにアニメーションをつける方法

こんにちは。 すずき です。 この記事ではCSSを使ったアンダーラインのアニメーション実装方法について解説します。 このような人にオススメ CSSでアンダーラインを付ける方法が分からない アンダーラインを付けたいが、そのままでは物足りない…

【ScrollHint】要素がスクロール可能な時にヒントを表示するプラグインと使い方を紹介します！

この記事ではスクロール可能な要素にヒントを表示するプラグイン「 ScrollHint 」について解説します。 このような人にオススメ 横スクロールできることを伝える方法がわからずない ScrollHintの使い方がわからない スクロールヒン…

jsはコード1行だけ！rellax.jsで簡単にパララックスを実装する方法

こんにちは。すずきです。 この記事では、簡単にパララックスを実装できるプラグイン「rellax.js」の使い方を紹介します。 こんな人にオススメ パララックスを手軽に実装したい 複雑なjsコードは苦手 レスポンシブ対応が難しい 画像だけでな…

【CSS】tableの列（行）をスクロール時に固定する方法

こんにちは。 すずき です。 この記事ではtableのスクロール時に列や行を固定する方法について解説します。 このような人にオススメ テーブルのヘッダーを画面上部に固定したい テーブルの行をスクロール時に固定したい 列を固定したテーブルの実…

【CSS + jQuery】よく使うハンバーガーメニューの開閉アニメーション4選

こんにちは。 すずき です。 この記事では 実際によく使われるハンバーガーメニューの開閉アニメーション を紹介します。 こんな人にオススメ ハンバーガーメニューの開閉をオシャレにしたい ハンバーガーメニューの実装方法で指示を受けている ハン…

【レスポンシブ】tableタグを縦並びで表示する方法

こんにちは。 すずき です。 この記事では、 <table> タグを使った縦並びにする方法について紹介します。 こんな人にオススメ <table> タグを縦並びに表示する方法がわからない PCとスマホとで <table> タグの表示を切り替…

ハンバーガーメニュー展開時に背景をスクロールさせない方法

ハンバーガーメニューを開いた時、bodyタグをスクロールさせない ハンバーガーメニューを閉じた時、開いた時の位置に戻したい このような悩みにお答えします。 この記事では、ハンバーガーメニューが開いている間、 背景のスクロールを防ぐ方法につい…

【CSS】初心者でも簡単にできる！角丸のtableを作成する方法

こんにちは。 すずき です。 本記事では CSS で角丸のテーブルを作成する方法を紹介します。 このような人にオススメ 角丸のテーブルを作成する方法が分からない。 自分で角丸のテーブルを作ろうとするとなぜかうまくいかない。 既存のテーブルを…