フロントサイト
CSS フレームワーク Materialize でセレクトボックスの表示を動的に変更する方法
Materialize(https://materializecss.com/)は、名前のとおり、「マテリアル・デザイン」に特化したCSSフレームワークです。 モバイル向けにも使えて便利なのですが、時々、公式ドキュメント […]
マテリアルデザイン・CSSフレームワーク「Materialize」のモーダルでスタックオーバーフローが発生する件
おしゃれで見やすいマテリアル・デザインができるフレームワーク「Materialize」。 Twitter Bootstrap を使ってきた方なら、すぐに導入することができますが、最初のバージョンが出た当初は、JSのバグが […]
jQuery で簡単にイベントの ON/OFF を行う方法
イベントリスナー関係の難しそうな処理が不要で、初心者でもイベントのオン・オフを切り替えることができる方法です。 要は、イベントを起こさせたくないタイミングで、上記で設定した ID を消したり、つけたりするだけです。 HT […]
JavaScript で数値を3桁区切りにする 【2017年版】
jQuery のメソッドとして使う方法を使っていたのですが、念のため（2017年）に調べなおしてみました。 すると、あまり知られていませんが、最近のブラウザなら組込み関数になったようです。 console.log((12 […]
jQuery 動的に追加した要素の確実な取得方法
on で動的に生成した要素が取得できない場合は、多くは、on のイベントになっている要素が静的でないことが原因です。 動的に生成される要素は不確定要素であるため、起点にしてしまうと取得できないことがあります。 解決方法は […]
初心者のための jQuery の基本情報 （ jQuery 入門以前）
jQuery3 が2016年に正式リリースされました。 が、現場ではまだ1系、2系を使っているところも多いと思います。 また、なぜ3種類もあるのか、今からどれを使ったらいいのかなど、初心者向けに解説します。 公式情報 公 […]
Sass の使い方: コンパイル編
コンパイル構文 「sass [コンパイル元の Sass ファイル] [コンパイル後のcss名] 」となります。 ↓ sass hoge.scss hoge.css #wrap { width: 100px; height […]
Sass のインストール方法
Sass のことを説明するための資料です。 インストール方法 ※事前に Ruby を入れていることが前提です。 また、Sass を使うならフレームワークの「Compass」もついでに入れておきましょう。 ※経験上、デザイ […]
Sass の基礎知識
Sass のことを説明するための資料です。 概要 公式: http://sass-lang.com/ Syntactically Awesome Stylesheets (構文的にイケてるCSS) の略で、「サス」と読み […]
[PHP x Ajax] 非同期でセッションを複数処理する場合の注意点
発生した問題点: 時間のかかる非同期処理を実行 -> その処理が終了する前に画面遷移 画面遷移後、セッションを更新していると、前の画面の処理が終わった瞬間、セッション情報が古くなってエラーが発生 どうやら、非同期処 […]
jQuery で作るシングルページ・アプリケーション(SPA) :70行で動くサンプル付き
こんにちは。jQuery 大好きです。 SPAが気になるこの頃です。 AngularJS や Vue.js を時間のある時にさわって、何とか使えることが分かりホッとしていますが、もっと簡単に使えないものかな、と思っていま […]
jQueryでクロージャ
JavaScriptでそのもので書けば早いかも知れませんが jQueryを使っているサイトなら簡単に書けるので 活用しないともったいない気がします。 ・最初の処理を確認するフラグを 用意するのがポイントです。 var I […]
jQuery でラジオボタンを選択するには
今まで属性の「checked」を true にしていましたが、 下記のやり方を見つけました。 $(“#hoge input[name=’hoge’]”).val([‘a’]); こちらの方が簡単ですね。val 値の中で […]
jQuery で選択された要素の属性値を取得するには
セレクトボックスの選択された値は、通常 val() で取得しますが、 option に属性を追加することで、複数の値を取得したい時があります。 会員1 ↓ たとえば title 属性を追加して、カテゴリIDをセットすると […]
HTMLのコーディングルール
半角スペース4つ分 入れ子階層がわかるように、ブロックごとに行なう。 並列のブロックはインデントしない。 labelタグを使用してコントールと項目 を関連付ける。 出来上がったhtmlソースは、 W3CのHTMLバリデー […]
IE8で border: hidden にした時、勝手に黒い線が出るバグ
通常、テーブルの線を隠すときは border: none を使いますが hidden を使っても良いようです。 ただ、IE8において、table、tr、th、td、 全ての要素に指定しているにも関わらず 1px幅の黒い線 […]
レスポンシブレイアウトデザインのためのCSSテンプレート
よく使いそうなので備忘録としてまとめます。 最初に小さい画面から設定するのがコツです。 /* スマホ用① 幅320px */ /* スマホ用② */ @media only screen and (min-width: […]
CKEditor にプラグイン「codemirror」を追加する方法
思いのほか高機能で、手軽に導入できたのでメモしておきます。 CKEditorの他のプラグインもほぼ同じ手順で導入することができます。 このプラグインを入れると、「ソース」ボタンを押した時の 表示がきれいなシンタックスハイ […]
JavaScriptでよく利用するエスケープシーケンス
エスケープシーケンスとは、バックスラッシュ記号、または￥記号から はじまる特別な記号を指します。パラメータの中に指定すると、 改行やタブといった特別な処理を行うことができます。 そのほか、シングルまたはダブルクォーテーシ […]
iPad(+Safari)で、 select の option に対して、 hide,show が効かない現象に対する対策
こちらの記事を参考にしました。 http://moshimoworks.com/2012/02/14/jquery-select-tag-manipulation/ MacのSafari（webkit系）では、jQuer […]
JavaScriptの正規表現の書き方
便利な正規表現。 慣れている時はいいけれど、少し時間を置くと忘れがちです。 入力された値は、改ざんを十分考慮しないといけないので、 最終的にはサーバサイドでチェックする必要があります。 PHP や Ruby で正規表現を […]
IE6・7・8で使えるIE用のFirebug
ホームページの解析に欠かせない Firebug。 IE8からは開発者ツールが備わっていますが、Firefox派だと 使い慣れた Firebug の方がいいでしょう。 機能はFirefox版ほど充実しているわけではありませ […]
構文チェックサービスのまとめ
Eclipse のようなIDEの良いところは、構文チェッカが付いていて 間違いがあれば、その場で表示されることだと思います。 エディタでは、構文チェッカがほとんどありません。 色々調べると、Notepad++ では、PH […]
ブラウザで印刷プレビュー画面を出す
印刷プレビュー画面を出すための仕組み。 将来的には、もっと簡単にできてもいいと思いますが、 JavaScript でやるしかないようです。 [2015.08.04 補足] 上記は古いIEのみで動くようです。XPでの案件で […]
IE8以下でもCSS3の一部機能を使える「PIE.htc」の落とし穴と解決法
結論から言うと、 「角丸、グラデーション、ドロップシャドゥとエフェクトを 重ねると効かない」ということらしいです。 CSS3はブラウザによって書き方が異なるので、 ウェブサービスのジェネレイターを使ったり、 エディタのプ […]
HTMLを先に読んで、ﾍﾟｰｼﾞの一部分だけ Ajax で読み込む方法
作ってみると、用途が広がりそうだったのでメモしておきます。 ﾍﾟｰｼﾞの骨子にあたる部分(HTML)は先に読み込んでおいて、 時間のかかる読み込み部分をAjaxで読み込む時の 処理になります。 ローディング画像をページ全 […]
Ajax をオフにした jQuery Mobile でローディング機能を実装する方法
概要 jQuery Mobile を使ってウェブアプリを作ろうとすると container の部分にリンク先のページを読み込むので データベースからデータを頻繁にひっぱってくるページの場合、 遷移後にコンテンツがきちんと […]
テーブルの折り返しがきかなくなった場合
IE6からIE8へ変更した時など。 tdタグに幅を設定してある(width=”180″)のに セルの中身が長い文字列だったりすると、 折り返しがきかず、レイアウトが崩れることが あります。 一番簡 […]
ULやLIの入れ子になっているリストの問題
例えば、IE6時代の古いブラウザで見ていた時は 自動的にインデントが付いて、 ツリー状になっていたのが、 IE8をはじめ、モダンブラウザで見ると、 インデントが消えて、左端でまっすぐに そろってしまっていることがあります […]
CSSでINPUTのTYPE属性がTEXTの要素を設定する場合 -属性セレクタの使い方
表題のとおりです。 属性セレクタを使うと、 ピンポイントで設定ができて便利です。 気になるIEの対応ですが、 IE6では無効。 IE7以降なら使えるものの、互換表示時はダメみたいです。 よくあるのは、INPUT要素のマー […]
