社内の勉強会用につくったCSS3でどんなことができるの？についてのスライド

社内で毎週持ち回りで技術的なことを話す会があるのですが、
そこで使用したスライドをこちらでも共有しようと思います。

社内の『CSS3って何なの？具体的にどーいうことができるの？』という人に向けて書いたスライドなので、残念ながら目新しいことはほとんど書いていません。

SafariもしくはChromeで動作確認しています。推奨はiPad（MediaQuery部分）
CSS3について

数ヶ月くらい前に書いた資料なので、情報が一部古いかもしれませんがご了承ください。
前述しましたが『CSS3って何なの？具体的にどーいうことができるの？』という人向けなので、技術的な部分を端折ったり簡易化している部分があります。

ツッコミなどございましたらお願いいたします。

HTML5についての分かりやすいまとめ

ゴールデンウィークももう終わりですね。

最近情報収集のためにTwitterをはじめたんですが、 すごくいい情報がどんどん入ってくるので、インプットにはかなりいいツールだと思いました。 使ってよかったです。

そこで、HTML5についての分かりやすいまとめが載っていたので紹介させていただきます。

HTML5とは何かを簡単にまとめてみた
http://techblog.yahoo.co.jp/cat207/web_1/html5/

自分なりに、上記の記事を簡易的にまとめてみました（私的な解釈も含んでいます）。
（詳細は上記の記事を読んでいただければ分かると思います。）

1.今まで難しかった、下記の機能の実装が容易になりました。

• 動画や音声、グラフィックの描画（video/audio/canvas）
• 位置情報の取得・クライアント側に大量データを保持させる（geolocation/LocalStorage）
  ことが、JavaScriptを用いて容易に実装可能になる。
• フォーム周りの機能強化（type属性の種類の増加/必須項目を示すrequire属性/インプットエリア内にデフォルトの文字列を表示させるplaceholder属性）

HTML側の変化

• 基本構造が変化
  （DOCTYPE、charset、linkの指定が短くなった。）
• 現在のWebサイト特性に合わせたタグを新設
  （ページのヘッダー等見出し群を囲むhgroup、ブログ記事など、単体で独立可能なエリアを囲むarticle、コンテンツを一定の意味合いごとに区切るsection、本筋とは違う要素をマークアップするaside、具体的な時間を表すのに使用するdata、などなど）
• （特にインライン要素の）要素の意味合いが変化（small/i/s　など）
• inline要素・block要素という区分けの廃止（明記されているか調べていないが、おそらくそう。）
• aタグが今までのブロック要素にあたるもの（pやdivなど）を包含可能に

改めてW3Cの仕様書を見てみると、面白く見えたのでまた読解に挑戦してみたいです。
時間になってしまったので、今日はこれにて。

今どき、『正しい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/