サムネイル画像のいろいろなデザインスタイル
デザイナーのためのサムネイル画像のいろいろなデザインスタイルをTutorialFeedから紹介します。 12 Excellent Thumb Image Styles for Web Designers サムネイル画像のデザインスタイルは、左上から順に下記のようになっています。 Wide Border 白で縁取りをし、ボーダーを使用。 Sleek Border 細いボーダーを使用。 Sleek Border with Drop Shadow Sleek Borderにドロップシャドウを使用。 Behind Drop Shadow 画像が立っているようにドロップシャドウを使用。 Flip Shadow 画像がめくれているようにシャドウを使用。 Bottom Corner Cut 画像のコーナーをカットして使用。 Wide Rounded Border 広くて丸みがあるボーダーを使用。 Top
Firefoxを思い通りに--about:configページで使える便利な10の「ハック」 - builder by ZDNet Japan
Firefoxのパワーユーザー以外の人は、about:configページには不案内かもしれない。Firefoxのabout:configページは、ある程度人の目に触れないようになっている設定関連のページだ。これが隠されているのは、かなり強力なものであり、標準的なオプション設定のウィンドウのように簡単に使えるものでもないからだ。about:configページでは、自分がやっていることを把握していなければ、問題を起こしてしまう場合もある。実際、初めてこのページを閲覧するときには、先に進むのに承諾事項に同意する必要がある（実際には単なる警告だが）。 このページの働きは単純だ。アドレスバーにabout:configと入力すれば、このページにたどり着くことができる。このページには、さまざまな種類の設定事項を扱うエントリが（一行に1つずつ）ある。各エントリは、キーワードで検索することができる。エントリ
フリーのマインドマップツールが熱い！
最近マインドマップがマイブームになっています。 パソコンのソフトを使うと、さくさくとまとめられるので気に入っています。 自分の考えや本などで学んだことなどは、これまでノートに手書きしたり、パソコンにテキストで打ち込んだりしていましたが、マインドマップでまとめるようになってかなり効率的になりました。 まとめる時間、復習する時間が短縮されるだけでなく、記憶持続力も高まった感じがします。 最近はいいフリーソフトがたくさん出ているので、まだ試していない方はぜひ試してみてはいかがでしょうか？ ちなみに、たくさんのマインドマップソフトを使った結果、私は以下のソフトに落ち着きました。 １．Freemind ・主に作業／整理用 ・ショートカットキーなども豊富でほとんどマウスを使う必要なく、作業がさくさくできます。 ・デザインはシンプル ・ダウンロード先：http://www.freemind-club.c
ウェブサイトでやってしまいがちなユーザビリティのミス
ウェブサイトでやってしまいがちなユーザビリティの9つのミスをSmashing Magazineから紹介します。 9 Common Usability Mistakes In Web Design 下記は、その意訳です。 1. クリックできるエリアが小さい リンクのクリックできるエリアが小さいと、ユーザーはクリックするのが非常に困難です。 解決方法 リンク箇所にpaddingなどを設けて、クリックできるエリアを大きくします。 2. 間違った目的のためのページネーション ページネーションは、内容を複数のページに分ける時に使用します。 しかし、最近ページビューを増やす目的でページネーションを設置しているサイトがあります。これには問題点が2つあります。 一つ目は、1つのコンテンツを読むのにページをロードしなくてはならないこと。二つ目は、SEOと関係があります。ページのインデックス付けを行う際、ペー
ロゴ画像の“データがない！”を一瞬で救う超便利ツール (1/2)
Webサイトのロゴを作る時は、Photoshopのようなビットマップデータではなく、Illustratorで扱うようなベクターデータのほうが何かと便利だ。画質を落とさずに拡大縮小をはじめとするさまざまな加工ができるし、印刷物などWeb以外の用途にも流用が利く。実際、多くの方はそうしているだろう。 ところが、これが他人から指定されたロゴを使う場合はそうはいかない。「ビットマップデータしかない」、あるいは「名刺や封筒に印刷されたものしか残っていない」なんてケースもざら。やむを得ず、名刺をスキャンして下絵にして、Illustratorを使ってトレースして……といったステップを踏むことになると、時間も手間もかかって面倒だ。 そこで活用したいのが、ビットマップ画像をベクター画像に変換してくれる自動トレース機能。たとえば、CS2以降のIllustratorには、「ライブトレース」という機能が搭載されて
jQueryプラグインでクールなプルダウンメニュー | バシャログ。
お仕事で JavaScript によるプルダウンメニューを実装する必要があり、色々試してみて一番お手軽だったのが「droppy」です。 「droppy」 は jQuery のプラグインです。 パッケージをダウンロードすると色々とファイルが入っていますが、必要なのは src ├ javascripts │ └ jquery.droppy.js └ stylesheets └ droppy.css の 2 ファイルです。 プルダウンメニューの実装は、HTML に以下のコードを貼りつけて CSS を適用すればオッケーです。 ■JavaScript … 外部ファイル化がお勧め <script type='text/javascript'> $(function() { $('#nav').droppy(); }); </script> ■HTML … とてもシンプル <ul id='nav'> <
『Dropbox』フォルダ内にないファイルやフォルダを同期 : ライフハッカー［日本版］, 仕事も生活も上手くこなすライフハック情報満載のブログ・メディア
多くのユーザから愛されているクロスプラットフォームファイル同期アプリ『Dropbox』はライフハッカー読者にもかなりの人気を誇っております。 ...が、ひとつだけ欠点が。それは『Dropbox』フォルダにあるファイルしか同期してくれない、ということ。『Dropbox』フォルダの外に確実に息づいている大切なファイルやフォルダを同期させるには「My Dropbox」フォルダと同期したいドライブ上のフォルダとの間にシンボリックリンクを作成する必要があります。シンボリックリンクとはショートカットのようなもので、たとえばデスクトップ上に「SyncMe」というフォルダがある場合、このフォルダが「My Dropbox」フォルダ内に存在するかのように見せかける技のことです。OSによってやり方もことなるので、別々に説明していきます。 まずはWindowsの場合から SysinternalsからのJuncti
[JS]複数のレイヤーをずらして動かし立体感を与えるスクリプト -mParallax
ユーザーのマウス操作にあわせて、複数のレイヤーをずらして動かし、パララックス（視差）効果を与えるスクリプト「mParallax」を紹介します。
フォトショいらず：CSSで画像の上に斜めの帯と文字を表示してみる - builder by ZDNet Japan
「FirefoxとSafariのCSS徹底検証」では、直近の2回に渡ってCSSのプロパティ「transform」を紹介している。 CSSでトランスフォーム：変形処理「transform」の基礎 CSSでトランスフォーム：1つの要素に複数の変形処理を適用する 今回は番外編として、transformプロパティを使って、画像に対し斜めの帯を付けて表示するテクニックを紹介しよう。 画像にななめの帯を付けて表示する transformプロパティを利用すれば、ヘッダー画像にななめの帯を付けるようなデザインをCSSで実現することができる。 たとえば、次のサンプルでは「Welcome to my Homepage」という文字を表示した黄色い帯を画像の右上に重ね、45度回転して表示している。このとき、黄色い帯の両端を画像に合わせてカットするため、全体を囲んだ
マークアップエンジニアじゃなくても覚えておきたいHTMLとCSSの話(〜HTML5・CSS3、IE8 それぞれの準備に向けて) - livedoor ディレクター Blog(ブログ)
こんにちは。 livedoor Blogを担当しています石野と申します。 前職はマークアップエンジニア(HTMLコーダー)をしていました。 今回はその経験を踏まえ、ディレクターとして把握しておいた方が良いHTML/CSS関連のお話をご紹介しようと思います。 昨年からHTML5、CSS3、そしてInternet Explorer(以下IE)8のベータ2版発表と、バージョンアップに関するニュースが相次ぎました。 その違いを認識する上でも、また制作サイドのディレクションに活かす上でも本エントリーを参考にしてください。 ▼ 構成 (1) HTML - 文書型について (2) HTML+CSS - クロスブラウザについて (1) 文書型について - ファイルの先頭に陣取っている「DOCTYPE」とは何か？ HTMLソースを開くと、こういった記述を目にしませんか？ !DOCTYPE html PUBL
Twitterの裏技“Hashtags”
先週、記事の中で記者のTwitterアカウントを公開したところ、100人以上の方にフォローしていただいた。同時にフォローもした。記者のFollowers、Followingは200人を超えた。それでどうなったのか？ タイムラインをまったく追えなくなったのだ。記者にとってTwitterでコミュニケーションを取ることは楽しいし、有益な情報を得られることも多い。どうにかならないものか。 特に先週は都内で「Developers Summit 2009」（デブサミ）があり、記者のタイムラインはさまざまなポストで常にあふれかえっている状態だった。ふと気付くとタイムラインに未読のポストが数十個貯まっている。外出していたりすると数百個だ。有益な情報を見逃していないか、不安を覚えることもあった。 Twitterクライアントの中には自分がフォローしているユーザーをカテゴリに分けてコメントを効率よく読めるような
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://kengo.preston-net.com/archives/004069.shtml
http://www.designwalker.com/2009/02/ps-action.html
HTML、CSS、JavaScriptの練習に最適な便利ツール『rendur』 - 100SHIKI ～ 世界のアイデアを日替わりで ～
[CSS]軽快に動作するタブコンテンツを実装するスタイルシート
