本日の授業
本日は、ちょっとお久しぶり、澤田さんです。
早々に、バレンタインクッキーいただきました。恐縮です。。。。
澤田さんは、某会社でイントラネットのサイト更新をされていまして、現在派遣社員ですが、次回更新を考えて、転職を考えておられます。
まず、会社の課題を。。。
イントラネットなんで、要は特定の環境で正しくページが閲覧できればいいので、せっかく澤田さんがCSSで組んだものを、後々の更新のために、テーブルレイアウトに戻さないといけないとのこと。。。
確かに、すべてがSEOとか考えないといけない環境でもないので、この場合は、社内で更新管理できるスキルの方にあわさざる終えないです。
簡単にdivで書いたものを、テーブルに戻すのは、
早々に、バレンタインクッキーいただきました。恐縮です。。。。
澤田さんは、某会社でイントラネットのサイト更新をされていまして、現在派遣社員ですが、次回更新を考えて、転職を考えておられます。
まず、会社の課題を。。。
イントラネットなんで、要は特定の環境で正しくページが閲覧できればいいので、せっかく澤田さんがCSSで組んだものを、後々の更新のために、テーブルレイアウトに戻さないといけないとのこと。。。
確かに、すべてがSEOとか考えないといけない環境でもないので、この場合は、社内で更新管理できるスキルの方にあわさざる終えないです。
簡単にdivで書いたものを、テーブルに戻すのは、
タグを、(もしくは、)に置き換えます。で、横に並んでいる予定のセルをでグループ化します。最後に、全体を
タグでくくれば、完了。つまり、内側から変換していくということですね。内の
タグでくくれば、完了。つまり、内側から変換していくということですね。内の
| の数は、すべて合わせておかないといけませんね。(セルをくっつけるのは後からやったほうがいいです) 後半は、サイト制作の課題ですね。今日は、CSSロールオーバーの仕組みと作り方です。 澤田さんは、会社ではほとんど画像制作ソフトをいじらないので、photoshopが恐怖ですっていっておられましたが、徐々にこの辺もやっていきましょう。 メニューを2段がさねにする処理は、いくつかのステップがあるんですが、注意はそれぞれを単純に順番を覚えていくだけだと、身につきませんので、それぞれの処理が何のためにやっているのかを理解しながら、覚えていってください。たとえば、ステップ順序を飛ばしちゃって入れ替わっても、対処できるようにとか・・・ hover擬似クラスによるロールオーバーの仕組みは、検索していただくとして、このやり方の特長は、画像を一度にロードしてくるので、javascriptによるロールオーバーより、若干体感的に高速です。あと、ソースが、非常にシンプルで、画像もメニュー1つに対して1個で済みます。 澤田さんのノートは、いつもきっちり整理されていて、感心させられます。プリントアウトや、マーカーなどを使って受験勉強のような感じですね。すばらしい。 夏までに、サイト3つという目標をクリアできるよう、がんばりましょう。。。 |