今どき、『正しいHTMLを学びたい』と思っている人って、いるんでしょうか？

今、会社の新卒研修の手伝いをしています。
個人的な思惑としては、『HTMLに関することを教えたいんだ！』と思って引き受けたんですが、
結果的にやってることの半分以上が講義内容の調整だったりして、若干自分の意図としてはズレを感じざるを得ませんが（笑）

まぁ、それはおいといて。

私がHTMLに触れ始めたころ（10年位前ですかね）は、『ブログ』という概念はありましたが、
今では当たり前になっているTwitterはもちろん、SNSもありませんでした。
（SNSは当時私が知らなかっただけで、存在自体はあったのかもしれませんが）

昔は、『何か情報を発信したい』とき、
『ホームページを作る』の選択肢が一番、選択として、可能性が高かったように思います。

今は、ブログのように、物理的にHTMLを作る方法ではなく、
TwitterやFacebookなど、『自分はコンテンツを発信するだけ』のサービスがメジャーです。

『何か情報を発信したい』＝『ホームページを作る』ということが成り立たなくなっているのです。

その影響もあってか、今、Web制作会社を目指す人が増えていない、という話も聞いたことがあります。


そんな中で、

今どき、『正しいHTMLを学びたい』と思っている人って、いるんでしょうか？

と、先日ふと思ったので、書いてみました。

※一応、ここでいう『正しいHTML』とは、
　デザインに影響されず、Webサイトに見合ったタグ付けが行われているHTML　を指します。



私は『正しいHTMLを学びたい』と思っていますし、
これから『正しいHTMLを学びたい』人がいるなら、自分の持っている知識を伝えたい、と思っています。

ただ、その中で『HTMLを正しく書くこと』のメリットを伝えるのが、なかなか難しいと感じています。

『Webサイトが作れる』ことと、『HTMLが正しく書ける』というのはイコールではありません。
極端を言えば、HTMLなんか理解していなくてもWebサイトは作れてしまうのですから。

HTMLのルールは昔からあるにもかかわらず、
そのルールに従わなくても、Webサイトを作ることができてしまう。

ルールはあるが、ルール違反に対する罰則がない。

HTMLというマークアップ言語は、本当に特異な存在だと思います。


私は、HTMLにはじめて触れたときに、
もっと詳しく知りたい、ルールを知りたい、本当の書き方を知りたい。
と、自然と感じました。

自分が何かに対して興味を持ったとき、
それをより深く知りたい、と思うのは、ごく普通の流れだと思うのですが、
普通、はあくまで私にとっての『普通』であって、すべての人がそうであるとは限りません。

それは、あくまで感情論に過ぎなくて、
『なんで知る必要があるの？』と聞かれると、理論的に答えを導き出すのが難しい。



HTMLを知らない人に、HTMLの楽しさを教えることができたら。
マークアップって、本当に楽しいんですよね。

需要があるなら、そういうことをしてみたいと、強く願ってはいるのですが。

4年目の春

ご無沙汰しています。
気づいたら、前回の更新が1年近く前であることに気づきました。。。
一応、いきてます。

更新をしていなかった理由はと言われると、
特に意図的に更新しなかったわけではないです。
休日はもっぱら趣味に時間をあてていたためです･･･。

最近、Web制作に関するモチベーションがあまりあがっていなかったのですが、
今年から再スタートしたいと思います。


マークアップエンジニアとして就職して今年で4年目になりますが、
業務内容に技術的な飛躍があったか、と考えてみると、
正直なところ、入社時とほとんど変化していないという実感です。

知識的には、入社時よりはそれなりに増えているし、
仕事をより効率的に進める技巧的なところは向上したという自覚はありますが、
マークアップエンジニアとしての技術的な向上があったかというと、
自信を持って頷けないかなぁというところです。


今までの人生を考えてみると、
たいてい、自分がつかもうと努力したことは実現していて、
自分が諦めたり、受身だったことは叶わない、のが当たり前でした。

そろそろ、そのタイミングになっているのではないかと感じています。

見直されるCleafix

私がはじめてClearfixを知ったのは大学3年生のときでした。
Web系の雑誌（CreatorかDesigningか忘れましたが）を読んだのがきっかけだったのですが、
そのときの驚きは本当に大きかったように思います。
（ちなみにそれまではずっと空divを使っていました。汗）

