1
/
5

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

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

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

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

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

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

KICKS Web
見た目が美しいだけのWebサイトならたくさんあります。でも...... そのサイトは 使いやすいですか? 誰かの 役に立っていますか? 伝えたいことがちゃんと 伝わっていますか? 期待する効果を 得られていますか? KICKS Webは、お客さまの「Webサイトを持つ理由」を明確にし、目的に近づくためのお手伝いをします。 そろそろ、キレイなだけのWebサイトから卒業しませんか? ...
https://www.kicks-web.com/

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

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

千貫りこのHTML/CSS中級講座 | 東京・原宿のWeb制作の学校 ロクナナワークショップ
正しいHTMLを記述し、複雑なレイアウトを実現するためのCSSを習得します。またトラブルの対処方法や、CSSファイルの管理方法など、実践的なテクニックを学びます。
https://67.org/ws/workshop/detail/077css.html

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

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

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

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

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

【初心者向け】ここから始める「Sass」の使い方まとめ
CSSの記述を効率化し、メンテナンス性も向上するSassの導入から基本的な使い方までまとめました。 対象の方は下記のとおりです。 Sassで書きたいけどコンパイルがよく分からない Sassをコンパイルできるようになったけど、書き方が分からない CSSはある程度理解できたので次のステップに進みたい ...
https://webdesign-trends.net/entry/9323

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

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

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

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

全体を通して

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

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

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


21新卒Webエンジニア
21新卒:10年先、20年先も現場で輝き続けるエンジニアへ!
【デジタルのチカラで社会問題への解決に取り組んでいます】 私たちは「“MEMBERSHIP”で、心豊かな社会を創る」というミッションを掲げています。日本中のクリエイターの力で、気候変動・人口減少を中心とした社会課題解決へ貢献し、持続可能な社会への変革をリードします。 【DX現場支援で社会を変革するデジタルクリエイター集団】 メンバーズではインターネットテクノロジーに精通し、新たな価値を創造するデザイナーやエンジニア、ディレクター、プランナー、プロデューサーなどのデジタルクリエイターが活躍しています。 彼らが活躍する現場の多くが、メンバーズの取引先である大手上場企業。名前を聞けば誰もが知っているような企業のDX推進現場の最前線で、スキルや専門性を活かしてクライアントの支援をしています。 企業の支援を通じて、クライアントとともに社会課題を解決していくことを目指しています。
株式会社メンバーズ
Webディレクター
チームを牽引し、UXを高めていくWebディレクター募集!
【デジタルのチカラで社会問題への解決に取り組んでいます】 私たちは「“MEMBERSHIP”で、心豊かな社会を創る」というミッションを掲げています。日本中のクリエイターの力で、気候変動・人口減少を中心とした社会課題解決へ貢献し、持続可能な社会への変革をリードします。 【DX現場支援で社会を変革するデジタルクリエイター集団】 メンバーズではインターネットテクノロジーに精通し、新たな価値を創造するデザイナーやエンジニア、ディレクター、プランナー、プロデューサーなどのデジタルクリエイターが活躍しています。 彼らが活躍する現場の多くが、メンバーズの取引先である大手上場企業。名前を聞けば誰もが知っているような企業のDX推進現場の最前線で、スキルや専門性を活かしてクライアントの支援をしています。 企業の支援を通じて、クライアントとともに社会課題を解決していくことを目指しています。
株式会社メンバーズ
Webデザイナー・コーダー
クライアントの成果向上に貢献したいWebデザイナーWanted!
【デジタルのチカラで社会問題への解決に取り組んでいます】 私たちは「“MEMBERSHIP”で、心豊かな社会を創る」というミッションを掲げています。日本中のクリエイターの力で、気候変動・人口減少を中心とした社会課題解決へ貢献し、持続可能な社会への変革をリードします。 【DX現場支援で社会を変革するデジタルクリエイター集団】 メンバーズではインターネットテクノロジーに精通し、新たな価値を創造するデザイナーやエンジニア、ディレクター、プランナー、プロデューサーなどのデジタルクリエイターが活躍しています。 彼らが活躍する現場の多くが、メンバーズの取引先である大手上場企業。名前を聞けば誰もが知っているような企業のDX推進現場の最前線で、スキルや専門性を活かしてクライアントの支援をしています。 企業の支援を通じて、クライアントとともに社会課題を解決していくことを目指しています。
株式会社メンバーズ
Invitation from 株式会社メンバーズ
If this story triggered your interest, have a chat with the team?
株式会社メンバーズ's job postings
7 Likes
7 Likes

Weekly ranking

Show other rankings
Like 岩本萌's Story
Let 岩本萌's company know you're interested in their content