出張ロクナナ！千貫りこさんのHTML/CSS中級講座に参加しました。

みなさんこんにちは。メンバーズキャリア　19新卒デザイナーの岩本です。

メンバーズキャリアでは研修が盛んで、私もクリエイターとしてのスキルを磨きたくて、日々スキルアップに取り組んでいます。

今回は、出張ロクナナワークショップの講師として、メンバーズのスキルフェローでもある千貫りこさんにお越しいただき、HTML/CSS中級講座が開催されたので、前回開催された初級講座に続いて参加してきました。

多少の基礎は学んでいますがもともと私はコーディングが得意ではありません。直近常駐していた所でもCMSを使ってページを作成しており、実際にコーディングをすることがあまりありませんでした。 このままではいけない！と思いワークショップに参加してみたのですが、改めて基礎部分の復習ができ(案の定というか・・笑)自分では「できているつもり」になっていた部分が多く見つかって、凄く有意義な時間となりました！

千貫りこさんは、インターネット黎明期の1996年からWebサイト制作に従事しており、現在フリーランスとして大活躍されていらっしゃいます！

初級編では、HTML,CSSの基礎をもとにサイトのコーディングを行っていますが、中級はそれに加えてSassについても学びます。

いろいろな内容の学びがありましたが、その中でも気になった点を何点かピックアップして紹介します。もっと詳しく知りたい方はぜひロクナナワークショップに参加してください！

ワークショップで気になったポイント

『HTML編』altの代替テキストについて
,画像見たときに得られる情報と同じ情報を代替テキスト(alt)に入れるそうです。
(alt="ショートケーキを食べる女性"など)
ただし画像近くにキャプション等が記載されてる場合は空っぽでも良いそうです。コーディングをするときにアクセシビリティまであまり気をつけたことがなかったので、改めて認識することができました。

『CSS編』セレクタ・優先度について
・CSSのセレクタは3種あり、ID、class、タイプと分かれています。これらは優先度の強弱があり、IDが最も強くタイプが弱い。タイプセレクタで指定したプロパティよりIDセレクタで指定したプロパティが優先されます。
ただ、組み合わせによっては優先度が変動するそうです。
優先度はセレクタの足し算（組み合わせ）で、詳細度の合計点数の高いプロパティが優先されるとのこと。

プロパティの優先度があることは知っていても、それが加点の点数方式であることはわかっていませんでした。セレクタの使い分けに関しても、なんとなく使い分けていました。。

『Sass編』Sassのメリットについて
中級編では、CSSに加えて、Sassも学びました。

Sassは「Syntactically Awesome StyleSheet」の略です。 Awasomeという「すごい」スタイルシートだそうです！ さらにSassはCSSをさらに拡張して、より効率的に書けるようにしたメタ言語とのこと。メリットとしては、

・効率的にコーディングできる（同じプロパティを何度も書く必要がなくなる）
・管理データと出力データが分離できる(各CSSに記述して読み込むとHTMLが重くなるため、管理データScssに記述してからCSSにまとめて読み込む)
・出力スタイルを設定できる（nasted,expanded,compact,sompressedと選べる。）

という良いことがたくさんあります。その代わり、ネストや変数、コンパイルという概念を覚える必要があるので、使いこなせるようがんばります。

『実践編』コーディングの際の注意点について
位置を指定する時、positionプロパティは便利だが、中身の要素が変化（テキストが増減する等）する物の場合は避けるべきだそうです。Webは紙と異なり、文章が増減することが当たり前なので、その点も注意しないといけないということを改めて気づくことができました。

全体を通して

普段コーディングするうえではメンテナンス性に気を付けて、後からコードをいじる人にわかりやすくなるよう意識をしていて、画面を見ずともHTMLだけで内容が伝わるか、書き終わった後にソースコードを精査するようにしてはいました。

この研修を受けたことによって、HTMLでの適切なタグの使い方を意識するようになりました。

今までは特に構造等も考えず、divやspanを乱用して乗り切っていた部分が非常に多かったです。
適切なタグを使用してコーディングをすることを心がけるようになったので、無意味なタグの乱用がなくなりました！
今回のワークショップでは、自覚できていないところに関して非常に詳しく説明していただき、基本からあらためて理解することができました。
知らずに居ても過ごすことはできますが、知っていればより効率よくコーディングできる知識を得られ、非常に有意義なワークショップでした！これからの業務にぜひ生かしていきたいです。