Progate HTML & CSS コース 初級編

Progate
  • ファイル名は index.html など
  • <h1>Hello World</h1> : heading(見出し)。末尾で改行される。<h6> まである。見出し以外は <p> (paragraph)を使う。
    • h1, p, div のように前後に改行が入り, 親要素の幅いっぱいに広がる要素をブロック要素という。
    • span, a のように広がらない要素をインライン要素という。
    • は文中の一部の文字列に css を指定する場合に使う(機能的な意味はない)
  • <!-- --> : コメント
  • <a href="url">hoge</a> : anchor, hypertext reference
    • href のような属性は開始タグ内に書く
    • 属性の値はスペース区切り
    • 属性は " で囲まないが, 属性の値は " で囲む
  • <img src="画像へのURL"> img は終了タグはない(文字要素がないため)
<ul> <!-- unordered list (・の箇条書き) -->
    <li>リストの要素1</li> <!-- 親子関係はインデントすると分かりやすい -->
    <li>リストの要素2</li>
</ul> <!-- <ol>要素で囲むと、数字が連番でつく -->
  • ファイル名は stylesheet.css などで html の「どこの」「何を」「どうする」かを指定。
h1 { /* 対象(セレクタという)を h1 にする。 */
    /* color プロパティ。色は16進数のカラーコードかredなどで指定 */
    color: #ff0000; /* : と ; は必須 */
    font-size: 10px; /* px 必須。10 と px の間にスペースは入れない */
    font-family: "Lucida Grande"; /* フォント名にスペースがある場合は必ずダブルクォーテーションで囲む。スペースがない場合は囲まない */
    background-color: #ddd; /* 背景色。#dddddd のように同じ値が続く場合 #ddd と省略可 */
    height: 80px; /* 画像や背景色の表示領域の高さ */
    width: 200px;
}
  • class 属性により別々のCSSを適用可能。css の競合時はよりタグに近く, より後に指定されたものを優先する。(多分もっと細かい条件がある)
<ul>
  <li class="selected">fuga</li> <!-- 複数の要素に同じclassをつけた場合、それら全てに同じCSSが適用される -->
  <li>hoge</li>
</ul>

li { /* . はつけない */
  color: #444;
  list-style: none; /* ul の黒点を消す */
  float: left; /* リストに限らず, 普通は縦に並ぶモノを横に並べる。(改行無しみたいな感じ?) */
  padding: 20px; /* 要素の上下左右に指定幅を空ける */
  /* padding: 1px 2px; (2つ指定)のとき上下1px、左右2px (コンマで区切らない)*/
  /* padding: 1px 2px 3px 4px; (4つ指定)のとき top, right, bottom, left の順に指定*/
  padding-top: 50px; /* padding の方向指定ver top, right, bottom, left がある*/
}
.selected { /* class 名の前に . をつける */
  color: red; /* こちらで上書きされるらしい */
}
  • テンプレート
<!DOCTYPE html> <!-- 最新の html5 の場合。他のバージョンならそのバージョンを明示 -->
<html> <!-- <html>要素の中に<head>要素と<body>要素が必要 -->
  <head> <!-- ページに関する情報 -->
    <meta charset="utf-8"> <!-- meta情報 は 情報に関する情報 -->
    <title>タイトル</title>
    <!-- 下の rel="stylesheet" はスタイルシートを読み込む宣言-->
    <link rel="stylesheet" href="stylesheet.css">
  </head>
  <body> <!-- 表示する中身 -->
    <!-- division 要素をグループ化するために使用 -->
    <div class="header"></div>
    <div class="main"></div>
    <div class="footer"></div>
  </body>
</html>

body { /* body全体も対象にできる */
  font-family: "Avenir Next";
}
.header li { /* class="header" の子要素の li だけ対象 */
  background-color: #f7f2b4;
  height: 90px;
}
  • ヘッダを作ってみる
<div class="header">
    <!-- css で list-style: none, float: left, padding, background-color, height, font-size, font-family, color などを指定 -->
    <div class="header-logo">左上にある感じのロゴ</div>
    <div class="header-list">
        <ul>
            <li>ヘッダ1</li>
            <li>ヘッダ2</li>
        </ul>
    </div>
</div>
  • 要素にボーダー(枠線)をつけるには、css で border プロパティ (または border-left で左のみ)を用いる。
    • ボックスモデル: HTMLの全ての要素(画像など)には初期状態では表示されない border があり、その外側の余白はmargin, 内側の余白はpaddingである。( margin の指定も padding と同じ)
h1,h2 { /* カンマ区切りで複数セレクタを指定可能 */
  border-bottom: 2px solid #dee7ec; /* 太さ 種類 色*/
  padding: 10px; /* border の内側余白 */
  margin: 30px; /* border の外側余白 */
}
  • input タグ
    • <input> : 1行用の入力欄(終了タグ不要)。入力欄の枠がborder扱いらしい
    • <input type="submit" value="送信する"> : 送信ボタン(value を指定しない場合は日本語環境で「送信」)
  • <textarea></textarea> : 複数行用の入力欄(終了タグ必要)