HTML&CSSをつくる自分なりの手順

Webのフロントエンドエンジニアをしています。ばばです。

ある日、同僚に「ばばさん作業はやいっすよね」と言われました。

・・・・・？・・・いや？？？☺️

前工程の理解で脳みそ溶けそうになるし、
資料作成もすごい時間かかっちゃうし、
js書きだすと減速著しいし、
バグで1日2日平気で溶かすし、
めちゃくちゃ得意なことも特にないし、、、

なんとなく思い当たるのが、
HTML〜CSSを作るときの「手を動かしている時間」は短いかもしれない🤔

ということで、ちょっとその時の工程(マインド)をかいてみます！！
ページ(サイト)を作る想定で書いていきますが、割とどのタスクでも当てはまる気がします。

とりあえず全体把握👀

成果物、ゴールのイメージをもつ。
案件や作業内容にも寄るのですが、以下はしっかり正としてもっておく!!
※実際には他にも色々必要ですが、ざっくり「コーディング」だけの範囲です

• サイトマップ
• ページデザイン・構成がわかるもの
• 誰にOKもらうのか(社内外)？完了までのフローは？

上の素材をかき集めたら、とにかく見る。特にデザイン眺めてる時間長いです。

じっっっ・・・👀

とりあえず、全部みて、「資料があるから」ではなく「資料を自分の中にインプットする」感覚です。
資料はあくまで脳内の確認用。

細分化🍖

めちゃくちゃみてると、
ページがセクションに、セクションがブロックに、ブロックの中にブロックが・・・
みたいな感じでパーツを細かくしていけます。
h2とかの見出しは整理のトリガーになります。

余談

書いてて思い出したのですが、1年目のわたしは
①デザイン印刷して、自分でブロックごとに線入れる
②大枠ごと + ブロックの順番は左上から、順番に番号振ってく
と言う感じで紙にブロック並べてたので、今も脳内でこれをしているのかも😂

まとめる🎀

細かくしたパーツをまとめていきます。
この段階は「まとめる」といいつつ、スタイルの「細分化」も意識する必要があります。

• どこが同じ構成か？
• どこが同じデザインか？
• どこが同じ色、フォントウェイト、角丸、幅、など、、、なのか？
• デザインにない状態や動きの想定をする
  • ホバー
  • 開閉
  • 個数・分量・画像比率などの変化はあるか
  • カテゴリーごとに色や装飾が変わるか
  • アニメーションがつくか？どうつくか？

全然まとめることができない時や、まとめれそうなのに違う時はデザイナーさんに相談。

わたしは、普段開発は、pug + scss をよく使うので、それぞれを小分けにして、mixinにしたり、ファイル別けておきます。
色やサイズの変数はここで作っちゃう。

どの単位でまとめる/わけるの？！

これが説明難しいのですが、個人的には「ページ」「ブロック」「パーツ」の分け方を意識しています。
scssは、
ページ > ブロック > パーツ
の順で優先度を意識してスタイルがつくようにしています。
(js書いてる時いまだにクラスに分けたりが手探りです；；)

HTML手でかきながらcss頭で書く🤯

これだけいうと意味わからないですが、だいじょうぶ、だいじょうぶ。笑

ここまできてやっとページ作ります！！
といっても、「細分化」「まとめる」の工程で、HTMLとCSSはもう決まったようなもんなので、
それを文字起こししていくイメージです。

細分化したメモをHTMLにかく

とりあえず日本語でブロックごととかに書いておきます。(ソースはpugですがHTMLでも同様)
見やすさのためセクション、ブロックくらいまでで書きますが、自分の中で整理したいとこはできるだけ細かく書きます。
命名に困ったときに書いたメモの英訳で命名しちゃうこともできるので、考えること減っておすすめ。
jsは後回しにするので、TODOでメモ入れておきます。

//- header
  //- TODO:追従する
  //- TODO:開閉する

//- コンテンツ
  //- メインビジュアル
    //- TODO:させるアニメーション
    //- 背景の動画
    //- タイトル
    //- アニメーション用の色面
    
  //- ページないリンク
    //- TODO:スムーススクロール
  
  //- セクション1
    //- できるだけ細分化・・・以下略
  //- セクション2
    //- セクション1と同じデザイン
  //- 関連リンク
//- footer

HTMLを書いていく

ブロックごとに分けたものをHTMLで書いていくのですが、
このとき、意識としては、かなりCSS寄りの部分を意識しています。
HTML自体は「細分化」のブロックをとりあえず並べていく。

• 「レイアウト」「装飾/アニメーション」はDOMをwrapするなどして別にしておく。(flexとかtable、absoluteは特に)
• 機能(js)のトリガーになるDOMはクラスを当てる。できればwrapするなどして別のDOMにしておく。
• aタグ、buttonタグなどの範囲に気をつける
• アイテムの前後関係(レイヤー)を意識して配置する。
  z-indexで無理やり前後を入れ替えることもできるが、バグにもなりやすいので自然な並びにする。
• ダミーでいいから画像を入れる
• 原稿がFIXしているなら入れていく
• 原稿の量/画像のサイズや比率、リストの個数が変わる要素かどうか意識する

pugコピーしてscssかく🐶

HTMLをpugでかいているので、こんな感じでブロック単位でコピーして

.c-mediaText
  .c-mediaText-inner
    .wrap-img
      img(src="" alt="")
    .wrap-txt
      p.txt ほげほげ

scss(sassでもstylusでも)のファイルにコピペして、置換などで {} をつけて、こんなかんじ。

.c-mediaText {
  .c-mediaText-inner {
    .wrap-img {
      img {}
    }
    .wrap-txt {
      p.txt {}
    }
  }
}

この中にスタイルを当てていきます。
スタイル当て忘れとかがなくなるのと、綴りミスもなくなります。
scssのmixinでよく使うスタイルのセットなどは持っておくと便利。

あと、わたしは「とにかく見る」の工程が長いので、
ローカルなどでも「ページ反映の確認」はブロックごとにしています。
文字の大きさ変えて、確認して、色変えて、確認して、、、っていうのがいやで🙅‍♀️
時間かかるしデザインと見比べても同じ状態ではないし、修正した差分が微妙。。
ブロックごとに思いつくスタイル当てきって、確認して、違うとこだけ直す。
精度やクオリティという意味では、あとでページチェックをしっかりすれば良い。

ざっくり完成😇

・HTMLとCSS当たってるだけだが、ぱっと見進捗がいい（とりあえず進捗報告できる）(考えがせこい😂)
・jsのクラスをすでに当てているので、この後のjsがかきやすい & やり残ししにくい
・着手前に色々確認するので、一気に作業できる(頭使うのと、手を動かすのを分けれる)
・着手前の時間がかかるけど、慣れると総じて早い気がする。

おまけのかんそうぶん🥺

対応する内容にもよるので、真似しにくいかもしれませんが、、、
ぼーっとしてるなりに考えてやってるんだな〜と思っていただければ笑

言語化が苦手すぎるので、頑張って言葉にしていこうと思いました。。。とどけ〜！！