IoT-Arduino
9/27/2019 - 1:51 AM

HTML/CSS 本 新しく学んだこと

  字間調整
      
      p { letter-spacing: 0.5em; }
      
      
       
       ----------------------------------------------------
       
      
      ブロックレベルとインライン
      
      ブロックレベル(width,height指定可、幅を指定しない場合、親要素のcontenntsと同じ幅になる。上下左右のpadding,margin指定可、
      前後に改行が入る)
       p, h1-h6, div, ul,ol,li
      
      インライン
      (width、heightを指定できない、上下のmargin、paddingを指定できない、左右のpadding、marginは指定できる)
       a, img, span, strong
       
       
       
       ----------------------------------------------------
      
      
      定義リスト dl、dt、dd
       dl
          dt date
              dd 文章
      
      だと、文章がインデントされる
      
      cssで以下を設定すると、date と文章を 一行に並べられる
      
      dt{
          float:left;
          clear:left;
          margin-right;
      }
      
       
       ----------------------------------------------------
      
      
      アニメーション変更
      
      a {
          transition: color 0.2s liniar;
      }
      
       
       ----------------------------------------------------
      
      Flexboxレイアウトの特性
      Flexboxの子要素にインライン要素が含まれる場合は、横並びになった要素の上下の高さは
      子要素ではなく、インラインを基準にレンダリングされる。
      li要素の高さよりも、a要素のほうが高さがあるとおかしくなる。
      ー>対策:a要素をdisplay:block;に指定しておくこと。
        とくにナビゲーションをレイアウトする場合重要。
      
       
       ----------------------------------------------------
      
      
      インプットフォームのデザイン
      
       上記のdlのcssgが使える
      
      dl
      dt 名前
      dd texterea
      
      dl dt{
          float:left;
          clear:left;
          margin-right;
      }
      
      
      マウスカーソルの表示
      input[type="submit"] {cursor:pointer;}
      
      マウスオーバーの装飾
      input[type="submit"]:hover {
          opacity: 0.8;
      }
      
        ----------------------------------------------------
       
      
      w3c 文法チェッカー HTML/CSS
      w3c リンクチェッカー 
      
      
      FileZilla  
      
      モバイルフレンドリー
        https://search.google.com/test/mobile-friendly?hl=ja