DESIGN
SUKINADAKE
BLOG

カンプ画像をブラウザでセンタリングして表示する方法

2015/03/06 Web

PhotoshopやFireworksから書きだしたpngやjpgのデザインを、
ブラウザで簡単にセンタリング状態で表示確認する方法を紹介します。

これは主に、ウェブデザイナーやウェブ担当者の皆さん、お待たせしました!
って内容かなと思います。

少なくとも、私は数年間、画像をブラウザでセンタリングしたいなーと夢見ていました。
そんな夢のボヤキを聞いた弊社プログラマンが一瞬で解決してくれたのです。

ブックマークにJSを登録して画像をセンタリング!

解決方法は簡単、ブックマークバーにtexit-align:center;となるようなJSを仕込むのです。

具体的には以下のソースをブックマークバーに登録します。

javascript:(function(){document.body.style.textAlign="center"})()

「Google Chrome」でしか動作確認していませんが、
この機能を欲する人の殆ど、はきっと「Google Chrome」ユーザーだと思うので問題ないですね。

ちなみに「Google Chrome」の場合、ブックマークバーを表示した状態で、
「右クリック」→「ページを追加」を選択後、URLの欄に先のソースを入れればOKです!
これで、画像をブラウザに表示後、ブックマークを押すだけで画像がセンタリングされます。

まとめ

これで、デザインをイメージに近い状態での確認が格段に楽になりますね。

はい、プログラマンはやっぱりスゴイです。
そんな弊社のプログラマンのブログ(プログラマブログ by wacul)を紹介して締めくくります。

デザイナーの私には、理解が難しい、凄そうな内容です。
プログラマメンバーも絶賛募集中のようなので、要チェックして頂けると幸いです。

ちなみに、waculではWebデザイナーも募集してます。
ちょっとでも興味のある方、ご馳走するので是非一度お話しましょう!

Facebookシェア B!