ProgateでHTML,CSSを学んでみた（1日目）

3613 ワード
HTML CSS Progate HTML テキストリンク

概要

Web開発に興味が出てきたのでとりあえず一通り必要そうなものを触ってみることにしました。
ただ触るだけだと忘れてしまいそうなのでメモとして学んだことを書いてみます。
ここにあるコードはほぼ全てProgateで出てきたものです。

HTMLの仕組み

HTMLはタグと呼ばれる印をつけることでテキストに意味付けをする言語。

見出し

以下のように囲むと見出しという意味になる。

<h1>Hello World</h1>

見出しは全部で6段階ある。

<h1>Hello World</h1>
<h2>Hello World</h2>
<h3>Hello World</h3>
<h4>Hello World</h4>
<h5>Hello World</h5>
<h6>Hello World</h6>

試しに上のコードをqiitaのエディタに貼り付けてみると文字の大きさが変わることを確認できた。

Hello World


Hello World


Hello World


Hello World


Hello World

Hello World

見出し以外の文字

見出し以外の文字には<p>をつける（pはparagraphの意味）。

コメント

コメントは<!--と-->で囲む。

リンクの作成

以下のように<a>で囲むとリンクを貼り付けることができる。

<a href="https://prog-8.com">Progateへ</a>

qiitaのエディタにそのまま貼り付けてみると以下のようになった。
Progateへ

画像の表示

画像の表示は<img>タグでできる。テキストを囲むことはないため、終了タグは必要ない。

<img src="https://prog-8.com/images/html/beginner/wanko.jpg">

qiitaのエディタにそのまま貼り付けてみると以下のようになった。

リスト

リストを作成するには以下のように書く。
<ul>で囲むと黒丸<ol>で囲むと数字がつく。

<ul>
    <li>hoge</li>
    <li>fuga</li>
</ul>
  • hoge
  • fuga
<ol>
    <li>hoge</li>
    <li>fuga</li>
</ol>
  1. hoge
  2. fuga

CSSの仕組み

CSSはwebページをデザインするための言語。
HTMLの要素に文字の色や配置を与えることができる。
HTMLとは別ファイルに記述する。
以下のように書くと、h1の要素の色を赤に変えることができる。
#ff0000はカラーコードと呼ばれる。
googleで検索するとたくさんの色が見れる。
例：https://www.colordic.org/
　：https://html-color-codes.info/japanese/

h1 {
  color:#ff0000;
}

フォント、背景色、サイズを指定

h1 {
  font-size: 20px;
  font-family:"Lucida Grande";
  background-color:#f3f372;
  height:80px;
  width:200px;
}