2006年10月28日

CSSによる段組表現

 前回の記事に関連して「CSSによる段組表現」に関する情報をI先生が下記のサイトが参考になると教えて下さった。

http://allabout.co.jp/internet/hpcreate/closeup/CU20041111A/
 こういう参考サイトがあると、実際に制作する時に様々な発想が浮かんでとても便利である。
従来、「段組(マルチカラム)を作る」といえば、table要素を駆使して行うテクニックでした。しかし、最近ではブラウザのスタイルシート対応度が向上してきたため、スタイルシートのみで段組を作っても問題なくなってきました。
※従来はサポートしていないブラウザが多かったためにtableを使った方が無難でした。
そもそもtableは「表」を構成するための要素(タグ)ですから、段組デザインに活用するのは(tableの本来の用途からすると)正しくないことです。ホームページは、デザインと中身を分離して、デザインはすべてスタイルシートで記述すべきです。
とあるのはまさに至言である!
 数ある自サイトで、拙いながらこれを実現できたのが、
漢方薬専門・村田漢方薬局による漢方相談
アトピー性皮膚炎の漢方と漢方薬に自然療法をミックスした漢方相談専門薬局
 この2サイトだけだが、凝らないシンプルなデザインだからシロウトでも容易に作成できた。
 今後は本格的な凝ったデザインを考えないでもないが、そこまでの労力と時間を考えると、まだまだ先のことになるかどうか、今後のことは未知数ではある。

posted by 文武 at 01:49| 山口 ☀| HTML・CSSのお勉強 | このブログの読者になる | 更新情報をチェックする

2006年10月26日

tableタグを使わずにすべてCSSで作成するサイト・・・

 シロウトながら、考えていることはタイトルの内容である。tableタグを使用すると、どうしてもソースが忙しく乱雑になるので、今後制作するサイトは、ますますいよいよ、余分なタグを使用しないで、ほとんど本文だらけのソースとして、デザインそのほか、あらゆるものをCSSでやっつけたいと思っている。

 何かの本でtableタグを使用せずとも、すべてスタイルシートでまかなえるというのを読んだ記憶があるからだ。といっても、やや老人ボケ加減だから、読み間違いなのかもしれないけど・・・?!

 ともあれ、未使用の独自ドメインを沢山(ほんとうにタクサン)取得しているので、あの世に行くまでにまだまだタクサンのサイトを制作することが出来るのでが、そろそろ上に載せるコンテンツの問題が心配になって来ているのだった(笑)。
posted by 文武 at 16:53| 山口 ☀| HTML・CSSのお勉強 | このブログの読者になる | 更新情報をチェックする

2006年10月15日

I先生へCSSのご指導を請う

 本日は、是非、CSSのリンクの仕方について御教示願いたく、
 http://cyosyu.seesaa.net/article/25373100.html
 このページに書いている疑問点について、HTMLページに記載したCSSをリンクすることでスタイルシートを外部化するほうほうは、邪道なのでしょうか?
中略
 上記のHTMLページに書き込んだCSSをリンクしたやり方でも、間違いではない、あるいは問題ではないのであれば、モノグサ男にはうってつけの方法なのですが、この方法でも間違いではないのであれば、本当に楽で嬉しいのですが、いかがでしょうか?
 ご多忙中をこのような基礎的な質問で恐縮です。
 お時間が取れたときにでも、御教示下されば、まことに仕合せに存じる次第です。
 どうぞ、宜しくお願い申し上げます。
                            頓首


I先生のご指導メール:> (前略)邪道というか,そのような方法は見たことがありません。普通は次のように
<head>〜</head>内に記述します。media="screen, print" という記述は,CSSをサポートしていないNetscape 4にCSSファイルを読み込ませないための対策です。

<link href="style.css" rel="stylesheet" type="text/css" media="screen, print">
<meta http-equiv="Content-Style-Type" content="text/css">

 style.cssの箇所は.cssで終わる任意のファイル名にできます。CSSが置いてあるディレクトリの下にあるディレクトリ内のhtmlファイルに記述する場合には,たとえば,

link href="atopy/style.css"

 などと記述します。

 そして,style.cssの内容はスタイルのみを記述します。<style>や<head>などのhtmlタグは書けません。

(中略)
> 上記の方法ならうまく外
> 部化することができてホッとしたものの、とんでもない邪道の道を犯している
> のか不安になりました。

 たまたま表示されているだけだと思います。

(中略)
> また、上記のHTMLページに書き込んだCSSをリンクしたやり方でも、間違いで
> はない、あるいは問題ではないのであれば、モノグサ男にはうってつけの方法
> なのですが、この方法でも間違いではないのであれば、本当に楽で嬉しいので
> すが、いかがでしょうか?

 標準的な方法ではないので,ページ数が少ないうちに正道に戻られた方がよいかと思います。


 以上のご指導により邪道から離れ、めでたく正道に戻ることが出来たのだった。
