jQueryを使っていると、頻繁に要素のサイズや位置を取得する機会があります。サイズや座標を取得する関数は複数あって「どれがどこのサイズ、座標を取得するの？」ってごっちゃになりがちなので、今回はサイズ、位置関係のそれぞれのjQuery関数の違いなどをまとめて紹介したいと思います。 jQueryを使っていると、頻繁に要素のサイズや位置を取得する機会があります。 サイズや座標を取得する関数は複数あって「どれがどこのサイズ、座標を取得するの？」ってごっちゃになりがちなので、今回はサイズ、位置関係のそれぞれのjQuery関数の違いなどをまとめて紹介したいと思います。 目次 サイズ取得関係の関数 サイズ取得の基本 ページ全体のサイズやブラウザサイズを取得したい 要素の座標の取得方法 座標取得の基本 番外編：offsetParentってoffsetと関係あるの？ スクロールした距離を取得する方法

なんと、お問い合わせフォームやメール送信フォームはパパッと簡単に作れてしまいます。難しいのは、サーバー側での処理ですが、今回はいくつかの記事に分けて細かく詳しく説明していきます(>ω<) この記事では、htmlでメールフォームを作る時に使われるformタグ、inputタグ、selectタグ、textareaタグについて説明します。 実は、facebookのログイン画面やTwitterのアカウント登録画面、アンケートなどで入力するフォームもhtmlのformを使って記述されています。一度覚えてしまえば何かと使えそうですね！ 基本要素「formタグ」と「action属性」「method属性」 htmlでメールフォームを作るには、formタグを使います。 formタグにはaction属性とmethod属性を指定してあげることが必要です。 入力フォームや送信フォームを表示させたい時に使う form

レスポンシブのサイトの制作を行っていると、PCとTABとSPのそれぞれのレイアウトでそれぞれ別々のJSの動作をさせたいということがあると思います。それを実現するためにはJavaScript側から今どのレイアウトになっているのかという事を知る必要があります。 そこで今回はJavaScriptでのメディアクエリの判定方法についてご紹介します。 まずはやってしまいがちなNGパターン、続いてOKパターンをいくつかご紹介します。 NGパターン jQueryのwidthメソッドを使用して判定 OKパターン window.innerWidthプロパティを使用して判定 window.matchMediaメソッドを使用して判定 PC/SP時に表示/非表示にするコンテンツの表示/非表示の状態を読み取って判定 contentの値を使用して判定 font-familyの値を使用して判定 NGパターン まずはやって

筆者はPHP初心者です。なるべく間違いがないよう尽くしましたが、間違っていた場合はご指摘お願います。 文法 文字列はシングルもしくは、ダブルクォーテーションで囲む※「echo」は文字列を出力するための命令

AndroidやiPhoneのHTML,CSS,JavaScriptのバグまとめ AndroidやiPhoneなどのスマートフォンではHTML,CSS,JavaScriptにバグが多くてコーディングが大変になります。そこでバグを紹介しているサイト、記事をまとめてみました。(中にはバグではなく仕様なものもあるかもしれません) iOS 8.4.1の:hover問題 iOS 8.4.1で:hoverを指定していると1タップでページ遷移できない問題 【STINGER5】AndroidのChromeで＆nbsp;が「・」になってる気がする | ビビビッ &nbsp;を&emsp;に変更すると直るとのこと。 Mobile Safari 8でposition: fixedした擬似要素が完全に位置が固定されない - Weblog - Hail2u.net Mobile Safari 8でposition:

