More than 5 years have passed since last update.
CSSのまとめ

Posted at 2020-04-24
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="hoge/style.css">
    <title>Document</title>
</head>
<body style="margin: 0">
    <!--ノーマルスタイル、ボックススタイルの説明用 
        
        <div class="normal">ノーマルスタイル</div>
    <div class="box">ボックススタイル</div>

    <div class="margin">マージン相殺の説明用ブロック</div> -->

    <div>私はブロックです</div>
    <div>私はブロックです</div>
    <div>私はブロックです</div>
    <div>私はブロックです</div>
    <hr>
    <span>私はインラインです</span>
    <span>私はインラインです</span>
    <span>私はインラインです</span>
    <span>私はインラインです</span>

    <div class="exmple">ブロックは改行して他の要素を邪魔しない！
        ブロック内の<span>インラインです</span>インラインの場合にはマージン、パディング、ボーダーがきたときに他の要素の事は虫します</div>

</body>
</html>

/* h1::after{
    content: "!!!!!!!!!";
}

h1::before{
    content: "!!!!!!!!!";
}



article h1~p{
color: springgreen
;}


p::first-letter{
    color: red;
} 

カスケードは優先順位　基本はあとがち
詳細度、タグ　クラス　ID　優先順位が左程高いが違う
*/




/* .a {
    color:palevioletred !important;
}

# title{
    color: chocolate;
}

h1{
    color: red;
}

h1{
    color: black;
} */


/* 継承
li{
    color: red;
} 

li [href*="yahoo2"]{
    color: inherit;
}

li [href*="yahoo3"]{
    color: initial;
}

li [href*="yahoo4"]{
    color: unset;
} */

/* div{
    background-color: orange;
    border: 3px solid black;
}

.fix{
    all: unset;
} */




 .box{
    background-color: blanchedalmond;
    /*content box*/
    width: 200px;
    height: 200px;
    /*padding box top L bottm R*/
    padding:8px 12px 16px 20px;

    /*margin box top L bottm R*/
    margin:8px 12px 16px 20px;
    /* margin-bottom: 20px; */

    /* ボーダーボックス */
    border-top:10px solid black;

    /*paddingとボーダーを抜いて、実際のwihit200を166にしている！　直観的（すべてに対して使うときもある*/
    box-sizing: border-box;
} 

/*
.normal{
    background-color: red;

}

*/

/*マージン相殺 .margin{
    background-color:black;
    margin-top: 40px;
} */


/* div, span{
    background-color: orange;
    width: 100px;
    height: 100px;
} */

.exmple{
    /* display:inline; 　インラインをblockに変更することも出来る*/
    background-color: pink;
    padding: 20px;
}


.exmple span{
    display: inline-block;/* 改行されず他を邪魔しない、上書きしないで改行せずまわりをじゃましない*/
    margin: 20px;
    border: 1px solid black;
    padding: 20px;
    background-color: lightblue;
}
You get articles that match your needs
You can efficiently read back useful information
You can use dark theme
What you can do with signing up