Markup Meetup #1 in Osaka に行ってきました

なんと、マークアップがメインのイベントが開催されました。 

フロントエンドに恐れる我々としては非常にありがたい内容でした。

その時のメモです。

markup-meetup.connpass.com

Reset CSS 2019

大塚さんのセッション。

Reset CSSの最新情報について。

• 自作か、他作（＋カスタマイズ）か？
• Reset か、Normalizeか？

などを調査しつつ、最適解を探る内容でした。

大塚的ベストプラクティス（暫定）

「ress.css + α」

ress.cssに加えて

• ul、olに list-style: none;
• imgに vertical-align: bottom;

を追加。

おもしろいおまけもありました。

以下のようにCSSを指定すると、HTMLの真の姿が見れます！

* { all: unset;}

以下、当日の大塚さんのスライドです。

slides.com

キチンとやるHTMLマークアップ

ナカムラマサトさんによるセッション。

「キチンと」とはなにか？

マシンリーダブルであり、ヒューマンリーダブルなコードを書くこと。

マシンリーダブル

セマンティックなコードを書いて、機械に読み取れるようにする。

ヒューマンリーダブル

人が見て可読性の高いものにする。

キチンとできていないと何でだめなのか？

例えば、アクセスに伸び悩むサイトがあるとします。

• アクセシビリティ
• ユーザービリティ
• コンテンツ
• パフォーマンス

など、どこに問題があるのか探さないといけません。

キチンとマークアップができていれば、「アクセシビリティ」や「ユーザービリティ」の原因を潰すことができ、問題がどこにあるのかが見えてきます。

怖い上司に「見れたらええねん」と言われるツケはここに回ってきますよね…。

他に、チェックに使うツールの紹介や、人にコードを見てもらうことの大切さを解説されていました。

マークアップを頑張っているみんなが一度は思うであろう「これって自己満足なんじゃ…」という悩み。その靄が晴れるようなセッションでした。

LT（Lightning Talk）

以下は5分程度のライトニングトークです。

すぐできる構造化データマークアップのススメ

Hasegawaさんによるセッション。

検索結果の表示をリッチにできる「構造化データマークアップ」のセッション。
実装方法は現状、大手が導入しているschema.orgでOKとのこと。

ガイドライン違反には注意

つい先日MEOでのガイドライン違反でも言及があったように、構造化データについても同じことが言えるようです。

参考：悪質なGoogle Maps最適化(MEO)への依頼は大きなリスクがあります - 株式会社JADE

例えば、求人が終了したのに構造化データ上で「求人中」状態のままだとガイドライン違反になってしまいます。

しっかり責任を持って構造化データを導入したいところです。

Zeplinちょっと触ってみたで

sakaguchiさんによるセッション。

Zeplinはマークアップが便利になるありがたいツール。

メリット

• 画像の書き出し
• CSSの書き出し
• スタイルガイドの作成

デメリット

• Illustratorに非対応
• ドキュメントが英語
• フリープランは1プロジェクトまで（有料は3プロジェクト ＄17/月～）

これらがXDで解消されるのを期待！とのことでした。おねがいXD！

Zeplin、非常に便利なツールですね。ちょうど先日お知り合いの方と、デザインデータからCSS書き出せたらいいねと話していたタイムリーな情報でした。

zeplin.io

ちょっとしたフロントエンド高速化テクニック

Nakataniさんによるセッション。

ファーストビューの表示を高速化するテクニックについて。

ブラウザのレンダリングの仕組み上、CSSファイルの読み込みまでに時間がかかりファーストビューの表示が遅くなりがち。その問題をファーストビュー部分のCSSをインライン化することで解決できます。

しかし、更新性が悪くなってしまうので、自動化ツールで対応しましょう！というセッションでした。

gulp勉強せねば…。

さいごに

全セッションがマークアップに関わる内容で、非常に面白かったです。

ほんとうに少ないんです、マークアップのセミナー…。あとデザイン系セミナーも…。

会場ではビールが飲み放題で一杯いただきましたが、そこらの居酒屋と比べ物にならない美味しさ。27Fから眺める景色と極上のビール、そしてマークアップ大好きなメンバー。最高でした。

Markup Meetup、またの開催を楽しみにしています。うまい棒ごちそうさまでした。

それでは、ナイススタイル！

Web制作者のためのCSS設計の教科書 モダンWeb開発に欠かせない「修正しやすいCSS」の設計手法 Web制作者のための教科書シリーズ