2008年4月27日 (日)

CSS でページを作ってみたら

初めて CSS でページを使ったのは何年くらい前になるだろうか。まだ犬とゆくがなかった頃ではないだろうか。
デザインが崩れるのを嫌って、フォントサイズを固定した覚えがある。自分のパソコンでは問題なく表示されていたのだが、Mac での表示を見てビックリ!、文字が汚くて読むに堪えないのだ。
それ以降、積極的に CSS を使うことは控えていたが、最近はそうもいかなくなってきた。

そこで、簡単なデザインのページを CSS で作ってみようと思った。出来上がったのは、このページ。周囲に余計なものが表示されると思いますが、右端の真ん中から少し上にある「シンプルページ」というボタンをクリックすれば、周囲は取れます。

ソースを見ていただければ分かりますが、とっても簡単な HTML です。
CSS もそれほど難しいことはしていません。clearfix は使っています。最終的な形に行きつくまでに、色々試行錯誤し、その途中で clearfix が必要になったから。
試行錯誤したのは、ブラウザで文字を大きくされた時に、デザインが崩れないように設定した。自分の考えていたものは出来ず、出来上がったものは、単純なものになりました。

作ったまでは良かったのです。テキスト・エディタでゴリゴリと書きました。出来上がれば、いつも使っているホームページ・ビルダーで、ある程度、楽して修正できるだろうと思っていました。
しかし結果は、編集画面がまともに表示されませんでした。

ホームページ・ビルダー任せで CSS を使ったページは作れるようですが、ゴリゴリとテキスト・エディターで書いたものは、編集できないことがよく分かりました。
安価なソフトなので、仕方ないんでしょうね。

HTML が複雑になり、CSS を使うことが推奨され、XHTML へ移行するらしいですが、いつ頃そうなるのでしょう?。もしかしたら、ホームページというものは個人が編集するものではなくなり、個人はブログを使い、プロが企業用にページを作成する時代になるのかもしれませんね。

未来のことはさておき、現状として、安価なソフトであってもこの程度のソースに対応して欲しいものです。

| | コメント (0) | トラックバック (0)

2008年4月 5日 (土)

簡単なこと

3月17日の書き込みで、「このブログのデザインには制約がある」と書いた。バナー部分の下部に水平線が表示され、それがブラウザーによって表示が違ってくるという話だ。

昨日、ふと思った。表示を同じにしようとするからいけないんだと。表示させなければいいだよね、と。

結局、この一行を追加。
#banner hr { display: none; }

CSS に不勉強な私には、ちょっと予想外のことが。
この設定をした時、水平線の場所は確保されるのかと思っていました。しかしやってみると、全く無い(HTML にその記述が無い)のと同じになる。

調べてみたら、display: none; は、このようになるのが仕様だそうだ。
私が考えていたような結果になるのは、visibility: hidden; と指定するのだそうだ。

以上、備忘録でした。

| | コメント (0) | トラックバック (0)

2008年3月25日 (火)

水平線(hrタグ)に色をつけてみる

ブログのカテゴリー表示が文字コード順になっているので、アルファベットのものが上に表示されて目立ってしまう。これらのカテゴリーを見てみると、内容が全く充実していない(というか放置のものが多い)。

今回は、そのような中の CSS ネタ。笑えるけど、役に立たないネタですけどsmile

素朴な疑問で、hr タグに色つきスタイルを使用できるのかやってみた。「そんなの出来たら変」と思いながらも

まず、普通に <hr> と書けば、当然、色は付かない。


基本的に <hr color="red"> とやるとOpera9 では色が付かない。


冗談で <hr style="color : red;"> とやってみた。すると、I.E.7 では、色が付くのだ。I.E. で見ている人は、下の水平線に色が付いているはず。
面白いのは、FireFox2、Opera9 では色が付かない。(Mac を持っていないので、Safari での表示は確かめていません。)


他のブラウザでも色を付けたいと思い <hr style="color : red; background-color : red;"> とやってみた。背景色も色を付けてみた。
こうすると、I.E.7 と FireFox2 では、色が付き、Opera9 では色が付かない。


思いつきでここまでやったが、ちょっと調べたら  noshade 属性をつけるといいらしい(基本だなbomb)。 <hr noshade style="color : red; background-color : red;">


