[CSS] border(枠)、余白スタイル - border, margin, padding

Study / Javascript, Jquery, Css 作成日付 : 2019/12/12 20:16:43 修正日付 : 2019/12/12 20:17:24

こんにちは。明月です。

CSSのスタイルと言うと基本的に文字列、余白、枠、位置、状態のスタイルが基本だと思います。

文字列は前述で説明しましたから、今回は枠(border)と余白に関して調べてみます。

HTMLタグでよく使うダグだというと「div」タグと「table」タグだと思います。

そのところで「table」タグで例を作ります。

<!DOCTYPE html>
<html>
  <head></head>
  <body>
    <div>
      <table>
        <thead>
          <tr>
            <td>title</td>
            <td>description</td>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>test1</td>
            <td>data1</td>
          </tr>
          <tr>
            <td>test2</td>
            <td>data2</td>
          </tr>
        </tbody>
      </table>
    </div>
  </body>
</html>

上をみれば、例としてテーブルを作ってヘッダとボディを分けてテーブルのタイトルと内容を分けてタグを作成しました。スタイルを何もない状況でウェブブラウザに見るとテーブルで作成したとは感じられません。

タグだけではテーブルスタイルができないですね。そうするとCSSスタイルでテーブルみたいに修正しましょう。

table {
    /*テーブル内の枠スタイルですが、collapse設定をしないと二重線で表示される。*/
    border-collapse: collapse;
    width: 500px;
}
/*tableタグの中でthタグとtableタグの中でtdタグ*/
table th, table td{
    /*枠の線の太さ*/
    border-width: 1px;
    /*枠の線のスタイル - solid:実線、dotted:点線など。。*/
    border-style: solid;
    /*枠の線の色*/
    border-color: black;
    /*線の太さ、スタイル、色順で表示できる。*/
    border: 1px solid black;
    /*要素基準の左線の修正 - 右、上、下も可能 border-right, border-top, border-bottom*/
    border-left: 2px dotted red;
    /*幅のサイズ*/
    width: 50px;
    /*高さのサイズ*/
    height: 30px;
    /*テキスト整列*/
    text-align: center;
}

今回は「table」タグではなく「span」タグでスタイルを付けましょう。

<!DOCTYPE html>
<html>
  <head>
    <style>
      div.background {
        /*　高さのサイズ */
        height: 100px;
        /* 枠のサイズ、スタイル、色 */
        border: 3px solid blue;
        /* これはない余白 */
        padding: 10px;
        /* バックグラウンド色 */
        background: red;
      }
      span.item {
        /*　要素表示タイプ */
        display: inherit;
        /* 幅のサイズ */
        width: calc(70vw);
        /* 高しのサイズ */
        height: calc(10vh);
        /* バックグラウンド色 */
        background: yellow;
        margin-left: 30px;
        border-top-right-radius: 50px;
        border: 3px dotted blue;
        box-shadow: blue 4px 8px 16px 0px;  
      }
    </style>
  </head>
  <body>
    <div class="background">
      <span class="item">Hello world!!</span>
    </div>
  </body>
</html>