(さらには、CSS中のスペルミスや重要な記述間違いなどをご指導賜った。)
posted by 文武 at 23:54| 山口 | HTML・CSSのお勉強 | このブログの読者になる | 更新情報をチェックする

2006年10月13日

CSSを外部リンクに移動させたのは良いとしても、その方法がHTMLファイル!

 外部にCSSを分離する方法として、HTMLファイルのhead部分に、

<style type="text/css"><!--

--></style>

 この間にCSSを記述して、そのHTMLファイルをリンクさせることで各ページに共通のCSSを反映させる方法を取ってしまった!
 もしかしたら、これはとんでもない邪道なのだろうか!?
 ずぼら男のやり方としては、手っ取り早くて便利に思うのだが、今度、I先生にお会いしたら、御教示願う必要がある。

漢方薬専門・村田漢方薬局による漢方相談
にしても、あるいは現在制作途上にある、
アトピー性皮膚炎の漢方と漢方薬に自然療法をミックスした漢方相談専門薬局

にしても、同様のやりかたである。
 つまり、CSSを打ち込んだHTMLをリンクすることによってそのCSSを反映させるというやり方である。

 これ、やっぱり邪道なのでしょうか〜〜〜????!
posted by 文武 at 09:13| 山口 🌁| HTML・CSSのお勉強 | このブログの読者になる | 更新情報をチェックする

2006年10月09日

CSSを外部に保存したらサイトがすっきり!

 先日、貧相ながらも完成した
漢方薬専門・村田漢方薬局による漢方相談サイト。

 タイトルをあれやこれや迷って、暫定的にこのようなタイトルにしている。といっても、ここではタイトルの話よりも、サイト制作上の特徴である。
 まったくのシロウトながら、CSSを使ってソースがとてもすっきり簡素になったと思う。また、CSSを外部に置いたので、ますますスッキリした。

 一部、font-familyの明朝体の指定だけが、外部に出すとゴシックに戻ってしまうために、ソースで直接指定することにした。この問題以外は、シンプルなサイトだから、ほどほどうまくいったと思う。

 多分、今後もホームページ作成ソフトは殆ど使う気になれないだろう。手打ちですべてやることに慣れると、全然苦にならなくなった。一定段階打ち込むと、あとはコピー・コピーの繰り返しでやれる部分も多いから、すべて手打ちでやるのも、案外能率的かもしれない。

 次の制作予定は、一般向けのアトピー性皮膚炎の御案内サイト。すでに、過去の拙論集は、漢方と漢方薬によるアトピー性皮膚炎研究変遷史として完成しているので、一般向けにという口実で、CSSばかりでデザインしたサイトを作ろうと考えているが、問題は意外にもコンテンツなのであった。
 村田漢方堂薬局のオリジナルな発明が多い分野だけに、あまり具体的に公表するのは面白くないし、かといって余り隠しすぎると、貧相なサイトになってしまう。

 結局、どこまでサイトに掲載するかが問題なのである。それが決まるまで、サイトのデザイン構成の計画でも練っておくか〜〜〜っ
posted by 文武 at 18:20| 山口 ☀| HTML・CSSのお勉強 | このブログの読者になる | 更新情報をチェックする

2006年09月27日

CSSのみでデザインした新しいサイトの実験

 まだ初心者の段階だから、複雑な構成のサイトは無理だから、

http://www.kanpouyaku.biz/ このような実験的なサイトを作りつつある。

薬局名をシバシバ間違えられる「村田漢方薬局」の名で、正式な「村田漢方堂薬局」であることを示唆するのが目的の、単細胞のサイトではあるが・・・・。

 ところで、ホームページビルダー等のソフトの使用方法を覚えるのが面倒で、かといってヤフー・ジオ・・・に付けてくれている簡易ソフトはとても便利で使いやすいが、作った後のソースを見ると無駄うちタグがボロボロ見えて来るので、結局、すべて手打ちの制作に切り替えた。

 今後も、便利だといわれるホームページ制作用のソフトは、滅多に使わないことだろう。当分は徹底的に手打ちによる制作に専念したい。
 最初は手打ちでも、折々に自分が過去に打ったHTMLソースやCSSソースの部分コピーがどんどん利用できるので、手打ち・手打ちといってもそれほど手間なものではないと思いますよ。
posted by 文武 at 02:24| 山口 ☀| HTML・CSSのお勉強 | このブログの読者になる | 更新情報をチェックする
×

この広告は1年以上新しい記事の投稿がないブログに表示されております。