WEBプログラミング入門

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

WEBページのレイアウトは四角の組み合わせでできているが、枠がないとそれぞれのBOXサイズがイメージしにくい。outlineはレイアウトに影響を与えずにボックスの大きさが分かるため、レイアウト作成時に簡単に表示、非表示を切り替えできるようにアウトライン切替ボタンを作る。

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

このページの画面左下にマウスを持っていくと[outline切替]ボタンが表示されクリックでoutlineのON、OFFを切り替える。

コードの例

editor
  • <style id="outline"></style>
  • <span class="toggle_outline" onclick="outline();">outline切替</span>
  • <style>
  • .toggle_outline{
  • position:fixed;
  • user-select: none;
  • bottom:0;
  • left:0;
  • opacity:0;
  • cursor:pointer;
  • background:rgb(168, 252, 142);
  • color:#333;
  • font-size:12px;
  • padding:5px;
  • transition: all 0.2s;
  • z-index:10;
  • }
  • .toggle_outline:hover{
  • opacity:1;
  • }
  • </style>
  • <script>
  • function outline(){
  • let id = document.getElementById('outline');
  • if(id.innerHTML===""){
  • id.innerHTML = "*{outline:1px dotted red}span.toggle_outline:hover{background:red;color:#fff}";
  • }else{
  • id.innerHTML="";}
  • }
  • </script>

コードの解説

  1. 空のstyle要素を作る
  2. span要素で切り替えボタンを作る。onclick属性でクリックするとoutline()を実行
  3. span要素(.toggle_outline)の設置場所、スタイルを決める。当サイトでは邪魔にならない左下に配置でopacity:0として普段は見えない状態にする
  4. .toggle_outline:hoverでopacity:1で表示する
  5. 変数"id"にid属性outline(最初の空のstyle要素)を入れる
  6. 関数の内容は"id"の中身が空であれば、全要素(*)に赤ドットのアウトラインを入れ、.toggle_outline:hoverの文字色、背景色を変える。
  7. "id"の中身が空でなければ、空にする(id.innerHTML="";)
関連リンク
outline切替