リアクション設計-メディアクエリー

14883 ワード
htmlcss テキストリンク

はんのうせっけい


メディアクエリ


横モード、さまざまな形式のスクリーンに使用

🟢 画面幅が800 pxより大きい場合、div要素は消えます。

<style>
    /* screen width < 800px */
    @media(max-width:800px) {
      div{
        display:none;
      }
    }
</style>
</head>
<body>
  <div>
      Responsive
  </div>
cf)画面幅が800 px未満の場合、div要素は消えます.
@media(min-width:800px)

ウィンドウサイズの確認


開発者ツールor command+option+U


右上隅で表示可能(ウィンドウのサイズ変更時に変更)

🟣 メディアクエリーの実践


画面の横方向の長さが80 px未満の場合...

1.右下の移動


idがgridの要素をblockに置き換える
@media(max-width:800px){
    #grid{
      display: block;
    }
  }

2.垂直分割線の除去


=olのborder-rightオプションの変更
@media(max-width:800px){
    ol{
      border-right:none;
    }
}

3.水平分割線の消去


=h 1のborder-bottomオプションの変更
@media(max-width:800px){
    h1{
      border-bottom:none;
    }
}

結果



▼▼▼▼▼全体コード

<!doctype html>
<html>
<head>
  <title>WEB1 - CSS</title>
  <meta charset="utf-8">
  <style>
  body{
    margin:0;
  }
  a{
    color:black;
    text-decoration:none;
  }
  h1{
    font-size:45px;
    text-align:center;
    border-bottom:1px solid gray;
    margin:0;
    padding:20px;
  }
  ol{
    border-right:1px solid gray;
    width:100px;
    margin:0;
    padding:20px;
  }
  #grid{
    display: grid;
    grid-template-columns: 150px 1fr;
  }
  #grid ol{
    padding-left:33px
  }
  #grid #article{
    padding-left:25px;
  }
  @media(max-width:800px){
    #grid{
      display: block;
    }
    ol{
      border-right:none;
    }
    h1{
      border-bottom:none;
    }
  }
  </style>
</head>
<body>
  <h1><a href="index.html">WEB</a></h1>
  <div id="grid">
    <ol>
      <li><a href="1.html">HTML</a></li>
      <li><a href="2.html">CSS</a></li>
      <li><a href="3.html">JavaScript</a></li>
    </ol>
    <div id="article">
      <h2>CSS</h2>
      <p>
        Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation of a document written in a markup language. Although most often used to set the visual style of web pages and user interfaces written in HTML and XHTML, the language can be applied to any XML document, including plain XML, SVG and XUL, and is applicable to rendering in speech, or on other media. Along with HTML and JavaScript, CSS is a cornerstone technology used by most websites to create visually engaging webpages, user interfaces for web applications, and user interfaces for many mobile applications.
      </p>
    </div>
  </div>
</body>
</html>
[kotlin]カメラで撮影した画像の回転問題を解決する
秘密の地図