< | >

2つのcssファイルのマージ
  • (2021-01-15 06:01:04)
2つのcssファイルのマージ

ワンカラムだから楽になる?


近年の html/css の高度化は、もはやボクみないな片手間でやっている素人が扱えるレベルを超えていて、webのフロントエンドを専門とするデザイナーやコーダーに書いてもらう時代となっている。

スマホ普及でモバイルファーストとなった2015年くらいから、webもワンカラムが主流。

レスポンシブがいいのだろうけど、面倒なので、PCも含め「基本ワンカラム」で書いとけばいい。

ワンカラムなので、もはやレイアウトという考え方は、あまりなく、デザインなんて考えなくてよくなるのかな?と思っていた。

情報を使えるだけでよい、という意味なら、ワンカラムで、上からコンテンツを順々に書いていくだけでOKである。

なので、ワンカラムは入り易く簡単。

しかし、消費者に対してインパクトがあるページを制作しようと思えば、それなりに高い技術が必要ということは変わりなかった。

それにワンカラムといったって、PC表示とその操作性を考慮すれば、やはり、レスポンシブは避けがたい。

ワンカラム時代のweb制作も、相変わらず、素人が気楽にやれるものではなかった。


小企業は自分でやるしかない


ボクらのような小企業の場合、秀逸なデザインを創作し、デザインに忠実なコーディングができる専任スタッフは、通常いない。

外部にお願いしたいが、なかなかよい人が見つからない。

というわけで、相変わらず、自社のwebページは、未だボクが制作することが多い。


作り替えの原則:旧CSSは廃棄?


今回、あるページに新しいレイアウトを導入することにした。

それで古いページからのマージが必要だが、古いページの一部は、レイアウトごとまるまる転用したい。

新ページの制作の原則は、「旧cssは廃棄し」かつ「新ページには、コンテンツだけを流し込む」が理想。

しかし、部分部分が、それなりに作り込まれており、まだまだ使える場合などは、なかなか捨てられないケースもある。今回はそれ。

そういう部分は、html/css ともに、そのまま移植したい。

こういうケースは、今回はじめてで、いろいろ試香錯誤中である。


(1) 旧ファイル名の変更:古い html/css のファイル名に「.old」を付けた:
(新) index.html style.css
(旧) index.old.html style.old.css


(2) 旧ファイルのゴミ整理
cssは1,000行程度。相当、ゴミがたまっている。

通常、cssファイルは、時間とともにゴミだらけになる。

以前は、ゴミが嫌で、不要なコードは削除するようにしていた。

しかし、そのメンテナンスのコストを考えれば、ゴミなど放置して、不具合が多くなってきたら、どこかのタイミングでバッサリと新しいものにした方が効率的だと最近は思う。

今回は、1,000行あるcssファイルも、おそらく半分程度も使用していないだろうから、 html/css に関して、大ざっぱに不要・未使用部分を削除して、ある程度見やすいファイルに成形。


(3) 旧cssファイル:オリジナルのid名・class名の変更
オリジナルのid名・class名は、新ファイルとの重複を避けるため、接頭子(prefix)として「2021-mergedxxx-」という名称に変更。index.old.htmlに対して、id・class名を一括置換。


(4) id名・class名以外のセレクタ
たとえば、「body, img, ul, li, h1, h2, a, a:hover, input・・」は名称変更が許されないので、原則、古い方をあきらめるが、レイアウトやデザインが大きく壊れるものは、セレクタごと個別に移植する。


<< フリーソフト:CSV編集エディタ、Cassava< | >年末年始は、PCバックアップと電源オフ >>
search
layout
admin

[▲page top]