これでほとんどのブラウザで色が付くはず。でも、FireFox2 での表示がちょっとおかしい(影の色が混じる)。そこで、<hr noshade color="red" style="color : red;background-color : red;"> としつこくやったら、三つのブラウザでは思った通りに表示された。


本文と水平線の表示が一致しないかもしれませんが、これを使ったのは、こちらのページです。確かめてみてください。

ややこしい話になりましたが、役には立たないと思いますcoldsweats01

| | コメント (3) | トラックバック (0)

2005年11月11日 (金)

たまには役に立つ

この blog、自分にとって役に立つことが少ない。日々の思い付きを書いているので、そんなものだろう。
しかし今日、「困った!」と思ったとき、役に立った。

それは、CSS で ボックスを中央揃えしたかった時のこと。
普通に考えれば align : center; 的なことで解決できると考えるものだ。しかし、いくらやっても左に寄ってしまった。
で、ふと、自分の blog を見た。「あった!」

解決法は、
   margin-right: auto;
   margin-left: auto;

仕事で使っている人などは、「こんなの当然」と思うが、たまにしか触れない人間は、「align : center; で何故、中央に寄らない!」と左のおでこに血管が浮き出てしまう(<これに付いては、機会があったら説明します・笑)状況に。
それが blog を見直しただけで解決!、なんだか気持ちいい!!

その書き込みはこちら

| | コメント (0) | トラックバック (0)

2005年4月 1日 (金)

table in CSS

「犬とゆく」の中には CSS でデザインをしているページが幾つかある。将来的には全てそうしたいと思っていた。しかし使っている内に不具合が出てきた。

本文中に写真を挿入し、それにコメントを付けて、文字を回り込ませる。写真とコメントを table タグで配置(左右に寄せる)する。文字を小さく表示する人のために、回り込ませた文字の終わりに <br clear="XXXX"> を挿入する。すると回り込んだ文字がどこかへ消えてしまうのだ。

たぶん、よく調べれば解決法が見つかると思うが、以前「テーブルを使っての配置は推奨しない。スタイル・シートを使うように」と読んだことがある。その基本から考えれば、充分に邪道。
ということで、<br clear="XXXX"> を使うのを諦め、table タグでガチガチに配置をした。

CSS をちょっとだけ調べれば正当な解説方法はすぐに見つかるはずだ。しかし、それを仕事にしているわけでもなく、今、調べて使っても、たぶん次に使うときは忘れてしまうだろう。

そんなことで一時間以上、時間を使ってしまった。そこで思ったことは「本当に HTML は、なくなるのだろうか」ということ。どう考えても、全て移行するとは思えない。

皆さんは、どう思っていますか?


42 0401 EARL'S CAFE' & DINER (続けて行ってしまった・・・)

| | コメント (0) | トラックバック (0)

2004年10月 3日 (日)

久しぶりに

CSS を一枚作った。
前回、とても苦労して作ったので、ある程度は覚えているだろうと思ったが、全くといっていいほど忘れていた。40歳を目前にすると、こんなにも頭が固くなってしまうものかと嘆きたいが、嘆いたところで何も解決しないので、呆れるくらいにしておこう。

今回は、前回と趣を換えた。
前回は(HTML の)TABLE を使わず、(CSS の)BOX で配置を決めていった。今回は、TABLE を使った。
前回は、<DIV>や<SPAN>に ID をつけることになるわけだが、今回もそのつもりで、<TD> の中にそれらのタグを入れてやってみた。すると、幾つかのプロパティーが効かない。色々といじくったが全くダメ。
本を見ていて「あれ?」と気が付いた。<TD>>タグには直接 ID を付けるのだ。

分かってしまえば「当たり前じゃん」と思うのだが、基本が理解出来ていないので、こういうことになる。
歳をとると「出来ればいいんでしょ?」と、基本を考えなくなりがちだが、その結果がコレ。

少し改めないと、、、。

| | コメント (0) | トラックバック (0)

2004年8月17日 (火)

CSS センター合わせ

大きなテーブルを一個作って、その中に内容を入れ、そのテーブルをセンター合わせして、全体を中央に表示させる、ということをよくやっていました。
それと同じことを CSS で出来ないかと調べたのですが、書いてあるページを見つけられませんでした。

仕方なく、自分で考えて、body や内容を一まとめにする DIV にセンター属性を付けるIDを設定してみたら I.E.6 では、上記と同じような表示が得られることを確認しました。しかし、更にいじくった結果、body だけでOKということがわかったのですが、、一応、全体設定の DIV の ID を残しておきました。

