サイト制作

javascript

【jQuery】配列・連想配列の数を取得する方法

jQueryで配列の数を取得するには「.length」を使い、 連想配列の数を取得するには「Object.keys」と「.length」ます。 下のjQueryが利用方法になります。 jQuery // 配列の数を取得 var demo1 ...
javascript

jQueryで1回だけ実行するイベントを設置する方法

jQueryで1回だけ処理をする場合、便利な「one」メソッドというのがある。 「one」メソッドとは、メソッド名のままですが「1度だけ」実行する処理のことを言います。 処理を繰り返したくない時などに有効です。 一度しか押せないボタンの作り...
HTML

【HTML】動画(videoタグ)の枠線を消す方法

なぜかPCのchromeとかiPhoneのsafariだと出ちゃう枠線。 必要かな?と思うけど、白背景に白い動画とかだと要るのか。。。 でもvideoタグに枠線は要らないなぁ。 デフォルトで消えてたらいいと思います。 自分で使う基本のCSS...
javascript

【jQuery】特定の要素が表示されていたらを判定

jQueryで表示・非表示の判定って結構使います。 エラーテキストが表示されてたらとか、特定の画像が表示されてたらとか、友達のLINE見たら自分からの通知が非表示になってたりとか 判定するところっていっぱいある。 では、jQueryのコード...
CSS

【CSS】テキストを選択した時の背景や文字色を変更する方法

カーソルで文字を選択した時、なにも指定しないと青い背景で白文字になるけど、サイトのカラーに合わないなぁと思ったら変えよう! ページ全体を同じ感じにするときは、CSSで「::selection」の中に選択した時のスタイルを記述します。 // ...
javascript

【jQuery】パスワードの表示・非表示を切り替える方法

フォームのパスワードを入力する時、自分で打ったパスワードを見たい時ってあるよね。 同じパスワードを2回打つフォームもあるし、健忘症な自分は、 どんなパスワードを打ったかすぐ忘れちゃうので、表示できる機能があるとありがたいです。 ではデモとコ...
CSS

CSSで太字~細字の調整方法

なんとな~くだけど、タイトルは見やすく「太字」。テキストは読みやすく「細字」。 みたいにある日本語のウェブサイトの文字ルール。そんなルールも扱えなくちゃ従えないじゃない。 基本を押さえるために、学習は大事。 文字の太さの変更は「font-w...
CSS

CSSで角丸四角の作り方

ボダンや画像など、やんわりと表現したいときや、流行りのデザインっぽさを取り入れたいときに使うのがCSSのborder-radius。 border-radiusには2つの書き方があり「border-radius: 10px;(全部の角を10...
CSS

【CSS】iPhoneでsubmitボタンのスタイルをリセットする方法

作ったサイトをPCのchrome‌デベロッパー機能で確認して即、OK!即、提出した後、ウェブ担当者から 「送信ボタンがiPhoneで見ると変なんですけど…。」って確認不足で脇汗出ちゃうやつ。 iPhoneで見てみると角丸のグラデーションボタ...
javascript

【jQuery】今日の日付と、今の時間を取得

昔懐かしいウェブサイトには、サイドバーに今の時間とか「〇〇〇人目の訪問者です」とか表示されてましたね。 今のサイトでも今日の天気とか取得してたり、今日の日付と時間ってよくみる技術な気がします。 そこで、今日は下のdemoに今日の日付と時間を...
javascript

【jQuery】HTMLの書き換え方

ボタンを押した時などのユーザーのアクションによってHTMLを書き換える方法のご紹介です。 HTML要素内のテキストを書き換える方法 テキストだけを書き換える方法です。 $(".demo").text("書き換える内容"); HTMLタグも書...
javascript

jQueryでメディアクエリの指定方法|画面幅で判定

jQueryで画面幅からメディアクエリを行う方法のご紹介です。 画面幅を取得し、横幅によって表示を切り替えるデモとjQueryです。 画面を広げたり縮めたりしてみてください! DEMO これは、表示。 width:px jQuery // ...
javascript

jQueryでブラウザの横幅・高さを取得する方法|初回読み込み時、リサイズ時に取得

まずは、ウィンドウの横幅と高さを取得します。 DEMO 横幅:px 高さ:px // ウィンドウの横幅 var width = $(window).width(); // ウィンドウの高さ var height = $(window).he...
javascript

jQueryのセレクタ指定方法まとめ|よく使う指定方法から狂気の指定方法まで

jQueryでセレクタ(HTML要素)を指定する方法ですが、ずっとjQueryを使っていても指定方法が難しくって 結局いつもクラスを足しちゃったりしているので「覚えよう!」の意味を込めてまとめたいと思います。 ID、クラスの指定方法 $("...
javascript

jQueryのeachで繰り返し処理を実行する方法|HTML要素と配列で処理を繰り返す

HTMLの数ぶん要素を取得したいときや、配列に格納してある要素ぶん、処理を繰り返したいとき使うのがjQueryの「each()」。 「each()」を使った処理の繰り返し方法をデモを使いながら見ていきましょう。 HTML上の要素ぶん繰り返す...
広告