読者です 読者をやめる 読者になる 読者になる

kekosh’s Study_Log

勉強の記録と日記

勉強ログ ~4/55~

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

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

 

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

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


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

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

f:id:kekosh:20160707232603p:plain

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

 

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

 

時間: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」をクラスに指定する。