HTML、CSS、Bootstrapメモ

#（１）HTML,CSS
###１）基本
headタグとbodyタグで構成。headタグはページの全体の情報を設定。
titleタグの内容は検索結果で最初に表示される。

```.html
<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="utf-8">
  <title>●●●●</title>

</head>

<body>
  <h1>吾輩は猫である。</h1>
</body>
```


###２）htmlファイルにcssを記述する
ヘッダーに、styleタグを入れ、例えばpadding設定したければ以下のようにする。

```.html
<html>
<head>
  <style>
        body{
            padding:30px;
        }
    </style>
</head>
</html>
```

この時のbodyをセレクタという、paddingのような要素をプロパテイという。


###３）色を指定する
色指定は＃の後ろに１６進数で表す。
以下のリンクのカラーピッカーで色を便利に１６進数の表記にしてくれる。
https://www.colordic.org/picker
背景はbackground-color、文字の色はcolor属性で変更。


```.html
<html>
<head>
  <style>
        body{
            background-color:#ff8000;
            color:#ffffff;
        }
    </style>
</head>
</html>
```


###４）テキスト表示
以下のように、pタグを追加。font-sizeは、font-size:40pxのように絶対表示としても良いが、font-size:120%;（元のサイズの２割り増し）の方が、様々なデバイスに対応できる。

```.html
<html>
<head>
  <style>
        body{
            background-color:#ff8000;
            color:#ffffff;
        }
        p{
            font-weight: bokd;
            font-size:120%;
         }
    </style>
</head>
</html>
```


###５）枠線表示
h１タグに枠線を表示したい場合は以下のようにする。

```.html
<html>
<head>
    <style>
        h1{
            border: solid #00A0A0
        }
    </style>
</head>
</html>
```


###６）paddingと、margin
枠線を指定したのちに、paddingは枠線の内側の余白、marginは枠線の外側の余白を指定する。
詳しくは
https://saruwakakun.com/html-css/basic/margin-padding

marginは上、右、下、左の順番に設定できる

```.css
margin 10px 20px 30px 40px;
```
autoを使うとちょうどいい具合に中央に調整してくれる（CSSの仕様）

```css
margin 10px auto;
```

###７）inputタグ
name属性はサーバーに送信する際の項目名を意味する（サーバーに送る場合は必須属性）
type属性は必須属性ではない（記載しなければtype="text"になる）
value属性は必須属性ではない（デフォルトで入力されている値）

```.html
<input type="email" name="myself" value="あらかじめ"></p>
```

###８）buttonタグとinputタグによるボタン
type属性、記載しなければtype="button"となる
inputタグによるボタン作成もできるがbuttonタグによるボタンが推奨

```.html
<button type="button">送信</button>
<input type="submit" value="送信">
```

###９）divについて
H1は見出し、pは段落という意味を持つがdivは意味を持たず領域を表す
H1やp、divはそれ自身が改行するという特性を持っているが、spanタグは改行する特性を持っていないため、改行したくない場合に用いる

###１０）class属性、id属性にアクセスする
CSSでclass属性にアクセスする場合は、.●●●とする
CSSでid属性にアクセスする場合は、#●●●とする

```.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width">
    <title>入会申し込み</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <div class="content">
        <h1>入会申し込み</h1>
        <p>入会するには、次のフォームに必要事項をご記入ください</p>
        <p style>メールアドレス：<input type="text" name="myname" value="あらかじめ"></p>
        <p style>パスワード：<input type="password" name="password" value="あらかじめ"></p>
        <button type="button">送信</button>
        <input type="submit" value="送信">
    </div>
   
</body>
</html>
```

```.css

<style>
p{font-size: 14px;}
h1{
    font-size: 24px;
    margin: 0px;
}
.content{
    background-color:red;
    width: 600px;
}
</style>
```
###１１）labelタグ
例えば、labelタグでforを作成し、inputタグでidを作成して、同じ値を指定すると、labelタグとした文字をクリックするとinputタグの入力がアクティブになる
以下のケースでは"メールアドレス”の文字をクリックするとinputタグがアクティブになる
一方、inputのname属性はサーバーサイドで使う

```.html
<label for=myname>メールアドレス</label>
   <input id="myname" type="text" name="myname">
```
なお、以下のようにfor,idを使わずに、labelタグで全体を囲っても同じ効果となる

```.html
<label>メールアドレス
   <input  type="text" name="myname">
</label>
```

###１３）HTML、CSSまとめ
入会フォームを作る

