タグ 小粋空間
人気順 5 users 10 users 50 users 500 users 1000 users入力フォームの全角・半角を勝手に変換してくれるJavaScript: 小粋空間
2013/08/27
100 users
発端
迷宮
制御
半角文字
半角全角
入力フォームの全角・半角を勝手に変換してくれるJavaScriptを作りました。 １．発端 「入力フォームの迷宮。全角数字を強要するフォームを理解できません。」を読んで、たしかに私も半角全角の入力を強制されるフォームには辟易してしまいます。 というか、半角全角どちらでも良いという登録フォームを（多分）見たことがありません。 それはさておき、システム側で半角文字・全角文字の制御が不能であれば、せめて... 続きを読む
ソーシャルボタンのJavaScriptでfunctionの前に「!」がついている理由: 小粋空間
2013/06/11
270 users
function
ソーシャルボタン
Twitter
理由
ソーシャルボタンのJavaScriptでfunctionの前に「!」がついている理由を調べてみました。 １．はじめに TwitterやPocketなどのソーシャルボタンのコードをみると、共通してscript要素の中にあるfunctionの前に「!（エクスクラメーション）」がついています。 Twitterの場合 <a href="https://twitter.com/share" class="t... 続きを読む
WordPressでサイトアドレスを変更する方法: 小粋空間
2013/04/17
103 users
サブディレクトリ
WordPress
備忘録
ドメイン
方法
WordPressでサイトアドレスを変更する方法を紹介します。 定番カスタマイズだと思いますが、カスタマイズの理由まで言及している記事が見当たらなかったので、その解説も含めて備忘録で残しておきます。 ここでは、ドメインのサブディレクトリ（http://user-domain/wordpress/）にWordPressをインストールしている状態で、サイトアドレスをドメイン（http://user-d... 続きを読む
floatを解除する方法のまとめ: 小粋空間
2013/03/27
678 users
float
After
CSS
擬似要素
まとめ
CSSのfloatを解除（クリア）する方法をまとめてみました。 以前、floatを解除するテクニックとして以下の記事をエントリーしたのですが、その後色々なテクニックがあることに気がつきました。 CSS の after 擬似要素で回り込みを解除する ということで、そもそものfloatの問題（というか仕様）と、その対処方法についてネットで調べた情報を一通りまとめました。 １．floatにより親要素の高... 続きを読む
ページを移動（離脱）するときにjQueryで警告を出す方法: 小粋空間
2013/03/10
335 users
Facebook
jQuery
script src
離脱
Facebookなどでフォーム入力中にページを移動（離脱）しようとすると警告が表示されます。 この仕組みをjQueryで実装する方法を紹介します。jQueryは投稿時点の最新バージョン1.9.1を利用しています。 １．ページを移動するときに警告を出す ページを移動するときに警告を出すには、onイベントにbeforeunloadイベントを設定します。 <script src="//ajax.goog... 続きを読む
三点リーダが真ん中に表示されない理由: 小粋空間
2013/02/26
114 users
語尾
余韻
記号
真ん中
三点リーダ
三点リーダ「…」が「…」という風に真ん中に表示されない問題について調べてみました。 １．三点リーダとは 説明するまでもありませんが、点を3つ横に並べた形をした記号のことで、語尾を省略したり、言葉の余韻を残すときに使う「…」です。 ２．問題点 たとえばブログを書いているときに、記事編集画面のテキストエリアでは「…」と表示されているのに、公開したページでは「…」となることがあります。 ３．原因 三点リ... 続きを読む
ノンプログラマーのためのjQuery生成ツール: 小粋空間
2012/11/12
419 users
ノンプログラマー
jQuery
jQuery生成ツール
設定
ノンプログラマーのためのjQuery生成ツールを作ってみました。よければご活用ください。 ノンプログラマーのためのjQuery生成ツール サンプル表示つき このツールは「7つのサンプルでjQueryを学ぼう！「jQueryが全く分からない人のため」の超初級者向け入門講座」にインスパイアされて作った、初心者向けのお勉強ツールです。 コールバックなど複雑な設定はできませんが、基本的な設定とメソッドチェ... 続きを読む
レスポンシブWebデザイン制作に便利なFirefoxの「レスポンシブデザインビュー」: 小粋空間
2012/09/19
319 users
Responsive
Firefox
デバイス
タブレット
レスポンシブWebデザイン制作に便利なFirefoxの「レスポンシブデザインビュー」を紹介します。 「レスポンシブデザインビュー」はFirefox15から搭載されています。 １．「レスポンシブWebデザイン」とは 「レスポンシブWebデザイン」とは、PCやスマートフォンやタブレットなど、あらゆるデバイスに対応するWebデザインのことを指します。 レスポンシブ（Responsive）は、「よく反応し... 続きを読む
link要素「rel="canonical"」のまとめ: 小粋空間
2012/08/15
105 users
rel
canonical
link要素
属性
まとめ
link要素のrel="canonical"について調べてみました。 以下、主にGoogleの「rel="canonical" 属性について」の記載を引用しながら、FAQ形式で書いていますが、認識誤りがありましたらどこかでつぶやいてください。 １．利用目的は？ 「検索エンジンのインデックス内での重複コンテンツ問題」解消のためです。 下の図で示すURLは、同じページにアクセスしているにもかかわらず、... 続きを読む
いまさら聞けないCSS font-familyのまとめ: 小粋空間
2012/08/12
419 users
まとめ
font-family
太字
イタリック体
CSS
CSSのfont-familyについて調べてみました。そのうちWebフォントが主流になる気がしますがそれまでのまとめということで。 調べたついでに、当ブログのfont-familyも変更してみました。 変更前 変更後 認識誤りがありましたらどこかでつぶやいてください。 １．font-familyとは？ 通常のフォントや太字、イタリック体、斜体など、デザインを統一した複数のフォントをまとめたものを「... 続きを読む
jQueryで要素の表示・非表示を判定する方法: 小粋空間
2012/08/02
128 users
jQuery
foo
hide
show
ＩＳ
jQueryの要素の表示・非表示を判定する方法を紹介します。 １．基本 jQueryでは、要素の表示・非表示のためのメソッドとして、show()とhide()が提供されています。 show()は指定した要素を表示します。 $('#foo').show(); hide()は指定した要素を非表示にします。 $('#foo').hide(); が、表示・非表示を判定する方法として、isShow()やis... 続きを読む
CDNでウェブサイトを高速化するためのまとめ: 小粋空間
2012/06/12
136 users
CDN
Con
まとめ
ウェブサイト
バージョン
CDNでウェブサイトを高速化するためのまとめです。 「そんなの知ってるよ」という方も多いと思いますが、バージョンの指定方法や、キャッシュ・フォールバックなど、CDNに関する情報を集めましたのでご覧いただければ幸いです。 認識誤り等ありましたらどこかでつぶやいてください。 １．CDNとは CDNとは「Contents Delivery Network（コンテンツデリバリネットワーク）」または「Con... 続きを読む
HTMLやCSSでのプロトコル表記（http:、https:）の省略について: 小粋空間
2012/05/10
343 users
リソース
エントリー
CSS
便乗記事
省略
HTMLやCSSではプロトコル表記（http:、https:）の省略が可能です。 ということで、プロトコル表記の省略に関することを色々調べてみましたので、本エントリーで紹介致します。 このエントリーは、「「Google HTML/CSS Style Guide」を適当に和訳してみた」の以下の部分に対しての便乗記事です。 埋め込みリソースからプロトコル表記（http:,https:）を省略する。 <... 続きを読む
YouTubeを効果的に見せるための12の隠しパラメータ: 小粋空間
2012/04/23
101 users
YouTube
frameborder
パラメータ
src
YouTubeの動画をブログに貼り付けるときに次のようなiframeタグを利用するのはご存知かと思います。 <iframe width="470" height="269" src="http://www.youtube.com/embed/YDxYmhze5Do" frameborder="0" allowfullscreen> </iframe> このiframeタグに隠しパラメータ（隠されて... 続きを読む
TwitterやFacebookのように一番下までスクロールしたら自動的にコンテンツを表示する「jQuery.Bottomプラグイン」: 小粋空間
2012/02/05
867 users
Twitter
Facebook
サンプル
タイムライン
TwitterのタイムラインやFacebookのニュースフィードように、ページの一番下までスクロールしたらコンテンツを自動的に表示する「jQuery.Bottomプラグイン」を紹介します。 １．サンプル jQuery.Bottomプラグインにはデモページが用意されていますが、いまいちなのでサンプルページを作りました。 jQuery.Bottomプラグインサンプル ページの一番下までスクロールすると... 続きを読む
jQuery Mobileのデザインを簡単に作れる「ThemeRoller」徹底解説: 小粋空間
2011/12/11
474 users
ThemeRoller
jQuery Mobile
状態
jQuery Mobileのデザインを簡単に作れる、jQuery Mobile公式サイトで提供している「ThemeRoller」を紹介します。 ThemeRoller こんな風にjQuery Mobileのデザインが簡単に出来上がります。リンクをクリックすれば同じデザインが表示された状態で「ThemeRoller」が起動します（2012/01/11頃まで）。 このエントリーで紹介する情報は2011... 続きを読む
「8.8.8.8,8.8.4.4」より速い「129.250.35.250」: 小粋空間
2011/09/17
1206 users
iPhone
ＤＮＳ
レスポンス
WiFi接続
測定ツール
iPhoneのDNSの設定変更が話題になっているようなので、レスポンスの速いDNSサーバがないか調べてみました。便乗記事です。 ネタフル - iPhoneのWiFi接続を高速化する魔法の数字「8.8.8.8,8.8.4.4」 測定ツールはWindows用の「DNS Nameserver Performance Benchmark」です。ツールの詳細は割愛しますが、測定するには下のスクリーンショット... 続きを読む
jQueryでスマホサイト向けに画像サイズを縮小する方法: 小粋空間
2011/09/15
103 users
jQuery
Movable Type
カスタマイズ
サイズ
jQueryでスマホサイト向けに画像サイズを縮小する方法を紹介します。 １．サンプル 次のようなPCサイト用のページがあります。この場合、Movable Typeでページを出力しています。ページで使っている記事内の画像サイズは幅470pxです。 このページをスマホサイト向けに別のページを作り、画像サイズを縮小して表示します。画像サイズは幅280pxに縮小しています。 ２．カスタマイズ サイズを変更... 続きを読む
IE6/IE7/IE8/IE9の共存まとめ: 小粋空間
2011/01/16
332 users
IETester
共存
IE6
IE7
IE9
Windows 7やWindows VISTAでIE6/IE7/IE8/IE9を共存させる方法です。IE9はまだベータ段階ですが、周辺ツールも対応してきた頃なのでまとめてみました。 公式ブラウザの共存はできませんが、以下に示す方法で各バージョンの表示を確認することができます。最近はIETesterが主流になってきたようなので、そこを踏まえてます。 IETesterを利用＋IETesterでIE9を... 続きを読む