2017年12月16日（土）ベルサール半蔵門 イベントホールで開催したShift11：Webデザイン行く年来る年のフォローアップとして、小山田 晃浩さん （ピクセルグリッド）、久保 知己さん（まぼろし）の『2017年のマークアップの話題を総まとめ』セッションのスライドなどを公開します。
フォローアップメッセージは、イベント開催直後（2017年12月）の時点のものです。
フォローアップメッセージ（補足など）
小山田さん
マークアップセッションを担当した小山田です。長い一日、お疲れ様でした。
マークアップセッションは技術的な話題になりがちで、技術を専門にしないかたには難しい部分もあったかもしれません。ただ、Webの進化に取り残されすぎないために、今回ご紹介した内容をキーワードとしてでも覚えておくといいでしょう。
当日は、例えば以下のようなことをお話しました。
- Firefoxが新しくなったんだって？→ 劇的な進化によりChromeくらい速くなりました。
- jQueryってやめたほうがいいの？→ やめなくてもいいけれど、ブラウザが進化したので今では使わなくても同じことができるようになりました。
- Reactってなにがすごいの？→ Webアプリケーションを作るためのライブラリです。一方で従来通りのWebページ作りには必要ないでしょう。
- webpackってよく聞くけどなに？→ JavaScriptの「import」を今使うためのツールです
これらの内容は当日使ったスライドにまとめていますので、ぜひ復習の材料としてお使いください。
そして、もっと深く勉強したい、という方に向けては、私の所属会社がCodeGridという技術情報サイトを運営していますので、ぜひ参考にしてみてください。
久保さん
マークアップセッションを担当した久保です。
ご来場ありがとうございました。
今年のHTMLは、HTML 5.1 2ndやHTML 5.2が勧告されましたが、インパクトを与えるような変化はありませんでした。
ただし、廃止勧告案の提案や、WHATWGのUTF-8を推奨する記述が話題になり、マークアップはUTF-8のエンコーディングで最新のHTML 5で記述するのがスタンダードになります。
CSSは、CSS Grid Layoutが今年は話題になりました。
セッションでも紹介したIE対応は面倒ですが、IEを考えなければ、柔軟性の高いレイアウトを再現できます。
FlexBoxは1次元のレイアウトが得意ですが、Grid Layoutは2次元レイアウトに非常に強いです。IE 11のサポートは2025年までありますが、今から学んでおいて損はないでしょう。
まぼろしの勉強会
なお、弊社（まぼろし）では、定期的に勉強会を主催しています。
参加には勉強会のテーマに沿った「5?10分程度の発表が必須」となりますが、2018年1月12日(金)に、下記の勉強を予定しています。
発表の内容にその場でフィードバックも得られて勉強になります。ぜひともご参加ください。
セッションの感想や質問について
HTML 5.2のp要素問題に驚いた
p要素の議論はAdded wording to clarify retrictions on children of p elements. by adanilo ? Pull Request #838 ? w3c/htmlで確認できます。
この意図としてはp要素内で仕様できるHTML要素制限し、本来の「段落」として使うことを強調するために、p要素の子を制限する文章を加えました。
ただし子の禁止要素のインラインブロックやfloatなどのブロックレベル要素はCSSでしか再現できません。
問題の文章は、あくまでもCSSは関係ないといっていますが、CSSでしか実現できない内容の記述ため、今後変更される可能性があります。
今までShift-JISで記述されていたサイトはどうすればいいか？
過去に作成したサイトは、そのときの仕様にのっとって作成したものであり、この変更の対象外となります。
またGoogle ChromeでShift-JISエンコーディングで作れた文字化けを起こすページも、ブラウザのアップデートによって減ってきています。すぐにでも対応しなくても構いませんが、将来的には何らかの対応を行なった方がいいかもしれません。
次々と出てくる新しい技術を覚えるにはどうしたらよいか。
新しい技術は、各ブラウザのリリースノートでアナウンスされます。特に目玉となる機能は、リリースノート以外の各ブラウザのブログなどで使い方を紹介するケースなどもあるので、これらをチェックしておくといいと思います。
IEがまた手間のかかる存在のようで… なぜいつもIEがネックになるのか気になりました。
Microsoftは後方互換性を大切にしています。
IEは、本当は新しい機能を追加したいのに互換性の問題で実装できないなどの問題あります。
そのためIE11は、セキュリティのアップデートを行いますが、機能の開発を中止し、最新のweb技術はEdgeが担うことになりました。
現在は少なくなりましたが、IEでしか表示できないサイトやwebシステムが残っています。Microsoftもジレンマとしてあるようですが、これらのサイトやwebシステムでも問題なく使うためにIEが必要となり、それがネックとなります。
CSSクリップパスが便利なのにIEで使えるようになるか気になります。
IEの新規開発は中止されています。そのためIEで使える日は来ないでしょう。
2025年までIE11。知らなかった・・・
IE11のサポート終了のスケジュールは下記のようになっています。
- Windows 7のIE11は、2020年1月まで
- Windows 8のIE11は、2023年1月まで
- Windows 10のIE11は、2025年10月まで
PugよりEJSなどのHTMLテンプレートエンジンの方が好きとおっしゃっていたのはなぜですか？
Pugと他のHTMLテンプレートエンジンの機能に差はありますが、ものすごく大きな差はありません。そのため、インデント構文かHTML構文のどちらが書きやすいかという差しかないと感じています。
この2つの構文を見比べたときに、私はHTML構文の方が編集力に優れていると感じています。
下記は弊社（まぼろし）の勉強会で発表したスライドです。キーボードの矢印で動きます。
エディタの画面があるページは、動画になっています。左がインデント構文、右がHTML構文で同じ操作を行った様子を比べているので、再生してみてください。
レイアウト手法はGrid Layoutが標準に移行するのでしょうか？
Grid Layoutは、レイアウトを作成する専用の機能として新たに策定されていました。最新のGrid Layoutは柔軟性が高く、非常に便利な機能ばかりです。
間違いなくレイアウト手法のスタンダードになるでしょう。
display: gridはTableの考え方に近いのでしょうか？
IEを含めたGrid Layoutの考え方は、Tableに近い考え方です。
ただしIE以外の最新のブラウザが対応しているGrid Layoutの仕様は、Tableとは少し異なると考えた方がいいでしょう。
例えば、Gridのボックスを等間隔に配置したり、ボックスを重ねたり、視覚的にボックスを管理できます。
これらは時間の都合上、紹介しませんでしたが、チェックしておくといいでしょう。
ベストセッション2019
2019年、CSS Niteでは49回の関連イベントを通して123セッションが行われました。その中からベスト・セッション＋αを選びました。
