CSS速習まとめ

フロントエンドに任せればいいから一生関わることがないと思っていたCSSですが、興味が出てきたのでさっと学んでみたいと思います。

CSSの呼び出し

htmlファイルのhead部分に以下を追加します。

 <link rel="stylesheet" href="cssfile/test.css">

基本的な文法

各タグに対する装飾

以下のようにして、装飾先を指定して、その装飾内容をブラケット内に記述していきます。

p{
    color:blue;
}

区画に対する装飾

HTML

<body>
    <p><b>Text outside div.</b></p>

    <div>
        <p>Text inside div.</p>
        <p>Text2 inside div.</p>
        <p>Text3 inside div <span>Inside span</span> </p>
    </div>
    
</body>

CSS

p{
    color:blue;
    
}

body{
    background-color: gray;

}

div{

    background-color: white;
    border-color: orange;
    border-width: 10px;
    border-style: double;
}

span{
    background-color: red;
    color: green;
}

subsetごとの装飾

クラスと固有IDを使用してサブセットを指定。この指定するものをセレクターと言うらしい。

HTML

  <p><b>Text outside div.</b></p>

    <div class="firstDiv">
        <p>Text in the first div.</p>
    </div>

    <div class="secondDiv">
        <p>Text in the second div.</p>
    </div>

    <p id="singleOut">Text outside the divs.</p>

CSS


.firstDiv {
    color: red;
}

.secondDiv{
    color: blue;
}

#singleOut{
    color: green;
    text-decoration: line-through;
}

実行結果

リスト内の要素を修飾

HTML

 <h3 id="List1">List</h3>
    <ul>
        <li>Checkbox <input type="checkbox" name="" id=""></li>
        <li>Text input <input type="text" name="" id=""></li>
        <li> <a href="https://japbros-poco.main.jp">link</a></li>
        <li> <a href="https://japbros-poco.main.jp/archive">link2</a></li>
    </ul>

CSS

ul{
    border: 4px dotted blue;
}

li a{
    color: red;
}

li a[href = "https://japbros-poco.main.jp/archive"]{
    color: blue;
    border: 5px solid orange;
}

実行結果