```.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width">
    <title>入会申し込み</title>
    <!-- <link rel="stylesheet" href="style.css"> -->
    <link rel="stylesheet" href="css/sanitize.css">
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <div class="content">
        <h1>入会申込フォーム</h1>
        <p>次のフォームに必要事項をご記入ください</p>
        <div class="control">
        <label for=myname>メールアドレス　<span class="req">必須</span></label>
        <p><input id="myname" type="text" name="myname"></p>
        </div>
        <div class="control">
        <label for="password">パスワード　<span class="req">必須</span></label>
        <p><input id="password" type="password" name="password"></p>
        </div>
        <div class="control">
            <button type="button">送信 </button>
        </div>
    </div>
   
</body>
</html>
```

```.css
<style>
p{font-size: 14px;}
h1{
    font-size: 24px;
    margin: 0px;
}
.content{
    background-color:#fff;
    width: 600px;
    margin: 10px auto;
    border: 1px solid #d1d1d1;
    padding: 30px;
}
input{
    border:none;
    border-bottom: 1px solid;
    font-size: 1.2em;
    width: 50%;
    padding: 8px;
}
button{
    width: 100%;
    background-color: sandybrown;
    color:gray;
    padding: 15px;
    margin: 10px;
    border:0px;
    border-radius: 5px;   
}
.req{
    color: red;
    background-color: #fee;
}
body{
    background-color: gray;
}
.control{
    margin-bottom: 3em;
}
label{
    margin-bottom: .5em;
}
</style>
```
<img width="677" alt="スクリーンショット 2020-07-18 23.33.31.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/29856/19798fb0-cda2-3adb-45cb-910b05bc8133.png">



