痒いところに手が届くtipsコンテンツ

HTMLに入り込んだ検証ツールで選択できない線を探す方法を紹介します。

多くのコーダーはGoogle Chromeの検証ツール(ディベロッパーツール)を利用しているかと思います。

その際、線(border)が写り混むことがあります。そして要素検証で選択することもできないことがあります。

白い線が写り混む原因はposision:absolete指定した要素の親要素にposision:realativeが抜け落ちているためです。

検証ツールでどこの要素かわからないborder線を探す方法

Google Chromeの検証ツール(ディベロッパーツール)を使用します。検証ツールの開き方はググってください。

YahooJAPAN

ツールを開くとelementsタブが開かれます。各ブロックを擬似編集することができます。ソースコードの…アイコンを押すと様々な編集ができます。

検証ツールのDelete element で要素を一つずつ消していきます。要素を消した時、同時に身元不明のボーダー線が消えたら、対象の要素にボーダー線の記述がされていることになります。