CSS基礎コードや使い方一覧

2022年12月25日 11:36

基礎レベル 1

背景に色や画像を挿入

background


■ 入力例
背景色の場合
background: blue;

背景画像の場合
background: url(画像のURL);

横幅の指定

width


■ 入力例
width: 400px;
width: 50%;
width: calc(100% - 24px);
width: 40vh;

縦幅の指定

heigth	


■ 入力例
height: 400px;
height: 50%;
height: calc(100% - 40px);
height: 50vh;

外側の余白

margin	


■ 入力例
margin: 40px;
margin: 40px 24px;
margin: 40px 32px 24px 16px;
margin-top: 40px;
margin-right: 40px;
margin-left: 40px;
margin-bottom: 40px;

内側の余白

padding


■ 入力例
padding: 32px;
padding: 40px 24px;
padding: 40px 32px 16px 24px;
padding-left: 24px;
padding-right: 24px;
padding-top: 24px;
padding-bottom: 24px;

テキストの配置を指定

text-align


■ 入力例
text-align: left;
text-align: center;
text-align: right;

行間

line-height


■ 入力例
line-height: 10px;
line-height: 1.3em;

文字の色

color


■ 入力例
color: red;
color: #13a5bb;

文字のサイズ

font-size


■ 入力例
font-size: 24px;
font-size: 2em;
font-size: 10vw;

文字の太さ

font-weight


■ 入力例
font-weight: bold;
font-weight: 100;
font-weight: 200;
font-weight: 300;
font-weight: 400;
font-weight: 500;
font-weight: 600;
font-weight: 700;
font-weight: 800;
font-weight: 900;

外枠

border


■ 入力例
border: 1px solid #000;
border-top: 1px solid #000;
border-right: 1px solid #000;
border-left: 1px solid #000;
border-bottom: 1px solid #000;

border-top: none;
border-right: none;
border-left: none;
border-bottom: none;

■ 線の種類
solid	実線
dashed	破線
dotted	点線
double	二重線
groove	くぼみ
ridge	浮きだし
inset	立体くぼみ
outset	立体浮きだし

角丸

border-radius	


■ 入力例
普通の使い方
border-radius: 8px;
border-radius: 3em;
border-radius: 50%;
border-radius: 80px 0 0 0;
border-radius: 0 50% 0 50%;

変則的な使い方
border-radius: 50% 50% 50% 70% / 50% 50% 70% 
border-top-left-radius: 10px 5px;
border-top-right-radius: 20px 10px;
border-bottom-right-radius: 30px 50px;
border-bottom-left-radius: 40px 100px;

基礎レベル 2

marginを使って、要素を中央に寄せる

■ 中央寄席
margin: 0 auto;
margin: 40px auto;

■ 右に寄せる
margin-left: auto;

※注意点
指定した要素そのものが中央によります。

Flexboxの使い方基礎

flexを使って子要素を「中央」に指定

■ HTMLが下記の状態だった場合

<div class="wrap">
    <div class="box"></div>
</div>

■ 「box」を中央に寄せる場合のCSS
.wrap{
    height: 400px;
    display: flex; //flexの指定
    justify-content: center; //横中央に寄せる
    align-items: center; //縦中央に寄せる
    background: #ccc;
}
.wrap .box{
    width: 100px;
    height: 100px;
    background: blue;
}

flexを使って複数の子要素を「横並び」 +「中央」に指定

■ HTMLが下記の状態だった場合

<div class="wrap">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
</div>

■ 「box」を中央に寄せる場合のCSS
.wrap{
    height: 400px;
    display: flex; //flexの指定
    justify-content: center; //横中央に寄せる
    align-items: center; //縦中央に寄せる
    gap:8px; //要素と要素の間に隙間を開ける
    background: #ccc;
}
.wrap .box{
    width: 100px;
    height: 100px;
    background: blue;
}

※注意点
親要素に指定をしたら、子要素が動きます。
配置を変えたい子要素自体にflexを指定しないように気を付けてください。

inline要素とblock要素の違い

上記の動画を見て、インライン要素とブロックレベル要素の違いをご確認ください。

注意
動画では「ブロックライン要素」と発言していますが、正しくは「ブロック要素」または「ブロックレベル要素」です。