html,css 配置、変化で困ったら(1)

<コピーペーストについて>

コードをコピーする際は
灰色で四角く囲まれた所を使用してください。

<i class="fas fa-check-circle"></i>
スポンサーリンク

配置

Flexbox(ヨコ)

プロパティは、親要素へ入れる。

1:display: flex    = 開始を宣言
2:justify-content   = 主軸
3:align-items    = 交差軸

画像resolve-placement-questions01

上下の調整は
align-items
交差軸で行う。

display: flex;
justify-content: flex-start;
align-items: center;
画像flexbox01

中央

display: flex;
justify-content: center;
align-items: center;
画像flexbox02

後ろ

display: flex;
justify-content: flex-end;
align-items: center;
画像flexbox03

均等割もどき

display: flex;
justify-content: space-around;
align-items: center;
画像flexbox04

両端

display: flex;
justify-content: space-between;
align-items: center;
画像flexbox05

均等割

display: flex;
justify-content: space-evenly;
align-items: center;
画像blog-css-flexbox11

Flexbox(タテ)

プロパティは、親要素へ入れる。

タテになると
主軸  = justify-content
交差軸 = align-items
の方向が変わります。

1:display: flex     = 開始を宣言
2:flex-direction: column = タテ方向
3:justify-content    = 主軸
4:align-items     = 交差軸

画像resolve-placement-questions02

左右の調整は
align-items
交差軸で行う。

display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
画像flexbox06

中央

display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
画像flexbox07

後ろ

display: flex;
flex-direction: column;
justify-content: flex-end;
align-items: center;
画像flexbox08

均等割もどき

display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
画像flexbox09

両端

display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
画像flexbox10

均等割

display: flex;
flex-direction: column;
justify-content: space-evenly;
align-items: center;
画像blog-css-flexbox12

隙間ができる

画面の左上に隙間ができて、置いた物がぴったりくっつかない

padding margin に
デフォルトの数値が入っています。
(ブラウザの初期値で0でない数値)


* { 
margin: 0;
padding: 0;
}

padding margin
の値を0にしてください。

詳しくは↓

バックグラウンドとバックグラウンドの間に隙間ができる

margin が
相殺を起こしています。

上下どちらか
display:block
以外にして、margin相殺を解消してください。

詳しくは↓

inline-block を並べると横に隙間ができる

親要素に
font-size: 0;
を入れてください。

詳しくは(inline-blockの項目)↓

font-size: 0;

inline-block を使うと下に謎の隙間ができる

親要素に
font-size: 0;
を入れてください。

詳しくは(inline-blockの項目)↓

font-size: 0;

画像を固定したい

position: fixed;
を使ってください。

(例)
position: fixed;
bottom: 0;
right: 0;

position: fixed;
bottom: 0;
right: 0;

左右の中央寄せが上手くいかない

中央に寄せる物が
 ・inline
 ・inline-block
 ・block
 ・文字、画像
これらでやり方が違います。

詳しくは↓

上下の中央寄せが上手くいかない

親要素に
display: flex;
align-items: center;
を入れてください。

display: flex;
align-items: center;

上下左右の中央へ置きたい

上下左右、全ての中央は
display: flex;
align-items: center;
justify-content: center;
親要素に入れてください。

display: flex;
align-items: center;
justify-content: center;

positon:relative positon:absolute の使い方がいまいち分からない

親要素 relative 置き場所を決める
子要素 absolute 置く

詳しくは↓

変化

マウスを乗せると変化させたい

:hover
をセレクタの後に
つけてください。

.mozi001:hover {
color: red;
}

(マウスを乗せると文字が赤色になる)

.mozi001:hover {
color: red;
}

ゆっくり変化させたい

transition: 0.5s all;
を使ってください。

0.5s = 0.5秒
all  = 全てのプロパティ

transition: 0.5s all;

allを変化させたいプロパティ名に
変えることもできる。

(例)
font-size: 500px;
transition: 5s color;
color: red;

フォントサイズは一瞬で変わるが
フォントの色は5秒かけて変わる

font-size: 500px;
transition: 5s color;
color: red;

プロパティが別の場合は
2回指定してください

transition: 5s color;
transition: 3s font-size;

transition: 5s color;
transition: 3s font-size;
タイトルとURLをコピーしました