slickプラグインでasNavForを使ったときに、 クリックしても動かない 一応動くけど、挙動がおかしい など、起きたことないでしょうか？ 調べると、slickGoToを使って解決や、accessibility: falseで解決。 みたいなのを見かけたんですが、私は直りませんでした。 とりあえず私が解決した方法でご紹介 原因 公式の使い方と違う使い方をしている。 公式には(http://kenwheeler.github.io/slick/) <div class="your-class"> <div>your content</div> <div>your content</div> <div>your content</div> </div> <script type="text/javascript"> $(document).ready(function(){ $('.you

はじめに 『form 値 取得』とかで検索すると for 文で一通りチェックして... jQuery で要素を取得して val() で... ってのがヒットしますよね? これらの方法でも全然問題ないんですが, ピュアな JavaScript でもわりとスマートに値を取得, 設定することができます. っということで今回は, フォーム系要素の値をピュアな JavaScript で取得, 設定する方法を一通りまとめてみました. よかったら参考にしてください. デモ まずはデモです. 一通り form を並べてそれぞれ設定, 取得を行っています. console に各要素の値が表示されているのがわかるかと思います. コード デモのコードです. HTML <form name='mainForm'> <div> <h3>text</h3> <input name='_text' type='text

jQuery mobile で、Datepicker って指でタッチしにくいのでは？ といつも思ってたので、inputタグに readonly 属性をつけることを考えなかった。 スマホでは、Datepicker を使う場合、input 領域をタッチしてキーボードが出て不便。 readonly="readonly" を着ければキーボードは出現することなくDatePickerとして使える。 よくよく考えたら、ＰＣ用のＷｅｂページで、jQuery-ui Datepicker を使う時も、これでいいのだ。

こんにちは制作の奥田です。 お問い合わせフォームで、テキストフィールドやテキストエリアを装飾するのはとても簡単なんですが、セレクトボックスやチェックボックス・ラジオボタンの装飾はクロスブラウザの問題などでちょっとややこしいイメージをお持ちの方も多いと思います。 しかし、IE8以前のサポート終了によりIE9以降の対応でよくなったのを期に、フォームをデザインすることが容易になってきました。 せっかく良いデザインにしてもフォームの要素がデフォルトのままだとなんか残念な気持ちになりますよね？ というわけで今回はCSSのみでフォームを装飾する方法をご紹介いたします。 セレクトボックスの装飾まず、select要素の挙動を統一するため、要素をappearance: button;でボタン要素にしてしまいます。 select::-ms-expandでIEの矢印を非表示にします。 select:-moz-f

大きさ関係の jQuery のネイティブ書き換えの紹介です。 詳しくは 脱jQuery その1 をご覧ください。 height、width 関連だけでもそれなりに色んな種類があるので整理しつつ行きます。height()、width() に関してはこのページでは「設定」のみ扱います。取得する場合は色々ややこしい話があるので、次回の記事で詳しく場合を分けて説明します。 .height()（高さ設定） $("#main").height(50)書き換え JavaScriptdocument.getElementById("main").style.height = "50px".css() と考え方は同じです。「高さ」を設定するので style を使います。JavaScript の方は "50px" と「px」の単位が入っていることに気をつけます。jQuery の方はあっても無くても自動でやって

Help us understand the problem. What is going on with this article?

2017年 12月1日 15時10分 5年前 インプットフォームに入力出来る " 文字の種類 "や " 文字数 " を制限させる  javascript用のライブラリ  「imaskjs」の紹介です。 必要情報を 入力フォームで データを登録する時、 サーバーに送信する前に 値の整合性が取れているかチェックする為に バリデーションを用いることはよくあります。 下のインプットフォームの画像を例に取ると、" 郵便番号は 7桁 ", " 携帯電話 の番号は 11桁 " + どちらも数字 の必要があります。 郵便番号のフォームに " 七桁の数字以外 " が入力されていれば、「郵便番号が正しくありません」のような メッセージを表示させるところですが、" 七桁の数字までしか入力出来ないように入力自体を制限する " そんな事が簡単に出来る javascript 用の ライブラリ が「imaskjs」です

2018年4月5日 CSS 画像の一覧を表示する時などは、画像のサイズが統一されていると並べて表示させてもすっきりキレイに整って見えますが、必ずしもサイズが同じとは限りません。かといってPhotoshopを使ってすべての画像をリサイズできない…ということもあるでしょう。そんな時はCSSでトリミングすると楽です！今回は「object-fit」というプロパティーを使って、画像の縦横比を保ちつつトリミングする方法を紹介します。 ↑私が10年以上利用している会計ソフト！ 画像を中央の位置でトリミングする まずはこの縦長の画像、横長の画像を並べ、縦横250pxの正方形の形で表示させてみましょう。 img { width: 250px; height: 250px; } CSSでこのように画像に対してサイズを指定すると… こんな感じでグチャッとつぶれて表示されちゃいます…。 そこで画像に対して obj

はじめに jQuery非依存でスムーススクロールを実装できる「smooth-scroll.js」をご紹介します。 軽量で、easingも複数用意されています。 公式DEMOはこちら 使ってみる まずダウンロード こちらから 設置する jsの読み込み パスは適宜変えて下さい。 <script src="assets/js/smooth-scroll.js"></script> アンカーリンクを設定 使用したいアンカーリンクに「data-scroll」を付与します。 <a data-scroll href="#anchor01">アンカー1へ</a> jsを実行 ページの下部に記述するのが推奨されています <script>var scroll = new SmoothScroll('a[href*="#"]');</script> これだけでスムーススクロールが実装できます。 あとは必要に応じ

This domain may be for sale!

2014.08.18 ▼2021年最新版 【コピペOK】制作会社が実際に使っている、レスポンシブ対応のtableレイアウト スマホ対応・レスポンシブが当たり前になってきてるこの時代、コーダーさんにとって table がなかなかやっかいものになってきてますね… 会社概要くらいならまだ良いんですが、情報量が多い table はそのままでは 320px で閲覧した際、なかなか悲惨な事に… 対応方法としては『responsive-table.js』を代表に、様々なやり方がありますが、今回はCSSで出来る事を紹介したいと思います。 目次 2セルの場合の使用した例 横に長い場合 overflow-x と inline-block を使用した例 リスト風にした場合 list-item を使用した例 最後に 2セルの場合の使用した例 2セルでよく作られてる、会社概要やフォームなどで使えるかと思います。 『

jQuery には多くの移動用の命令がありますが、JavaScript には前回の2つ「insertBefore」「appendChild」しかありません。 詳しくは 脱jQuery その1 をご覧ください。 $("#main").after($("#nav"));書き換え JavaScriptdocument.getElementById("main").parentNode.insertBefore(document.getElementById("nav"), document.getElementById("main").nextElementSibling);書き換え JavaScript（変数使用版）var myMain = document.getElementById("main"); myMain.parentNode.insertBefore(document.getE

概要 JavaScript の配列は動的なもので、他の言語で言えば ArrayList に近いものです。そして、作成(構築)と初期化の方法も様々なので、ここでまとめてみました。 Array コンストラクタを使って長さ 0 の配列を作成する。 [] を使って長さ 0 の配列を作成する。 初期値を持つ配列を Array コンストラクタを使って作成する。 初期値を持つ配列を [] を使って作成する。 初期値を持たない指定した長さの配列を作成する。 from メソッドを使って配列から新しい配列を作成する。 from メソッドを使って文字列から文字の配列を作成する。 of メソッドを使って値の並びから配列を作成する。 サンプル Array コンストラクタを使って長さ 0 の配列を作成する。 昔の JavaScript ではこういう書き方しかできなかった気がします。

引数1: for文の開始前に実行されます。下記の様に省略可能です。 for(;i<l;i++){} 引数2: for文内部処理の実行前に評価されます。引数2がtrueであれば、内部処理が実行されます。 引数3: for文内部処理実行後に実行されます。下記の様に省略可能です。 for(var i=0;i<l;){ i++ } ■パターン別の比較 前提①: dataは配列とする 前提②: 対象は data 内のすべてのプロパティとする 1. 初心者向けの本によく紹介されているパターン