進級制作展を振り返って
- 2023.01.02 Mon
BASEのHTML編集をする時、さあやるぞとコードに向かいます。
すると、こんな画面になります。
なんじゃこりゃ、もうこんなに書いてある。。ここから触っていくの無理じゃ、、、。
ということで、今回は、HTML編集をするときに、私は「何からはじめたのか」をまとめました。
目次
どこに何が書いてあるのか理解するためにコメントを書く
BASEには、WordPressのように { テンプレートタグ } が存在します。
このテンプレートタグは何を示しているのかをサイトを見ながら、コメントを追加していきます。
こんな感じで、この <!—緑のところ—> を書いていきます。
「section」や「div」などのカタマリは、どの部分を囲っているのか、コメントに書いていきます。
プレビューボタンを押して、プレビュー画面を開き、ディベロッパーツールを見ながら、確認していきます。
新しく追加したものにもコメントを付ける
新しく自分で書き込んだものがあればそれもコメントに書いておきます。
コメントに書いておくことで、ディベロッパーツールで見たときにわかりやすいし、どこのクラス名が作用しているのかすぐに分かるからです。
デフォルトのHTMLコードを書き換えるときは、コメントアウトする。絶対に消さない！
「このコードいらないな」と思ったら、そのコードは絶対に消さずに、コメントアウトさせます。
そのコードが後に必要となるかもしれないし、テンプレートタグが含まれていて消してはいけないコードなのかもしれません。
私はいつでも復元できるように、消さずにコメントアウトしてます。
デフォルトのCSSコードを書き換える時は、上書きする。絶対に消さない！
「このCSSいらないな」と思ったら、自分で新しくstyleタグを作り、そこに上書きします。
このようにディベロッパーツールで確認して、そこのセレクタにCSSを上書きします。
display:flexをやめたり、borderを消したり、余分なmarginやpaddingを消すときに使いました。
まとめ
まとめると…
★何について書いてあるのか、コメントを書き込む。
★新しく自分で追加したコードの最初にコメントを付ける。
★デフォルトのHTMLコードがいらないときは、消さずにコメントアウトする。
★デフォルトのCSSコードがいらないときは、消さずに上書きする。
です！
自分がわかりやすく、変更しやすく、復元しやすいコードを意識して書いています！
カスタマイズ成功させるように頑張ります！！
