ドットインストール代表のライフハックブログ
iframeやtextareaをドラッグ&ドロップでリサイズできるようにするjQueryプラグイン「TextAreaResizer」 2011年02月25日- jQuery textarea resizer plugin iframeやtextareaをドラッグ&ドロップでリサイズできるようにするjQueryプラグイン「TextAreaResizer」 textareaのリサイズはよくありますが、iframeもリサイズできます。初期化すると、iframeの下にいかにもドラッグ&ドロップできそうなハンドルが付きます。 ドラッグ中は要素の中身がしろっぽくなります。 ドロップ完了&リサイズ完了 テキストエリアも対応してます。 関連エントリ テキスト内容によってtextareaを自動リサイズできるjQueryプラグイン「autoResize」
プロダクトページなどによく利用される、画像の一部を拡大する実用的で軽量なjQueryのプラグインを紹介します。 jQuery plugin: Easy Image Zoom デモページ [ad#ad-2] デモではサムネイル画像にカーソルを合わせると、その箇所を中心に拡大表示し、ディテールをユーザーに提供することができます。 スクリプトは使い勝手をよくするために、できるだけ軽量にし、またカスタマイズも簡単にできるように設計した、とのことです。 Eazy Image Zoomの実装 HTML サムネイル画像をimg要素で実装し、拡大画像をa要素に配置します。 <a href="large.jpg"><img src="small.jpg" alt="Small image" /></a> CSS 拡大画像のスタイルはCSSで簡単にカスタマイズが可能です。下記はデモページの例です。 #easy
パラグラフ・リスト・見出しなど [ad#ad-2] UIパーツの使い方 下記の3つのステップで、これらのUIを自分のページで利用できます。 IEへの対応 IEにHTML5を理解させるために、2つの重要なファイルを使用します。 <!--[if IE]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <link rel="stylesheet" href="ie.css" type="text/css" /> <![endif]--> CSSのインクルード スタイルシートファイルをインクルードしてください。もし使用するエレメントが限られているのであれば、その箇所のみで大丈夫です。 <link rel="stylesheet" href="reset.css"
WordPress3.xのデフォルトのテーマファイル「Twenty Ten」をHTML5に完全対応させたテーマファイル「TwentyTen Five」を紹介します。 Use HTML5 in WordPress TwentyTen [ad#ad-2] 「Twenty Ten」はWordPressの3.0からのデフォルトの新しいテーマファイルで、doctypeにHTML5が使用されています。しかし、HTML5の新しい要素や属性などは他の箇所には使用されていません。 「TwentyTen Five」は、この「Twenty Ten」をベースに適切な箇所にHTML5の要素や属性を使用したテーマファイルです。 見た目は「Twenty Ten」と同じシンプルなデザインです。
SEO担当者はもとより、デザイナー、コンテンツライターのための、サイトのユーザーエクスペリエンスも強化するSEOのテクニックを紹介します。 User-Friendly SEO [ad#ad-2] 下記は各ポイントを意訳したものです。 はじめに 1. 見出しの最初にプライマリキーワードを 2. キーワードのために太字のテキストを 3. リストの活用 4. 重要なリンクにはキーワードを 5. タイトルの始めにプライマリキーワードを 6. 内部リンクの強化 7. イメージの最適化 多くのキーワードが必要ですか? デザイナーとSEO担当者とライターのチームワーク はじめに 若干のデザイナーが、そして多くのコンテンツライターが、ウェブの効果的な戦略においてSEOを必要悪だと見なします。 しかしながら、SEOを適切に行えば、それは減るよりむしろ、ユーザーエクスペリエンスの強化をはかることができます。こ
PHP上で高速なJavaScriptプログラミングが可能になるV8利用PHP拡張がpeclにて公開されていましたので使ってみました。 その拡張名はV8js。spidermonkeyのjavascriptエンジンを使うものはありましたが、node.jsでも使われているv8エンジンを利用するものということで注目。 尚、利用にはPHP5.3.3以降が必要ですのでご注意。 V8のインストール V8のインストールには、Subversion1.4、Python2.4以降、更にビルドツールとして SCons 1.0.0以降を使いますのでyum等パッケージツールでインストールして下さい。 Subversionでチェックアウトします $ svn checkout http://v8.googlecode.com/svn/trunk/ v8 SConsでビルドします $ scons library=share
WEBサービス用にさくらのVPSサーバーを借りた後で役に立つ記事色々 さくらVPSサーバの人気が高いということで、借りたらやる設定についての記事をまとめてみました。 さくらのvpsといっても普通のcentosと一緒なので、他のvpsサービスやec2でも使えます。レンタルサーバーと違って最初はなにも入ってないので初期設定が必要ですが、これさえみとけば大体大丈夫というものをまとめてます。 さくらのVPS 初期設定 【さくらのVPS】初期設定をしてみた | Untitled Documents. root パスワードの変更、ユーザ追加、sudoers編集、ssh公開鍵設置、パッケージ管理ツールの設定等 CentOSをサーバーとして活用するための基本的な設定 (さくらインターネット創業日記) sshのポート番号変更、公開鍵設定、ファイアウォール設定の他、不要サービスの停止といったさくらインターネッ
自分用に備忘録。そろそろチートシート が出てくる頃じゃないかと思うので、そう 焦ることも無い情報だと思いますが、近々 使いそうなのでその時に面倒な事になら ないようによく使いそうなマークアップを リストとしてメモしておきます。 ちゃんとしたデモは本家で確認して下さい。ここにあるサンプルは僕のいい加減なサンプルです。尚、マークアップが見やすい様にするだけの為にコメントアウト入れていますが気にしないで下さい。 [note]追記 もう少し増やして見やすくしたものをダウンロード出来るようにしました。 [/note] プラグイン読み込み<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.css" /> <script type="text/javascript" src="h
20 Design Tutorials For Creating The Perfect Button | Creative Nerds これは押したい!というボタンを作成するチュートリアル集 イラストレーターやPhotoshopで次のようにクールなボタンを作成するチュートリアル集です。 CSS3でボタンデザイン出来るようになったとはいえ、凝った物を作るならやはりオーサリングツールという方は参考にできそう。 ボタンデザインの仕方は本当に色々あって、奥が深いですね。 関連エントリ ボタン作りにもう手間はかからないPhotoshopのボタン素材150 かなりクールにデザインされたPhotoshop用のボタンテンプレート集 ハイクオリティなPhotoshopのボタン、アイコン、バッジ等のテンプレ集 ボタン作成のPhotoshopチュートリアル集 背景やボタンなど様々に使えるPhotoshopグラ
オフラインでじっくり読みたい時などに便利な、ウェブページをPDFや画像ファイルに簡単に変換するFirefoxとChromeの機能拡張「iWeb2x」を紹介します。 日本語でも文字化けすることなく変換されます。 FirefoxでiWeb2xを使用したキャプチャ [ad#ad-2] iWeb2xのダウンロード・インストール Firefox, Chromeのダウンロード先はそれぞれ異なります。 Firefox版 iWeb2x - Printer Friendly Web 0.3 Chrome版 iWeb2x 上記ページにて、「Add on Firefox」「Install」ボタンをクリックして、インストールをしてください。 iWeb2xの使用方法 下記は、Firefox版を例にしたものです。 インストールが完了すると、ブラウザの枠の下にiWeb2xのボタンが表示されるので、それをクリックすると、
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く