CSS 【CSS】テキストを選択した時の背景や文字色を変更する方法
カーソルで文字を選択した時、なにも指定しないと青い背景で白文字になるけど、サイトのカラーに合わないなぁと思ったら変えよう！ ページ全体を同じ感じにするときは、CSSで「::selection」の中に選択した時のスタイルを記述します。 // ...
CSS 
javascript 【jQuery】パスワードの表示・非表示を切り替える方法
フォームのパスワードを入力する時、自分で打ったパスワードを見たい時ってあるよね。 同じパスワードを２回打つフォームもあるし、健忘症な自分は、 どんなパスワードを打ったかすぐ忘れちゃうので、表示できる機能があるとありがたいです。 ではデモとコ...
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タグも書...
PHP PHPでメディアクエリ｜スマホ・タブレット・PCの切り分け
CSSやjQueryでは、よくやるメディアクエリの指定。 PHPでも同じことができる！ PHPでメディアクエリする時、いい点はブラウザでソースを表示した時、他のコードがソースに表示されないからきれいに見える。 さらに、javascriptの...
javascript jQueryでメディアクエリの指定方法｜ユーザーエージェントで判定
jQueryでユーザーエージェントからメディアクエリを行う方法のご紹介です。 ユーザーエージェントを取得し、表示を切り替えるデモとjQueryです。 様々なデバイスやデベロッパーツールで確認してみてください！ DEMO このページをで見てい...
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上の要素ぶん繰り返す...
javascript 【jQuery】文字が1文字ずつ出るアニメーション作成方法
タイトルとか、サイトのキャッチをアニメーションで出す時、 一文字ずつフワッフワッと出てくると「おっ！」ってなるじゃない。 そんな「おっ！」を聞きたくて一文字ずつ出るテキストを作成してみたいと思います。 まずはdemoでどんな感じのアニメか確...
CSS placeholder(プレースホルダー)の文字色を変える方法
Placeholder(プレースホルダー)の色を変える方法のご紹介です。 IEと古いEDGEに対応しています。 今のままだと文字色がピンクになっちゃうから、サイトに合う色に変えてね！ input::placeholder { color: ...
