■

・ボタン押下時の遷移先の設定
　form actionタグの中で設定

・input type(テキストフィールド)
　〇　<input type="text" name="name" size=32 value="${'aaa'}"/>
　×　<input type="text" name="name" size=32 /><c:out value="aaa"/>
　⇒テキストフィールドの外に値が出力される

・要素セレクタ
    css:    button {color:blue;}
・クラスセレクタ
    css:    .button {color:blue;}
    html:
    <button class="button"～></button>


・HTMLの構造に依存している
⇒div h2でcssを定義していると、
　マークアップを変更したときにcssも変更しなければならない。
　class名称にすればマークアップが変更になった時(div h2⇒artcle h2)に
　cssを変更しないで済む

・スタイルの取り消し
<h2 class="title no-border">見出し<h2>
⇒titleに対してno-borderで取り消している

<h2 class="title headline">見出し</h2>
⇒titleの中にborderの定義を入れず、headlineで定義することで、無駄なコードを増やさないようにする

・詳細度
　!mportant
　インライン記述(style属性をhtmlに記載)
    <button style="colr:green"></button>
　IDセレクタ
　クラスセレクタ・属性セレクタ・擬似クラス
    [class="primary"]{color:green} class属性にprimaryだけが入っている要素を選択
　要素セレクタ、擬似要素
    buttton:first-child{color:green} ボタンの最初の要素に対して適用
　ユニバーサルセレクタ(*)

・リファクタリング
　要素セレクタを省略することで、シンプルに、メンテナンス性の高いcssにする
    h2.title⇒.title
    ul.link-list li⇒.link-list li

　セレクタを短くすることで、
　特定の要素への依存度が減る
    .links li a{ display: block; }
　⇒.links a{display: block;}

・セレクタ(セレクタ{プロパティ:値;})
    要素セレクタ
        h2 li ulとか
    クラスセレクタ
        class="aaa"のaaa

    子孫セレクタ(空白を開ける)
    ⇒孫となる要素も含めて適用対象になる

    子供セレクタ(＞を使用)
    ⇒直下の要素のみが対象になる。
    　スタイルを重ねてスタイルを打ち消す必要がない

    HTMLタグを指定しないでクラスを選択するようにする
    ⇒HTMLタグを使用すると意図しない継承が発生する可能性がある

    要素セレクタを省略する
    ⇒詳細度を高めるだけの為

    セレクタを共通、個別で分ける
    共通：アラート発生機能
    個別：成功時、失敗時、警告時
    ⇒alert success
    ⇒successが他と競合しない為に、successでなく、alert-successにする方がよりいい。

・CSS LINT
　http://csslint.net/

・コンテナとコンテンツを分離
    場所に依存しないセレクタを書く
    ⇒#header .logo{}
    　#footer .logo{}
    　⇒.logoとしてまとめる
    　　そして、共通から変更されるものが出てきたら、
    　　logo small-logoのように、
    　　必要なプロパティのみ拡張するようにする
    　　１．ヘッダーとフッターのロゴ
    　　　⇒内容が同じなら共通の.logoとして定義
    　　２．フッターのロゴだけ小さいロゴにしたい
    　　　⇒必要なプロパティのみ拡張したcssを作る

・まずは継承等考えずに書いてみる


・幅の情報を拡張元に持たせない
    .btn{...}
    .btn--short{width:200px;}
    .btn--long{width:480px;}
    .btn--full{width:100%;}

    <button class="btn btn--long">～</button>
    <button class="btn btn--full">～</button>
    ⇒ただ、これだと例えばshortとlongの間ができたときにその都度悩む
    　実際は、divごとに幅が異なる場合が多いため、
    　ブロック(div等)に幅を持たせることも考える
    css:
        form__button{width: 200px; /* フォームにおけるボタンの幅 */ }
    html:
        <div class="form__buton">
    css:
        comment__button{width: 120px;}
    html:
        <button class="btn comment__button"></button>