今朝の雑談
4K解像度 - Wikipedia
4K解像度（よんケイかいぞうど、フォーケイかいぞうど、英語: 4K resolution）とは、横4,000×縦2,000前後の画面解像度に対応した映像に対する総称である。
横3840px 縦2160px
なのでサイトを4Kテレビでみると、全要素が横一列に表示されたりということが起こるらしい。
横幅は慎重に設定しましょう
いまはレスポンシブデザインさえ古くなって
リキッドデザインが台頭してきているらしい
jQueryの主要メソッドを使う
基本的に皆さんsetter & getter
html,text
css
attr 書き換え
append 作り出した要素を親要素に追加
animete 出来上がりの状態を指定してそこまでアニメーションさせる
val （バル）入力内容を取得（varじゃないよ。varは変数を宣言するときに使う）(valはvalueの略) ←new
要素を捕まえるときは「$('要素')」
var moji = $('#t1').val();//メソッドvalにパラメータなしで指定するので（（）なので）値取得となる（getterとして動作）
var moji = $('#t1').val('I am setter');//メソッドvalにパラメータを指定するので値が入力ボックスに反映になる（setterとして動作）
コンテンツを書き出すときはtextメソッド
var moji = $('#t1').val();//入力ボックスの値を取得
$('#midashi').text(moji);
コンテンツのcssを変えるときはcssメソッド
$('#b2').on('click',function(){//button2の記述
var textC = $('#t1').val();//値を拾得
$('#midashi').css('color',textC);
});
()内は、プロパティはシングルコートで囲む、
第二引数は、'#f00'とかならシングルで囲むし、変数だったら裸でtextCとかで記述
入力欄の正誤性（バリデーション）などをチェックするときにvarメソッドがよく使用される。
攻撃されやすい場所なので正誤性のチェックは必須らしい。
ユーザーが書いた（選択したのも）値はvarでないと読みだせない
はじめからhtmlに書いてある要素だったらtextで拾える
自習：background-sizeプロパティの使い方
>次に、background-sizeのプロパティの使い方について解説します。使い方は、次のとおりです。
使い方：
background-size:値
background-sizeプロパティに使う値一覧：
auto 自動算出します。基本は元画像の大きさそのままです。
contain 元画像の縦横比は保持して、要素に元画像が全て収まるように調整してくれます。
cover 元画像の縦横比は保持して、要素をちょうどよく覆うサイズにしてくれます。（要素をちょうどよく覆うというのは、要素の縦か横か大きいほうに画像の伸縮を合わせるので、足りないほうがおそらく切れる）
数値(px) 明示的にpxで大きさを調整します。
数値(%) 要素に対しての割合で指定します。
WEBアプリのトップ画面では、coverを使って画面幅最大で画像を表示しているケースが多いです。それぞれどのような動きになるのか確認しながら使ってみるのがおすすめです。
>
background-size = auto → 基本そのまま
background-size = cover → 要素を埋める（横長の画像を縦長の領域に指定すると、縦に合わせて伸張し、領域を埋め尽くすように表示。）
background-size = contain → 背景画像全体が見える(隙間ができるよ)
縦横指定 → 縦横伸縮。割合指定は元の要素を 100% とする
長さのみ指定 → auto でアスペクト比を変えずに伸縮
ここを読み込んでおくこと
background-sizeのcontain
1.画像全体がみえるよう縮小される
2.no repeatしてなければ要素に繰り返し敷かれる
だからちょうどいまdivの中に<h1>が追加になった瞬間、
divの縦幅が広がって
勝手に自動で背景画像も大きくなった
おもしろい
coverにするとどうなるか
div.hoge{
background-image: url("img/fish_kue2.png");
background-size: cover;
}
cover 元画像の縦横比は保持して、要素をちょうどよく覆うサイズにしてくれます。（要素をちょうどよく覆うというのは、要素の縦か横か大きいほうに画像の伸縮を合わせるので、足りないほうがおそらく切れる）
要素を埋める（横長の画像を縦長の領域に指定すると、縦に合わせて伸張し、領域を埋め尽くすように表示。）
coverの使い方がよく分からないが、
おそらく「とにかく埋めよう」という挙動？
幅の大きいほうにあわせて拡大縮小するみたいな？
ここも読んでおくと良い
