札幌に旅行に行っていたため、久しぶりの更新になりました。
今日はJSPを使って画面のコーディングを行いました。
完成品はこちら！
工夫点は
①ボタンの大きさ、配置をブラウザごとに変化
②マウスをボタンに合わせた時、クリック時にボタンの状態を変化
実装において手こずったのは
①ボタンの中央寄せ
②tableにおいて、特定の列の枠を消す
③フォルダの構成を変更したところ、HTTP Status 500 - java.lang.ClassNotFoundException: org.apache.jsp.WEB_002dINFというエラーが急に起こる
上記の２つの観点について今回は書きたいと思います。
まず工夫点から！！
①ボタンの大きさ、配置をブラウザごとに変化
ボタンの大きさは、どのブラウザでどのwindowサイズで見ても適切な大きさになるように[vh][vw]という単位で指定してあります。
1vhとはビューポートの高さの100分の１のサイズ、1vwとはビューポートの幅の100分の１のサイズのことです。
各種ボタンの位置もvwとvhで指定してあるため、windowサイズが変わっても相対的な位置関係が崩れないようになっています。
それなら％で指定しても同じではないかと思ったので調べてみたところ
％は親要素の割合に対して適応されるそうです。
どういうことかといえば、
例えばdivの中の要素に対して％を適応するとそのdivの大きさに対する割合になってしまうそうなんです。
②マウスをボタンに合わせた時、クリック時にボタンの状態を変化
変化の様子は下記の通りです。
まずマウスをボタンに合わせた時
次にクリック時の変化はこちら
具体的にはボタンの色と影を変更しています。
実装方法は非常に簡単でボタンタグに対してhovorを指定するとボタンにマウスを合わせた時、
activeを指定するとボタンクリック時のスタイルを指定できます。
言葉だと分かりにくいのでソースコードを貼っておきます。
次に手こずった点について！！
①ボタンの中央寄せ
どうやらボタンタグに対して直接text-aligin:centerやmargin:autoに指定しても効かないそうなんです。
対策としてはdivでボタンをくくってそのdivのクラスに対してtext-aligin:centerやmargin:autoを指定するとできます。
②tableにおいて、特定の列の枠を消す
borderをnoneに指定すれば簡単に消えると思っていたのですがtableの外枠だけしぶとく残っていまい手こずりました。
対策としては疑似クラスを使用しました。
疑似クラスとは簡単に言うと要素（buttonタグなど）の特定の状態や特定の位置を指定する方法のこと。
先ほど書いたhovorやactiveなんかも疑似クラスの１つです。
今回はtableの一番端の列の枠を消したかったので、最終要素を表すlast-childを使用しました。
矢印で示した場所を消したかったので、last-childで指定した列のtopとbuttomのborderをnoneに適応しました。
これも分かりにくいのでコードを示しておきますね。
③フォルダの構成を変更したところ、HTTP Status 500 - java.lang.ClassNotFoundException: org.apache.jsp.WEB_002dINFというエラーが急に起こる
まったく原因が分からないエラーだったのですがmavenの更新を行った後に起こってしまったため、
何かlogに意図しないものが書き込まれているのではと疑いました。
そこでプロジェクトを右クリックしてリフレッシュを行ったところ、解決できました。
ご参考まで！
次回はcontrollerやservice、mapperを作成して簡単な画面遷移ができるようにする予定です。
それでは！