javascript jQueryで、読み込みとリサイズ処理を一緒にと、ロードとリサイズ処理を一緒に書く方法
jQueryでロードとリサイズを一緒に書く方法のご紹介です。 $(function() { $(window).on("load resize", function() { // ロードとリサイズ時の処理 }); }); 次に読み込み時とリ...
javascript 
HTML HTMLでリンク先を別タブ・別ウィンドウで表示する方法
リンクを押したら別タブ・別ウィンドウで表示する方法のご紹介。 まずは別タブでの表示方法から。 aタグに「target="_blank"」を書くことで別タブで表示可能です。 別タブでリンクを開く方法 <a href="" target="_b...
javascript jQueryで端末判定＆Androidバージョン判定
jQueryでの端末を判定する方法のご紹介です。 まずは、PC、スマホ、タブレットを判定するコードを紹介します。 DEMO あなたの端末はです！ // ユーザーの端末情報を「use」に格納します。 var use = navigator.u...
CSS CSSのposition:stickyを使ったスクロール特定範囲の固定方法
サイドバーやコンテンツで一定範囲、スクロールに追随する要素の作り方のご紹介です。 まずは、デモで動きを確認してみよう。 DEMO 1 2 3 4 5 6 7 8 9 10 HTML <div class="demo1"> <div clas...
サイト制作 CSSのoverflow:scrollで横スクロールバーを消す方法
CSSで「overflow:scroll」を指定した時、縦だけでいいのに横にもスクロールバーが出てくる。 この少しイヤな横スクロールバーを全ブラウザで消す方法の紹介です。 CSS .demo { overflow-x: hidden; ov...
CSS CSSで高さの違う横並び要素を上揃えで配置する方法
「display:inline-block」を使って横並びにした要素の高さが違うと、思った配置にならない時が結構ある。 そんな時に使うCSSのご紹介です。 高さの違うコンテンツに下の「vertical-align」を指定すれば上揃えや下揃え...
javascript jQueryで加速度センサー値の取得と使い方【iOS16対応】
スマホの加速度センサーを利用する方法のご紹介です。 加速度センサーとは、傾きを取得するセンサー。 近年、プライバシー保護やセキュリティー面が厳しくなり、特にiOS（iOS13以降）は、ユーザーの許可が無いとセンサーの値を取得できないくらい厳...
javascript jQueryでジャイロセンサー値の取得と使い方【iOS16対応】
スマホのジャイロセンサーを利用する方法のご紹介です。 ジャイロセンサーとは、回転や傾きを取得するセンサーでスマホでも、画面の向きの変化を取得するのに利用されている。 近年、プライバシー保護やセキュリティー面が厳しくなり、特にiOS（iOS1...
javascript jQueryでチェックボックス（cheked）を取得・判定・外し方
チェックボックスの判定をするjQueryと、チェックボックスの取得、外し方も一緒にご紹介します。 まずは判定、取得、チェックを外すボタンの全部入ったデモをどうぞ！ DEMO あなたの好きな麺は？ 蕎麦 スパゲッティ 吉牛 全てチェック全て外...
HTML input type属性でブラウザキャッシュを利用する｜CSS
LPやメルマガ、お問い合わせやショッピングカートなどウェブでは様々な入力フォームがある。 入力フォームは、とても面倒でその面倒がサービスからの離脱につながります。 私たちフロントの人間は少しでもサービスからの離脱を防ぐため、デザインやスクリ...
CSS 背景（background）を２つ以上設置するCSSの書き方
CSSでレイアウトしていて上下に画像を配置する時、HTMLにIMGタグで配置するかCSSで「background」を使用するか迷うところ。 デザインがコンテンツぎっしりの場合、HTMLにIMGタグで書くとぐちゃぐちゃになっちゃうから、そんな...
PHP 【PHP】PHPでリダイレクト
本当は「.htaccess」内で書いた方が良いですが、色々な事情でphpでのリダイレクトは、phpファイルの先頭に以下の関数を記述すれば可能です。 「Location:」の後のURLはリダイレクト先のURLにしてください。 「true, 3...
javascript 【jQuery】ソート機能を自力で実装
jQueryでソート機能を作るには、何かのリストが沢山ある必要がある。 なにのリストにしようか........ネジメーカーにしようか！ 山手線の連結部分は、沢山のネジで止めてあるからこれ全部取ったら、後ろの車両との連結ができなくなっちゃうの...
javascript 【jQuery】特定文字列が含まれているかを判定｜:contains()
特定文字列が含まれている時、手間かかるかもと思っていたけどif文も書かずにクリア出来て嬉しかったのでご紹介します。 今回はリストの中に、特定文字が存在していたらを判断します。 下のボタンを押して特定文字列が含まれる文字色を変更します。 Go...
CSS 【CSS】テキストを左揃え、右揃え、中央揃え
テキストの中央揃え、右揃え、左揃えはページを作っていると必ず出てくる指定の一つ。 それらの指定プラス、行が多くなった時に綺麗に見える指定方法をDEMOと一緒に見ていきましょう。 中央揃え 初めての真ん中ブログ CSS p { text-al...
