たにぐち まことの著書『これからWebをはじめる人の HTML&CSS, JavaScriptのきほんのきほん』は、2017年の発刊であるため、書籍内で利用している Bootstrapのバージョンが 3シリーズとなっています。
Bootstrap 4を利用してサンプルをそのまま作成すると、一部再現されない箇所があるため、以下を参考に書き換えていただけると幸いです。
オフセットの書き方が変わりました
グリッドシステムを利用するときに、左右の余白を取りたい場合の「オフセット」の書き方が変わりました。
col-XX-offset-X
↓
offset-XX-X
サンプルの「index.html」にある 33行目付近を次のように書き換えます。
<div class="col-sm-8 col-sm-offset-2">
↓
<div class="col-sm-8 offset-sm-2">「btn-default」が廃止されました
ボタンのスタイルから「btn-default」が廃止されました。まったく同じスタイルのものは存在しませんが「btn-secondary」が近い存在なので、index.htmlの 91行目付近を以下のように書き換えてください。
<button type="submit" class="btn btn-default"> 送信する</button>
↓
<button type="submit" class="btn btn-secondary"> 送信する</button>「label」クラスが「badge」クラスに変わりました
labelクラスが廃止され、代わりに「badge」クラスに変わりました。index.htmlの 37行目付近を以下のように書き換えてください。
<label for="name"> お名前<span class="label label-danger">必須</span></label>
↓
<label for="name"> お名前<span class="badge badge-danger">必須</span></label>フォームのラベルが太字ではなくなりました
フォームのラベル部分から「font-weight」の指定がなくなり、太字ではなくなりました。「style.css」に次のように追加して、太字になるように指定してください。
.form-group>label {
font-weight: bold;
}インラインラジオボタンの余白がなくなりました
インラインラジオボタンにした場合、左に余白があったのがなくなりました。「style.css」に次のように追加して、余白を設定してください。
.radio-inline {
margin-right: 10px;
}以上で、本書と同じような見た目に変わります。変更後のサンプルファイルを以下に設置していますので、ダウンロードしていただけると幸いです。