それからこの仕事に就いて、他の人のソースを見てoverflow:hiddenを使ってフロートを解除する方法を知りました。

一時期、overflow:hiddenを案件で使ったこともありますし、
clearfixクラスを使わず、フロートを解除したいセレクタを複数指定し、それぞれにclearfixをかける方法もしました。

ですが今は結局、floatをクリアしたい要素に個別にclearfixクラスをつけるように、自分の中ではしています。

前置きが長くなりましたが、なぜそこに行き着いたのか、記事を元にご説明します。

---

Saying Goodbye to the overflow: hidden Clearing Hack
http://fordinteractive.com/2009/12/goodbye-overflow-clearing-hack/

簡単に記事の内容を書きますと、（原文の訳ではなく、私の解釈です）
---
まず、「Clearfix」にもうちょっと意味的な名前をつけたらどうか、という提案です。
「Handcrafted CSS」という本でそのような内容が書かれていたことを紹介しています。
（この本、あまりに面白そうだったので注文してしまいました。
円高の魅力に負けAmazon.comで注文したのでShippingにめちゃめちゃ時間かかりそうですが・・・）

そして、一番の理由になるのは、CSS3の新プロパティ、「box-shadow」でしょう。
box-shadowは、ボックスにドロップシャドウのような効果をつけるものなのですが、
それが、overflow:hiddenを使用していると切れてしまうのだそうです。
---

将来的には、display:box;でレイアウトをするようになると思いますので、
floatの解除にoverflow:hiddenは使わなくなるかもしれません。

ただ、CSS3はIE9からしか本格対応されないわけですし、
『プログレッシブ・エンハンスメント』とはいえ、
ボックスが角丸にならないことや、シャドウがないくらいなら許されますが、
さすがにレイアウト崩れは見逃しがたいなぁとは感じています。

だからしばらく、floatを使ったレイアウトはなくならないでしょうし、
それゆえにoverflow:hiddenもまだまだ使いどころがあると感じています。
ですから、box-shadowを使う際は注意したいですね。

---

私は以前、『無駄なIDやクラスをつけない派』だったのですが、
やはり実案件をやってみて、
『ソースを再利用する、マークアップの例外に備える』ことも大切だということに気づき、
もっぱらクラス付与派です。
（ただ、デフォルトのpタグにまでクラスをつけるのはやりたくないですが・・・）

案件によっては、CSSを調整することが難しく、HTMLだけで何とかしてくれといわれることもあり、
Clearfixに限ったことではないですが、その際やっぱりクラス付与型にしておくとメンテナンスが楽なんです。


・・・自分もだいぶ変わったなぁ・・・・・・（遠い目）


新しい技術が出ることによって、今までのマークアップもコーディングもだいぶ変わっていくでしょうね。
というより、自分のやり方、古いやり方を再考するきっかけにしなければと思いました。

---

記事を書くきっかけをいただいたサイト

clearfixハックは本当に必要なのか：
http://blog.till-daylight.org/archives/167-clearfix.html

Saying Goodbye to the overflow: hidden Clearing Hack：
http://fordinteractive.com/2009/12/goodbye-overflow-clearing-hack/

【おまけ】短いClearfixはじめました。
A new micro clearfix hack：
http://nicolasgallagher.com/micro-clearfix-hack/

いい感じでJQueryを利用しているサイト：トヨタ自動車株式会社

またまた久しぶりの更新に；；

と思っていたけどひと月経っていませんでしたね。
4月～5末にかけて絶望的な案件がひたすら続いていたのですが、、、
ようやく終わりが見えてきたところです。

6月からは新卒さんが入ってくる予定なので、教育係になれたらいいなー。
人に何かを伝える、教えるということにとても興味があるので、できればかかわりたい分野です。



また前置きが長くなりましたが、、、
先日、職場のチームリーダーからトヨタ自動車（本社）のサイトがいい感じだと教えてもらったので分析してみました。

---

トヨタ自動車株式会社　公式企業サイト

http://www.toyota.co.jp/

JQueryがいい感じで利用されているサイトです。

プラグイン解説：

sweetPages jQuery plugin

ページ内の「おすすめコンテンツ」ページネーションに使用しています。
上記のデモページにはない「戻る」「進む」ボタンと、Lightboxによるコンテンツ全表示の機能を加えていますね。

