ウェブ 繋ぎ目のない背景画像を手早く作るならPhotoShopの『スクロール』がオススメ photo credit: Patrick Hoesly via photopin cc こんばんは、ボーノです。 背景画像ってそのサイトの印象を大きく左右します。家で言うとカーテンみたいなものかな。 ノイズを加えた無機質なものを使ったり、可愛い画像を使ったりテキスチャだったり、その人のセンスの見せ所でもある。 何を背... 2013年11月29日
ウェブ 3分でできる!jQueryによる簡単パララックスの作り方 photo credit: Daveybot via photopin cc こんばんは、ボーノです。 Webサイトを作っていて、初めてパララックス(視差)を実装してみました。 意外と手軽でしかも一気にリッチなサイトになるので、これから重宝しそう。 さて、メモメモ。 実装はこれだけ 例えば3層のレイヤーにしたかったら、... 2013年11月27日
ウェブ これだけは覚えておきたい、GitHubにコミットする時の作業メモ photo credit: Ian Sane via photopin cc こんばんは、ボーノです。 しばらく放っとくとすぐ忘れるので、メモ。 これだけは覚えておく 下記3つを行うだけ。 git add hogefile git commit -m "message here" git push 最後の行は、git ... 2013年11月27日
ウェブ CSSでposition:relativeを使った時にスペースができてしまった時の対処方法 こんばんは、ボーノです。 今回は、CSSでposition:relativeを使った時にスペースができてしまった時の対処方法を紹介。 実際に自分でやらかしてしまったものです。 こういう症状が出たら 下記のように、ある要素の上に別の要素を重ねたい時は、重ねたい要素のpositionをrelativeにしてtopを-指定す... 2013年11月25日
ウェブ 無料サイトの情報ではちょっと物足りない、と思ったら。Webディベロッパーのための有料情報サイト『Code Grid』 こんばんは、ボーノです。 GunosyだったりVingowだったり、ニュースサイトも便利になってきましたね。 技術的な解説をしてくれる無料サイトも多くあります。 ドットインストールにお世話になった人もかなりいるんではないでしょうか(自分も含めて)。 基本的にはこれら無料サイトで事足りるけど、やっぱりWebディベロッパー... 2013年11月17日
ウェブ [jQuery]Bootstrapとかを使ってて要素サイズの%指定が崩れた時の対処法 こんばんは、ボーノです。 Bootstrap等のCSSライブラリを使ってると、要素サイズを100%指定とかしていても崩れる場合がある。 特に、Google Maps等のAPIを併用していると特にこういう現象が起きやすいみたい。 対処方法 ここでは、Twitter Bootstrapで画面上部にナビゲーションバーを設置し... 2013年11月12日
ウェブ テキストボックスの残り文字数をリアルタイムで表示させたいならCountable.jsがオススメ 最近知ったのでメモ。 Countable.js 文字数や段落数をカウントしてくれるライブラリ。 下記のサイトでライブラリを公開している。デモもやってるので、すぐ体験したい人は是非一回使ってみて下さい。 フォームのテキストボックスで、「140文字まで後何文字」といった表示をリアルタイムで行いたいなら、これがかなり使えます... 2013年11月10日
ウェブ formを扱うならjQueryのserialize()メソッドが超オススメ こんにちは、ボーノです。 formの扱いってWeb技術としては超基本的なとこだけど、制約が多かったり融通が効かなかったり、結構扱いにくかったりします。 ここでは、jQueryに便利なメソッドが用意されてたので紹介します。 serialize() これを使うと、HTML内の 内の全てのフォーム要素(input, sele... 2013年11月10日
ウェブ jQueryのdraggableメソッドでのドラッグイベントの使い方 こんにちは、ボーノです。 jQueryのdraggableメソッドはかなり便利で、重宝してます。 実装したらものすごい手間なので。 ドラッグイベントとしては3種類用意されているので、使い方を備忘録として残しておく。 draggable() イベントオプションたち。 start ドラッグが開始された直後に発生するイベント... 2013年11月10日
ウェブ CSSのみで吹き出しを作る方法を2つ激選した こんばんは、ボーノです。 CSSのみで吹き出しを作る方法は色んなサイトで紹介されているけど、コードだけしか載ってなかったり使い勝手が悪かったりでいまいちだった。 そこで、今後も何かとお世話になりそうなサイトを2つ激選したので記録しておく。 CSS ARROW PLEASE これは有名な吹き出しジェネレータ。5分でほしい... 2013年11月9日
ウェブ Ajaxでエラーチェックをしたい時にかなり使える方法 こんばんは、ボーノです。 Ajaxを使っていて、どうしてもsuccessにならず、errorになってしまっていて苦労した。 そんな時の便利な手法を備忘録として残しておく。 エラーコードを吐かせる まずは下記コードをページの好きなところに設置する。 <div id ="XMLHttpRequest"><... 2013年11月9日
ウェブ ピクトグラムを使いたい時に超オススメなWebサイト「HUMAN PICTOGRAM2.0」 こんにちは、ボーノです。 最近Webサービスで色んなタイプのピクトグラム使いたい機会があった。 そこで発見したWebサイト。 HUMAN PICTOGRAM2.0 ピクトグラムの種類が約1,000種類!! 驚きの数。しかも、それぞれに対して汎用のピクトグラム、男性用、女性用、スーツ姿とかも用意されているから実際はもっと... 2013年11月9日