Home > スポンサー広告 > HTMLコーディング時のCSS調整はSafariやChormeの「要素の検証」が便利。

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

Comments: -

Comment Form
サイト管理者にのみ通知する

Trackback+Pingback: -

TrackBack URL for this entry
http://vanidesign.blog.fc2.com/tb.php/119-591257fe
Listed below are links to weblogs that reference
スポンサーサイト from バニデザノート

Home > スポンサー広告 > HTMLコーディング時のCSS調整はSafariやChormeの「要素の検証」が便利。

Home > ユーティリティ > HTMLコーディング時のCSS調整はSafariやChormeの「要素の検証」が便利。

HTMLコーディング時のCSS調整はSafariやChormeの「要素の検証」が便利。

3_2014-11-18.png

HTMLコーディングをしているときに、CSSで高さを変更したりする場合
ソースコードを変更→更新を繰り返すのが基本ですが
微妙な1〜3pxぐらいの調整を何度もするのが面倒なときに
私は「要素の検証」機能で調整を行っています。その際の方法を書いてみます。

※FirefoxにもFirebugなど有名な add on がありますし、最近のIEでも「開発者ツール」を使えばよく似たことができます。

最近のコーディング&デバッグ環境。

私はSafariからコーディング確認を始め、最終的に他のブラウザに合わせていく形が好きなんですが、yosemiteになってちょっと動作が不安定になったのでChormeを併用するようになりました。
今回のプレビュー画面はChormeで説明したいとおもいます。
表示や操作感はほとんど同じはず。

作業の流れ

1)codaなどテキストエディタでコーディング中にブラウザ確認をしている状態で
2)チェックしたい要素のあたりで右クリック→「要素の検証」をクリック
  (safariだと「要素の詳細をチェック」になっています。)

☆Safariの場合、「環境設定>詳細>メニューバーに開発メニューを表示」を入れておきましょう。

3)該当ソースコードを選択→スタイルを直接変更
4)即時でプレビューされるので、表示を確認後ソースコードを変更→反映を確認

要素のサイズ確認が出来る

ブロック要素、inline-block要素、回り込みの状態、画像サイズ、使われているidやclassが瞬時にわかります。SafariやChormeは比較的外側要素の「はみ出し」などに優しいので、丸められている範囲もわかりやすいです。

他の人がコーディングしたソースコード(テンプレートをDLした場合などのソースコードなど)で何を指定しているのかもわかります。
→そのclassを上書きしてあげれば素早くデザインを上書きできます☆

※癖がありすぎて隠蔽主義+ライブラリ主義なソースの場合、たくさん辿らなくてはいけない場合もあります。ある程度は解読できますがー。

HTMLへの直接ソース割り込みができます。

実際のソースコードを変更せずに、現在表示されているページを基準としてライブ変更ができます。
例えば、テストでclassを入れてみたいとか、逆に削除してみたいとか。styleで埋め込んでしまうとか。そういったデバッグができます。表示は即時プレビューされます。

☆テストして最適な形を、実際のソースコードに書き込む必要があります。


やり方は、ソースコードを表示したあと、該当classやhtmlをダブルクリックするだけ。
追加したり、削除したりできます。
あくまでスタイルや表示の部分のデバッグに有効で、文字の校正などには向いていません。

classを使い回ししたい時に、ソースを見に行くのが面倒なとき、classをコピーしに行ったりもできます。→テンプレファイルだけ作っておけば、仕様書要らずですー。便利。

スタイルの無効化(全体・一部可)、スタイルの追加の割り込みも可能

1)右下エリアのスタイル設定をマウスホバーするとチェックボックスが出現します。
  このチェックボックスをOFFにすると、スタイルが解除されます。
  
2)スタイルの「;」の次あたりのエリアをクリックすると、
  新規スタイルを追加することもできます。

3)スタイルの数値をダブルクリックすると、数値の変更ができます。

