【Fireworks】の痒い所に手が届く！拡張機能“Transform Panel”を使ってみた | バシャログ。
最近昼間の暖房が少し暑いくらいなので、油断して薄着で出かけてみたら夜寒くて死にそうになった seki です。 今回は、先日Fireworksの拡張機能を色々復習＆整理をしていた時にたまたま見つけた拡張機能「Transform Panel」というのを入れてみたので、機能のご紹介をします。Fireworksで要素のサイズや細かい座標をプロパティで直接入力する人には、痒い所に手が届く良さを感じられるかと。 詳細は以下より。 ダウンロード http://www.senocular.com/fireworks/extensions/?entry=572 こちらからダウンロードしてください。 「Transform Panel」で出来ること まずは基本となる便利な機能を一つ一つ見ていきましょう。 実際のパネルがこちら。 簡単に言うと画像やテキストの変形を補佐してくれる拡張機能です。 1.小数点単位を表示
様々なイケてるUIを参考にできるサイト | バシャログ。
足掛け2年、全ての関連作品を見てからアベンジャーズを見て最高に盛り上がったminamiです。 Webデザインの中でもサイトのUIデザインは近年重要性を増していると思いますが、デザインする際のインスピレーションを受けられるサイトをご紹介します。 UI Patterns UI Patterns User Interface Patter Libraryというサイト名通り、UIが体系的にまとめられ解説されています。「Design patterns」ではそれぞれのUIに対して、どういう問題を解決してくれるものなのかの詳細な解説があるので、普段なんとなく使っているUIを基礎から勉強し直せます。 ui parade. ui parade. UIを種類別に集めたサイト。なかなか洗練されたものが集まってますね。 PATTERN TAP PATTERN TAP 良さ気なUIのスクリーンショットが集まるサイト
【Fireworks】Fireworksで触りたくなる「もふもふ」質感を出してみよう！ | バシャログ。
こんにちは。やっと八百屋さんの夏野菜が安くなってきてホッとしている seki です。 今回もFireworksのストロークとテクスチャについて書いていきます。 勿論皆さん、「もふもふ」した質感、好きですよね？(←押し売り) 季節的に大分遅い気もしますが、動物イラストやロゴ・アイコン・見出し背景などを、 可愛く演出してくれるFireworksで出来る個人的に大好きな質感！「もふもふ」スタイルを、手軽に再現する方法をご紹介します！ 「もふもふ」スタイルを設定する タイトル画像にあるような、こんな感じのウサギの毛みたいな質感です！ アイコンや背景を始め、ロゴ文字や、イラスト、アニメーションで動かしても可愛い。 また、写真と組み合わせても全くうるさくなく、使い勝手が良いのがお気に入りです。 女性向け・子供向けな、イラストの多いほんわかしたWEBサイトには持ってこいですね！ 設定は以下を参考に。 塗
【Fireworks】PON！っと簡単！ Fireworks でシャチハタ(印鑑)印を描いてみよう | バシャログ。
先日友達が家に置いて行った「キャサリン」というゲームを、睡眠時間を生贄に2日でクリアした seki です。かなり久々にゲームしましたが、なかなか楽しめました。おススメです。 さてさて。今回は前回に引き続き、みんな大好き(※主に私) Fireworks の講座です。 今回は、「マル得」「合格」「請求書在中」「履歴書在中」「確認済」「支払済」などなど、ビジネス現場などでもよく目にする事が多い、シャチハタ（印鑑）っぽい文字を、 Fireworks で手軽に再現する方法をご紹介します。 例といたしまして。笑えるくらい今更ですが、今年入学した学生さんを祝って！ 「合格」印を作りましょう。 まずは普通に楕円形ツールを選択。 今回は解り易い様に大きめに作るので、180×180px の円を描きます。 塗りは「透明」、ストロークの太さは「14」色は「赤」。 種類は「エッジが硬い線（丸）」、位置は「中央」。
web高速化のためのコーダー向け圧縮ツール・サービスまとめ | バシャログ。
ゴールデンウィークは、ディズニーランドに連れていくと娘に約束してしまった ishida です。いったいどのくらい混雑するんだろう、どうせオイラはパレードの席取りでひたすら待つのさ。 さてさてweb高速化においてサーバー側ではなくフロントエンド側で対応できることもかなりあります。 CSSのセレクタ構文の最適化やCSSスプライトによる画像リクエスト数の削減であったり。 今回は、ファイル容量を削減に焦点を当てて圧縮ツール・サービスをまとめてみます。 Javascriptの圧縮 /packer/ http://dean.edwards.name/packer/ とってもシンプルな圧縮サービス。オプションで難読化することもできます。 JavascriptとCSSの圧縮 Compress javascript and css http://compressor.ebiene.de/ こちらもシンプルな
どれ使おう？モーダルウィンドウ（Lightbox 風スクリプト）を集めてみました | バシャログ。
この間の春の嵐はすごかったですね。いろいろ飛ばされないように必死だった kimoto です。帰りの電車は久々に足が浮くほどの超満員を経験しました。 さて、ちょっとモーダルウインドウを調べる機会があったのでまとめてみます。 基本的に、全て jQuery で動くものになっています。 最新の情報ってわけではないですが、場面ごとに選べるものを集めてみたのでお試しくださいませ。 超シンプルな軽量スクリプト leanModal leanModal leanModal はとにかく軽量です。デモを触ってみると、その軽さがわかると思います。 ただし、軽さを徹底的に追求した結果なのか、IE6 には対応していないとのこと。 また、イメージギャラリーなどとしては使えないとのことです。 ちょっとした文章を表示するだけの場合などはこれで十分ですね。 そこそこ軽量、そこそこ機能的 Simple Modal Simple
【CSS】実はこんなに便利！cssのセレクタ指定方法をちょっとだけ掘り起こしてみた | バシャログ。
モニターを見つめる目に優しいメガネがZoffからも出る！しかも度付きOK、フレームも選べる！気になってます。hakoishiです。 さて、今回は実は便利なcssのセレクタ指定方法をちょっとだけ掘り起こしてご紹介。 直下にある要素だけ、とかセレクタ名が部分一致したら、はたまたリンク先パスによって、とか実はかなり便利です！ 特定の要素の直下の要素だけに一括でマージンを設定 特定の文言を含むセレクタ、及びその位置で対象を絞り込み指定 リンク先のパス次第でスタイルを切り分ける 特定の要素・セレクタを例外とする 特定の要素の直下の要素だけに一括でマージンを設定 #container>* { margin: 0 10px; } IE7以上対応。 親>子で、直下要素のみを対象指定。 上記例ではid="container"の直下の要素すべてにマージンが設定されます。 ユニバーサルセレクタには正直不安を感じ
【Fireworks】選択したオブジェクトをガイドで分割するコマンド | バシャログ。
『GRAVITY DAZE』というゲームが気になっているminamiです。VITA買うか・・・！ さて、日頃Fireworksをメインに使っていく上でものすごく重宝している『Guides』という拡張機能があります。 ものすごく重宝しているんですが、一点残念な所があったのでそこを補うコマンドを作ってみました。（FireworksのバージョンはCS5.1です。） Guidesは超便利 もはや度々いろいろなところで紹介されている有名な拡張なので、Fireworks使いは必須な『Guides』ですが、一応ご紹介します。 Guides 配付ページ 『Guides』はその名の通り、ガイドを使いやすくしてくれる機能です。個人的には、「selection」のタブが、選択したオブジェクトに対して上下左右どこにでもガイドを引ける！さらにオフセットまで指定できる！ということで愛用しております。 しかし、この『G
.htaccess だけで簡単キャリア判定してみる | バシャログ。
まだ 6 月だってのに早くも今年初あせもができちゃったよ！かいーの nakamura です。 サイトのモバイル、スマホ対応もすっかり一般的になってきた今日この頃、みなさんいつもどんな方法でキャリア判定を実装しているでしょうか。がっつりフレームワークなどを使っていればさほど難しくはありませんが、ほとんどプログラムが動いていないような静的なサイトの場合はちょっと面倒ですね。今日はそんな時に有用な .htaccess を使ったキャリア判定の方法をご紹介します。 仕様 今回、ルートディレクトリ / は PC 用サイト、/m/ 以下がモバイルサイト、/sp/ 以下がスマホサイトとして以下の仕様を元に記述方法を考えていきます。 PC で /m/, /sp/ 以下にアクセスしたら / にリダイレクト。 モバイル、スマホで PC サイトにアクセスしたらそれぞれ /m/, /sp/ にリダイレクト。 モバイ
jQuery Mobile が必須スキルになる！と思うのでこれから勉強する際に参考になる記事まとめ | バシャログ。
Adobe の Creative Suite 5.5 が発表になりましたね。 Dreamweaver の進化っぷりが凄まじいです。マジで。 HTML5+CSS3への対応が目に付きますが、個人的にはjQuery MobileとPhoneGapフレームワークの導入に注目します。 アプリ開発はこれまで、Objective-Cやjavaが主流でしたがDreamweaverでアプリへの書き出しまで出来てしまうなんて…。今後、モバイルアプリケーションの統合開発環境のデファクトスタンダードになる予感が。 ってことで、まずはjQuery Mobileを理解せねば！ jQery Mobile についてはまだ書籍はあまりなく洋書しかありませんでしたので、参考になる記事を取り上げてみます。 http://jquerymobile.com/ 本家サイト jQuery Mobile Gallery http://w
タダってステキ！フリーの CMS 色々 | バシャログ。
2月22日！こんにちは、nakamura です。猫の日やらおでんの日やら色々あるらしいですが、個人的には真っ先に大魔神佐々木の背番号を思い浮かべてしまいます。関係ないだろうと思いきや、なんと大魔神の誕生日も2月22日らしいです。恐るべし2月22日。 決してケチな訳ではないですが、前々回に引き続きタダシリーズという事で今回はフリーの CMS をいくつかご紹介しようと思います。グループウェアもそうでしたが、CMS も調べれば出てくる出てくる！しかもどれもかなり高機能そうなものばかり。MTOS や WordPress がフリーの CMS としては有名ですが、他にもたくさんあるのでぜひ参考にしてみてください。 MODx modxcms-jp.com 今回調べた中で一番面白そうだなぁ、と感じたのがこちらの MODx 。モッドエックスと読みます。管理画面に少しクセがありますが、日本語対応もばっちり、カ
スマートフォンサイトにてフォームボタンのコーディング時に覚えておきたいCSSプロパティ | バシャログ。
禁煙してから３ヶ月、着実に体重が増加しているishidaです。 先週土曜日にCSS Nite LP13に参加してきました。 ちょうどスマートフォンのデザインとコーディングのお仕事が進行中でしたので、とても参考になりました。現在セミナー内容を振り返り学習中です。 それとCSS Nite関連ですと、何やら CSS Nite LP14 にて弊社メンバーが登壇するとかしないとか。 スマートフォンコーディングでは、CSS3で角丸やらグラデーションが使えるので画像の使用頻度は少なくなります。ボタンまわりについてもCSSのみで実装する機会が多いです。 フォームのsubmitボタンをCSSのみで表現する際には、ちょっとクセがありましたので 解決方法をご紹介します。 検索するsubmitボタンを、以下のようなデザインをCSSのみで実装することにします。 まずは簡単に横幅と背景色・角丸をCSSで設定してみます
ソーシャルボタンについて集めてみました | バシャログ。
以前紹介したラーメン屋が閉店してしまって悲しいminamiです。 最近バシャログにも導入されましたが、facebookやtwitterなどのソーシャルメディアと連携するボタンについていろいろ集めてみました。 手軽にソーシャルボタンを発行 AddThis 簡単にソーシャルボタンを設置するスクリプトを発行できるサービスです。デザインを選んでソースをコピペするだけ。クリックされた回数の解析もデフォルトで入っていて便利そうです jQuery.socialbutton とても簡単にソーシャルボタンを導入できるjQueryプラグイン。 アイコンあれこれ Social Media Icons ソーシャルメディアのアイコンがずらり72個。 Handycons 2 - another free hand drawn icon set 手書き風でかわいいですね。 Set of social icons 缶バッ
Androidアプリ開発に役立つサイト7つ | バシャログ。
こんにちは、今週はモテキDVD-BOXの到着が待ち遠しいinoueです。 さて、携帯の冬モデル発表でちょっと活気づいているAndroid周辺ですが、 Xperiaもやっとバージョン2.1へのアップデートが可能となりアプリ開発 をそろそろ本腰入れないと、という状況になっています。 そこで、Androidアプリ開発に役立つサイトを簡単にまとめてみました。 私も夜なべプログラミングしようっと。こたつ欲しいなあ… まずはここ！本家サイト Android 総合情報はこちらから。 Androidマーケットの情報にもアクセスできて便利です。 （ただしchrome、Firefoxでは表示が崩れて見づらかったです。） Android Developers 開発者向け情報はこちらにまとまっています。 SDKのダウンロードもここから。 サイトを英語と日本語で読むことができますが、切り替えると若干情報が異なること
サイトを公開する際に最低限抑えておきたい Apache の設定 | バシャログ。
こんにちは nakamura です。最近トルシエさんテレビ出すぎじゃありません？ウィイレヤロウヨ。オフサイドダヨ！ さてさて今回は意外と知られてないけど、サイトをインターネットに公開する際には知っておいた方が良い Apache の設定をいくつかご紹介します（一部 PHP の設定もありますが）。この設定をしていないからといって即危険にさらされるという訳でもありませんが、リスクの芽は摘んでおくに越した事はありませんよね。 無駄な HTTP ヘッダを返さない ディストリビューションにより異なるかもしれませんが、CentOS デフォルトの設定の場合 Apache が返してくる HTTP ヘッダは以下のようなものです。 HTTP/1.1 200 OK Date: Mon, 05 Jul 2010 01:01:14 GMT Server: Apache/2.2.3 (CentOS) X-Powered
HTML5を使った気になるサイト！ | バシャログ。
サッカー日本代表、負けてしまいましたね。残念ですがとてもいい試合をしてくれたと思います。minamiです。 さて近ごろ世間はHTML5、HTML5と騒がしいですが、一目見てすげえっ！となるHTML5のデモサイト&チュートリアルサイトを集めてみました。 できるだけHTML5対応の進んでいるChromeやSafari最新版などで閲覧することをオススメします。 HTML5を使ったデモサイト ここまでやれるのかとびっくりするほどクオリティの高いアニメーション&インタラクティブコンテンツ。 HTML5 Canvas Experiment VIDEO要素を3Dでグリグリ Blowing up HTML5 video and mapping it into 3D space HTML5で弾避けシューティング！ HTML5でTAMAYOKE!!!111 AppleのHTML5デモページ。Safariでしか
【Fireworks】圧縮率による JPEG で文字もきれいに書き出す | バシャログ。
今週の木曜日はやはり早く寝て夜中に起き出すかないか！toyama です。金曜日は結構な割合で寝不足な人が多そうですね。 大きな写真イメージの上にキャッチコピーを書いてサイトの目立つところに表示、というデザインは割と多いパターンですが、画像の書き出し圧縮率は毎度悩ましいです。 写真の書き出しは jpg がセオリーですが、キャッチコピーの文字がひどく劣化してしまうことがあります。かといって gif で書き出すには色数が多くてディザでもちょっと辛いし重い！ そんなときは Fireworks さんにおまかせです。さすが web 制作の申し子！ 1. こんな感じの画像があるとします。 写真の上にテキストで文字が置かれています。 2. jpg で書き出してみます。普段はこんなに低画質で書き出すことはないですが、分かりやすく圧縮の品質を 50 にしてみます。 背景の画像はともかく、もう文字のまわりがグニ
IE6でも透過PNGを使う | バシャログ。
いまだ小沢健二コンサートの余韻が冷めない sakai です。 普段は透過 PNG を使わずにデザイン・コーディングをしているのですが、先日どうしても透過 PNG を使いたいシーンがありました。 透過 PNG は大変便利ですが、IE6 が対応していないのがネックです。 というわけで、IE6 でも透過 PNG を使用できるようになる JavaScript のライブラリを色々試してみました。（今さらですが！） 有名どころの「jquery.pngFix.js」から使ってみましたが、これは背景画像に透過 PNG を使うとちゃんと表示されなくて断念。 「IE7.js」もところどころ挙動が怪しいしなあ… と困ったりしつつ、最終的には「DD_belatedPNG.js」に行き着きました。 DD_belatedPNG 透過 PNG を背景画像に指定したり、ポジションをいじったりしても挙動が安定しているのでと
手軽にRSSを表示させたい時に便利なPEAR::XML_RSS | バシャログ。
こんにちは、ichikawaです。 例えばサイトにブログの最新記事を表示させたい時などありますよね。 本日は、そんな時に便利なPEARの「XML_RSS」パッケージをご紹介いたします。 インストール PEARのインストールは簡単です。以下のコマンドを実行すれば完了です。 pear install XML_RSS-1.0.0 レンタルサーバーなどの環境などにより、コマンドでインストールできない場合には以下など参考になさっていてみて下さい。 PEARのインストール方法 利用前準備 必要な場合にはphpのinclude_pathを設定しましょう。方法は環境に応じて下さい。 .htaccessの場合 php_value include_path .:[PEARへのパス] ini_set()で設定する場合 ini_set("include_path","[PEARへのパス]" . ini_get("
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
無料で使えるプロジェクト管理ツール「gantter」を使ってみて、これはもう手放せないと思ったポイント3つ | バシャログ。