CSS CSSで高さの違う横並び要素を上揃えで配置する方法
「display:inline-block」を使って横並びにした要素の高さが違うと、思った配置にならない時が結構ある。そんな時に使うCSSのご紹介です。高さの違うコンテンツに下の「vertical-align」を指定すれば上揃えや下揃えや中...
CSS 
javascript jQueryで加速度センサー値の取得と使い方【iOS16対応】
スマホの加速度センサーを利用する方法のご紹介です。加速度センサーとは、傾きを取得するセンサー。近年、プライバシー保護やセキュリティー面が厳しくなり、特にiOS（iOS13以降）は、ユーザーの許可が無いとセンサーの値を取得できないくらい厳しい...
javascript jQueryでジャイロセンサー値の取得と使い方【iOS16対応】
スマホのジャイロセンサーを利用する方法のご紹介です。ジャイロセンサーとは、回転や傾きを取得するセンサーでスマホでも、画面の向きの変化を取得するのに利用されている。近年、プライバシー保護やセキュリティー面が厳しくなり、特にiOS（iOS13以...
javascript jQueryでチェックボックス（cheked）を取得・判定・外し方
チェックボックスの判定をするjQueryと、チェックボックスの取得、外し方も一緒にご紹介します。まずは判定、取得、チェックを外すボタンの全部入ったデモをどうぞ！DEMOあなたの好きな麺は？ 蕎麦 スパゲッティ 吉牛 全てチェック全て外すGO...
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, 301...
javascript 【jQuery】ソート機能を自力で実装
jQueryでソート機能を作るには、何かのリストが沢山ある必要がある。なにのリストにしようか........ネジメーカーにしようか！山手線の連結部分は、沢山のネジで止めてあるからこれ全部取ったら、後ろの車両との連結ができなくなっちゃうのかな...
javascript 【jQuery】特定文字列が含まれているかを判定｜:contains()
特定文字列が含まれている時、手間かかるかもと思っていたけどif文も書かずにクリア出来て嬉しかったのでご紹介します。今回はリストの中に、特定文字が存在していたらを判断します。下のボタンを押して特定文字列が含まれる文字色を変更します。 Goog...
CSS 【CSS】テキストを左揃え、右揃え、中央揃え
テキストの中央揃え、右揃え、左揃えはページを作っていると必ず出てくる指定の一つ。それらの指定プラス、行が多くなった時に綺麗に見える指定方法をDEMOと一緒に見ていきましょう。中央揃え初めての真ん中ブログCSS p { text-align:...
javascript ビンゴ抽選をjQueryで作る！
Youtuber江頭さん、元SMAP草薙さんのチャンネル登録者数が100万人達成したよって動画見てなんかすごい時代だなぁ～って思いつつ。 今回はjQueryでクリック数の取得をしてみたいと思います。 さらに、応用編があるのでそちらも見てくだ...
javascript 【jQuery】ドロップダウンメニューをコピペで簡単に作る方法
ドロップダウンメニューをHTMLとCSSとjQueryで簡単実装しよう！DEMOドロップダウンメニュー ドロップダウン1 ドロップダウン2 ドロップダウン3 ドロップダウン4 ドロップダウン5 ドロップダウン6下のHTMLとCSSとjQue...
javascript 【javascript】コピペで簡単にスライドショーを設置する方法【Swiper.js】
自力でスライダーを設置するのは簡単だが、スライダーの「当たり前」機能を付けるのがすごい手間だったりする。「レスポンシブ対応」や「スワイプやマウスオーバーでの操作」、「スライドの数が増えた時のスクリプト、スタイルの修正」、「Next,Prev...
CSS 【CSS】画像を隙間無く横並びにするいくつかの方法
画像を横並びにする時なぜか空く隙間。その隙間を埋めてレイアウトする方法をいくつか紹介します。CSSでのレイアウトで利用しやすいものをご利用ください。【inline-block】で横並び要素を横並びにする時よく使うのが「display:inl...
CSS 【CSS】テキストの縦書き！
「和」を感じさせるサイトや、「西尾 維新」のサイトのように原稿をテーマにしたサイトを作る時、必ず必要になるHTMLでの文章の縦書き方法を解説。文章の縦書き全ブラウザがこのタグに対応しているが、IE11だけにはベンダープレフィックスを付ける必...
