フロントエンドエンジニアを目指している、まゆ（@Ymayu_it）です。
知人の既存ページを編集してほしいと依頼されました！
※音楽付きのため開く際はご注意を。
編集する内容は主に
- テキスト
- ページ内容の変更
- フォント変更や中央揃えなどのcss
です。
ただ他にもみると
- http→https
- レスポンシブ対応
もあったので対応していこうと思います。
既存ページを編集することやjQuery使用、音楽付きなどはじめての部分が多いので、頭の整理のために残しておこうと思います。
既存ページの現状
ノンケミカルでオーガニックヘナを使った美容院です。
jQuery
多くの場合</body>の直前に<script>を書くと良いと本などで説明がありましたが、head内に記載されていました。
メモ
</body>直前に書く良い理由：ページ高速化につながるため。
コードは上から読み込まれるという特徴があるので流れとして、
- ページ描写が終わって
- JavaScriptを読み込む
ことからページ速度が改善するので</body>直前が良いと言われている。
head内に組み込むものは一連の処理をまとめたプログラムだと記載が独学JavaScriptにありました。
一連の処理をまとめたプログラムというものがイマイチ理解ができないので調べます。
「関数（Chapter 4）を呼び出すための<script>要素よりも、関数定義の<script>要素を先に記述していなければならない」というルールがある
引用：JavaScript本格入門
これでも理解ができなかったので、JavaScriptを書く場所や読み込む場所はどこがいいのか？などの記事を複数読みました。
JavaScriptを書く場所や読み込む場所はどこがいいのか？から処理や内容、状況に応じて<head>内か</body>直前かを決めると良いとあったので、画像の切り替え用に使われていたので</body>直前に一旦して見たいと思います。
どちらの方が早いかはスピード測定で判断し、見た目の様子も実際にやってみてから決めようと思います。
| モバイル | パソコン | |
| </body>直前 | 64点 | 74点 |
| <head内> | 70点 | 97点 |
Googleのpagespeedで試すと上記のような結果が出て明らかに<head内>の方が早かったので、<head>内に記述する方が良いことがわかりました！
見た目も大差ないので<head>内が最適なんだということがわかりました。
liの黒丸が消えない
自作だとだいたい、
css
list-style:none;
で消えるのですが消えなかったので、
css
list-style-image:none;
list-style-type:none;
をしても消えませんでした。。
cssは読み込まれていることやセレクタをulにし優先度をあげたことも試み、display:black;でも駄目でした。。。
人のcssってこんなに悩ましいのね…でも大切な人のHPだから頑張って探す^^!
cssで他の指定が関係しているのかも？
探したらあったーーーーーーー！
css
main ul li:before {
content: "・";
こんなやつが潜んでた…長かったけどlist-style:none;には強くなった気がする！
今日すすんだところ
テキストやレイアウトなどが一旦終わったので、知人にレイアウトの相違がないか確認してもらっているところです。
まだ済んでいないのは、
- レスポンシブ対応
- 両端にあった茶色の部分が消えたので探す
- https
これを明日やっていけたらいいなと思っています！
（JavaScriptは突かなかったな…）
おわりに
はじめて他の方が作成したコードをつついて編集しています。
とてもわかりやすくコメントが書かれていたり、コンパクトにまとめられている部分があったので綺麗なコードを大切さを改めて実感しました。
何がどこにあるのかが分からないことがネックなので、一度cssをよくよく観察しておくことが大切なんだろうな…
もりけん塾（@terrace_tech）
Thanks：もりけんさん