(この時点でのCSS)-------------
BODY {
margin : 5px 0px 10px 0px;
padding: 0px;
background-color: #ffffff;
text-align : center;
}
/****** 全体 *****/
#all {
background-color: #ffffff;
width: 720px;
text-align: left;
}
----------------------

で、安心していたのですが、もじらやネスケで確認すると、左に寄ってしまう。それが正しいHTML4.01らしい。私としては困ってしまった。
そこで仕方なく、本を一冊買う。その本にも「標準モードでは、center を指定しても、ブロック要素はセンタリングしな」旨が書いてある。

諦めて本をホン投げてしまったのですが、数日後、もう一度読み直したら「ブロック要素の左右のマージンを auto にするとセンタリングする」と書いてある。で、本に書いてある通りにやってみる。悔しいほど、スンナリとネスケ(7.1)で中央合わせになってくれた。

(直したCSS)-------------
BODY {
margin : 5px 0px 10px 0px;
padding: 0px;
background-color: #ffffff;
text-align : center;
}
/****** 全体 *****/
#all {
background-color: #ffffff;
width: 720px;
margin-right: auto;
margin-left: auto;
text-align: left;
}
----------------------

しかし、後日、これでは、I.E.5.5以前はダメらしい。
でも、セキュリティーのこと考えて、みんな I.E.6 にしましょう!(<ただの言い訳?)

| | コメント (0) | トラックバック (0)

2004年8月13日 (金)

CSS 画像の上部が消える

今まで大きな問題が二つあった。
一つは、画像(バナー)が上半分以上消えてしまうこと。(i.e.6 では消えない。Mozilla やネスケで消えてしまう。)

そうなってしまった時点での私の知識は
~~~~~~~~
とにかく、<span>なり<div>で範囲を決め、そこをボックスにして、そのボックスに画像なり、文章を入れる。
~~~~~~~~
というもの。

ですから、画像を<span>の中にいれて、その<span>に id を着けていた。
<span>の属性として、height やそれらしいものを片っ端から入れて、上部が表示されるか試してみた。
しかしよくよく(いや、ちょっとかも・・・、試行錯誤をやめて)調べてみたら、<img>の属性として(id なり class を着けて)修飾するのが正しいらしい。直してみたら、あ~ら簡単(笑)。

誤)----------------
■CSS
#banabana {
display: inline;
position: relative;
left: 0px;
text-align: left;
height: 50px; <ここに色々入れた
}
■HTML
<span id="banabana"><A href="index.htm"><IMG src="gazou.gif"></A></span>

改)----------------
■CSS > 一番下の height: 50px の行だけを消した

■HTML
<A href="index.htm"><IMG id="banabana" src="gazou.gif"></A>

CSSの方を見ていただければ、どれだけ試行錯誤したか(つまり、根本的に理解していないか)想像がつくと思います。


もう一つ、どうしても直したかった問題があります。これは、後日書きます!

| | コメント (0) | トラックバック (0)

2004年8月12日 (木)

CSS もじら君

莫大な時間を注ぎ込んで、デザイン変更をやっている「犬とゆく」。
今まで、I.E. 6だけで表示確認をしていたが、ふと思って、
LINUX でしてみた。そしたら、もじら君ではバナーが半分消えて
しまう。

もじら君だけなら、使っている人は少ないと思うからいいや、と
思っていたのだが、気になってちょっと調べた。そうしたら、
ネスケはもじらを元にして作っているという。
焦って、ネスケの最新版をインストール。

やはり、表示はもじら君と一緒。
あぁ、なんでこうなんだろう・・・・・・

| | コメント (0) | トラックバック (0)

2004年8月 7日 (土)

CSS 標準モードでいこう!

ホーム・ページ・ビルダーには、doctype の出力設定がある。これをオンにすると、以下のような出力になる。互換モードだ。
DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

世の中これから標準モードだ!、と以下のように書き換えた。
doctype html public"-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"

そしたら、表示が変。人様にお見せ出来ない。
仕様をいい加減に理解していた部分を互換モードがカバーしてくれていたのだろう。
よくよく見てみたら、html も書き直さなければならない。またまたこんなところで苦労する羽目になってしまった。

パソコン教室でも通えばいいのかな?(笑)

| | コメント (0) | トラックバック (0)

より以前の記事一覧