k-s-p

2021-06-09に更新

CSSの基礎勉強

CSS HTML

CSSの基礎文法

<style>
    h1 {
      color: red;
    }
  </style>

    <p style="color: green;">あいうえお</p>

    <body>
        <h1>あいうえお</h1>
        <p>aiueo</p>
    </body>

    body {color:green; font-size:20px;}

bodyのスタイルが、その子要素(h1, p)に継承される。

あいうえお
<p style="color: green; font-size:20px;">aiueo</p>

    h1 {
        border: inherit;
    }

 <p class="hoge">　こんにちは</p>

    .hoge {
        color:green;
    }

HTMLの要素は全てボックスという四角い領域を生成する。ボックスは大きくわけて、インラインとブロックに分けられる。

インラインボックス：span,a,em,strong,imgといったタグで指定した要素は、インラインボックスを生成する。要素は、上下に並んでいく。インラインボックスでは、widthやheightを指定できない(置換要素と呼ばれるimg,input,textareaは指定できる)、上下のmarginを指定できないという特徴がある。
ブロックボックス：table,h1,p,div,ul,liなどのタグで指定した要素はブロックボックスを生成する。要素は左に詰めて並んでいく。ブロックボックスでは、widthやheightを指定できる。また、marginやpaddingを指定できる。displayプロパティをinline-blockに変更することで、サイズの変更が可能となる。

CSSでは、ボックスモデルという概念を理解する必要がある。これは、4つの領域で構成され、外側から順に、margin,border,padding,contentとなる。ボックスのサイズはこの4つの領域のサイズを足し合わせて算出される。

    h1{color: green;}

    h1{font-size:12px;}

    h1{font-weight:bold;}

    h1{text-align:center;}

    h1{text-decoration:underline;}

    h1{font-family:Verdana, 'Arial Black', メイリオ, sans-serif;}

line-height:行ボックスの高さを指定する。指定の単位をemとした場合、font-sizeを係数倍した高さになる。また、単位を指定した場合は、子要素にも親要素で計算した高さが継承されるが、単位を指定しなかった場合は、子要素で高さは再計算される。

    h1{line-height: 2em;}

vertical-align: 行ボックス内のベースラインを基準に、テキストと同じボックス内の画像の上下位置を変更する。数値を指定した場合は、ベースラインから数値分離れた位置となる。

    .img_a {vertical-align: top;}

リストのスタイル指定。list-style-typeでリストの点を変更する。list-style-positionでリストの点の位置を変更する。list-style-imageでリストの点に画像を使用することができる。

    ul {
    list-style-type: circle;
    list-style-position: inside;
    list-style-image: url(./img/icon.png);
    }

list-style:リストのスタイルを一括指定する。imageとtypeの両方が指定された場合は、画像が優先される。list-styleの前に個別の指定をしていた場合、list-styleのデフォルトで上書きされる。

    ul{list-style: circle inside url(../img/icon.png);}

    .box {
        margin-left: auto;
        margin-right: auto;
    }

*　display:ブロックの切り替えや、非表示化。

    .box {display:none;} /*非表示*/
    .box {display:inline-block;} /*インラインブロック化*/

    .box {z-index: 1;}
    .box2 {z-index: 2;}

    .box {
        box-sizing: border-box; /*borderを含む*/
        width: 100px;
        height: 100px;
    }

    .box{width: calc((100% - 20px) / 5);}

k-s-p

Crieitは誰でも投稿できるサービスです。是非記事の投稿をお願いします。どんな軽い内容でも投稿できます。

また、「こんな記事が読みたいけど見つからない！」という方は是非記事投稿リクエストボードへ！

こじんまりと作業ログやメモ、進捗を書き残しておきたい方はボード機能をご利用ください。
ボードとは？

CSSの基礎文法