CSSでオシャレな吹き出し形式のブロックを作成する「CSS Speech Bubbles」:phpspot開発日誌
willmayo.com CSS Speech Bubbles Easy to customize speech bubbles coded in CSS and valid XHTML 1.0 strict. CSSでオシャレな吹き出し形式のブロックを作成する「CSS Speech Bubbles」。 次のような吹き出し形式のblockquote要素を作成するサンプルが配布されています。 HTMLコードは次のようにクリーンにできます。 <div class="bubble"> <blockquote> <p>Works great for blog comments!</p> </blockquote> <cite><strong>John Smith</strong> on 1st January 2007 at 3:55pm</cite> </div> 角丸部分にはCSSだけでなく、
Ajaxなページで「戻るボタン」を機能させる方法:phpspot開発日誌
JavaScriptとLightBoxを組み合わせたスマートな写真の見せ方サンプル「Sucke... 次の記事 ≫：花火アニメーションをJavaScriptで実装「Fireworks.js」 Ajax Back Button Hack Ajaxなページで「戻るボタン」を機能させる方法。 Ajaxなページでは、ブラウザの「戻るボタン」を押すと、通常は、前に開いていたページに戻ってしまいます。 Ajaxでページを１，２，３と開いていって、２に戻りたいのに、前に開いていたページに戻るのは利用者としては不本意な動作です。 そこで、IFRAMEを使った、Ajaxでの「戻るボタン」実装ハック方法の紹介。 Ajaxで画面を切り替えた際に、IFRAMEのsrcも切り替えることで戻るボタンを動作させることが出来ます。 例えば、javascriptで次のようにIFRAMEのsrcを切り替えます。 <ifram
注目！Flashを応用してHTML＆CSSだけでは通常作れない画像効果を得る「swfIR」:phpspot開発日誌
注目！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="〜"> な画像タグがあったとして、この画像に、動的に角丸やシャドウ効果、回転効果やボーダーを直接かけることが出来ます。 次の
Webデザイナー/開発者が覚えておくとよい２５のテクニック:phpspot開発日誌
25 Code Snippets for Web Designers (Part1) There are loads of handy scripts, bits of html and widgets that you can incorporate into your websites and blogs - here we bring together 25 of the most helpfull in the first part of this series … Webデザイナー/開発者が覚えておくとよい２５のテクニックが紹介されていました。 知っておいてサイトに組み込めば、一歩レベルが上のサイトを構築できるはずです。 CSSを使うものだけでなく、JavaScript や PHP も絡んでくるものもありますが、サンプルを改変することで設置をすることも出来るはずです。 バブルツー
WEBデザインの際に使える５０のソース:phpspot開発日誌
50 sources for web design inspiration by Fuzzy Future When Fuzzy Future first got started, I said that our goal was to build content that other people can use to improve their own projects. WEBデザインの際に使える５０のソース。 当ブログでもいろいろと紹介してきましたが、カッコいいサイトをまとめているサイトがあったので紹介。 デザインに迷ったときはまず、他のデザインサイトを見ていろんなデザインを視覚に入れることが重要ですね。 The Best Designs Six Shooter Media’s Free Templates 2Advanced Studios Andreas Viklund Fre
ブログのネタに困ったら・・・ブロガーのためのブレストツール『The Visitor Grid』 | POP*POP
ブログのネタがない・・・という方におすすめのツールをご紹介。 『The Visitor Grid』なるブレストツールが良い感じです。ブロガーに特化したテンプレートで、マスを埋めていくだけで自然と何を書くべきかがわかるというものです。 これは確かに人気記事が書けそうです。簡単かつ効果的なその手法の詳細については以下をどうぞ。 この手法、読者が好きそうな「記事の種類」と、読者が喜びそうな「記事の内容」を5×5のマトリックスで埋めていくものです。 それだけできわめて質の高いブレストを行うことができます。 ではこのマトリックスの作り方をご紹介。 まず横軸には以下の項目を並べます。アクセスを集めそうな「記事の種類」ですね。括弧内には自分のブログのテーマをいれて考えます。 （ ）に関する客観的な情報 （ ）に関するレビュー、意見 （ ）を好きそうな他の人について （ ）に関する楽しい、悲しい、刺激的な
新米の開発者とマーケ担当者に贈る24のサイト内SEOチェック項目 | Web担当者Forum
ここで取り上げる話は、たいていの人がウェブサイト自体の、つまりオンサイト検索エンジン最適化（SEO）情報として、かなり一般的な話だと思うだろうけど、どれほど多くのSEOコンサルタントやウェブ開発者が新しいサイトを立ち上げる際に、ここに挙げる基本ステップを無視したり、忘れたりしているか知ったら驚くかもしれない。 オンサイトSEOに関するこれら24のチェック項目やテクニックを利用すれば、どんなリンクビルディングやリンクベイティングでも、すばらしい結果が得られるだろう。 テーマに沿った、または関連性がある最良のキーワードでオンサイト最適化（OSO）を行うため、最初のキーワード調査を終えたら、予算100ドルでAdwordsのテストキャンペーンを実施しよう。 どのページにも、コピーしたものではなくて、上手く書けている魅力的なタイトルとページ内容説明タグがあるか確認しよう。 サイト上の関連性がある個別
これだけは覚えておきたい「紳士らしく振舞うための18のルール」 | POP*POP
先日先輩から「社会人になったら誰も注意してくれないから俺が注意する」といわれ、テーブルマナーを見直す機会がありました。 ちょっとしたことですが、こうしたマナーは大事ですよね。細かいことが自然にできる人が「紳士」なのだと思います。 そこで今回はこちらの「紳士のエチケット」をご紹介。全部で18項目あります。ご自身の振る舞いを振り返ってみてはいかがでしょうか。また自分のことはなかなか気づかないもの。自分がちゃんと守れているか、友人にきいてみてもいいですね。 » Etiquette Of A Gentleman （via AskMen.com） 紳士らしく振舞うためのルールとはどういったものがあるでしょうか。以下よりどうぞ。 ■ 紳士のエチケット（基本編） 常に上品であれ 誰かの何らかの振る舞いに嫌悪感を抱いたとしても、それと同じレベルまで自分を下げることはありません。「自分の方が人間ができている
タイトルはこう付ける――ブログメディア研究会で検討したこと
赤ペンで他人の記事を添削 まずは持ち寄ってもらった記事を全員にコピーして配布。15分かけて「この記事をどう改善できるか？」について、赤ペンを入れてもらった。原則的には、思うところを自由に書いてもらうことにしたが、ブログを続けたくなくなるような「ヘコむことはあまり書かないように」とお願い（笑）もした。 その後、1つずつ記事を取り上げ、各々のアイディアを発表。タイトルの付け方から記事の内容まで、さまざまな意見が出た。以下に参考になるようなポイントをまとめる。 タイトルに重要なのは「具体化」「どう役立つか」「権威付け」「特徴的な語句」 今回題材となったのは3つの記事。すべての記事において「タイトルはもう少しこうした方がいい」という意見が出た。例えば、ある参加者が持ち寄った記事のタイトル「ブロガーに役立つ情報満載のニュースサイト○○」である。 「情報満載」という表現はあいまい。「情報が108件も掲
画像で使われているフォントを調べる方法 | POP*POP
今回の「諦めている不便利」はこちらの投稿をご紹介（企画の詳細はこちら）。 ロゴを作る時に、クライアントから希望のフォントが使われている印刷物やビットマップ画像を示されて「このフォントで」と言われることがあります。その字形からフォント名(もしくは形が近いフォント)を検索する手はないものでしょうか？（ルミエールさんありがとうございます！） 個人的にも「このフォントいいな。何というフォントだろう？」と思いながら、わからなかった経験があります。 この解決方法を調べてみました。 「WhatTheFont」というサイトを使ってみるのはいかがでしょうか。画像で使われているフォントを調べてくれるサイトです。残念ながら日本語フォントには対応していませんが便利ですよ。 » WhatTheFont 使い方を簡単にご紹介します。 ↑ 調べたいフォントが描かれている画像をアップロードします。URLを指定しても取り込
グラデーションを使ったデザインのやり方 - GIGAZINE
Web2.0のデザイン的要素として「グラデーションをかける」という重要なものがありますが、このグラデーションのかけ方が実際にやってみると実に難しい。ネット上でいろいろ調べてみるとグラデーションのかけ方自体は様々な方法やチュートリアルが見つかるものの、「何が正解なのか？」というのは見つかりません。つまり、何がそのときに最もベストな方法なのかがわからないわけです。 また、ブログのテンプレートを選ぶ際にも、どのようなグラデーションが自分の目指すテーマのブログにふさわしいのかも基本的な知識がないとなかなかわかりにくいものです。 というわけで、今回はグラデーションを使ったデザインの仕方について。デザインをしない人でもどのデザインを選べばいいかがわかるように書いてみました。 ■間違ったグラデーションなど無い まず一番わかりやすいグラデーションについての誤解はこれ、汚いグラデーションやださいグラデーショ
HugeDomains.com
Captcha security check luv2help.com is for sale Please prove you're not a robot View Price Processing
なつみかん＠はてな - 便利な文房具＆文房具の使い方 まとめ
便利な文房具など ITmedia Biz.ID：重要書類に穴を開けずにファイリングする ITmedia Biz.ID：説明書ファイルで机周りを整理する ITmedia Biz.ID：本のページを開いたまま固定する ITmedia Biz.ID：ホワイトボードがポストイットに ITmedia Biz.ID：210円でも書き味は本格派「プレピー万年筆」 ITmedia Biz.ID：通常のホッチキス針で簡易製本ができるマックスの中綴じホッチキス ITmedia Biz.ID：あれ、どこまで読んだっけ？ を解決する ITmedia Biz.ID：スマートにしまう、メモのタイミングを逃さない――を両立するペンホルダー コクヨ 人間工学に基づいた新サイズノート「SlimB5」 自分の読書時間が計れるデジタルなしおり | Excite エキサイト : ニュース となりのインテリア この画鋲は、壁に穴を
lockエラー | 月額200円からのレンタルサーバー JSN
まずは最近知って便利だと思ったCSSの小技をひとつ。 文章の最後に、「※（米印）」などで注釈を入れたいときに、CSSのみで行の開始位置を揃えるのにすごくシンプルなやり方がこれ。 .note { padding-left:1em; text-indent:-1em; } <p class=”note”>※米印を使う場合はこいつが便利。<br /> 改行してもこの通り。ちゃんと開始位置が揃ってる。</p> 「padding-left : 1em;」でまず１文字分右に動かして、「text-indent : -1em;」で最初の行だけ１文字分左に出す、ということらしいです。これ考えた人はえらいっすねぇ。 他には開始位置を揃えるいわゆる「ぶら下げ」をCSSでやる場合、<div>タグの入れ子を使ってもいいが、<dl><dt><dd>の定義型リストを使うのがおすすめ。Definition Listの略で
【謝罪と修正】 『CSSと一枚の画像だけで・・・』の記事について | SiMPLE*SiMPLE
【謝罪と修正】 『CSSと一枚の画像だけで・・・』の記事について February 20, 2007 10:52 AM written by Gen Taguchi 先日ご紹介した『CSSと一枚の画像だけで透明感のある角丸パーツをつくる方法』ですが、重大なミスがありました。ここに謝罪して修正します（ご指摘いただいた匿名希望さん、ありがとうございます）。 間違いがあったのはこちら。 PNG画像を縮小したりしているみたいですね。もちょっと複雑なデモページはこちら。スクリプトのダウンロードもできます。 まずはじめにPNG画像を縮小などしていませんでした・・・申し訳ありません。それから「スクリプトのダウンロード」というのも誤解を招く表現でした。「CSSとHTML、画像が入ったファイル群」が正しい表現です。 速く書こうと思って中途半端な理解で書いてしまいました・・・以後気をつけるとともに、ここで修正
動画で学ぶPhotoshop （27のテクニック） | POP*POP
下記のサイトで「You Tubeで見るPhotoshopのチュートリアル」という記事が紹介されていました。YouTubeだけじゃなくてMetacafeの動画もありましたが・・・。 どちらにしろ文章だとわからないことでも動画だと簡単に理解できることもあります。細かい操作の多いPhotoshopやIllustratorなどはこうした動画チュートリアルに向いているかもですね。 » Use YouTube to learn Photoshop: etc: quick links to good stuff 以下、オリジナルの記事を尊重しつつ、内容の紹介というスタンスでいくつかご紹介・・・。 ■ Web 2.0-Style Logo Web2.0サイトでよく見かけるのロゴの作成方法です。光っているようなロゴですね。 ■ PHOTO EFFECT エフェクトの詳細です。どこにでもあるような電車の中の写
GIGAZINE - 使えるCSSコードいっぱい「Dynamic Drive CSS Library」
CSSを使ったタブ型の各種メニューとか、CSSによる画像のポップアップとか、ドロップシャドウやページカールの作り方などのコードが実際の例と一緒に置いてあります。実例を見てから選ぶことができるので、希望通りのものが手に入りやすいです。 Dynamic Drive CSS Library- Practical CSS codes and examples http://www.dynamicdrive.com/style/ RSSもあるので新しいコードが追加されればすぐにわかります http://www.dynamicdrive.com/style/csslibrary/rss/ コードの種類としては以下のような感じでカテゴリ分けされています。 横型のメニュー http://www.dynamicdrive.com/style/csslibrary/category/C1/ 縦型のメニュー h
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Alpha.67
PHP でファイルを読み取るための正しい方法
JavaScriptを利用してフォームの二重送信を防止する：CodeZine