トップ   >   時系列表示:2012年04月
2012年03月 | 2012年04月 | 2012年05月

css編集の点において、

共有ボタン付きページはこちら: http://tech.kimihiko.jp/article/55523889.html

CSS編集の点において、IEの開発者ツールをfirebugみたく使う方法

firebugってweb制作者、開発者にとってすごく便利なツールというのは
言わずもがなだと思うのですが、いかんせん“firebug”っていうくらいですから、
基本的にはfirefoxしか使えません。
(最近はChromeでLite版なんかも出ていますが。)

firebugの便利な機能のひとつには、
任意のタグを選択して、それにどういったCSSがかかっているのかを
調べることができることだと思います。
調べるだけではなく、リアルタイムに編集を加えて
プレビューに反映しながら、調整もできます。
このあたりについては、だいぶ前に記事にしていました。

【図解】今更ながらfirebugによるCSS調整のし易さについて。 | kimihiko Tech
http://tech.kimihiko.jp/article/18755744.html

ですが、一般的に利用者の非常に多いIE(Internet Explorer)で
検証できればいいな、という場合は結構多いと思います。

でも、IEではfirebugは使えません。

ただ、最近のIEには、開発者ツール、と呼ばれるfirebugに似た
検証ツールが組み込まれています。
ご存知の方は多いと思うのですが、
あまり使われていない方も多いような気がします。

そこで、CSS編集の点において、
IEの開発者ツールをfirebugみたく使う方法について
少しだけ説明をしたいと思います。

まず、タグを選択して適用されているCSSを調査します。
さらに、CSSのリアルタイム編集&プレビューをします。

そうなんです。実はfirebugと同じようなことができちゃいます!(笑)

ff1
F12を押すと、下にfirebugのようなウインドウが出現します。
これがIEの開発者ツールです。なんとなくfirebugと似てますね。

ff3e
1.矢印を選択し、
2.プレビュー上で、任意の要素を選択し、
3.トレーススタイルを選択します。
すると、選択中のタグに適用されているCSSを知ることが可能です。

ff4
CSSを少し、いじってみます。
クリックすると、編集できますので、変更してみましょう。

ff5
確定すると、プレビューにも反映されました!

ちなみに、これは一時的なプレビューですので、
リロードすれば表示は元に戻りますし、
実際のコードへの影響は何もありません。

トレーススタイルの編集ですが、今回試した、既存プロパティの編集は可能でしたが、
firebugのように、新たにプロパティを追加したりすることは
できないように思いました。

ff7
ただ、htmlタブのほうで、属性の追加、というのができるので、

ff8e
そちらでたとえば、styleプロパティを追加して
CSSを直接書き込めば、その場で色々調整できるように思いました。

私も開発者ツールについては、それほど使い込んでませんが
ぜひ、活用してみてくださいませ。

以上です。

テスト環境:Windows7 Home Premium, IE8


木曜日の組織あしあと帳

共有ボタン付きページはこちら: http://tech.kimihiko.jp/article/55520902.html

木曜日の組織あしあと帳

ねむねむ。

時刻 所属組織 初回
18:37 国立がんセンター (8) 49ヶ月前
17:59 サイバーエージェント (93) 51ヶ月前
17:49 富士通 (3087) 57ヶ月前
17:41 伊藤忠テクノソリューションズ (681) 56ヶ月前
17:24 エス・アンド・アイ (8) 50ヶ月前
16:49 愛知情報システム (6) 46ヶ月前
16:35 ティー・ワイ・オー (7) 44ヶ月前
16:31 オリンパス (28) 35ヶ月前
15:40 金沢市教育委員会が運用する教育ネットワーク 本日
15:29 トランス・コスモス (564) 35ヶ月前
15:07 楽天 (701) 57ヶ月前
13:51 富士テレコム (9) 50ヶ月前
13:16 ソフトバンクテレコム (352) 52ヶ月前
12:16 インディゴ (16) 53ヶ月前
12:15 アイ・エム・ジェイ (113) 53ヶ月前
11:47 クエスト (21) 50ヶ月前
11:47 エヌ・ティ・ティ ファシリティーズ (29) 51ヶ月前
11:27 シャープ (561) 56ヶ月前
11:07 日本電気 (2853) 56ヶ月前
10:43 大正製薬 (21) 38ヶ月前
09:31 インタークエスト (3) 51ヶ月前
09:29 日立製作所 (1371) 45ヶ月前
09:08 森ビル (48) 54ヶ月前

木曜日のおつかれさまですφ(´д`o)

共有ボタン付きページはこちら: http://tech.kimihiko.jp/article/55519554.html

木曜日のおつかれさまですφ(´д`o)

本日は4月26日木曜日。只今の時刻は18時25分。
今、帰宅中です。

