0
0

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 1 year has passed since last update.

HTML/CSS/javascriptに関して覚書

Last updated at Posted at 2021-10-06

#大前提#
可読性の高いコードを書こう
学生の頃はこんなこと1mmも教わらなかったけど本当に大事だな~と42tokyo在籍時に感じた。
#HTML#
BEMでの命名について
・-first等枝番や-small等形容詞的な命名はNG
せっかくメンテナンスしやすいようにBEMを採用してるのに、仕様変更で変わる可能性のある枝番や形容詞的なクラス名は意味がない。

#CSS#
・疑似クラスについて
nth-child(n)は全体の何番目
nth-op-type(n)は指定した要素の何番目

#javascript#
・$(function() { });
DOMが準備されてからjQueryを実行するおまじない。

・メソッドチェーン
返り値でjQueryオブジェクトを返すメソッドの後にのみメソッドを連結できる。

・addClass()
対象のDOMにクラスを追加する(引数のクラスには.を付けないので注意)
css()よりもjavascriptがわの記述量が少なく使いまわしが効く。

・find()
指定されたDOM要素から引数に渡された要素を取得する。

・setTimeout()
第一引数に関数、第二引数に秒数(ミリ秒単位)を渡す。

・on()
取れる引数は、イベント名,セレクタ,データ,関数

・modal
表示するmodal windowを作っておいてdisplay: noneで見えないようにする。
対応する処理が実行された際にblockにするなりfadeInするなりして表示、非表示にする。

・タブメニュー
addClass,removeClassでdiplay: noneを切り替える。

・stop()
現在実行されているアニメーションを止める。
第一引数はキューのクリア、第二引数はゴールジャンプ

for,while,if等や配列、その他はCでいろいろ書いてた時期(大学~42tokyo在籍時)があって割と身についてる感じがしたので割愛。
jsは変数に型の宣言いらないの気持ちわるっって思って書いてました。

0
0
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
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?