読者です 読者をやめる 読者になる 読者になる

HTMLの input::hidden に JavaScriptオブジェクト を JSON として入れる。

変数 answers の JSON を id=user_input_data の input::hidden へ格納するのは以下でOK。 JSON.stringify() でJSONに変換している。 var answers = new object(); $('#user_input_data').val(JSON.stringify(answers));

【HTML】【CSS】Formタグを横並びにする

Formタグを横並びにしたい。Formもブロック要素なので、 FormにCSSで display:inline を指定すればいい。

imgタグ(画像)とテキストがずれる

画像とテキストを横並びにすると、ずれる。 ちゃんと並べるにはCSSの「vertical-align」を使う。 HTMLの「align」属性でもできるけど、非推奨なので使わないほうがいい。以下のサイトを参考にしました。 ありがとうございました。 http://www.tagindex.com/s…

preタグで改行をbrタグに変更しなくて済む

テキストエリアに入力された改行ありのテキストを 確認画面で表示するときは、 改行文字をbrタグに置換して表示させていた。 それじゃないと、改行されないから。でも、HTMLのpreタグを使えば問題ないことを知った・・・。 preタグは改行、タブ、スペースを…

textareaのリサイズ

textareaのリサイズはCSSで制御する。resize:none; resize:vertical; resize:horizontal; resize:both;

Twitter Bootstrap を使ってみて

Twitter Bootstrap を使ってみた。サンプルとドキュメントがしっかりしているので、 すぐに使うことが出来るが、 他と似たようなデザインになりがちなので、 ちゃんと差別化する必要がある。 レイアウト http://twitter.github.com/bootstrap/getting-starte…

fieldsetタグ + legendタグ でグループ化

fieldsetタグ はフォームをグループ化できる。 枠線がついていかにもグループっぽい。 見出しは legendタグ で設定できる。 <fieldset> <legend>検索</legend> <label>名前</label> <input type="input"> </fieldset>

indexedDBのストアとインデックスが作成できない

indexedDBのストアとインデックスの作成について・・・・上手くいかない原因は、onupgradeneeded()の中で作成していなかったから。 どこでも作れるわけじゃないんだね・・・。ちなみに、setVersion()の onsuccess()コールバックは仕様として古いので、 onupg…

外部JSファイル と Scriptタグの位置

今まで外部JSファイルとScriptタグはheadタグ内に書いていた。 でも、bodyタグの下に書いたほうがいいらしい。理由は単純で、HTMLの描画後にJSファイルを読み込むことで ユーザーの体感速度が上がるから。 headタグに書くとJSファイルを読み込むまで画面が描…

HTMLのエスケープ処理

エスケープ処理のメモ。 $str = htmlentities($str, ENT_QUOTES, mb_internal_encoding()); mb_internal_encoding() は utf-8 指定でもいいかな。

HTML5のcontenteditable属性

以下のようにテキストが編集できる属性。 <div contenteditable=contenteditable>ここのテキストは編集できます</div> ただ、 input要素じゃないので、データを送信できないような・・・。 まあ、JavaScriptで飛ばせばいいか・・・。

Web Storage に JSON を格納する

Web Storage API では文字列しか保存できないので、 不便だなと思っていたけど、 JSON使えばいーだけでした。ネイティブの JSON.parse() があるけど、 開発時は大体 jQuery を使うから、jQuery の機能を使うことが多い。

WebGLのライブラリ「three.js」

仕事では使わなそうだからヒマがあれば使ってみよう。 ってことでメモ。

placeholder属性とrequire属性とautofocus属性

HTML5のフォームの新機能。placeholder属性:テキストフィールド内に薄い文字を表示させる。 required属性:input が未入力の場合にアラートを出す。 autofocus属性:ページ読み込み時にフォーカスを当てる。 <input type="text" placeholder="message" autofocus required> ただしブラウザによっては未対応 + 何だかんだ…

複数の submit を判別する

1つの form に複数の submit を設置して処理を分けたい。submit も name属性 が使えるので、value が $_POST で渡される。 value は ボタンのラベルになるので、 empty() で name のインデックスを確認すれば処理を分けれる。 <input type='submit' name='submit1' value='hoge'> <input type='submit' name='submit2' value='fuga'> if(empty($_POST['submit1'])…

google chrome で faviconの更新

更新されずにハマった・・・。結論としては、キャッシュと閲覧履歴を削除すると更新された。 ブラウザのキャッシュって面倒・・・。

aタグのリンクを無効にする

リンクのためのaタグだけど、 リンクを貼らないことがある。今回は設計ミスのような気がするけど・・・。 cakePHP版も載せとく。 <a href='javascript:void(0);'>無効</a> echo $this->Html->link($t['Task']['details'], array('javascript:void(0);'), array('onclick'=>'showEditView(this)',…

画像を重ねる

画像を重ねてcssのopacityをいじる必要があったので、 画像の重ね方をメモ。ポイントは divのstyle="position: relative;" と imgのstyle="position: absolute;" <div class="navi-image" style="position: relative;"> <img id='pic-1' src="img/1.jpg" style="position: absolute;"> <img id='pic-2' src="img/2.jpg" style="position: absolute;"> </div>