木曜もだるい(*´д`*)

も、もうちょと。。
今日も早く寝ることを目標に。

本日の帰りのひとこと『考えが煮詰まった問題でも、日を改めると、すんなり解決することがよくありますよ。お試しあれ。』

タイ(バンコク)旅行まであと4日です(((o(*゜▽゜*)o)))
通勤定期券期限まであと9日ですヽ(´o`;
小中学校同窓会まであと66日です(((o(*゜▽゜*)o)))
33歳まであと201日です。

本日もおつかれさまでございますたφ(´д`o)

木曜日のおはようございますφ(´д`o)

共有ボタン付きページはこちら: http://tech.kimihiko.jp/article/55509489.html

木曜日のおはようございますφ(´д`o)

本日は4月26日木曜日。只今の時刻は7時12分。

トーキョーの現在の実際の天気は、くもり。

梅雨ですか??(笑)

本日の朝のひとこと『【この格言気に入った!!】孤独に徹すること(相場師、是川銀蔵)』

散髪してから、9日が経ちました。
愛犬のトリミングにいってから、61日が経ちました。
iPhoneにしてから、158日が経ちました(´・ω・`)
関西から関東に引っ越してから、1923日くらいが経ちました。
この世に生を受けて11853回目のおはようございますでした。。。φ(´д`o)

。。。というわけで

さぁ今日という日を楽しみまひょ。φ(´д`o)

2012年04月25日のつぶやき一覧

共有ボタン付きページはこちら: http://tech.kimihiko.jp/article/55507434.html

05:28 むくり 地震できた (5:27) - 5.8時間 http://t.co/3nsyQrRm #OhayoPanda
07:20 水曜日のおはようございますφ(´д`o) | kimihiko Tech http://t.co/tVk82bdi
18:36 水曜日のおつかれさまですφ(´д`o) | kimihiko Tech http://t.co/oLf48dAj
21:55 私なりの、iPhoneで撮影したグルメ写真を美味しそうに見せる画像加工の丸秘テクニック | kimihiko Tech http://t.co/keaMal1o 水曜日のブログ。
22:51 若干作り手側に居たことがあるからマジレスすると、、お子様も多いとは思うが、最近規制も厳しいしどうなんだろう。意外に30-40代が多いです。 RT @komeimokabotya: ソーシャルゲームって、やってる人いるのかな?プレイ年齢層はお子様が多いのかな?
23:50 安いシャンパンをちびりちびり飲むのが平日のささやかな楽しみのひとつなりよ
23:59 おやすみなさい (23:59) http://t.co/EFuhFltf #OhayoPanda
Powered by twtr2src

私なりの、iPhoneで撮影したグルメ写真を美味しそうに見せる画像加工の丸秘テクニック

共有ボタン付きページはこちら: http://tech.kimihiko.jp/article/55501362.html

私なりの、iPhoneで撮影したグルメ写真を美味しそうに見せる画像加工の丸秘テクニック

これはちょっとした企業秘密(笑)なのですが、
まぁでも折角(何が?)なので、公開しちゃいます!!

テクニックのまえに座学なのですが、
美味しそうな写真とは、どんな写真でしょうか。

photo

photo

上と下の写真はどちらが美味しそうでしょうか。
なんとなく、後者のほうが食べたくなりませんか。

美味しそうな写真に必要な要素は、
・立体感
・暖色系の色味
だと私は思っています。

立体感の表現についてですが、
焦点とそれ以外の“ぼけ”があるとこで立体的にみえ、
メリハリのきいた写真になります。
全体がくっきりした写真(全体に焦点のあった写真)は、
綺麗に見える反面、メリハリの無い、平面的なのっぺりした写真に見えがちです。
※立体感の表現については、ぼかし技のほかに、
 光の明暗でも表現できるかと思います。

色味については、よく自宅でとった写真などではありがちなのですが、
蛍光灯のもとで撮影したものはどうしても寒々しく
美味しくなさそうにに見えます。

青っぽい光というはどうも、美味しそうにはみえないのです。
逆に赤っぽい光は、食品を美味しそうにみせます。
スーパーやレストランなどの照明をみれば、うなずけるかと思います。

蛍光灯のものとで撮影したボケの無い料理写真というのが
素人写真に見えるのは、総合的に仕方のないことなのです。。
なので、上手に加工しちゃいましょう!

というわけで、本記事での画像加工
次の2段階の加工になります。

1.ぼかしをいれ、立体的にみせる
2.色調補正で暖色と光の明暗を加え、いいかんじにみせる

この加工作業にはiPhoneアプリを使っていきます。

まず、ぼかし作業には、ここではiQuikDoFという無料iPhoneアプリを利用しますので
App Storeからダウンロードしておいてください。
(バナー広告付きなら無料です。写真には広告は描画されません。)

今回の素材には冒頭で紹介した えびマヨ 画像を利用していきます。

7098549063_c8eb0d0dc1_z
iQuikDoFで画像を開き、点線の□ボタンをタップします。

photo
一箇所、焦点とする場所を決め、塗りつぶしてください。
焦点エリアは、あまり広くしないのがポイントです。
ぬりつぶせたら、右下のチェックボタンをタップします。

6952478836_1e27e0bf8a_z
焦点以外の部分にぼかしがかけられます。
上のバーの部分で、ぼかしの度合いを調整できますが
ここでは少しだけでよいです。
ぼかし具合がきまったら、
下にある上向き矢印ボタンをタップして画像を一旦、iPhoneに保存します。

photo
さらに、保存した画像をiQuikDoFで開き、
これに更に、ぼかしをいれ、さらに立体感を出したいと思います。
先ほどの手順と同じですが、
ぼかしのエリアをはじめより、広範囲にしてください。

6952479402_67b725c8fd
一度目同様、ぬりぶつし範囲以外がぼかされますが、
ぼかし具合は一度目より少し強めに設定し、
さらに立体感のある写真に仕上げます。

photo
仕上げに色調補正をして、できあがり!
色調補正ですが、いろんなアプリがあると思うので、
好きなものを利用すればいいと思うのですが、
ここでは Phototreats というアプリを利用しました。
※Phototreats も無料アプリです。使い方は割愛します。

また、ぼかしのところで今回は2度の加工で
メリハリを強調しましたが、
1度の加工でも問題ないと思います。

今回は画像加工で美味しく見せましたが、
撮影するときに、なるべく良い写真であることには
こしたことはないですね!

photo
たとえば、ぼかしについては、撮影の仕方によっては
プロでなくても、こんなふうに、いいかんじにみせることができます。
iPhoneでの撮影時、画面をタッチした部分に焦点をあわせるので、
このようなぼかし写真を予め撮影することも、場合によっては可能です。
ぜひ試してみてください。

今回説明したのは私なりの加工表現で、
ほかにも良い方法はいくつもあると思います。
私はこんなかんじでいつも加工してますよーという、お話でした。

ぜひ、あなたなりの表現を楽しんでみてください!

以上です。

テスト環境:iPhone 4S iOS 5.0.x

水曜日の組織あしあと帳

共有ボタン付きページはこちら: http://tech.kimihiko.jp/article/55500160.html

水曜日の組織あしあと帳

目が眠い。

時刻 所属組織 初回
18:22 コンピュータエンジニアリング (8) 43ヶ月前
17:26 エヌ・ティ・ティ・アドバンステクノロジ (110) 56ヶ月前
17:11 カカクコム (17) 36ヶ月前
17:02 シイ・アイ・エス (3) 29日前
16:40 北海道電子計算センター (7) 21ヶ月前
16:28 フューチャーアーキテクト (173) 56ヶ月前
16:22 森トラスト (3) 31ヶ月前
15:54 メディアファクトリー (9) 49ヶ月前
15:45 村田システム/インターネット研究会 本日
15:24 新日鉄ソリューションズ (276) 56ヶ月前
15:20 ゲームオン (8) 46ヶ月前
15:13 セコムトラストシステムズ (121) 56ヶ月前
14:50 ジーダット (6) 42ヶ月前
13:06 リコー (326) 57ヶ月前
12:55 コナミ (139) 57ヶ月前
12:01 デジタルテクノロジー (8) 48ヶ月前
11:33 オリンパス (27) 35ヶ月前
11:12 日本IBM (458) 57ヶ月前
11:08 大栄電機工業 (6) 52ヶ月前
10:37 ソニー (1034) 56ヶ月前
10:35 ミクシィ (65) 36ヶ月前
10:34 日本電子専門学校 (43) 53ヶ月前
10:31 ネットイヤーグループ (27) 35ヶ月前
10:30 厚生労働省 (24) 52ヶ月前
10:25 楽天 (698) 57ヶ月前
10:16 ADEKA 本日
10:15 京セラミタ (4) 35ヶ月前
10:06 東芝 (1998) 57ヶ月前
09:46 石田大成社 (48) 56ヶ月前
09:44 トランス・コスモス (563) 35ヶ月前

水曜日のおつかれさまですφ(´д`o)

共有ボタン付きページはこちら: http://tech.kimihiko.jp/article/55498690.html

水曜日のおつかれさまですφ(´д`o)

本日は4月25日水曜日。只今の時刻は18時20分。
今、帰宅中です。

水曜もだるい(*´д`*)

めづらしくはやい

本日の帰りのひとこと『建築にも興味があります』

タイ(バンコク)旅行まであと5日です(((o(*゜▽゜*)o)))
通勤定期券期限まであと10日ですヽ(´o`;
小中学校同窓会まであと67日です(((o(*゜▽゜*)o)))
33歳まであと202日です。

本日もおつかれさまでございますたφ(´д`o)
関連する記事(広告含む)
1 3 4 5 6 7 8 9 10 11 12 13