WEBプログラミング入門

CSSアウトラインでレイアウトを確認する

ページレイアウト作成時にアウトラインを表示すると、要素の範囲がわかりやすい。javascriptで表示、非表示を簡単に切り替えできるようにする。

このページにテストで実装

ページ内をクリックすると全要素のアウトラインを表示する。クリックするたびに表示・非表示を切り替える。

コードの例

<style id="outline"></style>
<script>
  window.addEventListener('click',()=>{
    let id = document.getElementById('outline');
    if(id.textContent===""){
    id.textContent = "*{outline:1px dotted #222}";
    }else{
    id.textContent="";}
  });
</script>

コードの解説

  1. 空のstyle要素を作る。
  2. クリックイベントで要素の中が空なら全要素にoutlineのスタイルを追加、空でなければスタイル削除する。
関連リンク