最近CSS設計という言葉の存在を知りました。その程度の人が多少時短ができるようにちょいちょい工夫してhtmlとcssを使ってトップページを作ったようです。その日記です。
日記を書く上で、ゴリ押しでhtmlとcssを使ってた半年前の自分が知らなかったことかつ今回意識したことを記録することにしました。成長してることは記録しておきたい。
というわけで言われなきゃ気付かんかったわ！（個人的に）みたいなことも書いておきます。
はじまり
もにゃついてたこと一覧
- 味気ないabout（表とか作りたかったけど断念してた）
- デスクトップにしたときかなり見にくいtop
- 絵文字使いたいけど面倒
- 押し心地のいいボタンを作りたい！！！
これらを解決するにはもうindex.htmlで作るっきゃねえな…！ということで着手することにしました。wordpressのトップページを自作のindex.htmlにする方法はこちらを参考に。
テンプレ探しの旅
ド定番ですがきみにきめた。
その理由としては一度触って撤退したことがあって、いまこれ使ったらどうなるんだろう…と思ったからです。
html5upはcssの記述が4000行くらいあって多機能すぎて扱えなかったのですが、今回は下記のことを意識してたら完成しました。やったぜ。
以下気をつけたこと。
htmlを組んでからcssを弄る
当たり前なんですが意外とできてなかったのでとりわけ意識してました。
エディタのコメントアウトのショートカットを覚える
サイト作ってて個人的に一番使うショトカです。vscodeだとctrl+/。コメントアウト解除も同じ。あとはコピペの履歴を遡るのも結構使った。
カスタマイズ用のcssファイルを作る
具体的に言うと「customstyle.cssファイルを作ってmain.cssの後に読み込ませるようにする」です。
customstyle.cssに検証画面（下記参照）で作った記述をバンバンコピペしていきます。4000行もあると該当箇所を探すのも面倒だし大変なので。
cssの記述の影響をリアルタイムに見るために検証画面を使う
Q.逆に半年前まで使ってなかったんですか？
A.はい…
記述を加えたら画面上で即反映してくれて、これでいいやと思ったらcustomstyle.cssにそのままコピペできるのが有能。
確認はリロードで
cssファイルを上書き保存→確認のためにindex.htmlをわざわざ一回閉じて開く必要もなく、ただ単に再度読み込みボタンなりリロードショトカなりで反映されたページが確認できるってみなさんいつ気付くんでしょうか。そもそも最初からできているんでしょうか。
独学ゴリ押しの典型弊害でした。
vscodeは画面分割ができるのでフォルダで開くとよい
ついでに半年前の自分はいちいちファイルごとに開いてたというのを思い出した。フォルダで開いてから画面分割した編集画面で弄っていくと当たり前ですが早い！
ボタンをつくろう
使ったのはもちろんdoさんの「いいねボタン改」。
そして押し心地のいいボタンのデザインとは…とふらふら探しました。
参考にしたのがこちら。いくつかのボタンはscssでデザインされてるんですが、scssはcssに変換できます。vscodeの拡張機能でもできるらしい。
エフェクトはparty.jsです。先人がめちゃめちゃいたのでjsミリしかわからん状態でも実装できました。
あとはボタン中央の星がどうして回ってるかというと、fontawesomeの動く絵文字を使ったからです。
結果できたボタンは個人的な理想を超えた出来になってしまいました。わお。
今のところ波箱と役割被ってますが、ゆくゆくは自サイトで完結できるようにしたいねとは思ってます。
なのでメッセージボックスも作ることにしました。
フォームをつくろう
使ったのはもちろんdoさんの「コイブミ」。
あまりにも設置が簡単だったのでなにも書くことがない。
余談。このツールを使って何が嬉しいかというと、今までに色々なところでもらったコメントを入れられるところです。データはcsvファイルで管理されているので、日付ももらった場所もたぶん記録できる（まだ試してない）。
そして管理画面で一覧表示にしてにこにこできるというわけです。完璧な計画。
何回書いたか思い出せませんが、doさんに足を向けて寝られない。ありがとうございます。
結果できたやつ
PageSpeed Insightsでパフォーマンスは76点くらいでした。デザイン重視でごまかしごまかし作ったわりには合格点（50点）とデジタル庁のスコア（69点）は超えててよかったです。
ちなみにAnother HTML-lint 5 でのスコアは-33点。デジタル庁のサイトのスコアは-40点なのでまあちょっと嬉しかったり（ツールが古いからだとは思う）。
作り終わった所感
荒っぽい作りのところも多々ある（し一部はまた直したい）んですが、そのほうが創造力が刺激されるのはSkyから学んでるので完璧な作り込みは今後に期待です。
メニューとか誘導がわかりにくい気がしますが、個人サイトとか隠れ家とか秘密基地ってそういうものだしなということで。そっちも今後に期待です。