#（２）Bootstrapを使う
[Bootstrapのサイト](https://getbootstrap.com)へ行き、最新バージョンを使う
今回はCDNを使う
headerに貼り付ける

```html
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>アンケート</title>


    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">

    <!-- Optional theme -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap-theme.min.css" integrity="sha384-6pzBo3FDv/PJ8r2KRkGHifhEocL+1X2rVCTTkUfGk7/0pbek5mMa1upzvWbrUbOZ" crossorigin="anonymous">

    <!-- Latest compiled and minified JavaScript -->
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>
    <link rel="stylesheet" href="css/style2.css">
</head>


<body>
    <header>
        <h1>利用アンケート</h1>
    </header>
    
    <footer>
        <p>&copy; H22 space</p>
    </footer>
</body>
</html>
```

###１）コンテナを配置する
コンテナは、ブラウザの表示サイズにあわせて配置をちょうどいい具合に調整してくれるBootstrapの機能の一つ。
以下のようにbodyタグにdivタグを追加し、class属性にcontainerとし、追加する

```.html
<body>
  <div class="container">

  </div>
</body>
```

すると、<div>タグで囲われた部分がレスポンシブル対応となる

###２）グリッドシステムを使う
グリッドシステムを使い、画面が１２分割されたと考え、以下のようにする
divタグrowの中に、col-sm-●とすれば良い　（rowは指定）
smはmd、lgなど、画面の解像度に連動して、ブレークポイントを意味する
詳しくは以下を参照
https://getbootstrap.com/docs/4.5/layout/grid/

```.html
  <header>
     <div class="row">
          <div class="col-md-4" style="background-color: red;">
                    <h1>アンケート</h1>
          </div>
          <div class="col-md-4">
                    <a href="/">ホームへ戻る</a>
          </div>
          <div class="col-sm-2">
                    <p>@@@@</p>
          </div>
          <div class="col-sm-2">
                    <p>@@@@</p>
          </div>
     </div>
  </header>
```
###３）グリッドシステムを使う（オフセット）
１２個分のうち余白を指定することができる
２個開けて、８個分を使うためには以下の通り（残りの２個は自動的に余白波となる）

```.html
 <div class="col-sm-8 col-sm-offset-2">
      <p>以下のフォームに入力送信願います</p>
 </div>
```
###４）フォーム（フォームとplaceholder）
divタグのクラス属性にform-groupとすることで、１つの塊と捉え、複数のdivタグ（クラスform-group）同士の縦の感覚を開けるなどいい感じに調整する
また、inputタグのクラス属性にform-controlを入れることで、ラベルと入力欄を１行表示にせず、段落を分けて表示する
上記２つともBootstrapの指定
placeholderは以下のように記述する

```.html
<div class="form-group">
     <label for="name">お名前</label>
     <input type="text" id="name" name="name" class="form-control" placeholder="例）鈴木太郎">
</div>
```

###５）フォーム（ドロップダウンリスト）
value属性はサーバーサイドで送信する値

```.html
<div class="form-group">
     <label for="job">職業</label>
        <select name="job" id="job" class="form-control">
　　　　　　<option value="">選択してください</option>          
　　　　　　<option value="1">会社員</option>
          <option value="2">学生</option>
          <option value="3">その他</option>
        </select>
</div>
```

###６）フォーム（チェックボックス）
divタグのクラス属性にはcheckboxを指定する（Bootstrapの指定）
labelタグで囲むことで、例えばボックスをクリックしなくても、"HTML"という文字をクリックするだけでチェックされるようにする
なお、name属性は全て同じでよい（チェックしたものがどれかをサーバーサイドに送るため）

```.html
<div class="form-group">
     <label>ヒアリング項目（複数回答可）</label>
     <div class="checkbox">
     <label>
       <input type="checkbox" name="1" value="html">
        HTML
     </label>
     <label>
       <input type="checkbox" name="1" value="CSS">
        CSS
     </label>
     <label>
       <input type="checkbox" name="1" value="JAVASCRIPT">
        JAVASCRIPT
     </label>
</div>
```

###７）フォーム（ラジオボタン）
labelタグにクラス属性radio（Bootstrapの指定）を指定する
このままだと縦に並んだラジオボタンであるが、横一列にするためには、class="radio-inline"とする

```.html
<div class="form-group">
  <label>理解度について</label>
    <div>
    <label class="radio">
    <div>
  <label class="radio">
     <input type="radio" name="q2" value="1">理解できなかった
  </label>
  <label class="radio">
     <input type="radio" name="q2" value="2">大体理解できた
  </label>
  <label class="radio">
     <input type="radio" name="q2" value="3">理解できた
  </label>
  <label class="radio">
     <input type="radio" name="q2" value="4" checked>回答しない
  </label>
</div>
```
###８） フォーム（inputフォーム）を設定する
action属性で、データの送信時に呼び出すプログラムを設定する
method属性で、呼び出し方式を指定する
labelは入力欄の見出し
inputのtype属性は設定によってプルダウン形式やテキスト形式となる。name属性はデータを送信するときのデータの名前を表す
labelとinputはセットになるので、labelのfor属性とinputのid属性は同じ値を設定する。
buttonのtype属性も設置の仕方によっては送信ボタンやリセットボタンになる

```.html
<form action="#" method="post">			     
  <label for="title">タイトル</label>
  <input type="text" name="title" id="title">
  <button type="submit">送信する</button>      
</form>
```

###９）フォーム（inputフォーム）を装飾する
labelとinput（部品）を、divタグで挟む
divタグのclassにform-group設定し、inputタグのclassに"form-control"を設定する。

```.html
<form action="#" method="post">	
  <div class="form-group">		     
     <label for="title">タイトル</label>
     <input type="text" class="form-control" name="title" id="title">
  </div>
  <button type="submit">送信する</button>    
  
</form>
```

###１０）フォーム（textarea）を設定する
rows属性で３行のテキストエリアを設定。

```.html
<label for="message">メッセージ</label>
<textarea name="message" id="message" rows="3"></textarea>
```


###１１）リスト表示する

```.html
<ul>
 <li></li>
 <li></li>
 <li></li>
</ul>
```


###１２）リスト表示を装飾する

```.html
<ul class="list-group">
 <li class="list-group-item"></li>
 <li class="list-group-item"></li>
 <li class="list-group-item"></li>
</ul>
```


###１３）テーブルを表示する

```.html
<table>
  <thead>
    <tr>
      <th>#</th>
      <th>名前</th>
      <th>特徴</th>
      <th>住所</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>1</td>
      <td>ひろし</td>
      <td>強い</td>
      <td>東京都葛飾区</td>
    </tr>
    <tr>
      <td>2</td>
      <td>たけし</td>
      <td>弱い</td>
      <td>東京都葛飾区</td>
    </tr>
    <tr>
      <td>3</td>
      <td>デコ助</td>
      <td>強い</td>
      <td>千葉県</td>
    </tr> 
  </tbody>
</table>
```


###１４）テーブルを装飾する（ストライプ）

```.html
<table class="table table-striped">
  <thead>
    <tr>
      <th>#</th>
      <th>名前</th>
      <th>特徴</th>
      <th>住所</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>1</td>
      <td>ひろし</td>
      <td>強い</td>
      <td>東京都葛飾区</td>
    </tr>
    <tr>
      <td>2</td>
      <td>たけし</td>
      <td>弱い</td>
      <td>東京都葛飾区</td>
    </tr>
    <tr>
      <td>3</td>
      <td>デコ助</td>
      <td>強い</td>
      <td>千葉県</td>
    </tr> 
  </tbody>
</table>
```