「表示がプリントの通りにならない」という場合の対処法
(方法A)ブラウザを使って[要素の検証]でサンプルと違う場所を発見する
を前回紹介しましたが、
(方法B)これをDreamweaver上の機能を使って発見する方法もあります。
参考ページ＝ 超便利なDreamweaverのコードナビゲータ | m-School
例えば
下の画像は「左上(「Webは"編成"の時代へ向かっている」で始まる段落)の文字の色が違う」
「本当は白い文字でなければいけない」
という事は見てわかりますが、
何故淡いピンクの文字になっているのか
どうやって直す方法を見つけたら良いか？
を見ていきましょう。
(1) 表示が違う部分を選択して、しばらく待ちます。
(2)すると、インジケーターとよばれるマーク(船の舵のマーク)
が出てきます。
(3)インジケーターをクリックすると、選択範囲に影響を与えている
cssが表示されます。
(4)直したい場所のcss名は、
「maincontent の中の " intro という名前のpタグの部分"」なので
「#maincontent p.intro」
という名前のcssですが、インジケータに出てきていません。
これは選択範囲に「#maincontent p.intro」が正しく使えていない事になります。
↑ 何故淡いピンクの文字になっているのかの答
コード(画面上側)をよく見てみましょう
<p class="intro">ではなく間違えて<p class="info">と書いています。
↑ どうやって直す方法を見つけたら良いか？の答
↑ どうやって直す方法を見つけたら良いか？の答
css名を「intro」に修正しました。
正しく白い文字表示になりました。
インジケーターにも「#maincontent p.intro」が出てきました。
これで修正が完了しました。
これで修正が完了しました。
0 件のコメント:
コメントを投稿