1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

実務経験で身につけた技術 ~HTML・CSS編~

Last updated at Posted at 2020-11-22

はじめに

未経験から実務経験2か月ちょっとを経て、1つのサイトを完成させることができたので(もちろん色々な人の手助けあってですが)、今後に生かすインプットと自分の備忘録としてPHP、JavasScript・jQuery、HTML・CSSの3つに分けて記録していきます。
この記事では、HTML・CSSについて書いていきます。
なお、身につけた技術は随時、記録・更新していきます。
他の記事については、下記のリンク先からご覧ください。

別の記事のリンク
[実務経験で身につけた技術 ~PHP編~](https://qiita.com/hx_kei/items/cc31823dfc2425ac0688 "実務経験で身につけた技術 ~PHP編~") [実務経験で身につけた技術 ~Javascript・jQuery編~](https://qiita.com/hx_kei/items/ff8ff0e98b2545b5e37e "実務経験で身につけた技術 ~Javascript・jQuery編~")

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で一枚に指定。

最後に

まとめることでなんとなく理解していた箇所をクリアに理解することができました。
まだ全然書ききれていないので、随時更新します。
今後もアウトプットした分だけインプットするよう心掛けていきます。

1
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?