はじめに

Progate で勉強した html&css の勉強のメモ
コース１の序盤です

HTML

見出しタグ

h タグで文字の大きさを決めることができます。
文字の大きさの範囲には<h1>から<h6>までの 6 段階があります。
<h1>が一番大きくて<h6>が一番小さいです
マークダウンでいう#のようなものです

<h1>this is h1 tag</h1>
<h2>this is h2 tag</h2>
<h3>this is h3 tag</h3>
<h4>this is h4 tag</h4>
<h5>this is h5 tag</h5>
<h6>this is h6 tag</h6>

結果

this is h1 tag

this is h2 tag

this is h3 tag

this is h4 tag

this is h5 tag

this is h6 tag

段落タグ

p タグは段落を追加することができます

<h1>hello</h1>
<p>world</p>

コメント

html でコメントを書くには<!----->を使います

<!--this is comment-->

リンクタグ

a タグをつけることでリンクテキストのように表示することができます
a タグの中にhrefを追加することで URL の関連付けができます

<a>link</a>

<a href="https://www.google.com">Link to Google</a>

属性について

html の属性には上記のhrefのようにダブルクォーテーション""を付けます

画像タグ

画像を張り付けるには img タグを付けます
属性にはsrc(画像へのパス)やurl(画像へのリンク)を追加できます
画像タグは必ず閉じてある必要はありません

<img scr="path" /> <img url="url" />

リスト

文字を li タグで囲むことでリストを作成できます
文字の前に・を追加するには<li>を<ul>で囲みます

<ul>
  <li>tag1</li>
  <li>tag2</li>
</ul>

実行結果

• tag1
• tag2

CSS

html 要素の色や大きさ、余白などの設定を行うのに使います

タグに対して適用させるには以下のように記述します

/*h1タグに対して*/
h1 {
  /*いろいろ*/
}
/*pタグに対して*/
p {
  /*いろいろ*/
}

色の設定

色を変えるにはcolorを使います
#RRGGBBで色の要素を指定して設定をします

/*h1タグを赤色にする*/
h1 {
  color: #ff0000;
}
/*pタグを緑色にする*/
p {
  color: #00ff00;
}

文字の大きさ

フォントの大きさを変えるにはfont-sizeを使います
大きさはpxやemなどの単位があります

/*h1タグのフォントの大きさを10ピクセルにする*/
h1 {
  font-size: 10px;
}
/*pタグのフォントの大きさを40ピクセルにする*/
p {
  color: #00ff00;
  font-size: 40px;
}

フォントの設定

フォントをデフォルトのものから変えるにはfont-familyを使います
フォントの名前に空白を含む場合には""で囲む必要があります

/*h1タグをのフォントをserifにする*/
h1 {
  font-family: serif;
}
/*pタグのフォントをAvenir Nextにする*/
p {
  font-family: "Avenir Next";
}
``

背景の色

背景の色の設定をするにはbackground-colorを使います。
色の指定は#RGGBBの他に#RGBのように指定できます。

/*h1タグの背景を赤色にする*/
h1 {
  background-color: serif;
}
/*pタグの背景を緑色にする*/
p {
  background-color: "Avenir Next";
}

要素の大きさの指定

要素の横幅を指定するにはwidth、高さを指定するにはheightを指定します

/*h1タグの大きさ80px*500pxにする*/
h1 {
  height: 80px;
  width: 500px;
}
/*pタグの大きさを200px*1000pxにする*/
p {
  height: 200px;
  width: 1000px;
}

タグをクラスでラベリングする

タグの中にclassを追加してラベリングすることでラベリングした範囲のみに css を適用することができます
指定するには.をクラスの前につけます

<ul>
  <li class="select">HTML</li>
  <li>CSS</li>
  <li>Javascript</li>
</ul>

.select {
  color: red;
}

上記のコードでは HTML だけ赤色になります
同じ class 名にすることで同じ CSS を反映できます