Udemyのオンライン授業（html-cssの基本コース） 受講してます。
HPをまじめに作ったことがなかったので、CSSの知識が非常に弱いという自覚があったのですが、それほど必要性も感じなかったわけですが、この度、ReactまたはDartでWebプログラミングを進める上ではCSSの知識は必要なので、Udemyの「[HTML/CSS/JavaScript] フロントエンドエンジニアになりたい人の Webプログラミング入門」を受講してみました。
全部で10時間ほどで、まだ、半分くらいの進捗ですが、
<div>と<p>と<span>をどのように使い分けるか、とか、classの定義はいきなり「.content{}」と書いてもいいとか、レスポンシブルデザインの作り方、Bootstrapの使い方や使い方がわからない時の対応方法など分かりやすく説明してくれています。コードを書きながらの説明なので、真っ白だったページが徐々にそれらしく変わっていくのを実感しながら学べるので、先生に合わせて自分でも確認しながら進めたので大変勉強になりました。
特に、htmlの空ファイルを作ってVS Code開きhtml:5と打ってタブをするところは、目から鱗でした。
テキストとセットになっていたらもっとよかったと思います。
Bootstrapはバージョン３ですが、Bootstrap4移行ガイドを見ながら進めれば問題ないです。
下のhtmlとcssのセットですが、<div class=”form-check form-check-inline”>のあたりが３と４で違っています。cssのレスポンシブルのところ、幅が狭くなったらinlineを解除するところも、合わせて変更します。
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ご利用アンケート</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
<link rel="stylesheet" href="./css/style.css">
</head>
<body>
<div class="container">
<header>
<div class="row">
<div class="col-md-8">
<h1>ご利用アンケート</h1>
</div>
<div class="col-md-4 align-right">
<a href="/">Homeへ戻る</a>
</div>
</div>
</header>
</div>
<hr>
<div class="container">
<form action="https://book.h2o-space.com/html/form.php" method="post" class="row">
<div class="col-md-8 offset-md-2">
<p>この度はどうもありがとうございます。恐れ入りますが、下記のフォームを入力してもらえれば幸いです。</p>
<div class="form-group">
<label for="name">お名前<span class="badge badge-warning">必須</span></label>
<input type="text" id="name" name="name" class="form-control" placeholder="例：目黒 太郎">
</div>
<div class="form-group">
<label for="name">ご職業<span class="badge badge-warning">必須</span></label>
<select id="job" name="job" class="form-control">
<option value="">選択してください</option>
<option value="経営者">経営者</option>
<option value="会社員">会社員</option>
<option value="公務員">公務員</option>
<option value="自営業">自営業</option>
<option value="学生">学生</option>
<option value="その他">その他</option>
</select>
</div>
<div class="form-group">
<label>知りたい内容（複数回答可）<span class="badge badge-success">任意</span></label>
<div class="checkbox">
<div class="form-check form-check-inline">
<input type="checkbox" name="q1" value="html">
<label class="form-check-label">html</label>
</div>
<div class="form-check form-check-inline">
<input type="checkbox" name="q1" value="css">
<label class="form-check-label">css</label>
</div>
<div class="form-check form-check-inline">
<input type="checkbox" name="q1" value="Javascript">
<label class="form-check-label">Javascript</label>
</div>
<div class="form-check form-check-inline">
<input type="checkbox" name="q1" value="bootstrap">
<label class="form-check-label">bootstrap</label>
</div>
<div class="form-check form-check-inline">
<input type="checkbox" name="q1" value="others">
<label class="form-check-label">その他</label>
</div>
</div>
</div>
<div class="form-group">
<label>理解度はいかがですか？</label>
<div class="radio">
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="q2" value="1">
<label class="form-check-label">理解できた</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="q2" value="2">
<label class="form-check-label">だいたい理解できた</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="q2" value="3">
<label class="form-check-label">理解できなかった</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="q2" value="4" checked>
<label class="form-check-label">回答しない</label>
</div>
</div>
</div>
<div class="form-group">
<label for="message">ご意見</label>
<textarea name="message" rows="10" class="form-control"></textarea>
</div>
<button type="submit" class="btn btn-primary">送信する</button>
</div>
</form>
</div>
<hr>
<div class="container">
<footer>
<p>© Work Space Meguro</p>
</footer>
</div>
</body>
</html>
header {
margin-top: 30px;
color: #2e99a9;
}
hr {
border-width: 3px;
border-color: #2e99a9;
}
h1 {
font-size: 18px;
font-weight: bold;
margin: 0;
}
.align-right {
text-align: right;
}
@media only screen and (max-width: 599px){
.form-check-inline{
display: block;
}
}