勉強ログ ~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」をクラスに指定する。