開発初心者の開発日記~24日目~

内容

  • Webを支える技術でのインプット
    • なし
  • HTML/CSSの基本でのインプット
    • 90分程度
    • 65ページから86ページ
  • PortfolioサイトのHTML化

HTML/CSSの基本のメモ

Chapter 2

2-8 リンクを貼ろう

2-9 リストを表示しよう

2-10 表を作ろう

  • 複数のタグを組み合わせて使う
    • <table>:表を示す、表全体を囲む
    • <tr>:表の一行を囲む(table row)
    • <th>:表の見出しとなるセルを作る(table header)
    • <td>:表のデータとなるセルを作る(table data)
    • <table>のなかに<tr>を並べ、その中に<th><td>を並べる
  • 例:https://github.com/daikisuyama/HTML_CSS_training/blob/master/69.html

2-11 フォームを作ろう

  • 複数のパーツを使う
    • <form>タグ
      • フォームを作成するためのタグ
      • action属性:データの送信先のページ(ターゲットURI)を指定
      • method属性:データの転送方法を指定、GETまたはPOST
      • name属性:フォームの名前を指定
    • フォーム内で使うパーツ(フォームコントロール要素)
      • <input>タグを使用する場合が多い
        • type属性をそれぞれ持つ
      • その他の例
        • <select>タグや<textarea>タグなどもある
      • 一行入力
        • 用途:一行の入力を行う
        • 使用するタグ:<input>タグ
        • type属性:textemailなどを入力に合わせて指定する
        • placeholder属性:予め文字を表示させることが可能
      • ラジオボタン
        • 用途:複数の選択肢から1つの選択肢を選ぶ
        • 使用するタグ:<input>タグ
        • type属性:radio
        • name属性:ラジオボタンの名前
        • value属性:送信される選択肢の値
        • checked属性:最初から選択されている状態にするときに指定
      • チェックボックス
        • 用途:複数の選択肢から複数の選択肢を選ぶ
        • 使用するタグ:<input>タグ
        • type属性:checkbox
        • name属性:チェックボックスの名前
        • value属性:送信される選択肢の値
        • checked属性:最初から選択されている状態にするときに指定
      • 送信ボタン
        • 用途:フォームに入力した内容を送信する
        • 使用するタグ:<input>タグ
        • type属性:submit
        • name属性:ボタンの名前
        • value属性:ボタンに表示するテキスト
        • ボタンを押すとターゲットURIに飛ぶ
      • 画像を用いたボタン
        • 用途、使用するタグ、type属性:同上
        • name属性:ボタンの名前
        • src属性:ボタンに使用したい画像へのファイルパス
        • alt:画像を説明するテキスト
      • セレクトボックス
        • 使用するタグ:<select>タグと<option>タグ
        • 用途
          • セレクトボックスをクリックすると選択肢が表示される
          • 選択肢が沢山ある場合に便利
        • <select>タグの属性
          • name属性:セレクトボックスの名前
          • multiple属性:複数の項目の選択を可能にする
        • <option>タグの属性
          • value:送信される選択肢の値
          • selected
            • 最初から選択されている状態にする時に指定
            • デフォルトでは最初の要素
      • 複数行のテキスト入力欄
        • 用途:複数行のテキスト入力を行う
        • 使用するタグ:<textarea>
        • name属性:欄の名前
        • placeholder属性:予め文字を表示させることが可能
        • タグで囲まれた部分が初期値となる
        • 初期値が空の場合にplaceholderが有効(たぶん)
  • 例:https://github.com/daikisuyama/HTML_CSS_training/blob/master/73.html

2-12 より使いやすいフォームにしよう

2-13 ブロック要素でグループ分けをしよう

  • グループ分けとは?
    • ブロック要素(前後に改行が入る)ごとに分ける
    • 分けた要素それぞれにCSSを適用していく
  • <header>タグ
    • ページの上部に相当するヘッダーを囲む
  • <nav>タグ
    • メインのナビゲーションメニューを囲む
  • <article>タグ
    • ページの(独立して)記事となる部分を囲む
    • ニュースサイトやブログの記事の部分に相当する
  • <section>タグ
    • 意味のある(テーマのある)グループを囲む
  • <main>タグ
    • ページの核となるコンテンツ全体を囲む
  • <aside>タグ
    • サイドバーなどの補足情報の部分を囲む
  • <footer>タグ
    • ページ下部のフッター部分を囲む
    • SNSリンクやコピーライトについて書かれていることが多い
  • <div>タグ
    • 特に意味を持たない部分を囲む
    • 用途に当てはまらない場合やデザインのために用いることが多い