フロントサイト | みどりのウェブ開発日記

フロントサイト

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要素のマー […]



トップに戻る