’０７．３．２８
スタイルシートをかじり始めた手始めに、勉強を兼ねこのサイトのページのデザイン変更を、スタイルシートを使ってやることにした。そろそろ変更のねたもなくなってきたので、スタイルシートを使ってきた感想を書いて見ようと思う。詳しい人には幼稚な内容だが、私レベルでサイト作成を楽しんでおられる方に、スタイルシートにチャレンジする参考になれば幸甚だ。
稚拙なスタイルシートのコーディングの仕方では、ブラウザやブラウザは同じでもMACだとデザインが崩れたり文字化けもするようだ。実際掲示板でそんな指摘も受けた。
そこは自己満足のサイト作りがモットーのこのサイト、平にご勘弁いただくとして独断と偏見の戯言として看過して頂きたい。
まず今回勉強したスタイルシートの先生は、次のようなインターネットサイトだ。
「YEAR OF THE CAT」
「〜はじめましょ！ CSSでWEBデザイン〜」
「スタイルシート（CSS)レイアウト」
CSSコーディングを真似したり、サンプルデザインを使わせてもらったりして大変参考になり、あらためてここに謝辞を申しあげます。
デザイン変更といっても今まで使っていたこのサイトのページデザインを変えるのが主目的で、コンテンツの内容はそもままなので、自由に使えるCSSのデザインテンプレートをそれなりに理解して、自分なりに編集して使うのが実用的な勉強になると考えた。
テンプレートには二段組、三段組、左ナビ、右ナビなどの基本形が揃っているので、一つ一つのボックスに今までのページで使っていたナビ、記事、画像を貼り付けて形を整えればいい。
スタイルシートの仕組みやclassやIdの使い方などは、いくつかの今までのページをＣＳＳテンプレートに合うように編集しながら使っていくと自然とタグなどの使い方が理解できる。
記事や画像をボックスの中に体裁よく納めるには、ボックスの上下左右からの余白を調整する必要があるので、いろいろとやっているうちにmarginやpaddingの使い方もだんだんと慣れてくるようになった。
また簡単なテンプレートではお目にかかれないが、実際に使われている専門家が作ったスタイルシートのページをみると、同じタグでもいろいろな書き方があることに気がつく。結構はしょって書いていても、ブラウザがちゃんと理解してくれるところがおもしろい。
私がスタイルシートを使って見たいと思ったきっかけは、スタイルシートを使うとフレームを使わないでも固定ナビが使えるのではないかと思ったからだった。
調べていくと、「CSSで擬似フレームの作り方」なんというタイトルで、フレームを使ったと同じ見え方をするCSSの書き方の情報が開示されている。
この方法だとナビは固定するが、ページ毎に同じナビを貼り付けなければならないのはフレームを使わないのと同じで、現在進行形のコンテンツ管理の手間は省けない。ＣＳＳはフレームの代替になるのではという私の期待は、残念ながら実現しないことが解った。
そうはいっても、擬似フレームの方法はCSSの一つのテクニックなので、コンテンツが画面からオーバーフローしてスクロールバーを使うページには、挑戦して使った見た。ページデザインの装飾部分やナビは固定していて、記事だけがスクロールするやり方だ。
既存のページの内容をそのまま利用したので、デザイン上テーブルをふんだんに使って見栄えのよかった従来のページを、CSSで作った台紙にコピペすると文字がテーブルの枠一杯に表示され、いかにもみっともなく見える。なんでそうなるのかよくわからない。
余談だが、ＣＳＳとテーブルのいいとこ取りをしたデザインをハイブリットＣＳＳというらしく、これもれっきとした立派なテクニックらしい。
また画像もコピペすると、どうしても右よりや左寄りになって見ぐるしい。なぜそうなるか解らないままそれでも調べていくと、＃ｉｄ ｔｄ｛スタイル｝や．ｉｄ ｐ｛スタイル｝を使ってテーブルの余白や画像の位置の調整ができることが分かった。
このあたりは本格的にスタイルシートの書き方を教えてもらえれば基本中の基本なんだろうが、苦労して自分で解決方法を探し当てるのも宝物を掘り当てたようでうれしいものだ。
そのほかお遊びで、文章の段落ごとに最初の一文字を装飾して大きくするドロップキャップが、ＣＳＳで簡単にできので使って見たりした。
自分で新たにＣＳＳのコーディングを起こすのは大変だが、使われているコーディングを拾い集めて使う分には、何故そうなるかははっきり解らなくとも、思い通りのデザインを作ることができるものだ。
以上のようなことでこのサイトのあらかたのページをスタイルシートに変えたことで、読めなかったりデザインが崩れて見えたりしているかもしれない。
自分が見ているＤＯＳ−ＶのＩＥ６，７ではまともに見えるので自分勝手にまあいいかって、自己満足していることをお許しいただきたいと思います。
稚拙なスタイルシートのコーディングの仕方では、ブラウザやブラウザは同じでもMACだとデザインが崩れたり文字化けもするようだ。実際掲示板でそんな指摘も受けた。
そこは自己満足のサイト作りがモットーのこのサイト、平にご勘弁いただくとして独断と偏見の戯言として看過して頂きたい。
まず今回勉強したスタイルシートの先生は、次のようなインターネットサイトだ。
「YEAR OF THE CAT」
「〜はじめましょ！ CSSでWEBデザイン〜」
「スタイルシート（CSS)レイアウト」
CSSコーディングを真似したり、サンプルデザインを使わせてもらったりして大変参考になり、あらためてここに謝辞を申しあげます。
デザイン変更といっても今まで使っていたこのサイトのページデザインを変えるのが主目的で、コンテンツの内容はそもままなので、自由に使えるCSSのデザインテンプレートをそれなりに理解して、自分なりに編集して使うのが実用的な勉強になると考えた。
テンプレートには二段組、三段組、左ナビ、右ナビなどの基本形が揃っているので、一つ一つのボックスに今までのページで使っていたナビ、記事、画像を貼り付けて形を整えればいい。
スタイルシートの仕組みやclassやIdの使い方などは、いくつかの今までのページをＣＳＳテンプレートに合うように編集しながら使っていくと自然とタグなどの使い方が理解できる。
記事や画像をボックスの中に体裁よく納めるには、ボックスの上下左右からの余白を調整する必要があるので、いろいろとやっているうちにmarginやpaddingの使い方もだんだんと慣れてくるようになった。
また簡単なテンプレートではお目にかかれないが、実際に使われている専門家が作ったスタイルシートのページをみると、同じタグでもいろいろな書き方があることに気がつく。結構はしょって書いていても、ブラウザがちゃんと理解してくれるところがおもしろい。
私がスタイルシートを使って見たいと思ったきっかけは、スタイルシートを使うとフレームを使わないでも固定ナビが使えるのではないかと思ったからだった。
調べていくと、「CSSで擬似フレームの作り方」なんというタイトルで、フレームを使ったと同じ見え方をするCSSの書き方の情報が開示されている。
この方法だとナビは固定するが、ページ毎に同じナビを貼り付けなければならないのはフレームを使わないのと同じで、現在進行形のコンテンツ管理の手間は省けない。ＣＳＳはフレームの代替になるのではという私の期待は、残念ながら実現しないことが解った。
そうはいっても、擬似フレームの方法はCSSの一つのテクニックなので、コンテンツが画面からオーバーフローしてスクロールバーを使うページには、挑戦して使った見た。ページデザインの装飾部分やナビは固定していて、記事だけがスクロールするやり方だ。
既存のページの内容をそのまま利用したので、デザイン上テーブルをふんだんに使って見栄えのよかった従来のページを、CSSで作った台紙にコピペすると文字がテーブルの枠一杯に表示され、いかにもみっともなく見える。なんでそうなるのかよくわからない。
余談だが、ＣＳＳとテーブルのいいとこ取りをしたデザインをハイブリットＣＳＳというらしく、これもれっきとした立派なテクニックらしい。
また画像もコピペすると、どうしても右よりや左寄りになって見ぐるしい。なぜそうなるか解らないままそれでも調べていくと、＃ｉｄ ｔｄ｛スタイル｝や．ｉｄ ｐ｛スタイル｝を使ってテーブルの余白や画像の位置の調整ができることが分かった。
このあたりは本格的にスタイルシートの書き方を教えてもらえれば基本中の基本なんだろうが、苦労して自分で解決方法を探し当てるのも宝物を掘り当てたようでうれしいものだ。
そのほかお遊びで、文章の段落ごとに最初の一文字を装飾して大きくするドロップキャップが、ＣＳＳで簡単にできので使って見たりした。
自分で新たにＣＳＳのコーディングを起こすのは大変だが、使われているコーディングを拾い集めて使う分には、何故そうなるかははっきり解らなくとも、思い通りのデザインを作ることができるものだ。
以上のようなことでこのサイトのあらかたのページをスタイルシートに変えたことで、読めなかったりデザインが崩れて見えたりしているかもしれない。
自分が見ているＤＯＳ−ＶのＩＥ６，７ではまともに見えるので自分勝手にまあいいかって、自己満足していることをお許しいただきたいと思います。
