javascript jQueryで、読み込みとリサイズ処理を一緒にと、ロードとリサイズ処理を一緒に書く方法
jQueryでロードとリサイズを一緒に書く方法のご紹介です。$(function() { $(window).on("load resize", function() { // ロードとリサイズ時の処理 });});次に読み込み時とリサイズ...
サイト制作
javascript 
HTML HTMLでリンク先を別タブ・別ウィンドウで表示する方法
リンクを押したら別タブ・別ウィンドウで表示する方法のご紹介。まずは別タブでの表示方法から。aタグに「target="_blank"」を書くことで別タブで表示可能です。別タブでリンクを開く方法<a href="" target="_blank...
javascript jQueryで端末判定＆Androidバージョン判定
jQueryでの端末を判定する方法のご紹介です。まずは、PC、スマホ、タブレットを判定するコードを紹介します。DEMOあなたの端末はです！// ユーザーの端末情報を「use」に格納します。var use = navigator.userAg...
CSS CSSのposition:stickyを使ったスクロール特定範囲の固定方法
サイドバーやコンテンツで一定範囲、スクロールに追随する要素の作り方のご紹介です。まずは、デモで動きを確認してみよう。DEMO12345678910HTML<div class="demo1"> <div class="demo1_conte...
サイト制作 CSSのoverflow:scrollで横スクロールバーを消す方法
CSSで「overflow:scroll」を指定した時、縦だけでいいのに横にもスクロールバーが出てくる。この少しイヤな横スクロールバーを全ブラウザで消す方法の紹介です。CSS.demo { overflow-x: hidden; overf...
CSS CSSで高さの違う横並び要素を上揃えで配置する方法
「display:inline-block」を使って横並びにした要素の高さが違うと、思った配置にならない時が結構ある。そんな時に使うCSSのご紹介です。高さの違うコンテンツに下の「vertical-align」を指定すれば上揃えや下揃えや中...
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タグで書くとぐちゃぐちゃになっちゃうから、そんな時...
CSS CSSはどこに書くのが最適なのか
CSSの書くところは大きく分けて３つある。インラインで書くHTMLファイルに直接記述する。インラインで書く場合、なるべく「head」内にスタイルを記述。「head」内に書かなくてもスタイリングできるけど、コードが読み辛くなるのでなるべくね。...
CSS ニューモフィズム・ジェネレーター
2020年3月現在。最近流行っているニューモフィズムのジェネレーターがあると聞き使ってみたくなった。そもそもニューモフィズムってな～に？ニューモーフィズムは、一昔前に流行った「スキューモーフィズム」のリアルな質感と、フラットやマテリアルデザ...
CSS ドラッグで変化するカーソルの作り方｜CSS
Swiper.jsなんかを使う時、ドラッグして横にスライドできるけど矢印のままじゃユーザーに分かりずらいから、ちゃんとスライドできる範囲は「パー」にしてドラッグしたら「グー」にするCSS。【DEMO】お分かりいただけただろうか？エリアに入る...
CSS CSS｜iOS safariで滑らかスクロール
iOSで厄介な挙動をするCSSの「overflow:scroll;」でいつも通りの慣性スクロールを実現。-webkit-overflow-scrolling: touch;
