ウェブ

photo credit: Patrick Hoesly via photopin cc こんばんは、ボーノです。 背景画像ってそのサイトの印象を大きく左右します。家で言うとカーテンみたいなものかな。 ノイズを加えた無機質なものを使ったり、可愛い画像を使ったりテキスチャだったり、その人のセンスの見せ所でもある。 何を背...

photo credit: Daveybot via photopin cc こんばんは、ボーノです。 Webサイトを作っていて、初めてパララックス（視差）を実装してみました。 意外と手軽でしかも一気にリッチなサイトになるので、これから重宝しそう。 さて、メモメモ。 実装はこれだけ 例えば3層のレイヤーにしたかったら、...

photo credit: Ian Sane via photopin cc こんばんは、ボーノです。 しばらく放っとくとすぐ忘れるので、メモ。 これだけは覚えておく 下記3つを行うだけ。 git add hogefile git commit -m "message here" git push 最後の行は、git ...

こんばんは、ボーノです。 今回は、CSSでposition:relativeを使った時にスペースができてしまった時の対処方法を紹介。 実際に自分でやらかしてしまったものです。 こういう症状が出たら 下記のように、ある要素の上に別の要素を重ねたい時は、重ねたい要素のpositionをrelativeにしてtopを-指定す...

こんばんは、ボーノです。 GunosyだったりVingowだったり、ニュースサイトも便利になってきましたね。 技術的な解説をしてくれる無料サイトも多くあります。 ドットインストールにお世話になった人もかなりいるんではないでしょうか（自分も含めて）。 基本的にはこれら無料サイトで事足りるけど、やっぱりWebディベロッパー...

こんばんは、ボーノです。 Bootstrap等のCSSライブラリを使ってると、要素サイズを100%指定とかしていても崩れる場合がある。 特に、Google Maps等のAPIを併用していると特にこういう現象が起きやすいみたい。 対処方法 ここでは、Twitter Bootstrapで画面上部にナビゲーションバーを設置し...

最近知ったのでメモ。 Countable.js 文字数や段落数をカウントしてくれるライブラリ。 下記のサイトでライブラリを公開している。デモもやってるので、すぐ体験したい人は是非一回使ってみて下さい。 フォームのテキストボックスで、「140文字まで後何文字」といった表示をリアルタイムで行いたいなら、これがかなり使えます...

こんにちは、ボーノです。 formの扱いってWeb技術としては超基本的なとこだけど、制約が多かったり融通が効かなかったり、結構扱いにくかったりします。 ここでは、jQueryに便利なメソッドが用意されてたので紹介します。 serialize() これを使うと、HTML内の 内の全てのフォーム要素(input, sele...

こんにちは、ボーノです。 jQueryのdraggableメソッドはかなり便利で、重宝してます。 実装したらものすごい手間なので。 ドラッグイベントとしては3種類用意されているので、使い方を備忘録として残しておく。 draggable() イベントオプションたち。 start ドラッグが開始された直後に発生するイベント...

こんばんは、ボーノです。 CSSのみで吹き出しを作る方法は色んなサイトで紹介されているけど、コードだけしか載ってなかったり使い勝手が悪かったりでいまいちだった。 そこで、今後も何かとお世話になりそうなサイトを2つ激選したので記録しておく。 CSS ARROW PLEASE これは有名な吹き出しジェネレータ。5分でほしい...

こんばんは、ボーノです。 Ajaxを使っていて、どうしてもsuccessにならず、errorになってしまっていて苦労した。 そんな時の便利な手法を備忘録として残しておく。 エラーコードを吐かせる まずは下記コードをページの好きなところに設置する。 <div id ="XMLHttpRequest"><...

こんにちは、ボーノです。 最近Webサービスで色んなタイプのピクトグラム使いたい機会があった。 そこで発見したWebサイト。 HUMAN PICTOGRAM2.0 ピクトグラムの種類が約1,000種類！！ 驚きの数。しかも、それぞれに対して汎用のピクトグラム、男性用、女性用、スーツ姿とかも用意されているから実際はもっと...