HTML/CSS

HTML

タグ

<></>

<h1></h1>
から

<h6></h6>


heading(見出し)

<p></p>


paragraph(段落)

見出しで使う

見出し以外で使う 1482566195293

コメント

<!--  -->


コメントアウト

<a></a>

リンク

<a href="url"></a>

<img src="url">

<ul>
<li></li>


<ul>


<ol>
<li></li>
</ol>


画像表示

リスト

CSS

h1{


セレクタ

.class {
}

プロパティ

color

文字色

font-size

文字の大きさ

font-family

フォントの種類

background-color

背景色

要素の横幅、高さ

width

height

決まり文句

<!DOCTYPE html>


<html>
<head>


<!--文字コードを「utf-8」にしてください-->

<meta charset="utf-8">

<!--タイトルを「Progate」にしてください-->

<title>Progate</title>

<!--「stylesheet.css」を読み込んでください-->

<link rel="stylesheet" href="stylesheet.css">

</head>
<body>

</body>

</html>


li{
list-style: none;
}

<div>
</div>


「division」の略で、要素をグループ化

リストの・をなくす

float:left;
float:right;

リストを左(右)並びにする
または、画面の左(右)に配置する

padding: 値;

要素の余白をつくる

padding-top
padding-bottom
padding-right
padding-left

padding: 20px 20px 20px 20px;


上、右、下、左
時計回り

padding:20px 20px;


上下、左右

<span> </span>

文字を区切る

border

要素の枠線

boder:5px solid red;


太さ、種類 色

boderの内側

margin

boderの内側の余白

<input.>


1行の入力画面

<textarea></textarea>


複数行の入力画面

<header></header>

<footer></footer>


<div>を使う必要はない

background-imag:url(" ");

背景画面を指定

background-size: cover;

この文言を入れると、1画面におさまる

opacity: 0.7;

透明感

letter-spacing: 5px;

文字間隔