【初心者向け 090】CSSのposition、疑似クラスとAdvanced CSSについて
Position
static
defaultです。最初に配置した場所に固定されます。
fixed
最初に指定したポジションに固定されます。スクロールをしても最初に指定された位置にあります。 top,bottom,left,rightなどで移動させることもできますが、移動する場合、一番上の新しいレイヤーに配置されます。
上段のmenu, 宿泊サイトの予約確認などでよく見られます。
relative
最初の位置を基準にした上下と左右に移動できます。-を使います。
position:relavtive
top: -20px
absolute
一番近いrelative親要素を基準にした上下と左右に移動できます。
body {
height: 1000vh;
margin: 50px;
}
div {
width: 300px;
height: 300px;
background-color: wheat;
}
.green {
background-color: teal;
height: 100px;
position: absolute;
left: 0px;
width: 100px;
}
この場合は一番近い親要素のpositionがstaticです。この場合は一番外部にある、bodyを基準にして動きます。
body {
height: 1000vh;
margin: 50px;
}
div {
width: 300px;
height: 300px;
background-color: wheat;
position : relative;
}
.green {
background-color: teal;
height: 100px;
position: absolute;
left: 0px;
width: 100px;
}
疑似クラス(Pseudo Selectors)
<div></div>
<div></div>
<div></div>
<div></div>
<div id="last"></div>
div:last-child {
background-color: teal;
}
CSSのセレクターは、タグ、クラス(.)、ID(#)以外にもPseudo Selectors（疑似クラス）があります。疑似クラスは、コードを減らすことができ、様々なパータンがあります。:を付ければ、VSCodeから様々な疑似クラスを選ぶことができます。
span {
background-color: violet;
}
span:nth-child(2),
:nth-child(4) {
background-color: teal;
}
span {
background-color: violet;
}
span:nth-child(even) {
background-color: teal;
}
span {
background-color: violet;
}
span:nth-child(4n + 1) {
background-color: teal;
}
結合子(Combinator)
要素セレクタも実は、コントロールすることができます。
例えば、<span>という要素にCSSを適用すれば、<span>要素に全部適用されますが、追加てdiv span{} のように作成する場合、こちらのspanは上のspanとは異なり、divの中にあるspanのみ適用されます。
p span {
color: white;
}
div > span {
text-decoration: underline;
}
</style>
</head>
<body>
<div>
<span>hello</span>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quod sequi
ipsam odio dolorem.<span>inside</span>
</p>
</div>
>: divのdirect子要素である、helloのみに適用されます。
+
p span {
color: white;
}
p + span {
text-decoration: underline;
}
</style>
</head>
<body>
<div>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quod sequi
ipsam odio dolorem.<span>inside</span>
</p>
<span>hello</span>
+: pのd兄弟要素である、helloのみに適用されます。(すぐ隣にある要素）
p span {
color: white;
}
p ~ span {
text-decoration: underline;
}
</style>
</head>
<body>
<div>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quod sequi
ipsam odio dolorem.<span>inside</span>
</p>
<address>seoul</address>
<span>hello</span>
~: pのd兄弟要素でなくても、helloのみに適用されます。(すぐ隣にいなくても適用される要素）
[:required]: requiredというclassを作成せずに、combinatorで一機に処理できます。
[attribute~="name"] : valueを含めているものを処理します。
例：first name, last name
[attribute*="value"] ->
例： revalue, ringvalue, asdfajsvalueadsfasdf
その他にも::placeholder, ::first-letterなどの様々な結合字があります。
CSS変数（カスタムプロパティ）
カスタムプロパティ（CSS変数）は、CSSの中で値を格納し、再利用可能な変数のように扱う仕組みです。これにより、同じ値を複数の場所で使用する際に、効率的に変更や管理ができるようになります。カスタムプロパティは、主に以下のような特徴を持ちます：
:root {
--primary-color: #007bff;
}
宣言と定義: カスタムプロパティは、ルート（:root）セレクタや要素の中で宣言され、値が設定されます。例えば、以下のように定義できます。
button {
background-color: var(--primary-color);
}
使用とアクセス: 定義したカスタムプロパティは、他のセレクタ内で使用できます。例えば、以下のように使用できます。
<style>
:root{
--main-color: #79B4CA;
--main-border: 1px solid var(--main-color);
}
body {
height: 1000vh;
margin: 50px;
}
p{
background-color: var(--main-color);
}
a{
border: var(--main-border);
border-radius: 200px 100px / 50px 70px;
}
</style>
Transition
ある状態から別の状態へ変化することをアニメーション化したものは、"トランジション"と呼ばれます。state（例：hover）が存在しない場所にトランジションを適用する必要があります。
<style>
a {
color: wheat;
background-color: tomato;
text-decoration: none;
padding: 3px 5px;
border-radius: 5px;
font-size: 55px;
transition: all 1s ease-in-out;
}
a:hover {
border-radius: 20px;
padding: 10px 20px;
color: tomato;
background-color: wheat;
}
</style>
</head>
<body>
<a href="#">Go home</a>
</body>
主に、hoverと使われる場合が多く、ease-in, ease-out,ease-in-outというtransitionを使用する場合が多いようです。
linear, easeなどtransitionによって、変化するスピードも異なります。
cubic-bezier(0, 0, 0, 0)という設定でカスタマイズすることもできます。
Transformation
ブラウザは発展したことによって、CSSを通して様々なことが具象できます。
Transformationは3D として、Box level、inlineとは独立されています。
すなわち、marginとpaddingが適用されないため、とても便利です。
rotateY(90deg) ： Y軸を中心にして90度周ります。コインが回る感じですね
scaleX(1.5) : 横に1.5倍増加します。
このように、様々なtransformationをhoverに組み合わせ、stateがないブロックから
transitionを行いますとダイナミックな表現ができます。
Animation
transitionの場合、設定した要素が自動的に動くのではなく、トリガーが必要になります。例えば、hoverのようにマウスポインタを対象物の上に重ねるとブロック内に宣言したattributeとvalueの処理が行われます。しかし、**@Ketframes を活用し、Animation効果を自動化することができます。
@keyframes SexyCoinSpinningWOW {
from {
transform: rotateY(0);
}
to {
transform: rotateY(360deg);
}
}
img {
animation: SexyCoinSpinningWOW 2s ease-in-out infinite;
}
Media Queries
media queriesはcssを通して、Screenのsizeを図る方法です。
if~elseのように範囲を指定し、区間ことに違うmedia screenのプロパティを宣言することで、
区別することができます。
@media screen and (min-width: 0px) and (max-width: 500px) {
div {
background-color: aquamarine;
}
}
(orientation : landscape(横) もしくは portrait（縦)) というオプションからスマートフォンによって、違うプロパティを提供するinteractionもできます。
<style>
body {
display: flex;
height: 100vh;
align-items: center;
justify-content: center;
flex-direction: column;
}
div {
background-color: teal;
width: 200px;
height: 200px;
}
@media screen and (min-width: 601px) and (max-width: 1200px) {
div {
background-color: wheat;
}
}
span {
font-size: 36px;
}
@media screen and (orientation: landscape) {
span {
display: none;
}
}
</style>
</head>
<body>
<div></div>
<span>Please flip your phone :(</span>
</body>
Discussion