◇2024年1月中旬
さて、本格的に開発チームの一員としてスタートを切りました。
大まかな流れをお伝えすると、
プロジェクトは詳細設計まで完了していて、開発フェーズから参画することとなります。
開発フェーズの内容は、
CSS・JSの画面側のカスタマイズ・実装
実装が終わるとテストが待っています。
実装段階では、案件で使用されている独自ツールを使用してある程度自動生成された不完全なソースコードを、
意図した画面レイアウトに修正、
処理関連は、仕様書通りの動きになっているか確認、
なっていなければ仕様書に沿ってカスタマイズするというものです。
第一段階としてはCSSのカスタマイズからです。
仕様書をツールに読み込ませて自動生成されるのはHTMLのみ。
CSSは全画面で使用される共通ファイル以外は空っぽの状態で出来上がります。
共通部品（ボタンの見た目やリスト表示の形式）の修正は不要なのですが、
横に2つ並べたいボタンが縦並びになっていたり、不要なタイトルが表示されていたりするのでそれを修正します。
ただ、HTMLファイルを修正することはできません。
CSSにカスタマイズ専用のファイルがあるのですが、
修正出来るのはそのファイルのみ。
つまり、自動生成されたHTMLファイルに既に記述があるクラス名やidを使用してカスタマイズするということです。
クラス名等は、仕様書に書いてあるものが記述されているのですが、
同じクラス名がそこかしこに振られているし、ピンポイントでスタイル当てたいのにid無い、なんてパターンがたくさんありました。
最初は
どうやってここにスタイルあてるの・・・( ﾟДﾟ)
な状態でした。
HTMLいじれたら簡単に修正出来るのに
CSSだけでやろうとすると結構難しいパターンがあるんですね。
開発ツール開いて、ひたすら要素を探してスタイル当てての繰り返しです。
（ボタン）文言（ボタン） としたいのに
文言（ボタン）（ボタン） となっていたのには困りました。
HTMLをいじらずに要素の順番を変えるなんて出来るんか・・・(´・ω・)？
結論から言うと、出来ました。
これが最適解かはわからないけど、
JS側で文言部分の要素生成してボタンの前に追加して、元々の文言は非表示にしました。
JS側でHTML要素の生成出来るなんて知らなかった・・・( ﾟДﾟ)
おかげ様で、CSSにはちょっと強くなれました。
CSSの経験値 +20って感じです。
その他にも、nth-childを使って、同じクラス名内のn番目の要素にのみスタイルを反映させたりと、
お勉強になりました。
机上で勉強しているときにはこんなの出てこないと思うから、
やっぱり実務で経験を積むって大事ですね。
次回はJavaScriptカスタマイズに進みます！
**Tips*****************************************************
:nth-child()
()の中にスタイル当てたい部分の数字を入れて使う。
（例：3番目のdiv要素の背景を赤くする。）
div:nth-child(3) {
background-color: red;
}
div:nth-child(even/odd)だと偶数列、奇数列
div:nth-child(2n+1)などの使い方も可能
************************************************************
今日も読んでくれてありがと～(^^)/
---------------------------------------------＊＊＊---
▼ランキングに参加してます。
良ければポチっと('ω')
-----＊＊＊-------------------------------------------