元のJSを解析する時間がなかったので、
「戻る」「進む」機能を付与できるスクリプトを記載してくださっているサイトを掲載しておきます。

Make jQuery button for Sweetpages（英語）
とりあえず、ページ内に張ってあるスクリプトをJSに入れ込めば動いてくれる模様。
あとはCSSなどの調整ですね。

ついでに、試しに実装してみたデモURLも乗せておきますね。
http://www.granshe.com/ex/jsdemo01/

FancyBox

ライトボックス部分にはFancyBoxを使用。

グローバルナビゲーションの「クルマ情報」「テクノロジー」などをクリックすると、フキダシ形式でリンクバナーが表示されます。
フキダシの画像がメニューごとに変化している箇所は、Lightbox側で出し分けているわけではなく、
コンテンツはインラインに記述しておき、クリック時に表示されるように指定しているようです。

DD_belatedPNG_0.0.8a.js

IEで透過PNGを表示させるためのスクリプト。
Conditional Comments（条件付コメント）を用いてIE6のみに読み込ませています。

<meta http-equiv="X-UA-Compatible" content="IE=8,chrome=1">

今さらかもしれませんが、「Google Chrome Frame」というテクノロジーを駆使して、IEでChromeと同じエンジンを使用できるようにする記載のようです。
（今回はじめて知りました・・・）

「Google Chrome Frame」とは、
オープンソースのプラグインで、Chromeのオープンウェブ技術とJSエンジンをIEに搭載できるようになるもの。
・IEが対応していないHTML5のCanvas機能などに対応できる。
・JSのパフォーマンスがあがって使用感が早くなる。
だとか（ざっと訳したので間違いあればご指摘ください）。

※本家版（英語）は下記です。
http://code.google.com/intl/ja/chrome/chromeframe/

ちなみに、ユーザが「Google Chrome Frame」をインストールしていなければ、上記のmetaを入れても特に何も起きません。

---

リーダーによると、各ボタン画像がいちいち大きいのは、
スマートフォンで見る際にも押しやすいように配慮されているのでは。とのことでした。

案件がぐだぐだで新しい技術を調べることもほとんどできなかったので、
こうやってサイトを分析すると勉強になることが多いです。


ただ唯一の欠点は、JSを切ると何も表示されなくなるところでしょうか・・・。
SSIのようにJSを用いている部分もありますし、
JSOFFの環境で表示が崩れるくらいなら、何も表示させないほうが良いのでは、という判断でしょうか。

最近役立ったフォーム関連のJS

また久しぶりになってしまいました。

仕事で忙しくてなかなか更新ができませんでした。
と言い訳してみます。

ですが、このまま会社に飼い殺されているわけにはいかないので、
時間を見つけて、ちょっとでも更新頻度を上げていけたらと思っています。


今回は最近仕事で大変役に立ったJSプラグインをご紹介。

１．プルダウンによる別プルダウンの制御

複数の選択式プルダウンというか、連動プルダウンというか、
Aを選択したとき、別のプルダウンではCとDが選択できるようになる。
Bを選択すると、別のプルダウンではEとFが選択できるようになる、
というように、プルダウンの選択によって別プルダウンのoptionを制御するJSを見つけました。

Select系はJSで制御するのが難しく困っていたので、見つかって助かりました。
場所はこちら。

URL：
http://www.ajaxray.com/blog/2007/11/08/jquery-controlled-dependent-or-cascading-select-list-2/

JQuery用のデモ：
http://www.ajaxray.com/Examples/depend-1.3.x.html

詳しい使い方は今度追記。
ブラウザによって若干の挙動の差異があるため、完全に表示が一緒になってほしい場合はおススメしません。

２．フリガナ自動入力JS

文字を入力すると自動的にフリガナが生成されるようにしてほしい。
と要望があったときにいろいろ検索してみたのですが、JQueryベースのものがなく困っていたところで発見。

URL：
http://mashimonator.weblike.jp/blog/2009/10/js-14.html

デモ：
http://mashimonator.weblike.jp/experiment/js/kanaTextExtension/sample.html

ライセンス（コメント欄の文章を引用させていただきました）：
本サイトで公開しているライブラリは基本的には無償で自由に使用してかまいません。
なるべくソースコード内に記載してある制作者名は残して頂きたいです。
また、バグ等ありましたらご指摘頂けるとあり難いです。