- 『けっきょく、よはく。』で有名なingectar-eさんが制作したFullmeの体験記です。
- Web Design 初級コースの Lesson 8-9 のまとめ！
こんにちは、涼太郎です。
この記事は、デザイン書籍『けっきょく、よはく。』でお馴染みのingectar-eさんが提供するFullme Web Design セットコースの体験記録です。
今回は、初級コース Lesson 8-9の範囲で僕が学んだことのまとめをしていきます。
Fullmeに興味があってこれから挑戦してみようと思っている方でもネタバレにならずに楽しんでもらえるように、かつ僕自身の振り返りに役立つような内容にしていきたいと思いますので、ぜひ最後までお付き合いくださいね。
Lesson 8 HTML / Lesson 9 CSS
Fullme Web Designコースの第8回目は「HTML」そして第9回目は「CSS」がテーマです。
Webとは何か、HTML/CSSとは何かを丁寧に解説してくれて、実際に静的なWebページをコーディングの手引きをしてくれます。手を動かしてコードを書きながら完成していくWebページを見ることで、実感が得られるレッスンになっています！
このレッスンから学んだこと
職業柄このあたりの知識はだいたいカバーできていました。
そんな中でも、ヘぇ〜と思ったことや自分なりの考えたことがあったので記録としてまとめておこうと思います。
テキストエディタについて
レッスンの中では「Brackets」というAdobeが提供しているテキストエディターを紹介していました。
ただ、このBracketsは2021年の9月1日にサポートを終了しているみたいです。
僕はレッスンに従ってインストールして使ってみましたが、使い慣れていないからなのかちょっと合わない感じがしました。
代わりにAdobeが移行を推奨する「Visual Studio Code」の方がいいと思います。もし参考になる方がいれば、よかったらこっちを試してみてください。
Visual Studio Codeをインストールするとはじめは英語表記で、日本語にするための拡張機能を追加するとよいです。
⇧⌘Xを押して拡張機能メニューが開きます。
Microsoftが提供している「Japanese Language Pack for VS Code」というパッケージをインストールします。
日本語化、完了です！
Google Fontsについて
WebサイトでGoogle Fontsを使うときは、Google Fonts内の「Use on the web」のところにある<link>タグをhtmlのheadに記載してCSSで指定するだけでいいんですね。便利だなぁ。
僕はMorisawa Fontsの契約をしていますけど、Webで使うには別のTypeSquareを契約しなきゃいけないみたいだから、Webページ内でフォントを使いたい時はGoogle Fontsの方にお世話になることになりそうだなと思いました。
リセットCSSについて
リセットCSSの存在をはじめて知りました。
ブラウザごとにデフォルトのCSSが適用されていて、それを一旦なくすためのものなんですね。
たしかにリセットCSSを有効にしてみるとただの文字がズラズラと並ぶだけの表示になって面白かったです。
これによって、ブラウザによらずに完全にデザイナーが意図したとおりの装飾になるってことなんですね。
Webデザインを学びたいなら、Fullmeしよう。
今回は自主課題が無いのでこんなところで。
デザイナー目線だけでなく、コーダーが何をやっているかを知ることもWebサイトというひとつの作品を作るために必要なコミュニケーションの架け橋になることですから大切なレッスンだと思いました！
次回からは楽しみにしていたバナー作成だ！🕊️ワクワク！
ここまで読んでくださったあなたもFullme体験しませんか？
こちらの書籍がおすすめ。
