oto-tanblog Written by oto-tan

【Progate】HTML & CSS初級編まとめ

HTML&CSS

ProgeteのHTML&CSSの初級編をまとめました。

完全に自分用ですが、簡単な復習になります。

Progateで見返すのがめんどうな方は参考にしてください♪

HTML基礎

HTMLのコードは「<>」(開始タグ)で開始して、「</>」(終了タグ)で閉じる。

<開始タグ>開始タグと終了タグ</終了タグ>

見出しをつける

タグに「h」+「数字」をつける。

一番大きいのは「h1」で一番小さいのは「h6」。

「h1」は基本タイトルに使用するので、「h2」から使用する。

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

段落を作成する

見出しタグ以外の文章は段落タグ「p」を使用する。

<p></p>

コメント

「<!– –>」で囲むとブラウザに表示されず、コメントとして使用できる。

<!-- ここからヘッダー -->
<div class="header">
  <p>ヘッダー</p>
</div>
<!-- ここからメイン -->
<div class="main">
  <p>メイン</p>
</div>
<!-- ここからフッター -->
<div class="footer">
  <p>フッター</p>
</div>

リンクを作成する

テキストを「a」タグで囲むとリンクを作成できる。

リンク先は「href=””」で指定。

<a href="http://oto-tanblog.com/">おとーたんブログ</a>

おとーたんブログ

画像を表示する

「img」で画像を表示することができる。

文章は必要ないので終了タグが要らない。

<img src="ここに画像URL" alt="ここに画像のタイトル">

リストを作成する

「li」タグを「ul」タグで囲むと箇条書きになる。

黒点を数字に変えたい場合は「ul」の部分を「ol」にすると連番にすることが可能。

<!-- 黒点 -->
<ul>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ul>
<!-- 数字(連番) -->
<ol>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ol>

ちなみに要素を要素で囲むことを「入れ子」と言う。

  • 囲む方は「親要素」
  • 囲まれる方は「子要素」

親子関係は「tab」キーを使用してインデントするとわかりやすくなる。

特定の文字だけCSSなどを適用させたい場合

「span」を使用すれば、文中の一部にCSSなどを適用させることができる。

Java<span>S</span>cript
span {
  color: #ff0000;
}

とすると「S」だけ赤色になる。

入力要素

1行だけのテキスト入力を受け取るには「input」。

複数行のテキスト入力を受け取るには「textarea」を使用する。

「input」要素には終了タグは不要。

<!-- 1行だけ -->
<input>
<!-- 複数行 -->
<textarea</textarea>

「input」要素はtype属性を指定することが可能。

type属性にsubmitを指定すると送信ボタンになる。

<!-- submitでボタン化 -->
<input type="submit">

ボタンの表示はデフォルトで「送信」になる。

value属性に別名を指定すると指定した表示のボタンになる。

<!-- valueでボタンの名前を変更 -->
<input type="submit" value="保存">

ブロック要素・インライン要素

HTMLの要素には、改行される要素と改行されない要素がある。

前後で改行が入り、親要素の幅一杯に広がる要素をブロック要素。

改行されない要素をインライン要素と呼ぶ。

    ブロック要素

  • <div>
  • <h1>
  • <p>

など

    インライン要素

  • <span>
  • <a>

など

HTMLの全体構造

HTMLを記述するときは、最新バージョンのHTML5を使用するために「<!DOCTYPE html>」と記述する。

そして「head」部分には設定に関する情報、「body」には表示したい内容を書いていく。

(ATOMの補完機能「html + tabキー」ですべて記述されるのであまり気にしてない)

<!DOCTYPE html>
<html>
  <head>
    設定に関する情報
  </head>
  <body>
    表示したい内容
  </body>
</html>

「head」要素

「head」要素には

  • 文字コードの指定
  • ページのタイトル
  • CSSの読み込み

などの設定を記述する。

基本的に文字コードはHTML5で推奨されている「UTF-8」を設定。

タイトルはブラウザのタブに表示させたいタイトル。

「link」は「rel」で読み込むファイルの宣言をし、「href」で読み込むファイルの配置先とファイル名を指定する。

<head>
  <!-- 文字コード -->
  <meta charset="utf-8">
  <!-- ページタイトル -->
  <title>タイトル</title>
  <!-- CSSの読み込み -->
  <link rel="stylesheet" href="/css/stylesheet.css">
