名古屋マークアップ勉強会 を開催しました
勉強会風景
名古屋マークアップ勉強会 8/9を開催しました。当日は9人募集していた中、8人の方にお越し頂きました。
福岡に「福岡マークアップ勉強会」という素敵なお名前の勉強会があり、許可をとってお借りしました。略して「マカベン」と呼びます。さらにロゴまでお借りしています。福岡マークアップ勉強会のみなさま、ありがとうございます！
イベント内容
マークアップの疑問や、興味のあることについて自習する勉強会です。今年入った2人の新人さんたちを鍛えることが開催のきっかけですが、先輩が退職されて聞ける人がいなくなったので「私も教えてもらいたい！」ということで社内ではなく外部のみなさんの参加も募集しています。
私のように身近にマークアップのこと聞ける人がいない人、マークアップを学びたい人にぜひ参加していただきたい勉強会です。
当日私が勉強したこと
私が当日やっていたことは、「社内で共有するためのベースとなるHTMLの作成とgulpfile.jsの作成」でした。
主にベースとなるHTMLの作成を主に作っていて、時間が余ったらgulpfile.jsを作る予定だったのでgulpfile.jsがまだ完成できていません。
時間配分ができていなくて、発表できなかったのでこの場を借りて発表させてください。できているHTMLファイルのうち、一部だけ抜粋してご説明します。
作る上で参考にしたサイト
IE対応
<!DOCTYPE html> <!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="ja"> <![endif]--> <!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8" lang="ja"> <![endif]--> <!--[if IE 8]> <html class="no-js lt-ie9" lang="ja"> <![endif]--> <!--[if gt IE 8]><!--> <html class="no-js" lang="ja"> <!-- Chromeではこれが適用される --> <!--<![endif]--><!-- 英語サイトはenに変える -->
上記のソースコードはHTML5 Boilerplateを参考にしました。条件分岐コメントでclassを適応しているhtmlタグを分けるというやり方です。
htmlタグにクラスが適応されていればCSS内でIEハックやJSなど使わなくても対応できます。実際まだ使ってはいませんが、比較的手間がかからない方法じゃないかなと思います。
Javascriptを有効化してるときはno-jsclassを外すためにJSを使わなくてはいけないと思うのですが、Javascriptを有効化しているときと無効化しているときでスタイルが変わらない場合は、消すようにします。
IEの互換モードの設定
<!-- IEはバージョンごとに表示方法が変わる。下位バージョンの表示方法を再現させないようにする。 --> <meta http-equiv="X-UA-Compatible" content="IE=edge">
こちらもIE対応のための記述です。IEはバージョンごとに表示方法が変わるので、下位バージョンの表示ができるような設定があります。URLのバーの近くに古いIEの表示にするためのボタンがあり、間違って押してしまいがちなので、設定しておきたい記述です。
スマートフォンのとき
<!-- アプリがあるサイトなら --> <!-- <meta name="apple-itunes-app" content="app-id=xxxx"> --> <!-- ホーム画面用のアイコンを用意するなら --> <!-- <link rel="apple-touch-icon-precomposed" href="apple-touch-icon.png" /> -->
iPhone用のアプリダウンロードの表示をさせたり、ホーム画面のアイコンを設定する記述をコメントにしておけば設定するときに記述をしなくてすむので便利です。
できたHTMLファイルの配布
できたHTMLファイルはこちらに置いておきます。ところどころ英語のコメントの記述があるのですが、a-blog cms用の記述ですので、中身をみるときは気をつけてください。
その他、勉強会の収穫
SublimeTextのスニペットが使えない！
SublimeTextのEmmetのプラグインを入れるとデフォルトのスニペット機能が使えなくなることが原因でした。（sergeche/emmet-sublime · GitHubを参照）
解決方法としては、[Preferences] → [Settings - User] に"disable_tab_abbreviations": trueと記入すると解決します。
SublimeTextのコンソールをみる
[View] → [Show Console]でSublimeTextのエラーが確認できます。なにか問題があったときみてみるといいかもしれません。
参加者の方の発表
デモページやブログが公開されているものがあったのでご紹介しておきます。
table要素についてのおさらい
HTML5で廃止になっている要素もたくさんあり、アクセシビリティのために推奨されていたsummary属性も廃止になっています。では、summary属性の代替えはどうしたらいいのか？という質問があったのですが、調べてみるとpタグやcaptionタグやfigureタグを使って対応する方法があるようです。
table要素をレスポンシブウェブデザインに対応する方法の1つとして以下のリンクが会話の中で出ていたのでこちらもご紹介しておきます。
CSS3 Modules
こちらのデモページでは、hoverしたときのアニメーションの実装がされています。このページを発表されていたのはフロントエンドエンジニアの方です。アニメーションはフロント側の仕事なの？という質問も出たのですが、アニメーションはフロント側の人の作業になっているようですね。弊社でも簡単なものであればマークアップエンジニアが実装しています。
こちらのデモのようなアニメーションをまとめたフレームワークを近々作る予定があるそうなのでこちらも楽しみです！
他の参加者の方々
ほかにもコーディングを勉強中のデザイナーさんとか、夏休みの宿題をされている学生さんもいらっしゃいました。参加されていたみなさんの職業はバラバラで、マークアップを得意としている人ばかりではない勉強会でした。わからないところは「わからない」と躊躇せずに言える勉強会になってよかったなと思っています。
名古屋マークアップ勉強会第2回目
なんとこの勉強会、次回もやることになりました。イベントもすでにATNDで作っています。
名古屋マークアップ勉強会申し込みページ
次回は9月13日（土）に開催です。
第1回目では最後の発表の質問タイムで盛り上がってしまい時間が足りなくなったという反省を活かして、2回目では構成を変えようと思います。
はじめに興味のあること、疑問に思っていることを発表していただきます。たとえば「CSSアニメーションは○○ができてすごいんです」とか、「サンプルのコードを持ってきてHTMLのアウトラインはこうするのが正しいの？」などを現地で聞いていただいてかまわないです。
きっとその場にいる人でも分からないことが出てくると思うのですが、わからないことについては自習タイムで勉強して、最後に参加者の皆さんにも情報を共有するために簡単な発表します。
そうすることで、参加した皆さんの勉強にもなるし、疑問を初めに共有することで、きっと、自分1人で勉強するよりも知識が深まるんじゃないかなと思います。
最後に
私もマークアップ暦がそんなにあるわけじゃないです。どこからカウントしていいのかわかりませんが、がんばって勉強し始めたのはこの2年くらいです。マークアップができる人も参加していただきたいですが、マークアップができない人の参加もお待ちしています！
もう一度リンクを貼っておきます。「どうしようかな」と迷っても、興味があればぽちっと押して参加いただけるとうれしいです！
森田かすみ
