タグ

2011年3月30日のブックマーク (42件)

  • 心の病で大切な「寛解」というキーワード [ストレス] All About

    症状がなくなっても、完治ではない。それが「寛解」あなた自身、また大切な人が心の病になったとき、知っておきたいキーワードがあります。それは、「寛解」(かんかい)という言葉です。 寛解とは、病気の症状がほとんどなくなったものの、完全に治癒したわけではない状態。再発しないように、様子をみていく状態のことをいいます。 多くの心の病は、適切な治療によって「寛解」に向かいますが、すぐに治癒、完治するとはかぎりません。なぜなら、目立った症状がなくなっても、いつ再発するか分からないからです。 うつ病は「心の風邪」ではない 「心の風邪」と捉えると、うつ病は正確に理解できないたとえば、「うつ病」は誰でもかかる可能性のある病気であるため、「心の風邪」などと言われます。しかし、これはうつ病の特徴を正確に表した例えではないと思います。 風邪の場合、薬を飲んだり休養したりすれば、割と早めに「完治」できます。こじらせて

    心の病で大切な「寛解」というキーワード [ストレス] All About
  • Web制作をこれから始める人の為のスキル・HTML・CSS・ブラウザ・写真素材入手の基礎情報*ホームページを作る人のネタ帳

    Yamadaです。 かれこれWeb屋暦が14年くらいになるんですが、こうしてWebに携わっていると、3ヶ月周期で情報の入れ替えをしていかないと、正直追いつかないと感じます。そんな激流のようなWeb業界にこれから飛び込もうと言う新卒の方や、中途の方に送るバイブルとなればと思います。 というわけで改めて春ですし、これからホームページ(Webサイト)を作成してWeb屋さんになる方へ送るお勧めサイト集です。 後編はこちら Web制作を始める人の為のスキル・ワイヤーフレーム・SEO・マーケティング・Webサービスの基礎情報 忘れないで欲しい事 Web制作には、様々なスキルが求められます。 しかしその技術が、いつの間にか消えていったり、使えなくなったりしました。新しいデザイン、新しいコード、新しい言語、新しい環境、様々なものがあります。しかし、それらを追い続けていくうちに、一つ、とても大事な事を忘れて

    Web制作をこれから始める人の為のスキル・HTML・CSS・ブラウザ・写真素材入手の基礎情報*ホームページを作る人のネタ帳
  • HTML5入門-canvasで四角を描く-|mayy

    ようやくcanvasを使ってみました。 基中の基、canvas領域に四角形を表示させてみます。 図形を描く領域を用意する まずは図形を描く領域を作ります。 やり方はとても簡単です。 html5のソース内の領域を表示させたいところに以下を追加します。 <canvas id="canvas" width="200" height="200"></canvas> id、width、heightは任意です。 分かりやすくするためにスタイルシートで背景画像を指定して枠線をつけました。 サンプルを見る 図形を描画するための準備 図形を描くにはJavascriptを使います。 以下ソースを書きます。 onload = function(){ canvas = document.getElementById('canvas'); ctx = canvas.getContext('2d');

  • 「Webデザイン用のフリー素材をシェアしよう」がコンセプトのWebデザイナー専用コミュニティ・Designmoo - かちびと.net

    無料でハイクオリティなPSD素材や フォント、テクスチャなどWebデザイン に欠かせないリソースを無料でDL 出来るコミュニティサイト・Designmoo のご紹介。コミュニティに参加せずとも 使わせてもらえますのでリソースサイト として覚えておくといいかもしれません。 「あなたの役に立つか分からないけど、よかったらリソースをシェアしよう」とのこと。フォントやテクスチャ、PSD素材やブラシなど多くのWebデザイン向け素材が無料で手に入ります。メンバー登録も不要ですよ。 メンバーになるには招待が必要みたいですが、素材のダウンロードは誰でも登録不要で出来るみたいです。 いくつかピックアップ Dyslexia 可愛らしいビットマップフォント Dyslexia 4 minimalistic notice styles ポップアップを優しい色合いに。 4 minimalistic notice st

    「Webデザイン用のフリー素材をシェアしよう」がコンセプトのWebデザイナー専用コミュニティ・Designmoo - かちびと.net
  • 基礎となりつつあるCSS3と、CSSの現在、これから | Web標準Blog | ミツエーリンクス

    3月はブラウザのリリースが続いた一ヶ月でした。Internet Explorer 9, Firefox 4, Chrome 10が正式版となり、またOpera 11.10, Chrome 11がそれぞれベータ版として公開されました。 それぞれのCSSサポート状況を見ながら、CSS3の現在とこれからについて考えてみました。 スナップショットがベースラインに IE9でがセレクタとColor, 名前空間、メディアクエリーを実装したので、デスクトップブラウザにおいてCSSスナップショットが満たされたことになります。IE9がWindows Phone 7に提供されると、スマートフォンにおいてもそれが完了します。CSS3は一部ではありますが、CSSの基礎となったのです。現在のPCサイトでは主にCSS 2.1段階のCSSが開発の基礎技術として認識されていたように思いますが、今後はスナップショットに移行し

    K-Taro
    K-Taro 2011/03/30
  • Dreamweaverのスニペットをショートカットキーに登録して作業効率アップ! | バシャログ。

    年末進行からそのまま年度末進行に突入して、そろそろ HP がゼロの sakai です。早く 4 月にならないかな。 Dreamweaver を使ってコーディングする場合は、キーボードショートカットを使うベシ! というエントリーを過去にご紹介しています。 Dreamweaverのコードビューでよく使うショートカット Dreamweaverでテーブルを組むときによく使うショートカットキー 今回は一歩踏み込んで、自分で登録したスニペットをショートカットで呼び出す方法をご紹介します。 Dreamweaver のスニペット機能は、よく使うコードを登録しておいてパネルから挿入することができる機能です。 Step1 よく使用するコードをスニペットを登録する ここでは、<span></span> を登録してみます。 スニペットパネルを開き、右下にあるボタンで新規スニペットを登録します。 スニペットの種類を

    Dreamweaverのスニペットをショートカットキーに登録して作業効率アップ! | バシャログ。
  • FirefoxとWebKit、CSS3グラデーションの指定方法統一 | エンタープライズ | マイコミジャーナル

    The WebKit Open Source Project CSS3は策定段階にあり、ブラウザ側で同じ実装が実現されている機能と、そうでない機能が混在している。それは実装をはじめた時期や経緯などにも依存している。たとえば標準化作業が進められる以前に実装された機能は、のちに標準化を目指して策定がはじまった機能とは考え方やシンタックスが大きく違っていることがある。 そうした機能のひとつにグラデーションがある。グラデーションは便利な機能だがサポートしているFirefoxとSafari/WebKitでフォーマットが違っていた。しかしCSS3の策定は進んでおり、こうした差異も徐々に統一が進められている。WebKitのブログCSS3 Gradientsにおいて、最近進められたグラデーションに関する議論と、その実装状況が報告されている。 報告によれば、CSSのワーキンググループはここ数ヵ月の間、グラデ

    K-Taro
    K-Taro 2011/03/30
  • Firefox 4 で Minibuffer + LDRize + ReblogCommand を動かす

    Firefox 4 の正式版が出たので使っていますが、ベータ版からきちんと確認していなかったことで正式版を入れてみてから初めて気がついた問題点っていうのがいくつかあります。 その中でも捨て置けない問題だったのが Greasemonkey アドオン関連で Minibuffer + LDRize + ReblogCommand という、特に Tumblr の Dashboard 上でなくてはならない UserScript セットが動作しなくなったってこと。 実はこれら UserScript がうまく動作しなくなるっていう問題に関しては、Firefox 3系で Greasemonkey が 0.9.0 → 0.9.1 にアップデートしたときにも発生したのですが、その際は 0.9.0 にダウングレードして使い続けるか、tombloo のパッチとしてリリースされている 「greasemonkey.s

    Firefox 4 で Minibuffer + LDRize + ReblogCommand を動かす
  • IE9を含む代表的なブラウザで使えるCSS3プロパティ [ホームページ作成] All About

    IE9を含む代表的なブラウザで使えるCSS3プロパティCSS3で新しく追加されたプロパティのうち、代表的なブラウザの最新版でなら既に表示可能になっているものをご紹介。背景画像のサイズ調節、透明度の指定、ボックスの影、角の丸い枠など、Internet ExplorerでもIE9でなら表示可能になっているものを集めました。具体的な記述方法も掲載していますので、ぜひ活用してみて下さい。 CSS3で新しく追加されたプロパティのうち、代表的なブラウザ(Internet Explorer、Firefox、Chrome、Safari、Opera)の各最新版で既に表示可能なものの中から4点をご紹介致します。CSS3への対応が遅かったInternet Explorerでも、Ver.9(IE9)でなら表示できます。記事中の画面イメージは、すべてIE9 RC版(製品候補版)のものです。具体的な記述方法も掲載し

    IE9を含む代表的なブラウザで使えるCSS3プロパティ [ホームページ作成] All About
  • CSS3で画像もJSも使わないモーダルボックスサンプル:phpspot開発日誌

    CSS Modal ? Paul Hayes CSS3で画像もJSも使わないモーダルボックスサンプル。 ボックスが徐々に大きくなりつつフェードも組み合わせたアニメーションがCSS3で実現されているところがいいです。 ボックスも影がついてて閉じるボタンだってあります。 JavaScriptを切っても動いてます。 実際に使う場合はやっぱりJSを使ったほうが便利なものが出来るわけですが、CSS3だけでも出来るっていうところは知っておいてもよいというのと、内部で使われているテクニックもなんとなくでも覚えておくといいのかもしれませんね。 関連エントリ グラフィカルに加速度を作って要素をCSS3アニメーションさせられる「Ceaser」 IE9にも対応したCSS3リファレンスサイト「css3files」 超シンプルなマークアップで実現できるCSS3による画像を使わない吹き出しサンプル CSS3で実装され

    K-Taro
    K-Taro 2011/03/30
  • これは面白い!CSSのボーダーを使った図形描画テクニック色々:phpspot開発日誌

    Creating Triangles in CSS Jon Rohan’s Web Developer Field Guide CSSのボーダーを使った図形描画テクニック色々。 「超シンプルなマークアップで実現できるCSS3による画像を使わない吹き出しサンプル」でも紹介されていたテクニックですが、borderを使って図形を描画するテクニックです。 border-width を太めにしてそれぞれの線に色をつけることで面白いことが色々と出来るみたい まず、最初は次のような図形。 border-color でそれぞれの辺に色をつけて、border-width:20px 、 width:0; height:0 で指定するとこんな面白い図形に。 左だけに色をつければ、矢印っぽくも出来ますし、左と上の線だけに色をつけたりすることでいろんな形・角度の3角形が表現出来ます。 更に、border-width

    K-Taro
    K-Taro 2011/03/30
  • 面倒なブラウザごとのCSS3プレフィックスを自動で付けてくれるツール「CSSPrefixer」:phpspot開発日誌

    CSSPrefixer 面倒なブラウザごとのCSS3プレフィックスを自動で付けてくれるツール「CSSPrefixer」 プロパティごとに -moz とか -webkit を全部設定するのめんどくさい、という場合にサブミットすれば自動で付いた結果が出力されるというシンプルだけど便利なツールです。 サブミットすれば次のように -moz とか -o とか -webkit とか全部付けて出力してくれます。 これはいい。 JavaScript とかで、1個指定しとけばJS読み込むだけで全部自動やってくれる的なライブラリがあったらもっと便利な気がしますね。 jQueryとかで比較的簡単に実現できそう。 関連エントリ 便利なCSS3ツール6つ+α IEでもCSS3を使うためのツールやリソース集 HTML5/CSS3に関する便利ツールやチーとシート、リソース25

  • 画面をスワイプさせてページ送りができるWordPressプラグイン「iPad Swipe」:phpspot開発日誌

    WordPress iPad Swipe WordPress Plugins 画面をスワイプさせてページ送りができるWordPressプラグイン「iPad Swipe」。 プラグインをダウンロードして有効化するだけで、スワイプが有効になります。 iPadiPhone向けのブログで使い勝手を向上させる用に覚えておいてもよさそうです。 左にスワイプすることで、次のエントリ、右にスワイプで前のエントリに移動することが出来ます。 設定ページではiPad以外でも有効にするかどうかの設定(デフォルトはiPadのみ)や、ポップアップでスワイプが効くことをメッセージ表示できるのですが、そのメッセージを指定できます。 ブログを、ページをめくる要領でページ送りが出来るというのはタッチパネル型のデバイスではなかなか使い勝手がよいみたいです。 関連エントリ iPhone/iPad用サイト作成時に使えるスワイプイ

  • CSS3の各プロパティの値を少しずつ変えた見栄えが比較できるオンラインサービス -i2Style

    角丸やボックスシャドウなど、CSS3をはじめとする各プロパティの少しずつ異なる値の見栄えをブラウザで比較・確認しながらスタイルシートを生成できるオンラインサービス紹介します。 i2Style [ad#ad-2] 上記キャプチャは、背景色(background-color)の値を少しずつ変え一覧にしたもので、他にも多くのプロパティに対応しています。

  • 超クールなスモークのPhotoshopブラシ33:phpspot開発日誌

    33 Sets of Free Smoke Photoshop Brushes 超クールなスモークのPhotoshopブラシ33。 スモークというと自分では撮影がしにくかったりするものですが、ブラシを使って簡単に描画できますね。 実に様々なブラシはバックグラウンドやテクスチャとして利用できそうです。 インパクトのある画像作成に役立てられそうですね。 関連エントリ ハイクオリティなPhotoshopブラシをダウンロードできるサイト色々まとめ 100以上のクールなPhotoShop用ブラシがダウンロードできる「getbrushes.com」 動物に関するPhotoshopブラシ色々 これは覚えておいたほうがいい!というPhotoshopのブラシ50セット

  • 手続き感が強く出せるPhotoshop用水彩ブラシ650:phpspot開発日誌

    650 Free Watercolor Photoshop Brushes - Web Design Blog ? DesignM.ag 手続き感が強く出せるPhotoshop用水彩ブラシ650。 次のような、まさに水彩!という具合のPhotoshopブラシが多数公開されています。 力強さを感じさせるようなブラシもありますね。この力強さで訪れる人に印象づけるようなサイトを作るのに役立てられるかも。 関連エントリ ハイクオリティなPhotoshopブラシをダウンロードできるサイト色々まとめ 100以上のクールなPhotoShop用ブラシがダウンロードできる「getbrushes.com」 これは覚えておいたほうがいい!というPhotoshopのブラシ50セット 木、葉っぱ、雲、水など自然に関するPhotoshopブラシセット

  • 立体感がうまく出たWEBサイトデザイン作成Photoshopチュートリアル:phpspot開発日誌

    I will show you how to add that 3D look to your web designs, how to creg web layout with 3D-looking elements in Photoshop 立体感がうまく出たWEBサイトデザイン作成Photoshopチュートリアル。 次のように、立体感を出した面白いデザインを作成する一連の流れが見れます。 CSS3でリボンにしたりするテクニックですが、こういうデザインも可能なのだなと、面白かったのでご紹介です。 たったこれだけなのに、奥行きが出てインパクトをうまく出せている気がします。 真似してみるのも楽しいかも。 関連エントリ 記事タイトルをリボン風にシンプルに実装するCSSサンプル ブロック要素に巻いて立体感を出せるリボンをWEB上でジェネレート「3D Ribbon Generator」 CSS3で

  • WordPressデフォルトテーマのTwentyTenから派生した12のテーマ:phpspot開発日誌

    12 Free TwentyTen Child Themes For WordPress | WordPress News at WPMU.org WordPressデフォルトテーマのTwentyTenから派生した12のテーマ。 デフォルトテーマから派生していることで、基フレームワークを置き換えたとしても不具合が出にくいテーマ集です。 基の物をベースとしているので、アップデート等を行ったらデザインが崩れたりエラーになった、というような事が少なそうですね。 HTML5化されたTwentyTen おしゃれになったTwentyTen TwentyTenテーマは観る影もないテーマ TwentyTenベースだとはもう分からないレベルに。 関連エントリ シンプルなポートフォリオサイト構築用WordPressテーマ25 かなり美麗なフリーのWordPressテーマ60 2010年の最もクリエイティブ

  • Remove unused CSS - CSS Optimizer

    On average, about 35% of CSS code is completely unnecessary. We meticulously find and remove this unnecessary CSS code.

    Remove unused CSS - CSS Optimizer
  • Photoshop VIP ☞ かわいいハート柄の継ぎ目のないPhotoshop用パターン素材70個まとめ

    『フォトショップ・ブイアイピー』の新着記事です。フォトショップやデザインをたのしむウェブサイト。2009年3月創刊以来、3800を超えるコンテンツを更新しています。フリーフォントなどの無料デザイン素材/配色やWeb制作といった最新トレンドも公開中。

    Photoshop VIP ☞ かわいいハート柄の継ぎ目のないPhotoshop用パターン素材70個まとめ
  • Fireworksで立体的なアイコンを7分で作る方法 - EC studio デザインブログ

    さて、今回は前回の「Fireworksで立体的なアイコンを作る方法」よりも もっと簡単にできるアイコンの作り方です。 今回は5分で作れるアイコンのご紹介!! …の予定でしたが、ブログ記事用に作り直したら7分ちょうどかかりました。 すみません… 操作自体は簡単なので、速い方は5分でできると思います。 ぜひ、5分に挑戦してみてください! アイコンはこちら、建物アイコンです。 ページ下部で制作動画の紹介や、ベクトルデータのダウンロードも可能です。 会社概要の見出しなどに使ってみてくださいね。 速く作るポイントは2つ パスの変形「歪みツール」を使う フィルター効果「シャドウ(内側)」を2つ重ねて使う たったこれだけです。 1.平面の形を作る パースのあるアイコンですが、 まずは真正面から見た図(平面図)をつくります。 2.歪みツールで立体的にする 平面ができたら、1面全部を選択し「歪みツール」で立

  • Rotating color cube box with CSS3 animation, transforms and gradients

    Spinning spiraling cube using CSS3 3D animation and 3D transforms. Note: Hover the black box or cube to pause the animation. Please view in Safari, iPhone or iPad. If the animation freezes while viewing in wide-screen and at the same time hovering the viewport with the mouse, simply refresh the browser to restart the animation. All images used come from WISE - Multimedia Gallery and are used in th

    K-Taro
    K-Taro 2011/03/30
  • 「重要情報はPDFやExcelではなくHTMLやCSVで」、地方自治情報センターが呼びかけ

    東日大震災に関連して、財団法人 地方自治情報センター(LASDEC)が、国民へ発信する重要情報をPDFExcelではなくHTMLCSVで提供するよう呼びかけている。容量が大きいファイルがサーバーや回線を圧迫しないようにすることと、携帯電話しか持っていない被災者でも閲覧しやすくすることが目的だ。 LASDECでは2011年3月18日に、地方公共団体へメーリングリストを通じて通知している。「アクセスが集中し、PDFExcelファイル形式の場合、容量が大きく、サーバー・回線リソースを圧迫し、重要情報が閲覧できない事象が頻出しています」(LASDEC)。そこで、PDFExcelファイルの代わりにHTMLやJPEG、CSVといった形式での提供を推奨。WordやExcelの文書も、「ファイル」メニューから「名前を付けて保存」を選び、ファイルの種類に「Webページ (*.htm,*html)」

    「重要情報はPDFやExcelではなくHTMLやCSVで」、地方自治情報センターが呼びかけ
    K-Taro
    K-Taro 2011/03/30
  • 佐藤可士和×中村勇吾対談 | CINRA

    デザインが、「色と形の組み合わせ」という時代は、もうはるか昔。「デザインとは、コミュニケーションです!」なんていうのも、最近ではどこか使い古された感がある。じゃあ、デザインってなんだろう? その問いかけに、常に新たな答えを提示し続けるトップクリエイター、佐藤可士和と中村勇吾。一方は、企業から幼稚園までを手がける日を代表するクリエイティブディレクター。もう一方は、数々の国内外の広告賞を受賞し、ウェブ業界ではもはや知らない者はいないデザイナー。ユニクロプロジェクトでの初タッグから、この2人の信頼関係はどのようにして生まれたのか? そして今、彼らが考える日のものづくりの「強み」とは? 東京ミッドタウンの芝生広場で開催されるイベント『Cofesta PAO』で新作を発表する直前の2人に話を聞いた。 ※『Cofesta PAO』は、3月11日に発生した東北地方太平洋沖地震の影響によりPAO WE

    佐藤可士和×中村勇吾対談 | CINRA
  • flipsnap.jsというのを書いた - Webtech Walker

    最近タッチデバイスでスワイプしてスライドするようなUIを書く機会が多いので汎用的に使えるようにしてみた。 DEMO pxgrid/js-flipsnap - GitHub iScrollでもsnapっていう機能使うと同じようなことができるんだけど、iScrollでこれをやろうとするとこのスクロールが効いてるところはネイティブの縦スクロールが効かなくなるという問題があって、それを解決しようと思って最初はiScrollの内部をいじってたんだけど、ちょっとiScrollベースだとどうしても無理なところがあったのでこの機能だけ切り出してみたというわけ。 一応Androidでも動いてるっぽい。 iScrollみたいに多機能じゃないけどまあこれだけ使いたいっていうこと結構あるので割といいんじゃないかと。TODOはとりあえずドキュメント。 追記(2012/02/04):クロスブラウザに対応しました。

    flipsnap.jsというのを書いた - Webtech Walker
  • WebサイトのCSSをインタラクティブに修正したり保存出来るツール・CSS Pivotがなかなか便利

    なかなか便利だったのでシェアがてら ご紹介。WebサイトのCSSをプレビュー を見ながら修正したり、そのコードを 保存することが出来るツール・CSS Pivot のご紹介。似たような機能のChromeの エクステンションを普段使用しています が、乗り換えるかもしれません。 URLを入力すると、そのWebサイトのレイアウトに仮想的にCSSを加える事が出来ます。インタラクティブに修正出来て、保存も出来るのでなかなか便利そうですよ。ブックマークレットも用意されてるのでサクッと使えるのも魅力です。 シンプルでいい感じです。URLを入れてOpen URLを押せば編集画面になります。 boxにcssを書いてプレビューを押せば適応されます。cssには強制的に!importantが付いてくれるので、修正が気に入ればそのままコピペすればいいだけ。特に、人に教えるときにもいいかもですね。ここをこう直せばうまく

    WebサイトのCSSをインタラクティブに修正したり保存出来るツール・CSS Pivotがなかなか便利
  • CSS3を使った新しい画像置換の方法

    CSS3を使った新しい画像置換の方法 2011-03-28 ソースコードはテキストで、見た目は画像に変える画像置換について、CSSでよく使われる方法はtext-indent 現状の画像置換について 2009年の時点でGoogleはこの方法を推奨していません。 最近であれば、@font-faceの使用をGoogleは推奨という記事があります。 しかし日では@font-faceの使用は難しいのが現状です。 日フォントはサイズが非常に重いです。私も@font-faceを一時期使ってみましたが、重すぎて使い物になりません。 そこでCSS3のcontent:url()を使用した方法を発見しました。 contentを使った画像置換 text-indentに比べて、非常に簡単です。ソースコードは以下の通りです。 <style type="text/css"> p.replace {content:

    CSS3を使った新しい画像置換の方法
    K-Taro
    K-Taro 2011/03/30
  • 素晴らしいフリーのwordpressのテーマ「12 Fantastic Free Corporate Themes for WordPress」

    TOP  >  WebDesign , WordPress  >  素晴らしいフリーのwordpressのテーマ「12 Fantastic Free Corporate Themes for WordPress」 世界中で利用されているCMS、wordpress。拡張性の高さと、ドキュメントの多さなどが魅力的ですが、クリエイティブなテーマが多くリリースされているのものその魅力一つです。今日紹介するのは、wordpressの素晴らしいフリーのテーマを集めたエントリー「12 Fantastic Free Corporate Themes for WordPress」です。 Corporate Life デザイン性が高く、クリエイティブなテーマが多々集められています。今日はその中から幾つか気になったものをピックアップして紹介したいと思います。 詳しくは以下 ■Vanadiumitic シンプルな

    素晴らしいフリーのwordpressのテーマ「12 Fantastic Free Corporate Themes for WordPress」
  • Design works|新デザインオンラインカジノ 日本語対応

    Design Works - デザインワークス姉妹ブログ・DesignDevelopのデザインをリニューアルいたしました。 Designworksの新ドメインでの運用・リニューアルのご報告はさせて頂きましたが、Designworksのリニューアルとともに、姉妹ブログとして運用しているDesignDevelopのデザインも、大幅にリニューアルいたしました!!! Design Worksは、様々な商品やインスピレーションから生まれた新しいデザインを発信し、販売促進に繋げる広告やデザインを作り出しています。大幅にリニューアルしたDesign Worksでは、オンラインカジノ 日語対応のデザインなど、オンラインの新たな分野にも活動を広げています。最新のH P新デザインとなった姉妹サイトブログのDesign Developと共に、今後もウェブデザインに関する様々な情報をお届けしていきます。 今回、

    Design works|新デザインオンラインカジノ 日本語対応
  • [CSS]ホバー時のエフェクトを自分以外の要素にも適用するチュートリアル

    ホバー時のエフェクトを実際にホバーされているエレメント以外にも適用するスタイルシートのチュートリアルを紹介します。 下記キャプチャのデモでは、ホバー時に不透明度を3種類適用しています。 Hover on "Everything But" デモページ [ad#ad-2] 下記は各ポイントを意訳したものです。 エレメントにホバー時のエフェクトを与えることは簡単です。 ここでは、ホバー時に不透明度が変化するものを例にしてみます。 div { opacity: 1.0; } div:hover { opacity: 0.5; } これで、ホバー時に不透明度が0.5になるようになりました。 ここまでは簡単ですが、ホバー時のエフェクトを実際にホバーされているエレメント以外にも適用するには、どうしたらよいでしょうか? 例えば隣接した兄弟のdiv要素などに。 まずは、HTMLの基的な例を見てください。

  • 綺麗にデザインされたクレジットカードアイコン色々:phpspot開発日誌

    Credit card icons 綺麗にデザインされたクレジットカードアイコン色々。 427種類ものクレジットカード等のカードアイコンが収録されています。サイズはそれぞれ7種類 どのカードで決済できるよ、っていうのはネットショッピングなんかでは意外と重要だったりするので、こういうアイコンで分かりやすく表示しておいて上げることで売上につながったりするのかも。 Google Checkout やamazon決済用なんかもあります。 関連エントリ 角丸でいい感じのクレジットカードアイコンセット35 オンラインショップ向けのクレジットカードアイコンいろいろ クレジットカードやPaypal、貨幣等のシンプルで綺麗なアイコンセット集

  • パスワード認証

    ウェブ狂の詩 - @takejune web制作に関する覚え書き このブログの公開は終了しました

  • HTML5 canvasのJSライブラリ「oCanvas」

    oCanvas - Object-based canvas drawing HTML5 canvasのJavaScriptライブラリ「oCanvas」が公開されています。 (英語) ライセンスはMITのようです。

    HTML5 canvasのJSライブラリ「oCanvas」
  • http://japan.internet.com/wmnews/20110329/3.html?rss

  • [CSS]わずか12個のclass名で多彩なグリッドを組み立てるCSSのフレームワーク -StackLayout

    IE6をはじめ、iPhone, iPadにも対応した、可変レイアウトも固定レイアウトにも利用できる実用的で多彩なグリッドを組み立てるCSSのフレームワークを紹介します。 StackLayout デモページ:Basic Mockup [ad#ad-2] StackLayoutの主な特徴 StackLayoutの対応ブラウザ・デバイス StackLayoutで使用する12個のclass名 StackLayoutのデモ StackLayoutの使い方 StackLayoutの主な特徴 わずか12個のclass名で、コンポーネントを管理 class名は、簡単にセマンティックなものに変更可能 ネストの制限は無し floatのクリア無しで、エレメントを横列に簡単に並べることが可能 デフォルトは可変レイアウト用で、固定レイアウトにも対応 各カラムの溝の設定は簡単で、px, %の両方に対応 StackLa

  • [JS]これFlashじゃないの?ってなるナビゲーションを実装するjQueryのチュートリアル

    軽快なアニメーションが心地よいナビゲーションを実装するjQueryのチュートリアルを紹介します。 タイトルにある通り、Flashは使わないで実装されてます。 Animated Content Menu with jQuery デモページ [ad#ad-2] まずは、デモページを堪能ください。 ナビゲーションの各ラベルをクリックすると、それに対応したパネルがアニメーションを伴って開くようになっています。 デモページ 実装 HTMLの構造は、背景画像、グリッドのオーバーレイ、ローディングのアイコン、メインメニューの4つから構成されています。 HTML:背景 背景は、背景画像とオーバーレイとローディングをdiv要素で内包します。 <div id="ac_background" class="ac_background"> <img class="ac_bgimage" src="images/D

  • 新着記事

    『フォトショップ・ブイアイピー』の新着記事です。フォトショップやデザインをたのしむウェブサイト。2009年3月創刊以来、3800を超えるコンテンツを更新しています。フリーフォントなどの無料デザイン素材/配色やWeb制作といった最新トレンドも公開中。

    新着記事
  • サクッとFacebookページを本格管理!純国産Facebookアプリ「ソーシャレット」が出たので使い方紹介 : 941::blog

    おっすおっす! 日、livedoorプロフィールがリニューアルしてFacebookページの編集がサクッと手軽に だけど格的に出来るようになりましたん。「Facebook流行ってるよねー」の時期はとっくに 終わっていて、割と皆が使い出しているのでFacebookページの充実をしたかった自分にとって 願ってもないアプリの登場。 これが、こうなる! livedoorとFacebookのIDとか持っていれば5分で完了。 なんとイメージビデオも作っちゃった。これ。なんかシャレオツ。 流れとしては ・livedoorプロフィールにアイテムを登録 ・Facebookとの連携を設定する ・livedoorプロフィール側から表示したいのをポチポチ ・Facebookページに自動で反映される (←ココがすごい) ・Facebook側でデフォルトの状態を変えるとモアベター というカンジ。 実際にキャプチャ付

    サクッとFacebookページを本格管理!純国産Facebookアプリ「ソーシャレット」が出たので使い方紹介 : 941::blog
  • パスワード認証

    ラジック 気軽に楽しめるブログメディア「ラジック」は2ちゃんねるを中心にエンタメ情報をお届け!

    パスワード認証
  • 会議にToDo管理、読書にも――今すぐ真似したい「ポスト・イット」活用術 - はてなニュース

    貼ってはがせる便利なメモ「ポスト・イット」。最近ではさまざまな色や形のもの、特殊な機能を持ったタイプなども登場していますよね。そんなポスト・イットをもっと有効に使えるアイデアを集めてみました。はてなオフィスでの活用術もご紹介します。 ■ ポスト・イットで「読書」の記録を に挟む“しおり”としても使えるポスト・イット。ちょっとした工夫でさらに効率良く読書ができます。 ▽ ぜいたくポストイット読書術 - ナレッジエース ▽ 365日坊主 ポスト・イットの使い方 読み終わったページの目印としてはもちろん、ページ内の気になった箇所に貼ったり、内容について思ったことをメモしたりすれば、自分の読書の記録を手軽に残すことができます。に直接書き込めない場合も、後ではがせるポスト・イットなら大丈夫。「たくさんのポスト・イットが貼られている=自分にとって重要度が高い」と、後で見返した際にも分かりやすくな

    会議にToDo管理、読書にも――今すぐ真似したい「ポスト・イット」活用術 - はてなニュース
  • ついに出た!Chrome版「Page Speed」の使い方

    2011/3/22に、GoogleがようやくGoogle Chrome版「Page Speed」拡張機能を公開しました。 「Page Speed」は、項目をある程度理解できれば自分や自社のサイトの表示速度の改善にとても役立つツールです。 この記事では、「Page Speed」のインストール方法から各調査項目の見方や改善方法を中心に使い方を解説します。 ぜひ、ご自身のサイトの改善に役立てていただければと思います。 そもそも、なぜサイトの表示速度を速くする必要があるのか? 例えば、Amazonの調査によると「表示速度が0.1秒遅くなると、売上が1%減少する」といい、Googleの調査によると「表示速度が0.5秒遅くなると、検索数が20%減少する」と言われます。 また、GoogleはWebページの読み込み速度をアルゴリズムに取り入れたことを発表しています。 大手サイトや大規模なECサイトに限らず

    ついに出た!Chrome版「Page Speed」の使い方
  • 功效保护进级中

    description_temp