はじめに
未経験から実務経験2か月ちょっとを経て、1つのサイトを完成させることができたので(もちろん色々な人の手助けあってですが)、今後に生かすインプットと自分の備忘録としてPHP、JavasScript・jQuery、HTML・CSSの3つに分けて記録していきます。
この記事では、HTML・CSSについて書いていきます。
なお、身につけた技術は随時、記録・更新していきます。
他の記事については、下記のリンク先からご覧ください。
別の記事のリンク
HTML
checkbox
//input checkboxには、display:none
<input type="checkbox" id="check"><label for="check">テスト</label>
id = for の内容を同じにするとlabelにcheckbox属性をつけられる。
サーバー処理でcheckboxを使っていてcheckboxの見た目を変えたいときに汎用的に使える。
javascript:void(0)
<a href="javascript:void(0);">
内容的には、javascriptだけどaタグ要素をつけたいときに使えるやつ。
でも、カーソルを重ねたとき、リンク先にjavascript:void(0);と見えてしまうので、ユーザービリティ的によろしくない。
現在の推奨は、代わりにbuttonタグにするか、cssに要素を持たせる。
<button></button>
<style>
a {
cursor:pointer;
}
</style>
tabel
<table>
<tbody>
<tr>
<th scope=""></th>
<td></td>
</tr>
</tbody>
</table>
よく使うテーブルタグ。忘れそうなので作成。
CSS
優先順位
同じタグの処理が存在した場合のjsの優先順位は、下が優先。
CSSもそうだが、違うのが詳細度の点数によって優先順位が決まるということ。優先順位を上げたいなら詳細にタグを記述すること。
(最終手段として!important)
下記リンクを参照。
CSSの優先順位を自在に適応させる方法
background: url
.test {
background: url(../test) 5% 8px no-repeat;
}
urlで背景に指定した画像を持たせる。%でpositionの指定。pxで高さの指定。画像は繰り返し表示されるのでno-repeatで一枚に指定。
最後に
まとめることでなんとなく理解していた箇所をクリアに理解することができました。
まだ全然書ききれていないので、随時更新します。
今後もアウトプットした分だけインプットするよう心掛けていきます。