【書籍学習ログ】HTML/CSS/JavaScript 基礎 - 【続・3日目】

多くなったので記事分けました！↓の続き。
【書籍学習ログ】HTML/CSS/JavaScript 基礎 - 【3日目】 - Miki's Blog
1月25日(金) 計1.5h

Chapter 4 CSS フレームワークのきほんを学ぼう〜Bootstrapでフォームをつくる

1月25日(金) 1.0h

Boostrap

Bootstrap · The most popular HTML, CSS, and JS library in the world.
米Twitter社が開発したCSS フレームワーク。
書籍はバージョン3に対応。
2019年1月現在の最新版は4.2.x。
トップページ右上のプルダウンより過去ページに飛べる。
f:id:gomagaru:20190125215820j:plain
今回は書籍に合わせて3をCDNで使用、その後は書籍通り。

CDN(Contents Delivery Network)

専用の配信サーバを準備することで、CSSやJavaScriptなどを
ダウンロードせずに利用出来るようにした仕組み。
同じファイルをサイト毎に複数回ダウンロードすることや
Webブラウザに保存されるキャッシュの無駄を防ぐ。

ノーマライズ

cssファイルでsanitize.cssを読み込まずにノーマライズされた見た目になる。
containerで囲むと左右に余白を設けた中央揃えに。
クラス名と機能の対応はドキュメントを参照。

グリッドシステム

floatで実現した回り込みは、グリッドシステムを利用して実現できる。
col-XX-Xの形で記述。
XX : ブレイクポイントの画像幅を設定できる。

XX	画像幅
xs	~767px
sm	768~991px
md	992~1199px
lg	1200px

X : 画像幅を12区画(カラム)に分けた時に指定する画像幅の大きさ。
合計12で設定する。
例 : 画像幅767px以下で標準、768px以上で6カラムにする。
(1:1で分かれた横並びにレイアウトする)

...
<div class="row">
   <div class="col-sm-6">
   ...
   </div>
   <div class="col-sm-6">
   ...
   </div>
</div>

フォーム

文字列フォーム、ドロップダウンリスト、
チェックボックス、ラジオボタンを設定。
大体Chapter 2内容とphp作成時の知識でOK。
Bootstrap特有の事項 :
・横並びに配置する設定
チェックボックス・ラジオボタンを横並びに配置したいとき
labelにinlineクラスを付加する。
checkbox-inline or radio-inline

※書籍p.164のコードそのままではチェックボックスは横並びになる。
書籍p.165の図4-2-10のように縦に並ぶ表示にするには、
label クラスで"checkbox"を追加した。

例: ラジオボタンを横並びに配置

<label class="radio-inline">
   <input type="radio" name="q1" id="q1_1" value="A型">
</label>
...

・テキストエリアの横幅100％がデフォルト
Bootstrapを使用していない時は幅を指定する記述が必要になる。

・ボタンに標準スタイルを適用する
例: ｢送信｣ボタンに標準スタイルを適用する
btn-default クラスを付加。

<button type="submit" class="btn btn-default">送信</button>

・赤に白文字で警告を出す
label-danger クラスを付加
例 : ｢お名前｣が必須項目

<label for="name">お名前<span class="label label-dangar">必須</span></label>

フォームのRWD対応で重要な事項 :
・画像幅が狭いときは縦並びにする
優先順位に気をつける。最優先の指定｢!important｣を使用する。
例 : 通常時inlineのラジオボタン

@media only screen and (max-width: 992px) {
   .radio-inline {
      display: block; /*ブロック要素にして改行させない*/
      margin: 0 !important; /*余白を0に強制*/
   }
}