ブラウザ幅（ピクセル）サイズによってタグ要素を変える方法【レスポンシブに使える】
ブラウザの幅（ピクセル）サイズを判別して、タグ要素を変更する方法です。 cssのメディアクエリを使用する方法では無く、JavaScriptの「resize」と「$(window).width()」を使用します。 レスポンシブサイトで要素を切り替える時に使えます。 CSSの記述例 ※ここは重要では無いので、必要に応じて書き換えてください。 <style type="text/css& […]
CSSでハンバーガー（三本線）をバツ（×）に切り替える方法【メニューボタンに使える】
- 2021.06.09
- メニューボタン, バツボタン, ×css, ハンバーガーメニュー
CSSを使ったハンバーガー（三本線）とバツ（×）ボタンを、簡単に切り替える方法です。 toggleClassを使ってclassを追加・削除します。 スマホサイトのメニューボタン等に使えます。 ハンバーガー（三本線）とバツ（×）ボタンをCSS記述 ※サイズ・色等は必要に応じて書き換えてください。 <style type="text/css"> body{ font-f […]
Chromeで画像を縮小表示したときの画像のぼやけを解消する方法
- 2021.06.08
- 画像ぼやけ
htmlページ上で実寸の画像サイズより縮小して表示させることがありますが、その際ブラウザのChromeで縮小画像が若干ぼやけてるときがあります。 その解消方法をご紹介します。cssの記述で解消されます。 CSS記述例 ※特に重要では無いので、必要に応じて書き換えてください。 <style> body{ font-family:Verdana,"Hiragino Kaku Go […]
複数画像スライダープラグイン【slick.js】
前回（複数画像スライダープラグイン【Swiper.js】）に続き、レスポンシブやスマホ・タブレットのスワイプに対応したスライダープラグインをご紹介します。 1．slick用cssファイル読込とデモ用CSS記述例 ※必要に応じて書き換えてください。 <link rel="stylesheet" type="text/css" href="./s […]
複数画像スライダープラグイン【Swiper.js】
レスポンシブやスマホ・タブレットのスワイプに対応したスライダープラグインをご紹介します。 jQueryは不要です。 1．swiper用cssファイル読込とデモ用CSS記述例 ※必要に応じて書き換えてください。 <!-- Link Swiper's CSS --> <link rel="stylesheet" href="./swiper-b […]
【デバッグで使える】alert文字を表示し、console.logに文字を出力
- 2021.05.28
- デバック
単純に文字を出力させるだけなのですが、JavaScriptを使用する人は確実に使用します。 処理中のデバック文を出力させる時によく利用します。 1．CSSの記述例 ※本記事に関して、CSSの記述は重要では無いので必要に応じて書き換えてください。 <style> body{ font-family:Verdana,"Hiragino Kaku Gothic Pro", […]
フラグを使わず複数要素を1つのJavaScript処理で表示非表示させる方法【slideToggle】
- 2021.05.27
- slideToggle, 表示非表示
繰り返しのテキスト要素があるページで、テキスト要素クリック直後のテキスト要素をslideToggleを使用し、表示・非表示させます。 処理フラグも必要無いし、一つ一つ処理を書かなくても良いので便利です。 よくある質問やFAQの質問に対する答えを表示・非表示させるページに使えます。 1．繰り返しテキスト要素のCSS記述例 ※必要に応じて書き換えてください。答えのテキスト要素は非表示（display: […]
クリップボードにJavaScriptでテキストをコピーする方法
PCやスマホを使ってる人は、テキスト選択してコピーすればよいだけなのですが、それをJavaScriptを使ってやる方法です。 1．クリップボートにコピーする対象のテキストclass=cliptxtを用意（CSSの記述例） ※このCSSの記述は重要では無いので、必要に応じて書き換えてください。 クリップボートにコピーする対象のテキストclass=cliptxtを用意します。 <style&g […]
クリックしたサムネイルにメイン画像を切り替える方法
クリックしたサムネイルにメイン画像を切り替える方法 imgタグのsrc要素をjQueryのattrを使って書き換えます。 例えばタブレット用の商品紹介カタログサイト等で使えます。 1．CSSの記述例 ※必要に応じて書き換えてください。 <style> body{ font-family:Verdana,"Hiragino Kaku Gothic Pro"," […]
Windows10でnpm-scripts開発環境～独自テンプレートを作ってみた
１．Node.jsのインストール Windows10環境にNode.jsをインストールしてください。 以下、参考ページです。 Node.jsのインストール – Windows環境でnpm-scripts 準備ができたら、 （※参考ページにもありますが以降、Windows PowerShellを起動してコマンドを実行してください） 開発ディレクトリにてPowerShellコマンド npm init […]