woshidan's blog

あいとゆうきとITと、とっておきの話。

ボタンなどの基本的な装飾に関するメモ

週に二回も書けば十分やろ、と思ったけどそんなことはなかった。

 

少なくとも最初のほうは覚えることが多すぎて、これ書こうって思ってももう次の話題に移って追いつかない感じがする。

あと、コードももうちょっとあとでそのままコピペできるように残しておきましょう。

 

昨日分の記事を書いた直後、

あれ、<a>タグ使わなくて<button>使えばもう少しシンプルに出来るんじゃないか、と思ってしらべてました。

 

結果、

<td id="t' + j + i + '" class="noClass"><a href="#" id="s' + j + i + '" onclick="getTablePlace(this.id)">EMPTY</a></td>

<button type="button" id="' + j + i +'" class="noClass" onclick="getTablePlace(this.id)">EMPTY</button>

 

Before

クリックした要素をjavascriptで取得する(ための関数を呼び出す)ための<a>タグ

背景表示を変更するためにテーブルの<td>にもidとclassつけてた

 

After

<button>なら表示とidの取得ができる

 

というか、最初からボタン一択では←

とかくこういうときはこれっていう知識がないから

個人情報登録用のデータを送る→それをマイページで表示する

ってところまで出来たらまた勉強しよう……。

 

で、ボタンに限らないですが、装飾についてメモ。

参考にしたのは主に、HTML クイックリファレンスのCSS3リファレンス → http://www.htmq.com/css3/

 

平面ボタンにしたい→border: hidden

ボタンの陰はボーダー部分で表現しているらしいですね。

-topとか部分を指定すると角のほうはななめに45°ずつ区切られている。

 

box-shadowはブラウザごとに対応させる必要ありそう。

 

paddingをまとめて指定するときの対応順序は

値が一個→上下左右

値が二個→最初が上下、次が左右

値が三個→順に上、左右、下

値が四個→上、右、下、左

 

border-radiusを指定するときの順序は、

左上・右上・右下・左下の順。

/で区切ってもう一度0 0 20px 0 / 0 0 10px 0 のように書くと、

水平方向の半径/垂直方向の半径 のように指定できる。

左下(4つめ)を省略すると右上(2つめ)、右下(3つめ)を省略すると左上(1つめ)の値が入る。つまり対角線上。

一つしか入れなかったら四隅全部一つ目の値。

個別に指定したい場合は、border-top-left-radius(左上)・border-top-right-radius(右上)・border-bottom-left-radius(左下)・border-bottom-right-radius(右下)を使ったほうが速い。