「困った!HTML初心者にどうやって教えたらいいの?」HTMLとCSSの効率的な教え方

You may also like...

6 Responses

  1. koyurugi より:

    フロントエンドエンジニア5年目のkoyurugiです。

    HTML5がオススメとのことですが、今のWebの現状を鑑みるにその選択は無いと思うのですが。
    もちろん、HTMLを囓る程度で良いのならそれで十分かもしれませんが…。

    現状として、
    ・国内のブラウザシェアはHTML5に未対応のIEが圧倒的に占めている。
    ・システム組み込み系のパーサーがHTML5の曖昧なタグの閉じ方ではなく、厳密な閉じ方を要求することが多い。
    ・セクショニングやアウトラインを重視するよりも、デザイン上のレイアウト表現の方があらゆる面において重要度が高い。

    自分にはこれだけでも最初に教えるHTMLとしてHTML5は不適格です。
    HTML5のサイトが増えてきたと言っても、IE等のレガシーブラウザのために数年は互換性を保つ必要があるでしょう。
    国内の大半はまだIEが主流で、もうすぐサポート切れと言っても Windows XP が多く残っているので、
    IE8がしばらく続く事実はそう簡単に覆らないと思います。

    パーサーについては学生のうちや静的なHTMLでは縁が無いかもしれませんが、
    タグの閉じ忘れ等は厳密なXHTMLの方がチェックツールにも引っかかりやすいので正確なHTMLを書く練習にも向いています。

    セクショニングは文章に意味を持たせるという意味では必要ですが、
    それを重要視しすぎるが故に自由な表現ができなくなっている初心者の方が多く見受けられます。
    マークアップの楽しさは慣れてくると楷書体のような形式美に見いだしてきますが、
    最初の頃は草書体のような方に縛られない自由なデザインを表現できることが楽しいと思います。
    そして作業工程的に見て、文章構造ありきではなくデザインありきのマークアップなので、
    また、SEOに効果があるような説明がたまに見ますが、多くの人が現時点では効果が無いもしくは無いに近いレベルという現実もあります。

    長くなりましたが、以上です。

  2. ffffff より:

    コーダーです。
    上記コメントのフロントエンドエンジニアーさんは正しい文章構造で自由なデザインが出来ないのでしょうか?
    現場に出るにはHTMl5よりかはガチガチのものを知っている方が良い気がしますが、文章構造を正しく教えた後にポジションを教えるという流れは綺麗だと思います。
    正しい文章構造を理解し、その上で自由なデザインを書ける様になり、上のコメントの方の様なフロントエンドエンジニアさを輩出しなくて済むと思います。
    コーダーはデザイナーとは違います。
    あくまで文章構造にこだわり、どんなデザインにも対応出来るべきです。

  3. ikuya より:

    現場ではどう、ではなく、まず最初にhtmlを”学ぶ”ということにおいては、各UAがどうレンダリングするかは学習する順番としては後まわしでよいと思いますが、いかがでしょう。

  4. nanko より:

    これから始める人にどこから教えるかという問題はなかなか難しいですよね。
    半年コースとい比較的長いスパンの講座であればHTML5から入るという選択肢もありかもしれません。あくまでXHTML+CSS2.1での制約についてもきちんと教える前提であれば。
    難易度の順番で言えばXHTML→HTML5の方が理解しやすい気がしますが、現時点で言えば結局どちらも必要になるので、両方扱えるように解説できるのであればどっちから先にやってもいいと思います。

    HTML→CSSという順番で理解してもらうのは至極もっともな流れだと思います。正しく美しい文書構造のHTMLは、CSSでのスタイリングもそうでないものに比較してはるかにコントロールしやすいと思いますし。

    ただ、そのためにはコンテンツ作成やデザインの時点である程度情報がきちんと整理されていないと正直非常にやりづらいのも事実。
    上記フロントエンドエンジニアさんは、デザイン段階で情報がごった煮になったようなタイプのページのマークアップばかりされてきたのかな?

  5. kotatu より:

    html5からで問題無いと思います。
    文章のアウトラインを先に覚えさせないと旧時代のダメな記述だけ覚えて満足してもらっても困ると思います。
    それにxpでie8まで対応ならjavascriptで対応させれば良いのでは?
    閉じタグぐらいならチェックツール使うなり、入力補助のあるエディタなりで問題無いですし、なによりhtml5で推奨されないタグを使わないためにも触れておかないとダメでしょう。

    そんな事よりはるかに重要なjavascriptとcssの記述位置や、cssスプライトやら、キャッシュの処理やら覚えさせた方が・・・
    それと管理が難しいのでDB使って出力するような、wordpress的な物を使う事も覚えないと無駄な作業が増えるだけなんで実践では役立たず、存在だけでも教えとかないと・・・
    後はインライン要素の改行で/**/で改行文字囲うとか、
    floatとpositionは横幅が足りない時に改行するとか、一つ上の要素にもposition付けないと思ったように配置できないとか代表的な間違い例教える感じが良いかな、出来ればCSSグリット方式も覚えさせると良いが。
    フラッシュはadobe製品でやった方が良いから後回しかな。

  6. miraigamienaihitohakieru より:

    宣伝ぽく思われると嫌なのですが、弊社の講座では2年以上前からHTML5で基礎から教えています。
    その当時でも1番目のコメントのような方がいらっしゃったので、IE対策についてもご紹介しています。

    日本ではコンセプトなどを理解せずにテクニカル内容を重視していたり、どのブラウザでも全く同じ
    見栄えであることが重宝されていると勘違いをされている方がいるようですが、そんな考えでいると
    この業界に残っていることは不可能です。まぁ、年収200万円でもプロのコーダーだと言っていたら生き残っているのかもですが。

    現状のどこのサイトを作られているのか分からないですが、「IEが圧倒的に占めている。」というのは数字だけを追って見方を間違えているとも言えます。
    このような考えではととんでもないことになります。

    逆にお伺いしたいのですが、どの時点からだとHTML5というのでしょうか?また、それは何年なのでしょうか?
    そして、自分は必要ないと判断してHTML5を勉強していないでしょうか?

    Webも10年以上がたち、昔のまま止まっている人をカットしてほしいとの企業の依頼が最近多いのですが、
    まさにこのあたりの人を上司はカットしたいと思っているのかも知れません。

    一流の会社の社長は既にHTML5のことも今後のことも知っています。自分が会社の足でまといにならないためにも心を入れ替えて勉強されることをおすすめします。
    IEを自分が勉強しない理由にしないでほしいです。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください