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

・ボタン押下時の遷移先の設定
 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のように、   必要なプロパティのみ拡張するようにする   1.ヘッダーとフッターのロゴ    ⇒内容が同じなら共通の.logoとして定義   2.フッターのロゴだけ小さいロゴにしたい    ⇒必要なプロパティのみ拡張した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>