CSSのスタイルの基礎

概要

• linkタグ
参照するCSSファイルを記載する際に使用します。
headタグの中で、このように記載すると、参照先のCSSファイルの情報を設定することができます。
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">


• styleタグ
<style>と</style>で囲まれた中で、プロパティを設定します。
「head { プロパティ }」と記載することで、「head」タグ対してプロパティを設定することができます。
プロパティには、このような内容があります。

• color
文字の色を変更する
• background-color
背景の色を設定する。

• padding-top
先頭の余白を設定する。

• padding
要素の内側の余白を設定する。

• margin
要素の外側の余白を設定する。

• font-weight
文字の太さを設定する。

• font-size
文字のサイズを設定する。

• font-family
文字のフォントを設定する。

• border
要素の枠線を設定する。



• コンテナの作成
コンテナは余白を追加して見やすくするためのデザインです。divタブで区切って使います。
<div class="container"></div>


• クラスのスタイルを定義
styleタブの中に「.」から始まるクラス名を定義して、それぞれにスタイルを設定できます。
適用するときは、devタブで区切って使います。
<div class="クラス名"></div>