CSS

IEでセレクトボックスの矢印を消す方法

CSSでセレクトボックスのスタイルを作っていると、chromeやfirefox、EDGEは大丈夫なんだけれど 「IE」がやっぱりダメなんだよなぁ。 サポートは終わったけど、やっぱり対応しておかないとね。 全部同じ条件にした方がデザインしやす...
javascript

jQueryで画像を先読みする方法(プリロード)

jQueryで画像を先読みするしたい時、例えば他のページのトップ画像とかを先読みさせておけば 別ページへ遷移した時にスルッと表示できる。まるで遷移してないみたいに振舞えるんだ。 では、jsファイルの「function」のすぐ下に先読み(プリ...
javascript

jQueryで追加した要素にクリックイベントを設定する方法

jQueryで後から追加した要素は、普通にクリックイベントを設定しても動かない。 そんな時の解決方法のご紹介です。 後から追加した要素にクリックイベントを発火させる方法 例として下のHTMLをjQueryで追加します。 jQueryで追加し...
javascript

jQueryで親・先祖要素の取得方法

jQueryで親・先祖要素の取得方法のご紹介です。 例えばリストの中の「a」や「p」タグをクリックした時に 親要素のリストに何かアクションが必要な時などに便利な方法です! 親要素の取得 HTMLの「a」タグの親要素を取得する方法を例にして、...
CSS

ホバーした時にCSSだけで出来る様々な画像切り替え方法

CSSだけでホバーした時に、様々な画像切り替え方法のご紹介。 色んなパターンの画像切り替えサンプルを用意しますので、まずは基本のHTMLを。 このHTMLを書いて2枚画像を用意して、目的のCSSをコピペすれば同じ動きになります。 沢山サンプ...
javascript

jQueryでボタン連打を防止する方法

フォームやチュートリアルの「選択ボタン」や「進むボタン」、「戻るボタン」を作る時、 連打防止がついてるとめっちゃ親切。 ボタン連打防止があるサイトを見ると丁寧に作ってあるなぁと感心しちゃいます。 今回は、そんな関心出来るサイトを作るために付...
javascript

jQueryでinput、textareaの入力を検知する方法

jQueryでフォームのインプット、テキストエリアの入力を検知する方法のご紹介です。 入力検知にはいくつかあるので、DEMOで動きを確認しながらどれが最適か選択してください。 DEMO 「keypress」を使った入力検知|キーを押した時に...
javascript

jQueryで特定文字列より後ろを削除する方法

jQueryで特定の文字列以降を削除する方法のご紹介です。 特定の文字列以降を削除する時に自分の中で一番よく使う方法は「split()」を使ったもの。 「split()」は、指定文字列(「,」や「/」など)ごとに分割して配列に格納してくれる...
HTML

テキストエリア(textarea)を変更不可にする方法|HTML

フォームのテキストエリア(textarea)を変更できなくする方法のご紹介です。 テキストエリア(textarea)を変更できなくする場合は「readonly属性」を使います。 DEMO このテキストは消せません(意味はないですが文字をいろ...
javascript

jQueryでCSSを動的に変更・追加・削除する方法

jQueryでCSSを変更する方法のご紹介です。どうやってCSSを変更したらいいかわからない時などにご覧いただければ嬉しいです。
CSS

width 100%なのに、なぜはみ出た!?を解決する方法|CSS

幅を指定したのにはみ出ちゃう時「width」を98%とかに指定して何とかはみ出さないようにと考えちゃうけど、それは間違っている。ちゃんと「width:100%」でpaddingやborderを含んでいてもはみ出さない方法をご紹介します。
javascript

jQueryで「○○○」が含まれていたら|.indexOf()

jQueryで特定文字が含まれる時って色々方法がある。今回は「.indexOf()」を使った切り分けのご紹介です。
javascript

jQueryで現在のURLを取得

jQueryで今のページのURLを取得する方法は、「$(location).attr('href');」です!このページに動作確認のDEMOがあるので、気になる方はページを見に来てくださいね。
javascript

jQueryで、読み込みとリサイズ処理を一緒にと、ロードとリサイズ処理を一緒に書く方法

jQueryでロードとリサイズを一緒に書く方法のご紹介です。 $(function() { $(window).on("load resize", function() { // ロードとリサイズ時の処理 }); }); 次に読み込み時とリ...
HTML

HTMLでリンク先を別タブ・別ウィンドウで表示する方法

リンクを押したら別タブ・別ウィンドウで表示する方法のご紹介。 まずは別タブでの表示方法から。 aタグに「target="_blank"」を書くことで別タブで表示可能です。 別タブでリンクを開く方法 <a href="" target="_b...
広告