Future home of something quite cool. If you're the site owner, log in to launch this site If you are a visitor, check back soon.
こいつぁスゲェ! PNG画像を非可逆圧縮するブラウザアプリ「TinyPNG」というのを試してみたんですが、とんでもないですねコレ。 画像自体はほぼ変わらんのに、驚異的なサイズダウン。まるで禁断のダイエット法にも見えるんですが、どんな仕組みなんだろ・・・。 TinyPNG – Compress PNG images while preserving transparency 使い方はすごくかんたん。 「TinyPNG」にアクセスしたら、画面の[Drop your .png files here!]というスペースに、圧縮したいPNGファイルをドラッグ&ドロップするだけです。 圧縮のタスクが完了すると、ダウンロードリンクが表示されるので、それをクリックしてローカルに保存すればOK。 画面遷移は一切ありません。 すげーサイズダウンします これは実際にサイズダウンしてみた結果。 左が元画像で右がTi
今回このブログ - Webデザインレシピを、iPhone などでも見れるようにリデザインしました。使用したのは CSS3 の Media Queries(メディアクエリ)。メディアクエリの使い方や感想、気をつけたい注意書きをまとめてみました! 遅ればせながらこのブログ – Webデザインレシピを、スマートフォンでも見れるように改修しました。このブログは WordPress で書いているので、スマートフォンや iPad への対応方法はいくつもあるのですが、今回は CSS3 の Media Queries(メディアクエリ)を使って、iPad、iPhone など、いろんなデバイスに対応(対応というか、一応見れる程度)にしてみました。 なので Media Queries を使ったスマートフォン対応と、リデザインしながら思ったことなどをまとめてみました。 CSS3 Media Queries 目次
Gitのブランチをどのタイミングで切って、マージしていくかなども非常に大切ですが、ブランチやマージをするよりも頻繁におこなうコミットについて、あらためて基本に立ち返ってみましょう。 一つ一つのコミットを綺麗に積み重ねていくことは、ブランチを切るタイミングやマージ、歴史の改編などを容易にすることができます。コミットが綺麗に積み重ねられていないとマージや歴史改変で苦労するでしょう。 Gitのベストプラクティス(原文)に乗っかるためにもgit commitする前に以下のようなことをチェックしましょう。 Gitの操作に慣れている人はPushやMergeをする前に今回紹介するようなことを元にしてコミットの歴史を綺麗に整えましょう。 1コミットに1つの対応1コミットにはあれこれ詰め込めすぎるべきではありません。例えば以下のような2つのことがあったとします。 Aの機能を追加Bの機能のバグを修正2つの対応
ブラシもぼけ以外に多数 PsDefaultsは有料の素材セットですが、無料のミニキットもダウンロードできます。 無料版の中身は下記の通りです。 Photoshop用のスタイル ボタンなど Photoshop用のシェイプ アイコン、アローなど Photoshop用のパターン モザイク、タータン柄、木、ノイズなど Photoshop用のアクション ヴィンテージ、セピア、レトロ、ロモ、モノクロなど Photoshop用のブラシ ぼけ、グランジ、スワールなど Photoshop用のグラデーション 鮮やかなカラーやパルテルなど 素材の利用にあたっては個人でも商用でも無料で、ウェブサイト・アプリケーション・紙などに使用できる、とのことです。詳しくはダウンロードファイルの「License.txt」をご覧ください。 無料版のダウンロードはトップページの「Get Updates」にメールアドレスを登録し、そ
(追記/2011.12.02)ウィンドウをスクロールの際に、背景もズレてしまう不具合があったので、CSSとJavaScriptの一部を調整しました。 jQueryを使ってモーダルウィンドウを作成します。ウィンドウに表示するコンテンツはjQueryのAjaxで読み込むようにしています。 サンプルはこちら <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link
Webサイトにおいて、レイアウトの基本的な型と、レイアウトからデザインまでの流れを簡単にまとめてみました。 レイアウトからデザインまでの流れを把握しておくと、その間の思考が分断されずデザインがしやすくなると思います。 また、ユニークなレイアウトにするにしても、あらかじめ基本的な型を知っておくと逸脱がしやすくなりますね。 レイアウトに影響を与える要因 レイアウトにはいくつかの型がありますが、まずその型を決定する前に、レイアウトに影響を与える要因を知っておく必要があります。これらの要因によって、レイアウトの型があらかじめ決まったり、レイアウトが大きく変わるからです。 情報階層の深さ →1ページのサイトなのか、第二階層以降ありグローバルナビゲーションが必要になるのか、など サイトの目的・属性 →そのサイトでは何を伝えたいのか。企業・ブランドのメッセージや情報、ユーザーに役立つ知識(Wikiped
この記事は、はじめてブログ用のオリジナル WordPress テーマを制作される方向けに書いたチュートリアル記事です。 なぜこの記事を書いたかというと、「WordPress でブログを作ってみたい、でも作り方がわからない」とおっしゃっている方が想像以上に多いことと、私が Webデザインスクールで WordPress ブログテーマの作り方を教えていると、想像以上にテーマ制作の基礎を理解していただくのが難しかったからです。 おそらく、HTML+CSS コーディングができる方であれば、この記事を読めばブログ用のWordPressテーマを制作できるようになるはずです。 このチュートリアルでできるテーマのサンプルファイルも以下からダウンロードできます。 実際のファイルを見ながら(あるいは作りこみながら)読むと理解が深まると思います。 WordPressのインストール まだレンタルサーバを借りていない
Mac OS X に Aptana Studio をインストールして日本語化してみました。 日本語化には以下のサイトがとても参考になりますので、ここでは僕のような Mac 初心者向けに注意点などをふまえて説明します。 Aptana Studio の日本語化 On Mac - にゃっす。 Eclipse プラグイン日本語化プラグイン - Pleiades(プレアデス)をダウンロード まずは Pleiades (Eclipse プラグイン日本語化プラグイン) から「Pleiades (プレアデス)」をダウンロードしましょう。 サイトの中ほどに、「Pleiades 本体ダウンロード」というのがあるので、そこから Pleiades をダウンロードします。僕は上記参考サイト(にゃっす。)のように、「安定版 1.2.3」をダウンロードしました。 Pleiades をコピーするときは要注意( Mac ビ
SPEC vol.2の賞品としてNintendo 3DSをいただきました。関係者の方ありがとうございます。 ちょうど2011/6/7からWebブラウザが配信されたので、どんなもんなのか調査。公式なスペックはhttp://www.nintendo.co.jp/3ds/hardware/features/browser.htmlで確認できる。 まずは特に気にせずjsdo.itにある自分のコードをいくつか動かしてみようとしたところ、ほとんどが遅くてうまく動かない。 次。仕事で作ったスマートフォン向けのページとかを見てみる。gradient/border-radius/text-shadwo/box-shadowくらいしか使っていないのだけれども、そこそこ見られる。text-shadow/box-shadowは未対応っぽい。gradientは-webkit-gradientに対応しているっぽい。
こんにちは。 久しぶりの更新です。 というかHatena Blogはこれが初。 再度、よろしくお願いします。 実は12月に入ってから転職しました。 前職では事務と採用のお仕事をさせていただいてました。 今回からは渋谷にてWebデザイナーです。 なんと職種が全くもって違う。 ・・・といっても経験がまったくないので勉強中ですが・・・。 お仕事楽しいです! 毎日Psを触りはぁはぁしてます。 そのうちDwも触ってはぁはぁします。(´∀`*)ウフフ 一応転職について書いてみます。メモ的な。 ーー【はるかさん履歴】ーー 新卒入社 ↓ 事務職でエンジニアさんの派遣契約関連の事務作業 時折新卒採用のお手伝い ↓ 採用アウトソーシング部に異動後 2年間お客さんを持ち新卒採用アウトソーサーとして 大手ナビの画面編集や学生に電話をかけての説明会誘導・選考調整など担当 ↓ 最後の1年が始まる際に転職決意 ↓ 今
appleAbstract「Google日本語入力開発版」では複数のMacやWin-PCで「辞書の同期」ができるようになったちょっと手間がかかったが無事に辞書の同期が可能で、メシウマいずれ安定版がリリースされるだろうが、複数の端末を使ってて待てない人におすすめ 以下、本文 MacやPCでの日本語入力ではもっぱら「Google日本語入力」を使っている。 それまではWinで使っていたATOKで満足していたのだが、Macにメインを切り替えてから(有料の)ATOKではなく、無料のGoogle日本語入力に切り替えたのがきっかけだ。 使用感には満足しているが、おぃらはMacBook Pro(自宅)、MacBook Air(いつでも)、Windows vista/Lavie(職場)と複数のパソコンを使っていて、いずれかの端末で新規に辞書登録した単語が他の端末で使えないということにいささか面倒さを感じて
新しい開発環境でAptanaのセットアップをしていたら、以前まであったzen-codingのサイト(Downloads - zen-coding - Set of plugins for HTML and CSS hi-speed coding - Google Project Hosting)にAptana版が無い。 あれれ〜ということで検索してみたら、どうやらgithubにプラグイン化されて公開されている模様*1。以下の手順でインストールしました。 ちなみにEclipseでも可能です。 Aptanaのメニューから、Help > Install New Software を選択。 Work with:に http://zen-coding.ru/eclipse/updates/ を指定 インストールするプラグインにチェックを付けます。ここでは複数表示されちゃってますが、折角なのでバージョ
Would you start building a website without blueprints? If you said yes, good luck with that. If you said no, then you are 100% right! Before building any website you have to have an idea of how things will function and look. It’s wise decision to do a rough sketch with a pencil for the future website. Usually planning could take a few days, and new ideas arise while you ponder. If new things popup
ソースコードリーディングとかしてると、ただコード読んでてもどうしようもなく、オブジェクトの中身や変数などを見るためにデバッグツールを使いながらでないとやっていけないことが今になって分かりました。自分でもどうしようもなくアホだと思いながら戒めのために覚書。 デバッグツールの機能 僕自身まともに触れる言語はjavascriptとphpくらいなもので、どちらもeclipseのようなIDEを使わず頑なにvimを使って組んできました。phpの場合はxdebugと連携させる方法*1や、javascriptならrhinoなんかを入れてquickrunとかって方法も考えられますが、僕はある程度は知っていながらもひたすら標準のスタックトレースやalert,console.log,console.dirばかりしていたので、まずはIDEなどに搭載されている一般的なデバッグ機能を復習をかねて覚書。 ブレークポイン
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く