勉強ログ ～4/55～

1週目にスケジュールしていたカリキュラムも残すはBootStrapのみとなり、それも

あと2単元となりました。

かなり良いペースのように感じますが、カリキュラムにあるのはあくまでも触り部分だけなのです。

Bootstrapの本家サイトを参照すると、まだまだいろんなクラスやスタイルがあります。WEBエンジニアの方は、みなさんすべて記憶していらっしゃるのでしょうか。

自分の数少ない経験の中で作成したアプリケーションはとりあえず正確に動作することを重視していたので、デザイン力のなさに愕然とします。

ちなみにつくったのはこんなの。(C# WPF　ほぼデフォルトやん...)

まあ、業務用である以上、動けばよかったのと、私の能力で独学した場合の限界みたいなものが垣間見えます。

残りは明日終わらせて、復習と自習で完全に身につけられるよう頑張ります。

時間：21:30～23:00

メモ：

　・<meta http-equiv="X-UA-Compatible" content="IE=edge">
　　→互換表示停止
　・<meta name="viewport" content="width=device-width,initial-scale=1">
　　→レスポンシブWEBデザイン対応
　・記載順
　　1．BootStrapのCSS：<link>
　　2．jQueryの読み込み：<script>
　　3．BootstrapのJS読み込み：<script>
　・グリッドシステム
　　1．class="container" or "container-fluid"
　　2．class="row"
　　3．class="col-prefix-colum数
　　　　prefixはlg,md,sm,xs(デバイスサイズ)
　　4．列は合計12列になるようにする。

　　<div class="container-fluid">
　　　　<div class="row">
　　　　　<div class="col-sm-2">
　　5．classにhidden-prefix、またはvisible-prefixを追加指定することで条件下で

　　　非表示にすることが可能

　・テーブル
　　　1．class="container"
　　　2．table要素のclassにtableを指定
　　　　→<div class="container">
　　　　　　　<table class="table">
　・table内のデータ項目<td>を記載する際、先頭にscope属性を付けると、

　　ヘッダーの項目に対してデータがどの方向に列挙されているかを

　　示すことができる。(音声読み上げ等で有効)
　　→<th scope="row">
　　　row→行方向にデータ項目を列挙
　　　column→列報告にデータ項目を列挙
　・テーブルのストライプデザイン
　　→table-stripedクラスを指定
　・テーブルの罫線
　　→table-borderedクラス
　・レスポンシブなTable
　　→<div class="container>
　　　　　<div class="table-responsive>　←ポイントとなる構文
　　　　　　　<table class="table">
　　→画面に入りきらなかった場合にtable要素内にスクロールが表示される。
　・ボタンデザイン
　　a要素、button要素のclassに"btn btn-プロパティ"を指定する。
　　→「btn」も「btn-プロパティ」も指定必須
　　→「btn」でオブジェクトの形状を設定
　　　「btn-プロパティ」でデザインを設定
　・ボタンサイズ
　　a要素、button要素のクラスに「btn-サイズプロパティ」を追加するとボタンの

　　サイズを指定できる
　　→btn-lg、btn-sm、btn-xs
　・ブロックレベルボタン
　　ブロック要素としてボタンを定義する場合は、「btn-block」をクラスに指定する。