7cc@はてなブログ

JavaScriptとかとか

トップ > その他 > ドットインストールのCSSを見るなら注意

ドットインストールのCSSを見るなら注意

その他

＊この記事の内容は古くなっている可能性があります。現状にそぐわない記述が含まれるかもしれません。

ドットインストールという動画でプログラミングを学べるサイトが結構？人気・評判のようだ。しかし、どうしても動画が良い、というのでないなら見ないほうが良いと思った見るなら注意が要ると思った。。 好みの問題ではなく間違い・非推奨な内容が含まれているからだ。

言語によっては大丈夫なのかもしれない…以下はCSS, JavaScriptをいくつか見てみたメモ

追記

この記事は2013/12/07に書かれたもの。
2014/02/05にサイトのCSSの内容が更新されている。

すこし見てみたがやはり間違いが・・・。

  • #07 テキストのスタイルを指定しよう
    line-heightにあいかわらず単位をつけている。しかし付けてはいけない。
  • #18 擬似クラスを使ってみよう

    要素がある特定の状態になったときにスタイルを指定できる擬似クラス

    これはダイナミック擬似クラスの説明になっている。擬似クラスの説明としては誤り。

他の内容については確認していません

2014/05/17： 現状に合っていないとおもったのでタイトルの変更

追記ここまで

CSS

CSS入門

  • #02 CSSはどこに書くか？
    「補足」の箇所 @importでスタイルシートを読み込む方法

    長くなりがちなスタイルシートを分割して管理する際にも便利なので覚えておきましょう。

    やめろ・・・それはいけないやつ。@importはできるだけ使ってはいけない。

  • #06 もっとテキストのスタイル
    動画40秒～ line-heightの値を変えながら

    150％と同じ意味で1.5というのもよく使いますので

    同じではありません。単位はつけるのは非推奨です。

  • #08 ブロック要素のスタイル
    「ブロックレベル要素」ですね。間違えるのは仕方ないにしても、誰も指摘しないのでしょうか?
    「更新情報」を見てみると…

    ボックス要素ではなくてブロック要素だったので修正。

    修正出来てません。

    widthにパーセントを指定して親要素に対して50%と説明。ちょっと危うい説明ですね。
    この後に 「#19 要素の位置指定」 でpositionの指定がありますが、特にcontaining block（包括ブロック）の説明はありません。初心者向けだからわざとしないのかな…

  • #09 境界線のスタイル
    サブタイトル名: 「ブロック要素などにつけられる枠線(border)」
    「など」とは何でしょうか？borderは全ての要素に指定出来ますが...。

  • #10 余白のスタイル

    ブロック要素に指定出来る余白について見ていきます。

    paddingとmarginの説明です。もちろんこれもインライン要素にも指定可能ですね。

CSS3入門

  • #06 ボックス要素に影をつけてみよう
    こちらはボックス要素のまま直していません。
    なによりbox-shadowもすべての要素に指定可能です。
    収録の前に内容を確認していないのが分かります。

JavaScript

JavaScript入門

全体的なもやもや感がある…なぜそのメソッドを取り上げたのかとかよく分からない。Array.reverseが出てきてpushは無いとか。

  • #10 whileループ

    ある処理を指定した回数、繰り返すときの方法について学びます。

    はい・・・回数にも使えますね。にもね。（実際使わないけど）

  • #17 Stringオブジェクト new Stringで文字を作らせます。動画最後らへん

    実はnew Stringは省略可能というのも一応覚えておきましょう こういう風にすると文字列オブジェクトに関しては自動的にこれら（リテラル）が使えますので…

    new String("hello") は "hello" と省略可能との説明です。
    最後の最後でこの説明は罠ｼﾞｬﾅｲﾉｶ…（後述）

  • #21 Browser Object Model (BOM)

    • そんな言葉があったんだ！使われてないよ！Wikipediaも英語版しかない。この言葉で検索しても有用な情報は全然見つからない。
    • さらっとwindow.innerHeightが出てくるがそもそも対象ブラウザは不明。

  • #23 DOMを操る
    innerHTMLとvalueが出てきます。他はありません。ほかはありません！
    （「Tips集」という別の動画ではcreateElementを使う方法が紹介されます。）
    innerHTMLでDOMを操作するのはよくありません。理由は3つあります。

    1. パフォーマンスが悪い
    2. 操作できない要素がある(IEでselect, table)
    3. 次の項目で説明されている、イベントハンドラ/リスナが消滅する

  • #24 イベントを理解する
    onで付けます。addEventListenerは当然ありません。

  • その他
    for, 配列, Array と配列に関係するのが３回も出てくるのに配列をループするのは出てこない。そこが結構知りたいポイントではないのだろうか。

JavaScript入門 (Tips集)

動画にする基準が分からない。confirm, promptが一動画ずつある。もっと重要なことが説明されていないが…。

  • #17 型も値も比較する
    ここで===が初めて出てくる。しかし文字列リテラルと文字列オブジェクトの違いは言及されない。(a)初心者向けならリテラルと厳密な比較だけ知っていればよいし、(b)きちんと説明するならオブジェクトとプリミティブ値の違いまで説明してほしい。
    特にDOMから文字を取った時はプリミティブ値になるので $0.textContent === new String($0.textContent) とか普通に間違えることになりますね。

  • #21 イベントの書き方
    やっぱりonで付けます。このサイトでaddEventListenerを知る機会はあるのでしょうか? (サイト内検索したらあったが…続きは下記)

JavaScriptで作る残り文字数チェッカー (全5回)

この講座内でaddEventListenerが使われます。しかしこの動画には決定的な間違いが…。

  • #04 Internet Explorer 8以下に対応しよう
    対応できてない。IE8はtextareaの改行が\r\nと2文字になることが忘れられている。テストしないで動画は終了。「今回のまとめ」の項目には「動作確認」とあるが実際はしない。テストはしよう！

終わりに

うん…言語によってはきっと薦められるのもあるんでしょうね。

何より内容が確認されていないだろうと思われる節がいくつもあるのが気になります。ちょっとこれは利用しないほうが良いと思いました。