[生活コードWEB 2]day 3

18218 ワード
生活コード テキストリンク

こうし


レイアウトを設計するために必要なプロパティgrid!
このようにして.👇

グリッドの使用方法


display : grid;適用してから
grid-template-columns : 150px 1fr; グリッドのサイズを指定します.
columnsのほかにrowもあります.columnsは「列」のサイズを指定し、rowは「行」のサイズを指定します.
このとき、150 px 1 frは、セレクタgrid内で区切られた2つのdiv領域をそれぞれ指定する.
  • ラベル:何の意味もない(情報のバンドルにのみ使用)、設計にのみ使用されるラベル;bolck level element
  • タグ:
    タグと同様の用途に用いるinline level element
    • 👉 両者の用途は同じで、displayプロパティに基づいて必要なタグを使用するだけでよい.
  • fr(スコア):レイアウトを数値の割合で分割します.
    例えば、上記の例に示すように、150 px 1 frの場合、1 frは150 px以外のすべての領域を占有する.
    1 fr 1 fr 1 frというのは、1:1の比率で分かれています.
    • 👇上図コード
    <!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <style>
      #grid{
        border:5px solid pink;
        display:grid;
        grid-template-columns: 150px 1fr;
      }
      div{
        border:5px solid gray;
      }
    </style>
  </head>
  <body>
    <div id="grid">
      <div>NAVIGATION</div>
      <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
        sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
        Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris 
        nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in 
        reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla 
        pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culp 
        qui officia deserunt mollit anim id est laborum.</div>
    </div>
  </body>
</html>

    リアクションWebデザイン


    反応式ウェブデザインとは、スクリーンの大きさに応じて、ウェブページの各要素を反応させ、動作させることである.
    画面条件に応じて動作CSS ex)携帯電話の横・縦回転機能を作成できます.
    これらの反応型WebはMideaQueryを用いて作成することができる.
    👉 @Media(画面上の条件){アクションCS}
    コードの例:
    @media(min-width : 800px){
   div{
      display:none;
      }
   }
    すなわち、画面の最小サイズが800 pxである場合(=画面のサイズ(幅)が800 pxより大きい場合)、divに対応するdisplayがnoneとして適用される.
    👇例画像1)画面が800 px未満の場合は
    👇例画像2)画面サイズが800 pxより大きい場合、は画面条件に従ってCSSを適用する.

    アプリケーションメディアQuery

    <!doctype html>
<html>
<head>
<title>WEB - 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.[1] 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>





Resources
    [CS]Flexプロパティ(1)
    💻前端学習日記02-CSS