こんにちは、タケシです。
おとといから３日かけて挑んでいたはじめてのWeb制作が終わりましたー！
課題はTwitterで発見した、ちづみさんのnoteの模写コーディング。
⭐️Progateのhtml、cssがおわった方へ
Progateのhtml、cssがおわった方へ｜ちづみ @098ra0209｜note（ノート） https://t.co/wy39wheUXM
— ちづみ🇰🇭ノマド女子 (@098ra0209) 2018年9月13日
無事完成したのがこちら。
めっちゃかわいくないですか？？？
ぼくは模写しただけなので、もとのデザインがカワイイだけなんですけどね(笑)
なにはともあれ、一人でゼロからコーディングをする経験ができました。
心地いい達成感とともに、反省点や見えてきた課題もあって。
そこでこの記事では、
- つまずきポイント
- 反省点
- これからの課題
について振り返っていきます。
はじめてのWeb制作のつまずきポイント
Sassの導入の注意｜ブラウザは.scssを認識できない
はじめに.cssをきれいに書くために、Sass記法を取り入れようと思いました。
ここで注意点なのが、ブラウザは.scssファイルを認識できないこと。
だから作業する時は.scssファイルにコードを書いて、それを.cssファイルに変換して、HTMLに読み込ませてあげる必要がある。
でも、毎回.scssを.cssに変換なんてしてられない。
そこで、自動で変換してくれるGUIアプリケーション『Koala』を導入しました。
Koalaで.scssを.cssに変換させてあげることで、ブラウザがバッチリ認識してくれるようになります。
変なスペースがあるならデフォルトの設定をうたがえ
サイト制作を進めていく過程で、自分が設定していないpaddingやmarginがあることに気づきました。
こういう時は、chromeの検証機能を使って原因を特定しましょう。
画像のオレンジの部分が、自分で設定していない謎のmargin。
検証機能をつかって、該当箇所を見に行くと、『user agent stylesheet』という.cssファイルの影響を受けているようです。
これはブラウザとかによってデフォルトで設定されているCSSで、自分が設定していなくても、自動的に読み込まれてしまうようです。
リセットCSSというものを使うと解決できました。
リセットCSSとは、デフォルトのCSSの影響を打ち消すようなCSSが書かれたファイルです。
マージンの相殺はpaddingで解決だ
途中マージンの相殺につまずきました。
目標物 CAT1の上下がゆったり
現状 CAT1の上のマージンが消えている
上の画像のように、ぼくのコードでは、上のセクションのpタグの最後のマージンと、CAT1のh2タグ上のマージンで相殺がおきています。
マージンの相殺は、paddingではおきないので、CAT1のh2タグが入っているセクションにpadding-topを設定してあげることで解決できました。
ちなみに、マージンの相殺の説明はこちらのサイトがわかりやすかった！
参考：ほんっとにはじめてのHTML5とCSS3：【11-4】marginの相殺
反省点｜もっと賢く効率よく
準備に時間をかけすぎ｜必要な時に必要なものを
反省点その１は、準備に時間をかけすぎたこと。
今回の例だと、はじめに「使うかな？」と思ってBootstrapを読み込ませました。
結局使いませんでした。
それどころか、Bootstrapのmarginの設定とかが干渉してきたケースもあったので、のちのちBootstrapを削除しました。
Bootstrapの下調べにも時間がかかったし、結局使わなかったしで時間の無駄でした。
使う時に必要なものをインストールすることが無駄をなくすコツ。
Bootstrapはぜひ使ってみたいので、次のWeb制作で使います。
chromeの検証機能をフル活用するべきだった
さきほども登場しましたが、chromeの検証機能はホントに便利。
この便利さに気づいたのは、このサイトを模写し始めた中盤〜後半でした。
それまでは、こんなサイクルでした。
- なんかデザインズレがある
- HTML,CSSをちょこちょこ直す
- ブラウザで確認
- まだ直っていないときはまたHTML,CSS修正
- （繰り返し）
でもこれだと、原因がわかっていないのにあれこれ試している状態なんです。
それよりも検証機能を使えば、原因をダイレクトに特定可能。
- デザインのズレを発見
- chromeの検証機能で原因特定
- HTML,CSSを修正
- ブラウザで確認
- 無事解決
圧倒的にこっちの方が効率的。
もっと早くから気づくべきだったー！
これから使い倒すぞ！
これからチャレンジしたい課題点
今回のWeb制作で見えた、次にチャレンジしたい課題点はこちら。
- レスポンシブデザイン
- jQueryでサイトに動きをつける
- Bootstrapを使ってみたい
- flexboxを勉強したい(今回全部floatで書いた)
- Sass使いこなしたい(変数、mixinとか)
今回はHTMLとCSS(Sass)というシンプルな作りでした。
次はBootstrapを使って楽にオシャレにコーディングしてみたいし、jQueryで動きをつけてみたい。
また、flexboxを使いこなせるようになりたい！
今回横並びのデザインはすべてfloatで書いたので、いたるところにfloatを解除する(?)コードが入っているので汚いんです。
まとめ｜これからもがんばる
今回のWeb制作無事に最後までできてよかった！
簡単つくりだけど、最初から最後まで自分でできたのってホントに達成感があって気持ちがいい。
あと超自信がつく。
これからあと１つか２つ模写コーディングを終えたら、クラウドワークスでお仕事取りに行きます。
プログラミングではまだお金を稼いだことがないので、早く稼いでみたい！
コメントを残す