3(grid)
メッシュとは?
CSS Grid Layout excels at dividing a page into major regions or defining the relationship in terms of size, position, and layer, between parts of a control built from HTML primitives.
gridはグリッドを意味し、簡単に言えばcssはページを整理するのに使われる.
gridを使用してページを整理するときに使用するタグはdivです.
div tag
div tagとは?
レイアウトをdivisionに分割するための略語.
grid-template-columns-Gridプロパティの水平部分は調整可能です.
grid-template-rows-Gridプロパティの垂直部分.
コード#コード#
<style>
#grid {
border: 5px solid pink;
display: grid;
grid-template-columns: 150px 1fr;
}
div {
border: 5px solid gray;
}
</style>
<body>
<div id="grid">
<div>NAVIGATION</div>
<div>ARTICLE</div>
</div>
</body>
結果
fr単位-スコア単位.1fr is for 1 part of the available space.
メッシュの使用
<style>
#grid {
border: 5px solid pink;
display: grid;
grid-template-columns: 150px 1fr;
}
div {
border: 5px solid gray;
}
</style>
<body>
<div id="grid">
<div>NAVIGATION</div>
<div>ARTICLE</div>
</div>
</body>(#grid, #grid ol, #grid #article)
コード#コード#
<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;
}
</style>
<body>
<h1><a href="index.html">WEB</a></h1>
<div id="grid">
<ol>
<li><a href="1.html" class="saw">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>
(...생략)
</div>結果
注意:https://opentutorials.org/course/3086/18322
https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-rows
https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-columns
https://www.w3schools.com/tags/tag_div.asp
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout
Reference
この問題について(3(grid)), 我々は、より多くの情報をここで見つけました https://velog.io/@sorin44/CSS-3gridテキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol