さて、9月に「初級EX」を提出してから、すっかり間が空いてしまいましたが、重い腰をあげて、やっと「中級」に取り掛かりました。
CSS設計（BEM記法）や、アニメーションの実装など、心配なことは多々ありますが、とにかく手を動かして、作りながら学ぼうと思います。
Swiperとはンバーガーメニューに関しては、portfolioと夫のHPに実装してみてうまくいったので、何とかなるかな？！
Sassの環境構築
しょーごさんがブログや動画でおすすめされていた「Sassの教科書」を読んで、Sassについて勉強したのですが、さっそく環境構築でエラーが出まくりで、挫折しました・・・。
Twitterでつぶやいてヘルプを求めたところ、やはり「書籍の内容が古くてエラーが出た」という方の意見を参考に、結局「のせっちさんのnote」を購入。なんとかエラーは出ずに、Sassを使う環境は整いました。
のせっちさんのnote: https://note.com/yukinouz1/n/n6fd6b6a544b3
のせっちさんのnoteは、「いきなり回答を見てDL、コピペOK!」とか、「一緒に手を動かしながら、詳しく学びたい人向け解説」など、３パターンの人向けに書いてあるのですが、ちょっと、どこからどこが詳しい解説なのか、どこがコピペして使うものなのかが、初心者には分かりにくかったです。
色々な人のSassの環境構築の動画を見たり、ブログを見たりして、なんとか理解できましたが、そもそもSassのセットアップには、
①テキストエディター（私はVSCode)
②テキストエディターで編集する元のファイル/フォルダ（私の場合はMacなので、Finderの書類のところに保存しています）③ターミナル（Macの場合はLaunchpadの検索窓で、ターミナルと検索すると見つかる）
この3つを開いて、ターミナルで移動するのは②の元ファイルのところで、ターミナルで何かをダウンロードしたりすると、①のテキストエディターのところにそれが表示される（例えばpackage.jasonとか）ということすら最初分からず、、混乱。超初心者向けに、そのあたりから解説してくれている動画があれば助かるのになーと思いました。
しょーごさんの課題に取り掛かる前に、夫のHPにまず環境構築してみました。エラーが出ずに必要なファイルを入れることができたので、一安心。
HTML設計と、headタグの記述
環境が整ったところで、まずはGoogle Chrome拡張機能の「GoFullPage」でしょーごさん中級課題の全体のスクショを撮り、印刷して、それに手書きでHTMLを書き込みました。
実は、数週間前にすでにそれをやっていたのですが、その後に「CSS設計完全ガイド」でBEMを勉強したので、もう一度書き直しました。正直言って、BEMは難しすぎて頭に入っていませんが、少しずつ取り入れて行きたいと思います。
手書きで大体の設計ができたので、のせっちさんのnoteを見ながら、夫のHPにやってみたのと同じ手順で課題用ファイルにSass環境を作り、まずはHTMLからようやく書き始めました。
久しぶりに書いたHTML！！
色々と忘れていますが、ここで疑問が、、、HTMLで読み込むスタイルシートは、style.scssなのか、style.cssなのか？
調べてみると、コンパイルが必要ということは、そもそもhtmlからもstyle.scssは読み込めないので、あくまでも読み込むのは、コンパイルが終わった後の、style.cssファイルであるということが分かりました。
参考にしたのはこちらのteratailの記事→ https://teratail.com/questions/497lydlr1shxaj
同じことを質問してくれている人がいると助かりますね！
そしてここでもう一点疑問が。
「リセットCSS」を、今まで適当にどっかからコピーして来て使っていたのですが、これももしかしたら、ちゃんと何かを基準に選ばないといけないのではないか？と思い始めました。
「CSS設計完全ガイド」のP212にリセットCSSについて触れられているのですが、ここで登場するcss.wipeというのが良いようですが、githubから取得できる？？ようで、、gitとgithubも途中で挫折している私にはちょっと手を出しずらかったので、また今度調べて見ようとおもいます。弱気。。。
コーディングの準備
さて、環境も整ったところで、いざスタート！
まずは、しょーごさんのnoteを開いて、カンプをGetするところからです。
しょーごさんは、ダウンロード版とURL版の2種類のカンプを提供してくれていますが、私はAdobeを持っていないので、URL版からダウンロードしました。
カンプをGetしたら、画像をダウンロードして、自分のフォルダに保存します。やり方をすっかり忘れていたので、再度こちらのしょーごさんのブログを参考にしました。
保存する画像の形式についてですが、先日たまたま見た、こちらの「Webの神様」の動画も参考になりました。
HTMLのコーディング
しばらく学習でのインプットが続いたこともあって、HTMLの記述で忘れている部分が多かったです・・（汗）
google fontのリンク –> やり方を忘れていたので、検索してheadタグとcssの中に記述
リセットCSS –>今まで何気なく使っていた、どっかからコピーしてきたリセットCSSで良いのか疑問に思う。
初めてのSassの記述 –>とりあえず、scssのファイルには、普通にcssも書けるらしいので、書いてみて、コンパイル。成功！したのは良いけど、これって毎回記述するたびにコンパイル更新しないといけないの？面倒くさくない？？？！
BEMのクラス名の付け方 –>やはり途中で迷う・・。どれがブロックでどれがエレメント？タグはどれを使うべき？？やはりところどころで迷いが生じます。
などなど、書きながら色々疑問が湧いて来たりして・・・寄り道しながら進めました。
HTMLは半分くらい書けたかな？残りは明日へ持ち越しです。
「中級」の納品目標は、年内提出！
「中級」も、「初級EX」と同様、3日で納品できれば実務レベルとのことですが、前回、初級の納品は結局１ヶ月ほどかかってしまいました・・・。知らないことが多すぎて、進めながら全てが勉強だったからですね。
今回も同じことになりそうですが、、、とりあえずBEMとSassをここで取り入れてみて、途中で無理そうなら、Sassは諦めて普通にCSSで書こうかな・・。ということで、やっと「中級」にとりかかりましたので、進捗を報告しながら、進めて行きたいと思います！
目標は、年内提出！
すっきりして年越しできますように〜。
コメント