@charset "utf-8";
先頭に書いて文字化けを防ぐ
<link href="CSSへのパスを指定" rel="stylesheet" />
HTMLファイルがCSSを読み込むように、head要素内にlinkタグ追加、href属性にCSSファイルのパスを、rel属性にstylesheetを指定
body {
background-color: #ffcdf9;
font-size: 18px;
}
・セレクタ(body)
スタイルの適用対象を指定する
・プロパティ(background-color, font-size)
何を変更するかを指定する
・値(#ffcdf9, 18px)
どのように変えるかを指定する
同じ要素に対して競合するスタイルが指定された場合、後に書いたものが優先
フォント関連のスタイルを親要素に対して設定すると子要素に引き継がれる
font-family: "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", sans-serif;
フォント指定はfont-familyプロパティを使用
font-weightプロパティでフォントの太さを変更できるが対応してないフォントもある
Google Fonts, FONTPLUS, TypeSquare
いろんなWebフォントがある
line-height: 1.8;
行送り(行と行の間隔)はline-heightプロパティ。見出しのような短いテキストの場合は1.2~1.5倍、段落などの長いテキストの場合は1.5~2倍が読みやすい。
color(文字の色)、background-color(文字の背景色)で色を変更する、すでに記述したコードにカーソルを合わせると色変更UIが見れる、noneを選択すれば色を打ち消すこともできる
text-align: left;(左揃えだが初期設定), text-align: center;(中央揃え), text-align: right(右揃え), text-align: justify;(行末揃え)
HTML class="クラス名" CSS .クラス名
同じ種類の要素のうち特定のいくつかだけにスタイルを設定したい場合、クラス名とクラスセレクタを使う。CSSではクラス名の前にドットを書く。
border: solid(線種) 2px(太さ) #888888(色);
borderプロパティで枠線をつける
border-radius: 20px;
線の角を丸める
border-top: border-right border-bottom border-leftで一部の辺だけに線を引く
要素セレクタで編集すぎると範囲が広すぎるので思わぬところで悪影響を及ぼすことがある、面倒ではあるがクラスセレクタ中心で設計する
border-style: solid dashed dotted double;(4辺に異なる線種を設定)
border-width: 8px;(幅はすべて8pxに)
border-color: #17aaa5 #ffb223;(上下は青緑、左右はオレンジ)
値を１つだけ書いたらすべての辺に、２つ書いたら上下と左右の辺に、３つ書いたら上と左右と下の辺に、４つ書いたら各辺に適用(上から時計周り)
width: 480px;
幅を指定できるが左揃えになってしまうことがある
max-width: 800px;(最大幅を800pxに)
margin: auto;(中央揃えに)
大きなウィンドウでも文字数が多くなりすぎないし、小さなウィンドウならそれに合わせて調整してくれる
margin: 40px auto;
１つ目は上下の余白、２つ目は左右の余白に適用される。autoは左右を均等にするので左右中央揃えになる、上下をautoにすると余白無しになる
padding: 4px;
枠線の内側の余白を設定、値を0にすると打ち消しもできる
div
特に意味を持たない汎用コンテナ。初期設定はブロックでその前後で改行される要素。
div, p, h1~h6, ul, ol, navが該当する
span
特に意味を持たない汎用コンテナ。初期設定はインラインでテキストの行内に入る要素、span, a, img, strongが該当。
区分化要素
・section メインコンテンツ(本文)のアウトラインを1階層深めるために使う
・artcle そこだけを切り出して独立可能な記事を意味する
・aside メインコンテンツの余談となる部分を意味する。サイドバーによく使われる
・nav 目次などのナビゲーションを意味する
:hover マウスが上に乗っている状態
:nth-of-type(even) 同じ種類の兄弟要素の中で偶数番目
:nth-of-type(odd) 同じ種類の兄弟要素の中で奇数番目
疑似クラス
<table>
<tr>
<th></th>
<th></th>
<th></th>
</table>
tr(table row)要素は表の行、th(table header)要素は見出しセル、td(table data)要素はデータセル
tr要素の背景色はth,td要素の背景色が無しのときにだけ反映される
border-collapse: collapse;
セル間の枠線を一つにまとめる
<tr>
<th rowspan="2">店舗名</th>
<th rowspan="2">営業時間</th>
<th colspan="2">連絡先</th>
</tr>
<tr>
<th>住所</th>
<th>電話番号</th>
</tr>
rowspan属性でセルを行(縦)方向に伸ばし、colspan属性でセルを列(横)方向に伸ばす
label要素のfor属性にinput要素のID名を指定することで両者を関連付ける。そうするとlabel要素のほうをクリックしたときもinput要素が選択されたことになる。
<fieldset>
<legend>問い合わせ</legend>
</fieldset>
fieldset要素はグループ化のため、legend要素はグループの見出しのため
<textarea></textarea>
複数行入力できるエリア
<placeholder>
入力をうながすメッセージ
display: block;
ブロック設定に変更(改行)
<body>
<header></header>
<main></main>
<footer></footer>
header
サイトのロゴやナビゲーション
main
メインコンテンツ
footer
コピーライトやプライバシーポリシーなど
footer > p {
}
footerの子要素pにのみ適用
background-image: url
("img/title-back.png")背景画像をurlで指定。()内にはCSSから画像ファイルへのパス
background-repeat: repeat; x方向・y方向に背景画像を繰り返す(初期値)
background-repeat: repeat-x; x方向に背景画像を繰り返す
background-repeat: repeat-y; y方向に背景画像を繰り返す
background-repeat: no-repeat; 背景画像を繰り返せない
