iPod shuffle研究所

2012/02/12(日)

webinspecter.jpg

今回の移転にあたって、ページデザインをなるべく旧サイトに近づけることにした。
そのため、帰宅してから夜遅く、FC2ブログのテンプレートをMacbook Airで編集していた。

テンプレート編集の手間の半分はFC2ブログ特有のパラメータの使い方を学ぶことだが、残りの半分のほとんどは、作りたいデザインをCSSで実現することに費やされる。

その際に重宝したのが、SafariのWebインスペクタだ。

Webアプリ開発環境としてのSafariを知ってますか? - @IT

これは、Safariの「開発」メニューから呼び出せる。
「開発」メニューはデフォルトでは表示されていないが、環境設定の「詳細」で「メニューバーに"開発"メニューを表示」にチェックを入れると表示されるようになる。

Webインスペクタを使うと、ページの各部分ごとに、対応するHTML/CSSの記述を簡単に確認できる。

これで旧サイトのCSSを確認し、FC2のテンプレートのCSSへ反映していった。
表示が思い通りにならない場合のデバッグツールとしても使える。
  1. この記事のリンク
  2. | トラックバック:0
  3. | コメント:0

コメント
お名前
タイトル
URL
コメント
パスワード Vodafone絵文字 i-mode絵文字 Ezweb絵文字

ブログ内検索

プロフィール

勇者カズ坊★
ガジェット好きの徒然日記です。

カテゴリー

最新記事

アーカイブ

広告

最新コメント

勇者カズ坊★ [06/08 ]
ガマシッド [06/08 ]
勇者カズ坊★ [03/14 ]
匿名希望 [03/14 ]
勇者カズ坊★ [03/09 ]
山田 [03/09 ]
勇者カズ坊★ [02/10 ]
mz2500 [02/10 ]
勇者カズ坊★ [09/19 ]
イーザス [09/19 ]

☆★おすすめショップ★☆

富士カメラ
デジカメなどの限定商品が安い
shopU
キーボードなどの玄人好みの入力機器が揃う
BENQジャパン
液晶ディスプレイのアウトレットがおすすめ
上海問屋
USBメモリやSDカードが安い
エレコムダイレクトショップ
PC関連2100円以上送料無料
サンワダイレクト
PC関連2000円以上送料無料
デンシ電気店
ちょっと変わった電子ガジェットがおすすめ!
にぎわい商店
変わったグッズがたくさんあっておすすめ!
インテリアショップplywood
ちょっと洒落たグッズ満載、一見の価値あり

バーコード

RSS

おすすめ