Webやアプリのデザイントレンドを紹介。たまに雑談。

Browse By

Category Archives: Web Design

[WEB DESIGN] rendr – ウェブベースのHTMLエディタ

  • Pocket
  • このエントリーをはてなブックマークに追加

BORDER=0ブラウザ内でHTMLとCSSの記述ができるエディタ。マック環境だとSafariではちゃんと動作しないのでFireFoxで試してみましょう。左の画像クリックでFFで編集中の画面が大きく表示されます。丸角ボーダーなんかも使ってますね。まぁそれはいいとして、このウェブアプリがスゴいのは記述内容がリアルタイムに反映されるという点。「Markup」だけでなく「CSS」の方も、書いた内容がすぐにページ内に反映されます。試しにCSSタブ内の「body {background:#624847;}」を#000にしたりすると挙動が分かると思います。また編集用の小ウィンドウは右下の緑色のハンドルをドラッグすると大きさを変更でき、ウィンドウ上部をドラッグすれば移動もできます。正直感動モンの簡単さ。こういうウェブの記述の仕方って、例えばiWebとかのコンシューマー向けエディタにも向いてるような気もするんだよね。といってCSS直書きはさすがに敷き居が高いかもしんないけど。うーんそれにしてもスゴい。
rendr >> | Site top >>

[WEB DESIGN – JAVASCRIPT] Ajax Edit In Place (EIP)

  • Pocket
  • このエントリーをはてなブックマークに追加

BORDER=0Flickrを使った事のある人ならすぐにピンとくる、編集したい場所をクリックして、画面切り替えなしで編集→セーブするというスクリプト。exampleからサンプルを見る事ができます。Prototype.jsのライブラリを使っていますが同梱されてます。便利な機能だと思うけどなかなか使いどころが難しいよね。例えば管理者画面でのテキストの再編集とかなのかな。 0.2.0 releaseをクリックすればソースをDLできます。
Ajax Edit In Place (EIP) >> | Example >>

[WEB DESIGN – JAVASCRIPT] Bubble Tooltips

  • Pocket
  • このエントリーをはてなブックマークに追加

Bubbleリンク部分にマウスオーバーした際にマウスポインタに追従する形でのToolTips。exampleのページ内でサンプルを見れます。ページ下部のdownloadのリンクからソースをDLできます。外部.jsファイルを置いて、HTMLヘッダとCSSに加筆すればオッケー。適用するdivとか選べるのかな? example内のソースでは特にrelやclass指定なしで適用されてますね。ToolTips内に表示されるテキストはtitle属性で指定したものが出るのでちょうどイイ感じ。
Bubble Tooltips >> | example >>

[WEB DESIGN] Total Tutorial

  • Pocket
  • このエントリーをはてなブックマークに追加

BORDER=0ウェブのデザイニングなどで使うアプリケーションごとに、チュートリアルを各種取りそろえてる投稿サイト。Adobe Photoshopあたり結構イイネタがありました。英語版での解説にはなるけど、使い慣れた人ならだいたい分かるような内容。コレとか好きだな。まぁだいたいどれもちょっと考えれば作れるものばかりではあるけど、ネタ帳として便利だねここ。PHPやJavaScriptのTipsもあります。
Total Tutorial >>

[WEB DESIGN – TOOL] The Scrutinizer

  • Pocket
  • このエントリーをはてなブックマークに追加

The特定のウェブサイトの各種診断をまとめてやってくれる便利なサイト。フォーム内に調べたいウェブサイトのURLを入力してエンター。その後下にある各診断項目をクリックすればオッケー。HTMLやCSSやRSSのW3Cの準拠率、Robots.txtやCreative Commons Licenseの有無、Googleにバンされてないかのチェックなどが一括でできます。サイト製作者にとっては死ぬほど便利なサイト。仕事の仕上げとなる各種チェックも多少はラクになるかもしれません。
The Scrutinizer >> | 翻訳版 About >>

[WEB DESIGN – PHOTO] Brian Dilg Photography – Photo Retouching

  • Pocket
  • このエントリーをはてなブックマークに追加

Brianフォトレタッチングの教則にも使えそうな作例。11例とそんなに数は多くないけどクオリティ高いっす。写真家の方のサイトなのでギャラリーに行くと他にも美しい写真がたくさんあります。流行りのミニチュア加工もやってらっしゃいますね。うーん美しい。
Brian Dilg Photography – Photo Retouching >> | Site Top >>

[WEB DESIGN] Reflections.js

  • Pocket
  • このエントリーをはてなブックマークに追加

Reflectionsアップルの商品画像などでよく見かける反射効果、日常的にフォトショップを使っている人にとっては2分もあれば作れますが、けどCSSで一元管理できたらそれはそれで便利だし、生産性も上がります。このReflections.jsは名前の通り外部JavaScriptなので、サイト内のどこかに置くだけでオッケー。あとは反射させたい画像にclass指定すれば効果が得られるようです。classも複数用意されていて、反射した画像の深さが選べるようになっています。
Reflections.js >>

[WEB DESIGN – CSS] Dotted image border

  • Pocket
  • このエントリーをはてなブックマークに追加

BORDER=0主にウェブ製作者が喜ぶTips。CSSで書くボーダーって、Solid表示以外にもDottedとかありますよね。けどアレってブラウザによって見え方がまちまちで、「ちゃんとSafariみたく表示せんかいdrftgyふじこ!!」ってなった経験ありません? わたしはございますので最近じゃボーダー指定はめっきり使わなくなってしまいました。こちらではその解決策を画像のbackground表示によって解決してます。白黒ドットの2×2のgifを1枚用意して、そいつを特定のDivなどのコンテナbackgroundに指定。あとはそこに画像を放り込んで、paddingを1pxにすればオッケ。コチラではその応用例が掲載されてます。imgタグの白ボーダーと組み合わせるってのもイイ感じ。2×2のドット絵も上がっています。早速仕事で使えそうな小技ですね。
Dotted image border >>