2021.11.16 Today I Learned
今日から、CSSの基礎を再構築します.
いつもついていくので基礎が足りないのでやり直したい
ゼロから始まり、難しい概念やよく知らない概念から徐々に進みます.
重みは、id、classなどの選択者によって指定されるCSSの優先度の最も重要な値です.
デフォルトでは、id>class>tagの順に指定しますか?重要な例外も存在する.
!重要なのは、重みを無視して最優先レベルに設定すると宣言しますが、うっかりすると既存の重みで蓄積されたコードはすべて無視されますので、注意して使用しないでください.
id、class、tagなどのセレクタのほか、グローバルセレクタ(*)とコンボ(+、>、~、...)聴取の明示度は影響を受けない.
次の例についてさらに説明します.
Document
hello
いつもついていくので基礎が足りないのでやり直したい
ゼロから始まり、難しい概念やよく知らない概念から徐々に進みます.
1.重み
重みは、id、classなどの選択者によって指定されるCSSの優先度の最も重要な値です.
デフォルトでは、id>class>tagの順に指定しますか?重要な例外も存在する.
!重要なのは、重みを無視して最優先レベルに設定すると宣言しますが、うっかりすると既存の重みで蓄積されたコードはすべて無視されますので、注意して使用しないでください.
id、class、tagなどのセレクタのほか、グローバルセレクタ(*)とコンボ(+、>、~、...)聴取の明示度は影響を受けない.
次の例についてさらに説明します.
Document
hello
hello
hello <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#one{
color: red;
}
.two{
color: blue;
}
h1{
color: green;
}
</style>
</head>
<body>
<h1>hello</h1>
<h1 class="two">hello</h1>
<h1 id="one" class="two">hello</h1>
</body>
</html>
コードから分かるように、デフォルトでは、フォント色grenn値をh 1に拡大し、h 1をgreen値にマークします.
ただし、重み付けが等級を付与すると、等級が付与するフォント値:青が表示されます.その後ラベルの重み付け値を食べたクラスもidの重み付け値に食べられ、idに与えられたフォントインデックスredとなる.
もっとよく見ると、styleで宣言した#one、.2,h 1でマウスを動かす
これにより,セレクタの特殊性にそれぞれの重みが書かれていることがわかる.
id値(1,0,0)では、最も高い値を有します.
classは(0、1、0)、h 1は(0、0、1)で、異なるウェイトが表示されます.
重みはどのような結果を生むかを決めるので、CSSを作成する際に重みを考慮します。
2. Position
positionは、HTMLタグやid、class boxなどの位置を指定する属性です.
static
すべてのラベルには、基本的に静的プロパティがあります.静的プロパティはhtml内で作成されたタグの順序で位置を指定します.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
width: 50px;
height: 50px;
}
.one{
background-color: red;
}
.two{
background-color: orange;
}
.three{
background-color: yellow;
}
</style>
</head>
<body>
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
</body>
</html>
relative
相対的に単語の意味のように相対的な属性を持ち、本来自信を持つべき静止時の位置に対して相対的に移動する.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
width: 50px;
height: 50px;
}
.one{
background-color: red;
}
.two{
position: relative;
left: 40px;
background-color: orange;
}
.three{
background-color: yellow;
}
</style>
</head>
<body>
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
</body>
</html>
absolute
absoluteは単語の意味のように絶対的な位置を持っている.相対的に動いているので、他の位置の領域を侵すことはありませんが、絶対的な位置なので、他の位置の領域も侵すことになります.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
width: 50px;
height: 50px;
}
.one{
background-color: red;
}
.two{
position: relative;
left: 40px;
top: 40px;
background-color: orange;
}
.three{
position: absolute;
background-color: yellow;
}
</style>
</head>
<body>
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
</body>
</html>
fixed
NAVERの上部検索ウィンドウのように、ある位置に固定されていて、スクロールしても消えない場合はfixedを使用します.fixedは、現在のユーザが見ているビューポートを基準に、画面に貼るように移動します.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
width: 50px;
height: 50px;
}
.one{
background-color: red;
}
.two{
position: fixed;
right: 40px;
bottom: 40px;
background-color: orange;
}
.three{
position: absolute;
background-color: yellow;
}
</style>
</head>
<body>
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ipsum, vero dolores quidem consequuntur odit dignissimos maiores assumenda! Facilis vero tenetur officiis maiores. Rerum impedit exercitationem, illum nostrum sequi fugiat inventore quos deserunt. Aliquam enim ipsam impedit, molestias dolores consectetur itaque facilis architecto amet ex laudantium exercitationem excepturi quae aspernatur quod.</p>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ipsum, vero dolores quidem consequuntur odit dignissimos maiores assumenda! Facilis vero tenetur officiis maiores. Rerum impedit exercitationem, illum nostrum sequi fugiat inventore quos deserunt. Aliquam enim ipsam impedit, molestias dolores consectetur itaque facilis architecto amet ex laudantium exercitationem excepturi quae aspernatur quod.</p>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ipsum, vero dolores quidem consequuntur odit dignissimos maiores assumenda! Facilis vero tenetur officiis maiores. Rerum impedit exercitationem, illum nostrum sequi fugiat inventore quos deserunt. Aliquam enim ipsam impedit, molestias dolores consectetur itaque facilis architecto amet ex laudantium exercitationem excepturi quae aspernatur quod.</p>
</body>
</html>
今日は重み付け~位置を簡単に改めて知りました.このように一つ一つ見ると単純な効果のようですが、これらを合わせて作ったページを見ると、私の実力はまだ足りないと思います.HTMLとCSSの世界は広いと思います.
今週も頑張ります！
Reference
この問題について(2021.11.16 Today I Learned), 我々は、より多くの情報をここで見つけました
https://velog.io/@villain_uni/2021.11.16-Today-I-Learned
テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol
hello <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#one{
color: red;
}
.two{
color: blue;
}
h1{
color: green;
}
</style>
</head>
<body>
<h1>hello</h1>
<h1 class="two">hello</h1>
<h1 id="one" class="two">hello</h1>
</body>
</html>
コードから分かるように、デフォルトでは、フォント色grenn値をh 1に拡大し、h 1をgreen値にマークします.
ただし、重み付けが等級を付与すると、等級が付与するフォント値:青が表示されます.その後ラベルの重み付け値を食べたクラスもidの重み付け値に食べられ、idに与えられたフォントインデックスredとなる.
もっとよく見ると、styleで宣言した#one、.2,h 1でマウスを動かす
これにより,セレクタの特殊性にそれぞれの重みが書かれていることがわかる.
id値(1,0,0)では、最も高い値を有します.
classは(0、1、0)、h 1は(0、0、1)で、異なるウェイトが表示されます.
重みはどのような結果を生むかを決めるので、CSSを作成する際に重みを考慮します。
2. Position
positionは、HTMLタグやid、class boxなどの位置を指定する属性です.
static
すべてのラベルには、基本的に静的プロパティがあります.静的プロパティはhtml内で作成されたタグの順序で位置を指定します.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
width: 50px;
height: 50px;
}
.one{
background-color: red;
}
.two{
background-color: orange;
}
.three{
background-color: yellow;
}
</style>
</head>
<body>
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
</body>
</html>
relative
相対的に単語の意味のように相対的な属性を持ち、本来自信を持つべき静止時の位置に対して相対的に移動する.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
width: 50px;
height: 50px;
}
.one{
background-color: red;
}
.two{
position: relative;
left: 40px;
background-color: orange;
}
.three{
background-color: yellow;
}
</style>
</head>
<body>
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
</body>
</html>
absolute
absoluteは単語の意味のように絶対的な位置を持っている.相対的に動いているので、他の位置の領域を侵すことはありませんが、絶対的な位置なので、他の位置の領域も侵すことになります.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
width: 50px;
height: 50px;
}
.one{
background-color: red;
}
.two{
position: relative;
left: 40px;
top: 40px;
background-color: orange;
}
.three{
position: absolute;
background-color: yellow;
}
</style>
</head>
<body>
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
</body>
</html>
fixed
NAVERの上部検索ウィンドウのように、ある位置に固定されていて、スクロールしても消えない場合はfixedを使用します.fixedは、現在のユーザが見ているビューポートを基準に、画面に貼るように移動します.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
width: 50px;
height: 50px;
}
.one{
background-color: red;
}
.two{
position: fixed;
right: 40px;
bottom: 40px;
background-color: orange;
}
.three{
position: absolute;
background-color: yellow;
}
</style>
</head>
<body>
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ipsum, vero dolores quidem consequuntur odit dignissimos maiores assumenda! Facilis vero tenetur officiis maiores. Rerum impedit exercitationem, illum nostrum sequi fugiat inventore quos deserunt. Aliquam enim ipsam impedit, molestias dolores consectetur itaque facilis architecto amet ex laudantium exercitationem excepturi quae aspernatur quod.</p>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ipsum, vero dolores quidem consequuntur odit dignissimos maiores assumenda! Facilis vero tenetur officiis maiores. Rerum impedit exercitationem, illum nostrum sequi fugiat inventore quos deserunt. Aliquam enim ipsam impedit, molestias dolores consectetur itaque facilis architecto amet ex laudantium exercitationem excepturi quae aspernatur quod.</p>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ipsum, vero dolores quidem consequuntur odit dignissimos maiores assumenda! Facilis vero tenetur officiis maiores. Rerum impedit exercitationem, illum nostrum sequi fugiat inventore quos deserunt. Aliquam enim ipsam impedit, molestias dolores consectetur itaque facilis architecto amet ex laudantium exercitationem excepturi quae aspernatur quod.</p>
</body>
</html>
今日は重み付け~位置を簡単に改めて知りました.このように一つ一つ見ると単純な効果のようですが、これらを合わせて作ったページを見ると、私の実力はまだ足りないと思います.HTMLとCSSの世界は広いと思います.
今週も頑張ります！
Reference
この問題について(2021.11.16 Today I Learned), 我々は、より多くの情報をここで見つけました
https://velog.io/@villain_uni/2021.11.16-Today-I-Learned
テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#one{
color: red;
}
.two{
color: blue;
}
h1{
color: green;
}
</style>
</head>
<body>
<h1>hello</h1>
<h1 class="two">hello</h1>
<h1 id="one" class="two">hello</h1>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
width: 50px;
height: 50px;
}
.one{
background-color: red;
}
.two{
background-color: orange;
}
.three{
background-color: yellow;
}
</style>
</head>
<body>
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
width: 50px;
height: 50px;
}
.one{
background-color: red;
}
.two{
position: relative;
left: 40px;
background-color: orange;
}
.three{
background-color: yellow;
}
</style>
</head>
<body>
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
width: 50px;
height: 50px;
}
.one{
background-color: red;
}
.two{
position: relative;
left: 40px;
top: 40px;
background-color: orange;
}
.three{
position: absolute;
background-color: yellow;
}
</style>
</head>
<body>
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
width: 50px;
height: 50px;
}
.one{
background-color: red;
}
.two{
position: fixed;
right: 40px;
bottom: 40px;
background-color: orange;
}
.three{
position: absolute;
background-color: yellow;
}
</style>
</head>
<body>
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ipsum, vero dolores quidem consequuntur odit dignissimos maiores assumenda! Facilis vero tenetur officiis maiores. Rerum impedit exercitationem, illum nostrum sequi fugiat inventore quos deserunt. Aliquam enim ipsam impedit, molestias dolores consectetur itaque facilis architecto amet ex laudantium exercitationem excepturi quae aspernatur quod.</p>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ipsum, vero dolores quidem consequuntur odit dignissimos maiores assumenda! Facilis vero tenetur officiis maiores. Rerum impedit exercitationem, illum nostrum sequi fugiat inventore quos deserunt. Aliquam enim ipsam impedit, molestias dolores consectetur itaque facilis architecto amet ex laudantium exercitationem excepturi quae aspernatur quod.</p>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ipsum, vero dolores quidem consequuntur odit dignissimos maiores assumenda! Facilis vero tenetur officiis maiores. Rerum impedit exercitationem, illum nostrum sequi fugiat inventore quos deserunt. Aliquam enim ipsam impedit, molestias dolores consectetur itaque facilis architecto amet ex laudantium exercitationem excepturi quae aspernatur quod.</p>
</body>
</html>Reference
この問題について(2021.11.16 Today I Learned), 我々は、より多くの情報をここで見つけました https://velog.io/@villain_uni/2021.11.16-Today-I-Learnedテキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol