![見出し画像](https://assets.st-note.com/production/uploads/images/7693064/rectangle_large_type_2_ffa7b8e27671ef092d4493671cb9ca82.jpg?width=1200)
CSSでよく使うタグまとめ 職業訓練56日目
CSSファイルについて
CSSファイルとはHTMLで使ったstyleをHTMLとは別のファイルで用意しとき必要な時に持ってくるということができます。文書の要素構成はHTMLで作成し、スタイリングはCSSで作成することができます。そうすることで、HTMLの<header>部分がスッキリしてとても見やすくなります。
----------------------------------------------------------------------------
(CSS)
p{color: red;} →<p>の文字を赤に
(HTML)
<link rel="stylesheet" type="text/css" href="cssファイル名";>
↑の文を入力することでCSSファイルをHTMLに適用することができます。上記の場合は<p>の部分の文字が赤くなるというものです。イメージはできましたか?
またlinkの文を複数使えば、複数のCSSファイルを使用できます。Javaのインポートの概念がよく似ています。
代表的なCSSタグ
・文字の装飾
color 文字の色の指定
font-family 文字フォントの指定
font-style 文字を斜体にする時に使用
font-weight 太字にする時に使用
font-size フォントサイズを指定
・テキストの配置
text-align 左寄せ(left)右寄せ(right)中央(center)
text-indent テキスト1行目のインデント指定
letter-spacing 文字と文字の間隔の指定
word-spacing 単語と単語の間隔の指定
・背景
background-color 背景色の指定
background-image 背景に画像の貼り付け
background-position 背景画像の位置の指定
background-repeat 背景画像繰り返すかどうかの指定
・ブロックのサイズ
width 表やテキスト入力欄、画像などの表示領域の横幅の指定
height 表やテキスト入力欄、画像などの表示領域の高さの指定
・余白
margin ボックスの外側の余白の設定
padding ボックスの内側の余白の設定
・罫線
border-color 罫線の色の指定
border-style 罫線の種別の指定。solid:一本線、double:二本線、dashed:破線
border-width 罫線の幅の指定
・テーブル
table-layout テーブルのレイアウトの指定。デフォルトでは各列の幅が自動で設定される。
border-collapse テーブルの罫線を引く際、隣同士のセルをくっつけるかどうかの指定。collapseつながり、separate分離。
border-spacing セル同士の間隔の指定。
他にもたくさんありますが今日はこの辺で失礼します。ありがとうございました。
この記事が気に入ったらサポートをしてみませんか?