頑張って考えるWEBサイトのデザイン。 ― 2007年08月05日 13時24分
実際XHTML1.0とCSSだったら、それなりに自信があるつもり。
ただ見栄え的なものとかは、まったく自信がないです。ページのデザインセンスがあんまり無い。そこに間違った知識とか固定概念があったりして、余計に制限してるみたいな環境になることも結構あったり。
世の中、素晴らしいデザイン組み立てて、ついでに中身も綺麗に作れるひとが居るってのがすごい。そういうひとって尊敬します。
僕が考えつく限り、WEBサイトのデザインって書き方として3種類ぐらいあると思う。
ひとつは、CSSに依存しないHTMLだけで作られたタイプ。色々と枠が作りたいならtableを多用した感じのやつ。
僕も前やってました。
これってCSS使わないから、ある程度はデザイン崩れないし、tableの概念さえ理解してれば作るのも随分楽です。
ただね……あまり多用してると後々の編集がとても不便だし(下手したらまた一から作った方が早かったりしてね)、tableタグの意味的にはちょっと外れてるんだよね。あんまり気にしない方だけど。
ふたつ目は、CSSのposition:absolute;を使うタイプ。
width指定さえしていれば、自分の意図したところに枠表示が出来るようになるから結構便利。きちんと自分のルールに則って作ってれば、ある程度編集も楽だし。
ただCSS対応してないブラウザとかには意味なくなっちゃうし、CSS対応しているブラウザでも表示がズレることがあるのが難点だけど。
前にFirefoxとIE6.0で位置合わせようとして、断念したし。作り方がやや悪かったのかもしれないけど。
最後はCSSのfloatを使う方法。このブログにも上の方でちょっとだけ使ってます。簡単なものなら値指定する必要もないので、position:absolute;よりは楽。きちんとclear:both;さえ入れてれば、後の表示崩れもないし。
ただ、これも難があって要素が大きくなってきたりすると意図した通りにするのが辛いし、少し間違えたり要素入れ忘れるとぐちゃぐちゃになったりと大変。おまけにCSSに対応してないとやっぱり見れません。しかも表示幅が足りなかったりすると、即効で崩れます。
僕は最初作り始めた頃は一番目を使って、CSSを覚えてきた頃にはposition:absolute;を使ってましたねー。
最近はfloatを使いますが、腕がないのでちっちゃい内容ぐらいにしか使いません。まあ、元々2カラムや3カラムよりは、1カラムが好きなので(いつもページの中身をどんな風に埋めようかと困るけど)そういうのもあまり使わないんだけど。
あ、それだと結構四番目、枠組み的な要素は扱わないタイプになるんかな。
なんか三番目と四番目の中間ぐらいな気がする。とは言え、XHTMLとCSSのことでは、あまりひとには負けなくないので、善し悪しはともかく全部問題なく使えるようになりたいなー。
表示違い。 ― 2007年08月04日 06時48分
此処はFirefox2.0とInternetExplorer7.0で確認しています。
前回にログイン・RSSの下が埋まらないと書いたけど、どうやらその症状はFirefoxの方だけ現れるみたい……
ますます手の付けようがないんだけどなぁ。
WebDeveloperで色々と確認してみたけど、変に余白が空いてること以外わかんないし。本気でお手上げ。害があるという訳じゃないし、もうホントこのままにします。
あとCSSに結構手を入れたので、IE6.0でmargin:0 auto;が動くかどうかが微妙。動かなかったよーな気がする;;
なにかが邪魔してる。 ― 2007年08月03日 09時25分
既存のデザインからCSS修正して、ついでに少しだけタグも追加して、なんとかデザインのカタチだけは完成。
やっぱりタグの順序とかCSSの名前とか場所とかが分からなかったので、ブラウザで開いた情報から色々と試行錯誤してみた。
此処はだいじょうぶ、此処はなんか引っかかってるとか、にらめっこしてたよ……
なんかなぁ。。。編集できるようにしてあるのなら、exciteみたいに解説してくれると随分楽だったんだけど。
結局メニュー関連はdisplay:none使って隠しちゃった。
なんかイマイチ合わないというか気に入らなくて。設定で消せるかと思えば、一部どうしたって消せなさそうだったから、力業で一気に見えないよーに。必要そうな項目だけは上の方に移動させたから大丈夫かな?
なんでか上に妙な余白が空いて(ログイン/RSSの下)埋まらんのが気になるけど(-_-;
なにか邪魔してる、はずなのにな。
marginもpaddingも0設定なはずなのに、なんでか埋まらない。何回かチャレンジして、もう諦めた。もぉ、そのまま。
やっぱ正直、こんぐらいなら自分で一から組み立てた方がわかりやすくはあるんだけどなー。
1日目、主にCSSへの変更点。 ― 2007年08月02日 21時35分
アサブロへとブログ移してみました。
適当にデザイン選んで、そのままではな、と思ったので即編集。
個人的に複数カラムは好きじゃないので1カラムで。
あと、CSSをちょこちょこと変えてます。
1日で全部は無理なので、とりあえずは目に見えるところから。
-
変更点
- html/bodyにかかってたmarginとpaddingを消去
- bodyのfont-family削除
- bodyのfont-sizeをsmallから0.9emへ
- bodyにmargin新設して値を40px,autoにしてみる
- bodyにwidth760px追加(そのままじゃmarginのauto意味ないから)
- bodyにline-heightで値160%追加
- pのtext-indentを削除
なんかなぁ、htmlの内容が分からないから、カスタマイズしようにも結構困ったり。
CSSのID付けてあっても、どこで使われているのか、まだわかんないしなぁ。
全文が分かると結構変更しやすいんだけど。
最近のコメント