HTMLとCSSメモ書き

2022年7月30日 10:20

Progateで学んだことを備忘録としています。

HTML

<!DOCTYPE html>
必ず記述するものと覚えておく
<html>
　<head>
　</head>
　<body>
　</body>
</html>

<head>内に記載するもの
<meta charset="utf-8">: ページの文字コードをUTF-8に指定
<title></title>: ページのタイトルを指定
<link rel="stylesheet" href="stylesheet.css">: href属性で読込むCSSを指定

: Html上のコメントアウト

親要素
<ul></ul>: 黒点
<ol></ol>: 連番の数字
子要素
<li></li>: リスト
※[tab]でインデント
<input>
※</input>の終了タグはいらない
※type属性を指定し、type属性にsubmitを指定すると、送信ボタンとなる
※value属性を指定すると、ボタンに表示されるテキストの変更が可能
<textarea></textarea>

【Class付き指定】
<div class="●●●●●●">sample</div>
<h3 class="●●●●●●">sample</h3>
<li class="●●●●●●">sample</li>

<li class="selected">HTML</li>: class付きのリスト
<li>CSS</li>: ノーマルのリスト
※calssにのみ反映され、ノーマルは影響を受けない

<span></span>: 文中の一部にCSSを適用させる

<img src="画像のURL">

CSS

HTMLの要素に対して色、大きさ、配置などを指定し、ページをデザインするための言語であり、HTMLとは別に記述する。CSSを用いることで、レイアウトを整えることが可能。

h1 {　　　　　←h1の要素
color: red;　　 ←colorは色を、redは赤に
※プロパティの途中はコロン、最後はセミコロンをつける
※主要な色でない場合は、16進数にする（#ff0000）
}

CSSの場合、/* */で囲んだ行がコメントとなる

色の指定は、color
文字サイズの指定は、font-size
※単位はpxを忘れないこと
文字の種類は、font-family
※フォント名を指定する場合に、空白があるときは「"」を忘れないこと
背景色の指定は、background-color
横幅の指定は、width
高さの指定は、height
※単位はpxを忘れないこと
指定した要素を横並びは、float
上下左右の余白の指定は、padding
ある方向のみの余白の指定は下記の通り
※上： padding-top
　下： padding-bottom
　左： padding-left
　右： padding-right
　値を4つスペース区切りにした場合は、「上」「右」「下」「左」
　値を2つスペース区切りにした場合は、「上下」「左右」
罫線の指定は、border（border-方向で特定の場所に罫線）
※border: 太さ種類色を指定（半角スペースを忘れないこと）

borderの内側の余白を作る場合は、padding
borderの外側の余白を作る場合は、margin

classを使い、タグに名前を付けることで、特定の箇所だけ指定することが可能
※先頭に．ドットが必要であり、無いと適用されない
※liやdivなどの要素の場合は、ドットは不要であり、あると適用されない
例）.main li {}、.footer span {}　←の li や span が要素となる

list-style: none;
※noneを指定することで、マークをなくすことも可能
※.header-list {} と .footer-list {} や .header-list li {} と .footer-list li {}にすることで、それぞれ独立したリストとなる

複数のセレクタをコンマ（,）で区切ることで、それらに同じCSSを適用することができる
input, textarea {}

この記事が気に入ったらサポートをしてみませんか？