HTMLと一緒で、実際のソースコードが変更されるわけではありません。
CSSが適用されていない、タイプミスなどの場合は打ち消し線が出ますので、ソースコードを直すのが簡単。
冒頭でお話した、数値の微妙な調整にも使えます。



この機能を使えば、他にもHTMLで定義されている読み込みファイルの一覧が出せたり、画像の元ファイルを辿ったり、サイズを調べたりすることができます。
本来の用途だと思われるカラム崩れなどの確認にも、もちろん利用できます。
スライドショーjsなどの動きがおかしいときも、ライブで数値が変更されていくのが見えるので、便利です。
あとはWordPressのプラグイン出力エリアのCSSがどうなっているのか見たいときも、こちらのほうが速い気がします。

なんといっても、コーディングではよく確認する数値がすばやく取れるのが非常によいです。
関連記事

Comments: 0

Comment Form
サイト管理者にのみ通知する

Trackback+Pingback: 0

TrackBack URL for this entry
http://vanidesign.blog.fc2.com/tb.php/119-591257fe
Listed below are links to weblogs that reference
HTMLコーディング時のCSS調整はSafariやChormeの「要素の検証」が便利。 from バニデザノート

Home > ユーティリティ > HTMLコーディング時のCSS調整はSafariやChormeの「要素の検証」が便利。

Sponsored Link
▲WordPress初心者向けに、ばにが書きおろしたオンライン授業です。上記バナーから受講いただくと、33%OFF!
ホームページ・ウェブサイトデザイン・制作ならバニレートデザイン事務所まで。Wordpress(ワードプレス)、カラーミーショップのカスタマイズから、レスポンシブ、Retina対応、スマホ用サイトもできます♪デザインカンプのみの納品や、バナーのみの納品などでも受付いたします!お気軽にご相談くださいませ。
Books - 寄稿させていただいた本たち
WordPressデザイン 仕事のネタ帳 見た目と効果を向上させるプロのテクニック
WordPressを利用して、趣味〜お仕事が可能なレベルの実践的な内容になっています。 ブログ風、Pinterest風、CMSとしてWordPressを利用する方法の3つをメインに、さらにこれらを拡張していきやすいような考え方や、きっかけを掴んでいただければという想いで書かせていただきました。担当Chapter:9chapter (メイン3、サブ6。110ページ前後ぐらい。)
【Amazon.co.jp限定】神速Photoshop [Webデザイン編] CC対応 特製PSショートカットステッカー for Mac 付
Photoshopの作業をすばやく行って、デザイン自身に集中できるように。基本動作であっても、考え方としてどのように持っていくか、ということをテーマに書かせていただきました。(担当:本編の全体89のテクニックのうち、23ぐらいのテクニックと、特典PDFの中にもいくつか。)
レスポンシブWebデザインテクニックブック プロが教えるマルチデバイス対応の手法
「レスポンシブWebデザインテクニックブック プロが教えるマルチデバイス対応の手法」にてCase Studyの1つを寄稿させていただきました!
Popular Posts
Recent Entry
Category
about:vanillate
vanillate

author: vanillate(バニレート)

フリーランスのウェブクリエイター。
wordpressやカラーミーショップのデザインなど、シンプルで可愛いサイトを作っています。






Link
Recommend
レンタルサーバー 【ヘテムル】 なら、 独自ドメイン【無制限】、データベース【50 個まで】を追加費用無料で設定できます。 しかも、サーバー容量は余裕の 42.195GB! 1 つの契約でたくさんのサイトを運営したい方にぴったりのサービスです。
★【カラーミーショップ】なら本当に安心!★
かわいいテンプレートが続々登場するから、初心者のあなたにも安心!
オンラインショップ・ショップブログ・モバイルショップなど、こんなに揃って月額875円~!
有名ショップ様にも多数ご利用をいただいているから、どんどん参考にしちゃおう!
Design Items
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。