エラスティックレイアウトでイメージを自動で拡大する方法 2007年2月28日 文字サイズを拡大したときにレイアウト幅も伸縮するエラスティックレイアウトの手法は以前ご紹介しましたが、ヘッダーなどでイメージを使った際はイメージは伸縮しないのであまり使えないなと思われているかと思います。 そこで今回は文字サイズを変更してイメージも拡大する効果を得れるライブラリswIRをご紹介します。 swIRはFLASHとJavascriptを利用した様々なエフェクトをimgに与えれる優れものです。今回はエラスティックレイアウトの画像に対応する部分だけをご紹介します。 使い方はいたって簡単です。まずTOPページでダウンロードできるswfIRを解凍し、サーバーの同一フォルダにswfir.jsとswfir.swfをアップロードします。そしてswfir.jsを読み込んでJavascriptで効果を記述します。以下はh
注目!Flashを応用してHTML&CSSだけでは通常作れない画像効果を得る「swfIR」 2007年02月27日- swfIR: swf Image Replacement When you start to use swfIR, you’ll need the ability to style it, the same way that you can do with regular images. Flashを応用してHTML&CSSだけでは通常作れない画像効果を得る「swfIR」。 こういった仕組みで、久しぶりに感動させられました。 Ajaxにこだわらず、Flashも応用することでこんなことも出来るんだ、と思わせられたものでした。 なんと、<img src="〜"> な画像タグがあったとして、この画像に、動的に角丸やシャドウ効果、回転効果やボーダーを直接かけることが出来ます。 次の
他のRSSリーダーでも記事リストを閲覧できる myFeedzには記事リストのフィードを出力する機能も持っている。メインページの自分専用記事リストだけでなく、タグに関連した記事リストの出力も可能である。Internet Explorer7やFireoxの場合、各ページの「subscribe to this page」をクリックすれば、RSSリーダーにフィードを登録することができる。つまり、自分の使い慣れたRSSリーダーでカスタマイズされた記事リストを見られるわけだ。 まだ開発途上のサービスであり、これからも機能強化や精度向上が図られることだろう。今後が楽しみなサービスだが、現時点では日本語に対応していない。カスタマイズの項目には「language」が用意され、「english」と「all」を選択できるようになっている。だが、日本語のフィードを読み込ませても正しく反応しないことがあるし、日本語
いいね! 1 ツイート B! はてブ 25 Pocket 14 SEO-mozを見ていたら、非常に面白い記事を発見した。「12 Rules for Choosing the Right Domain Name(正しいドメインを選ぶための12の規則)」という記事だ。プロジェクトで取得しようと思うドメインの99%はすでに取られており、そういう場合にとるべきルールが12個書かれている。 ドメインを取得した人は、それほど多くはないかもしれないが、ロリポップやさくらインターネット、DreamHostなどの安くて高性能なレンタルサーバーの登場により、それらに付帯するサブドメインを選んだ経験がある人はいるはずである。 以下がルールリストである。誤訳も多いと思いますが、参考まで。 1.まずは思いつきで5個のキーワードを並べる 2.ドメインをわかりやすいものにする。 3.「.com」でドメインを取る 4.簡
valid.tjp.hu - tjpzoom.js 2.0 - JavaScript / CSS / DOM image magnifier As you may have realized, this is a tool that brings images closer. This is the new version of my script, tjpzoom. 画像カーソル位置をズームインできるライブラリ「tjpzoom.js」。 次のように、カーソル位置の画像をズームできます。 知っておけば、ウォーリーを探せ風の簡単なゲームを作ったり、サイトのキャンペーンとしての面白い1要素として使えそう。 設置方法は簡単で、まず、次のようにスクリプトを読み込みます。 <script type="text/javascript" src="http://valid.tjp.hu/zoom2/tj
グリッドレイアウトブックマークレットを作りました 2007-03-08 グリッドレイアウトのためのちょっと便利な背景画像 | S i M P L E * S i M P L Eが便利そうだったので、ブックマークレットを作ってみました。 ブックマークレットをを実行すると、背景画像がWeb Page Layout Grid | Smiley Cat Web Designで使われている画像に切り替わります。 ブックマークレットは以下からどうぞ。 [背景をグリッドレイアウトにする] 背景画像を切り替えてるだけなので、他にも応用がききそうです。 コメント / トラックバック コメント / トラックバック 3 件 *LOVE IS DESIGN* より: 2007-03-10 00:35 実用的!レイアウトで悩んだときに頼れるツール 計算された余白やレイアウト。美しいと感じるものには何か法則があるはず
今回は本気だ。さよならOpera、こんにちはFirefox。もう僕はOperaのこんなところに耐えられなくなった。 自分のサイトを見る度にパースエラーを返す 更に、追い打ち。 del.icio.us投稿時のタグクラウド表示がのろい livedoor Readerのフィード管理画面がうまく動かない ウェイトの大きい部分に結構な問題があって実はタイムロスが馬鹿にならない……というわけで、Firefoxへの乗り換えの過程をメモしておく。よりベターな方法がある場合教えて頂けると幸いです。 本当はキャッシュ読み込みが早いGran Paradisoを入れるつもりだったのだけれど、takenさんが後2週間位で凍結だと教えてくれたのでα3まで待つことにする。結構ズレるものらしいけど、気にしない。とりあえずFirefoxの流儀に慣れてみることが重要。 ちなみに入っているのは綾川版Firefox。のりさんに教
次のYouTubeはこれだ!簡単に文書が共有できる『Scribd』 March 7th, 2007 Posted in 便利ツール(ウェブ) Write comment これはすごい。 各所で話題になりつつあるが、とにかくご紹介。 Scribdはいわゆる文書共有サイトである。しかしユニークなのはアップされた文書をFLASHに変換し、簡単に見れるようにしてくれている点。 このサイトに文書をアップして貼り付け用のコードを埋め込めば瞬時にFLASHで文書が見られるようになる。 しかも見ている人はそれをPDFやWordやテキストでダウンロードまでできるという親切さ。さらにNuanceを使って音声変換までしてくれる。 YouTubeがすごかったのはさまざまなフォーマットの動画をFLASHで簡単に見られるようにした点である。面倒なプラグインとかそういうのはもうやめよう、という時代なのである。 今後はセ
アドレスの最初が「https」で始まるSSL(Secure Socket Layer)による暗号化通信ですが、現時点では暗号化とそのサーバの証明書(サイトの実在証明)とが混同され、すべて同じ鍵マークで表示されます。結果、単純に暗号化されているサイトと実在が証明された安全なサイトとが区別できない状態でした。そのため、フィッシング詐欺のサイトなどでは来た人をだますためだけにSSLを実装するという始末。 この鍵マークによるSSLかどうかの判別システムの崩壊に危機感を抱いた電子認証事業各社が2005年から新たに策定を開始したのが「EV SSLサーバ証明書」と呼ばれる新しい証明書。ドメイン名の所有権の確認だけでなく、申請責任者の権限の認証、政府または第三者機関における組織の実在性の検証などが含まれているため、単純に暗号化されているだけではなく、そのサイトは安全なのかどうか(実在するサイトを騙っている
まずは最近知って便利だと思ったCSSの小技をひとつ。 文章の最後に、「※(米印)」などで注釈を入れたいときに、CSSのみで行の開始位置を揃えるのにすごくシンプルなやり方がこれ。 .note { padding-left:1em; text-indent:-1em; } <p class=”note”>※米印を使う場合はこいつが便利。<br /> 改行してもこの通り。ちゃんと開始位置が揃ってる。</p> 「padding-left : 1em;」でまず1文字分右に動かして、「text-indent : -1em;」で最初の行だけ1文字分左に出す、ということらしいです。これ考えた人はえらいっすねぇ。 他には開始位置を揃えるいわゆる「ぶら下げ」をCSSでやる場合、<div>タグの入れ子を使ってもいいが、<dl><dt><dd>の定義型リストを使うのがおすすめ。Definition Listの略で
久々に定義リストを横並びにしたら、IE7で上手くいかず、ちょっと苦戦したのでメモめもMEMO。 おそらく、ddがテキスト量などで高さがdtより多い場合は問題が無いんだろうけど、dtの方が高さがある場合、IE7だと上手い具合に回り込みが解決されない(っぽい dtの方が高さがある場合。っていうのは今回の場合は画像にdtが来て、ソレを定義付ける説明がちょろっとあるようなイメージ。 実際の表示は下のような感じ。 SQ Lifeのバナーです。 SQ Lifeのバナーです。 スタイルは以下のようになられます。 dl#sample_070228 dt { float:left; clear:both; width:125px; margin-right:10px; margin-bottom:20px; border-bottom:0; } dl#sample_070228 > dd { float:l
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く