</head>

全体のレイアウト

レイアウトは要素をグループ化するために、「div」要素で構成していく。

グループの中に、さらにグループを作ることも可能。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <div class="group1">
      <div class="group1-1">

      </div>
    </div>
    <div class="group2">
      <div class="group2-1">

      </div>
      <div class="group2-2">

      </div>
      <div class="group2-3">

      </div>
    </div>
    <div class="group3">

    </div>
  </body>
</html>

CSS

CSSは

どこの {
  何を: どうする;
}

を指定することで使用可能。

  • 「h1」の
  • 色を
  • 白にしたい

場合は

h1 {
  color: white;
}

と指定する。

h1, p {
  color: white;
}

と「,(カンマ)」で区切って、複数の要素を同時に指定することも可能。

文字の色を変える

「color」プロパティを使用する。

/* 赤を指定 */
h1 {
  color: #ff0000;
}
/* 青を指定 */
p {
  color: #0000ff;
}

文字の大きさを変える

「font-size」プロパティを使用する。

サイズはpxで指定。

/* pxで指定 */
h1 {
  font-size: 10px;
}

文字の種類を変える

「font-family」プロパティを使用する。

スペースが入るフォント名には「”(ダブルクォーテーション)」を囲んで指定。

/* スペースなし */
h1 {
  font-family: serif;
}
/* スペースあり */
p {
  font-family: "Avenir Next";
}

背景色を変える

「background-color」プロパティを使用する。

h1 {
  background-color: #ff0000;
}
/* 連続で続く値は省略可能 */
p {
  background-color: #ddd;
}

横幅、高さを変える

横幅は「width」。

高さは「height」を使用する。

/* 横幅 */
h1 {
  width: 1920px;
}
/* 高さ */
p {
  height: 1080px;
}

タグに名前をつける

タグにCSSを適用すると全てのタグに適用されてしまう。

個別に指定する場合はHTMLコードの「class」に名前をつけて指定すれば、個別にCSSを適用することができる。

HTMLコードに同じclass名を指定すれば、同じCSSを適用することが可能。

ただし、CSSに記載するときは先頭に「.(ドット)」が必要になる。

<div class="selected">
  <p></p>
</div>
/* タグはタグ名を記載 */
h1 {
  background-color: #ff0000;
}
/* クラスはクラス名と「.」が必要 */
.selected {
  height: 1080px;
}

class内の特定の要素を指定することも可能。

  • class「selected」内の
  • 「p」要素の
  • 文字色を
  • 白に変える

場合は

.selected p {
  color: #fff;
}

と記述する。

リストのマークをなくす

「list-style: none;」を指定すると、「li」要素の黒点や数字を消すことができる。

li {
  list-style: none;
}

要素を横並びにする

「float」プロパティを指定すると、指定した要素を横並びにすることができる。

「float: left;」で左から順に横並び。

「float: right;」で右から横並び。

li {
  list-style: none;
}

要素に余白を入れる

「padding」プロパティで指定した余白を作ることができる。

指定方法は以下の通り。

.padding-sample {
  padding: 上下左右px;
  padding: 上下px 左右px;
  padding: 上px 右px 下px 左px;
  padding-top: 上px;
  padding-bottom: 下px;
  padding-right: 右px;
  padding-left: 左px;
}

ボーダー(枠線)をつける

「border」プロパティでボーダー(枠線)をつけることができる。

「border: 太さpx 種類 色;」でボーダーの指定が可能。

.border-sample {
  border: 1px solid red;
}

他にも

  • border-top(上)
  • border-bottom(下)
  • border-right(右)
  • border-left(左)

の指定が可能。

内側と外側の余白

余白は「padding」を指定するが、「padding」は内側の余白になる。

外側の余白は「margin」で指定。

内側と外側は基準は、「berder」で引かれる枠線が基準になる。

枠線の内側は「padding」、外側は「margin」を指定。

「margin」の指定方法は「padding」と一緒。

.margin-sample {
  margin: 上下左右px;
  margin: 上下px 左右px;
  margin: 上px 右px 下px 左px;
  margin-top: 上px;
  margin-bottom: 下px;
  margin-right: 右px;
  margin-left: 左px;
}

これらを「ボックスモデル」という。