はてなブックマーク

table要素内である要素にflex-wrapプロパティのwrapを指定すると、IE10とIE11で効かず（折り返されず）幅が超えてしまう現象が発生します。 他のブラウザ： IE10とIE11： HTML <table> <tbody> <tr> <td> <ul> <li>item 1</li> <li>item 2</li> <li>item 3</li> <li>item 4</li> <li>item 5</li> <li>item 6</li> <li>item 7</li> </ul> </td> </tr> </tbody> </table> CSS table { border-collapse:collapse; border-spacing:0; } table td { border:1px solid #ccc; padding:10px; width:300px;

HTML <div class="items"> <div class="item"> <p>item 1</p> </div> <div class="item"> <p>item 2</p> </div> <div class="item"> <p>item 3</p> </div> <div class="item"> <p>item 4</p> </div> <div class="item"> <p>item 5</p> </div> <div class="item"> <p>item 6</p> </div> <div class="item"> <p>item 7</p> </div> <div class="item"> <p>item 8</p> </div> <div class="item"> <p>item 9</p> </div> <div class="ite

frameまたはiframe要素内のdocumentオブジェクトを取得するには、element.contentDocumentオブジェクトを使用します。 element.contentDocumentオブジェクトはIE7以下、Safari9以下には対応していません。 代わりにelement.contentWindowからdocumentオブジェクトを取得します。 ※ frameまたはiframe要素で読み込まれているページが別ドメインである場合、クロスドメインの制約に引っかかり取得できない場合がありますのでご注意ください。 構文

時間（hh:mm:ss）同士の加算や減算などの計算を行うには、次のような方法で可能です。 なお、小数点以下には対応していません。 関数定義 JavaScript var timeMath = { /** * 加算 */ sum : function() { var result, times, second, len = arguments.length; if (len === 0) return; for (var i = 0; i < len; i++) { if (!arguments[i] || !arguments[i].match(/^[0-9]+:[0-9]{2}:[0-9]{2}$/)) continue; times = arguments[i].split(':'); second = this.toSecond(times[0], times[1], times[2

要素の絶対座標値（位置）を取得するには、element.getBoundingClientRectメソッドを使用します。 取得可能な位置は、ウィンドウの表示領域の左上からの座標です。 構文 戻り値 ウィンドウの左上からの座標（x、y、top、left、right、bottom）と幅（width、height）が含まれた値をオブジェクトとして返します。 ただし、FirefoxはDOMRect、Chrome、Safari、IE9以上はClientRect、IE8以下はObjectとしてそれぞれ返します。 IE8以下については座標（top、left、right、bottom）のみを返します。 { bottom : 98.39999389648438, height : 44, left : 245, right : 945, top : 54.399993896484375, width : 7

iOSでinput要素などの入力欄にフォーカスしキーボードが表示されたとき、position:fixedされている要素の位置がおかしくなる不具合 input要素などの入力欄にフォーカスしキーボードが表示されたとき、position:fixedされている要素の位置がおかしくなる不具合（バグ）がiOSで発生します。 この不具合はiOS7とiOS8～iOS10.2、iOS10.3でそれぞれ不具合（バグ）の症状が多少異なります。 CSS div.sample { position:fixed; top:20px; right:20px; width:50px; height:50px; background-color:#ccc; border:5px solid #999; } p.input-field { margin-top:500px; }

親要素からはみ出してmarginが適用されることがあります。 marginの仕様として、marginが適用されている要素から先祖要素にborderとpadding、marginの何れかが適用されていない場合に、その先祖要素の範囲までははみ出します。 <div class="outer"> <div class="inner"> <p>sample</p> </div> </div> div.outer { } div.outer div.inner { } div.outer div.inner p { margin-top:20px; } このはみ出しを防ぐには、先祖要素にborderとpadding、marginの何れかのプロパティを指定するか、先祖要素にoverflow:hidden;を指定することで防ぐことができます。 div.outer { } div.outer div.inn

iOS Safariでbackground-attachment:fixedが効かなくなる不具合があります。 原因 この現象はbackground-sizeプロパティを指定していることで起こります。 回避方法 この不具合を回避するには、次のように疑似要素を使い、その疑似要素に対して背景を指定することで回避できます。 CSS body::before { position:fixed; top:0; left:0; z-index:-1; width:100vw; height:100vh; background:url("img/sample.jpg") no-repeat; -webkit-background-size:contain; background-size:contain; content:""; }

ここでは、JavaScriptのクラスやオブジェクト、メソッド、プロパティをご紹介するとともに、それらを応用した関数やライブラリを掲載しています。 ※ ここでご紹介するものは、あらかじめ存在しているメソッドやプロパティに対して、prototypeの拡張を行わないことを前提としてご紹介しています（つもりです・・・）。 ※ 更新は不定期で行っています。 ※ 本リファレンスで公開されているコードは基本的に自由に使用していただいて問題ありません。 ※ ただし、ライブラリとして公開しているコードについてはライセンスが明記されていますので、ライセンスに従ってご使用ください。 （ライセンスが明記されていない場合はお問い合わせください。） ※ コード自体を公開・提供等を行う場合は、提供元として当サイトのサイト名（またはページ名）と、該当ページ（またはトップページ）へのリンクを明記してください。 JavaS

CSS div.flex-container { display:-webkit-box; display:-moz-box; display:-ms-flexbox; display:-webkit-flex; display:-moz-flex; display:flex; -webkit-box-pack:center; -moz-box-pack:center; -webkit-flex-pack:center; -moz-flex-pack:center; -ms-flex-pack:center; -webkit-justify-content:center; -moz-justify-content:center; justify-content:center; }

CSS3の逆引きリファレンスです。 ※ 対応ブラウザは掲載しておりません。 ※ 不定期で更新を行っています。 基本 ベンダープレフィックス レイアウト 角丸 影（ドロップシャドウ） アウトラインの距離（位置） 三角矢印 要素幅の算出方法の変更 要素の混合（ブレンド） 反射 フレキシブル ボックス レイアウト フレキシブル・レイアウトの基本 Flexアイテムの伸長率 Flexアイテムの萎縮率 Flexアイテムの基準幅 Flexアイテム全体の主軸に沿った位置または余白を制御 すべてのFlexアイテムの位置を変更 Flexアイテムの位置を個別に変更 Flexアイテムの折り返し Flexアイテムの向きと方向 Flexアイテムが折り返された時の位置揃え Flexアイテムの並び順 Flexを使ったカラムコンテンツ（一部固定） Flexを使った縦方向揃え グリッドレイアウト グリッドレイアウトの基本 行

線形グラデーションについて グラデーションはbackgroundまたはbackground-imageプロパティにlinear-gradient関数を設定します。 開始位置と終了位置は省略することができ、省略した場合、開始位置は0、終了位置は100%が初期値として設定されます。 なお、旧Webkit仕様では、from関数は開始位置を0、to関数は終了位置を1という仕様になっています。 開始と終了位置を指定したい場合はcolor-stop関数を使用します。 構文 位置の省略 background:linear-gradient(方向または角度, 開始位置, 終了位置); 旧Webkit仕様： background:-webkit-gradient(linear, 開始方向, 終了方向, from(開始色), to(終了色)); 位置の指定あり background:linear-gradie

JavaScriptを使わずCSSのみで横並びの要素の高さを揃えるには、以下の方法で可能です。 フレキシブル・レイアウトを使用する グリッド・レイアウトを使用する 最大の行数を固定とする table-cellを使用する inline-blockを使用する ネガティブmarginを使用する フレキシブル・レイアウトを使用する フレキシブル・レイアウトを使用します。 この指定が一番楽で柔軟な実装方法ですが、古いバージョンのブラウザの一部が対応していませんので注意が必要です。 ※ 対応ブラウザは次を参照 フレキシブル・レイアウトの基本 【HTML】 <ul class="sample"> <li>テスト</li> <li>テストテストテストテストテストテストテストテスト</li> <li>テストテストテストテスト</li> <li>テストテスト</li> <li>テスト</li> <li>テスト

押したキーのキーコードを取得するには、イベント引数であるevent.keyCodeプロパティで取得できます。 取得できるイベントはkeyup、keydown、keypressです。 keyCodeプロパティはイベントの引数で参照できますが、IE8以下ではwindow.eventでのみの参照が可能となっています。 デモ ※ 何かキーを押してください。 サンプルコード JavaScript document.onkeydown = function(e) { var keyCode = false; if (e) event = e; if (event) { if (event.keyCode) { keyCode = event.keyCode; } else if (event.which) { keyCode = event.which; } } alert(keyCode); };

Flexアイテムの折り返す方法を変更する場合は、flex-wrapプロパティ（旧仕様ではbox-linesプロパティ）を使用します。 Flexアイテムは、通常Flexアイテムの合計幅がFlexコンテナーの幅を超えると、Flexアイテムの幅は自動的に縮小していきます（flex-growに応じて縮小の仕方は異なる）が、flex-wrapプロパティを設定することで、折り返すようになります。 flex-wrapはflex-directionの指定によって折り返す方向が変わります。 なお、flex-wrapプロパティはショートハンドであるflex-flowプロパティの2番目の指定にあたります。 構文

縦型のアコーディオンメニューを実装するためのライブラリです。 同ページ内にでの複数設置に対応しています。 menu1 menu1-1 menu1-2 menu1-3 menu2 menu2-1 menu2-2 menu2-3 menu3 menu3-1 menu3-2 menu3-3 menu1 menu1-1 menu1-2 menu1-3 menu2 menu2-1 menu2-2 menu2-3 menu3 menu3-1 menu3-2 menu3-3 ライブラリのダウンロードと設置 「ライブラリのダウンロード」をクリックしてダウンロードしてください。 ライブラリのダウンロード ダウンロードしたjquery.accordion.jsを任意の場所へ置き読み込みます。 （jQueryの設置および読み込みは、完了もしくは同時作業を行っているものとします。） <script type="t

ダウンロードと設置 こちらからダウンロードし解凍します。 解凍したJavaScriptファイルを任意の場所に設置します。 次の要素を<head>内に記述します。 パスは環境により変更してください。 HTML <script src="js/jquery.min.js" type="text/javascript"></script> <script src="js/jquery.roundabout.min.js" type="text/javascript"></script> HTML <ul id="sample"> <li><img src="img/image1.jpg" width="160" height="90" alt="" /></li> <li><img src="img/image2.jpg" width="160" height="90" alt="" /></l

ライブラリのダウンロードと設置 「ライブラリのダウンロード」をクリックしてダウンロードしてください。 ライブラリのダウンロード ダウンロードしたjquery.dropdown.jsを任意の場所へ置き読み込みます。 （jQueryの設置および読み込みは、完了もしくは同時作業を行っているものとします。） <script type="text/javascript" src="jquery.dropdown.js"></script> 【JavaScript】 セレクターを指定し実行します。 $(document).ready(function() { $('#navi').dropdown(); }); 【HTML】 <ul id="navi"> <li><a href="">menu 1</a></li> <li><a href="">menu 2</a> <ul> <li><a href=

CSS3で実装するドロップダウンナビゲーション（ドロップダウンメニュー）です。 サンプルおよびソースは二階層がmenu2とmenu4、三階層がmenu2-1、menu2-2、menu4-5となっています。 三階層目は通常右方向へ表示されますが、class名「dd-left」を付加することにより左方向へ表示されるようになります（サンプルのmenu4-5を参照）。 HTML <nav id="navigation"> <ul class="clearfix"> <li><a href="#">menu1</a></li> <li><a href="#">menu2</a> <ul> <li><a href="#">menu2-1</a> <ul> <li><a href="#">menu2-1-1</a></li> <li><a href="#">menu2-1-2</a></li> <li>

ライブラリのダウンロードと設置 「ライブラリのダウンロード」をクリックしてダウンロードしてください。 ライブラリのダウンロード ダウンロードしたjquery.todate.jsを任意の場所へ置き読み込みます。 （jQueryの設置および読み込みは、完了もしくは同時作業を行っているものとします。） <script type="text/javascript" src="jquery.todate.js"></script> JavaScript 設定したい要素などを指定し実行します。 $(document).ready(function() { $('#date').toDate(); }); HTML <div id="date"></div>

Lightbox2.5～2.7の使用方法をご紹介しています。 Lightbox2.5～2.7は別ウィンドウ（ポップアップ）ではなく、ウィンドウ内で画像や写真などをモーダルウィンドウとして表示するJavaScriptライブラリです。 Lightbox2ではprototypeを利用していましたが、lightbox2.5以降ではjQueryを利用するようになりました。 公式サイト ※ このライブラリは、jQueryが別途必要です。 ※ ボタンなど透明pngを使用しているためIE6では一部表示が異なる場合や動作しない場合があります。 ※ Lightbox2.6以降ではjQueryが1.10.2未満のバージョンだと正常に動作しない場合があります。 目次 ダウンロードと設置 JavaScriptおよびCSSの読み込み 適用方法 グループ化 キャプション 設置時に異なる階層への対応方法 ダウンロードと設

矢印アイコンのWeb素材です。 一部の素材を除き、右向き、左向き、上向き、下向きがそれぞれ用意されています。

JavaScript var tabNavigation = function() { this.init.apply(this, arguments); }; tabNavigation.prototype = { settings : {}, elements : {}, init : function(settings) { var self = this; /** * @property {string} boxElementIdName : ナビゲーションとして実装する要素の親要素のID名 * @property {string} anchorElementName : ナビゲーションとして実装する要素の要素名 * @property {string} linkAttrName : ナビゲーションとして実装する要素の属性名（切り替える要素のID名が格納されている属性名） * @p

jQueryで実装するカレンダーです。祝日の表記等はありませんのでご注意ください。 ※簡単なものなのでたいしたオプションはありません。 サンプル ライブラリのダウンロードと設置 「ライブラリのダウンロード」をクリックしてダウンロードしてください。 ライブラリのダウンロード ダウンロードしたjquery.calendar.jsを任意の場所へ置き読み込みます。 （jQueryの設置および読み込みは、完了もしくは同時作業を行っているものとします。） <script type="text/javascript" src="jquery.calendar.js"></script> JavaScript $(function() { $('#calendar').calendar(); }); HTML <div id="calendar">&nbsp;</div>

Webサイト（ホームページ）で使用される「ボタン / ナビゲーション」素材を配布しているページです。

jScrollPaneの使用方法をご紹介しています。 jScrollPaneはCSSでデザイン可能なオリジナルスクロールバーのjQueryライブラリです。 公式サイト ※ このライブラリは、jQueryが別途必要です。 目次 デモ ダウンロードと設置 JavaScriptの読み込み 適用方法 スクロールバーのスタイル オプション デモ 次のデモは、CSSでbackground-colorとpadding、borderを指定しています。 スクロールはデフォルトのものです。 text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text te