画面製造の苦労 [デザイン研究室]

 こんにちは!
 ナビゲータのEVEです。

 本日は、ウイルス対策ソフトClamAVの構築をしています。今考えたら、インストール直後から実施すべきだったかもしれません。ただ、いろいろとめんどくさいんですよね・・・。ついついめんどくさい部分は後回しになっていきます。ウイルス対策ソフト構築後、もしかしたら、最初からインストール作業をするかもしれません。大丈夫だとは思うのですが・・・。
 っということで、現在、ウイルス対策ソフトは構築している最中で、ブログに書けるネタがないので、現在、同時並行的に開発を進めている、画面製造、ログインユーザー分析システムについて書きたいと思います。

[ポータル画面]

 まず最初に、ユーザーがアクセスするためのポータル画面を作らなければなりません。最初、ログインユーザー分析システムを作ろうかと準備を進めたのですが、やっぱり、分析対象がないとイメージしにくいということに気づきました。っということで、ポータル画面を作ろうと、最初、本を読みながら、考えたのですが、ちょっと、ピンとこなかったので、今回も、ChatGPTにひな形を作ってもらいそこから拡張することにしました。
 まず、header、main、footerを作り、mainでは、クラスでleft、center、rightに分割し、leftはメニュー、centerには、コンテンツ、そして、rightには注釈をつけるようにしました。
 以前だったら、tableタグdivタグにより、各要素を分けて、後はブラウザの画面調整に任せていたのですが、現在は、その分けた要素に細かい設定をするのが普通のようです。各要素との間隔とか、余白とか、行間とか・・・。そういうものを上から設定していくと調整が難しい・・・。
 headerは意外と問題ないのですが、それ以降の、main、footerとかは最悪です。

[main画面の]

 main画面で苦労したのは、centerクラスにおいて縦書きになること・・・。基本、bodyとformで縦に並べるように指定しているので、その指定が有効となっているため、これを修正するのに時間がかかりました。しかも、きちんと、指定した位置に配置されないし・・・。このとき、tableタグでなんとかしようかなっていう誘惑に負けそうになりましたが、ChatGPTと協力してなんとかのりきりました。

[footerタグ]

 footerタグは、仕様上存在するのですが、この扱いもなかなか難しい。一応footerタグもブロック属性らしいんのですが、定義すると、画面の中央に表示されます。仕方がないので、divタグでクラス定義すると、自分の想定通りに表示されるのですが、SEO対策を考えた場合、できれば、footerタグを利用したいと考えています。
 そこで、いろいろいじりながら、画面の最下部に配置することができたのですが、footerタグを使用すると、cssで定義している内容が反映されない。いろいろいじりながらその挙動を分析をしましたが、どうも、cssの設定内容を無視してブラウザのデフォルト値を使用しているようにも見えます。

[あとがき]

 まだ不満はありますが、一応見え方としては、自分が想定している状態で表示されています。
 今まで、プログラム、システム設定などをしてきましたが、正直言うと、画面表示が一番難しく、時間をかけています。まだ、Chromeだけで調べていますが、Internet Edgeだとまた違った問題もあるのでしょうね?
 当初は、画面については、妥協して、タスクを進めていきます。
 現在、不明な各cssの属性を調べ、本を読みながら改善策を考えていますが、時間がかかりそうです。
 しばらくは、温かい目で見ていただければありがたいです。

 では、また!!!

コメント