安茂運営サイトの情報Blog

++[backyard]++

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
おもしろかったら、ポチっとしてね♪
  1. --/--/--(--) --:--:--|
  2. スポンサー広告

CSS

今回シムサイト更新するにあたって、新しくつくったページだけTABLEを使わないデザインにしてみました。

このページ

かなりシンプルなデザインです。
ま、今回は「サイトデザインになるべく画像を使わない」ってのも意識したので。
(画像使うと当然表示が重くなるから)

ここでhtmlの文法チェックしたら、はじめて96点いきました。
4点減点されてるのは、TARGET属性を使ってるのと、「DOWNLOAD」って同じ内容で異なるリンクをしてるから。
この2つはあえて使っているものなので、特に気にしなくてもいいかなと思っています。

それにしても。
ホント、CSS解釈はブラウザによって全然違いますね。なるべく同じように表示させるのに苦労しました。

やっぱりwebサイトをつくったら、IE,ネスケ or Firefox(Geckoエンジン),Operaくらいは確認した方がよさそうです。できればMacでも確認したいところですが、もってないPCで確認するのはさすがに現実的ではないので(笑)。
特にIEだけで確認してる方は要注意です。IEはかなり柔軟に表示されるので、他ブラウザだと崩れまくりなんてことがよくあります。
(崩れるだけならまだしも、見られないなんてことも)

「じゃ、Firefoxだけで確認すればいいじゃん」……と、都合よくいかないのが世の中。
OperaやFirefoxではちゃんと表示しても、IEでうまく表示できないなんてこともあるんですよ。
ブログの改造したとき、IEのバグに何度か引っかかったしね。

ま、TABLE+CSSを使ってデザインするのが、一番頭を使わなくてすむような気がします(笑)。
私は「TABLEをデザインに使わない方向で」と思ってますけどね。


++++++++++++


【web拍手ありがとうございます】
> X-2で地獄の底に突き落された…(9月27日 20:00)
すみません、思わず吹き出しちゃいました(^▽^;)。
人によって解釈はそれぞれですので、続編が気に入らなければ「いくつかある可能性の中の一つ」と思ってしまえばよいのです(笑)。複数のエンディングがある時点でもう「パラレル」ネタですからね。
私の話が「他の可能性」を想像する助けになればといいなと思います(^^)。
スポンサーサイト
おもしろかったら、ポチっとしてね♪
  1. 2005/09/29(木) 12:47:00|
  2. DIARY
  3. | トラックバック:0
  4. | コメント:7
<<せっかくだから | HOME | コラボってみました>>

コメント

現状ではやっぱりテーブルレイアウト+細部CSSが無難ですよね。妙な神経も使わないで済むし、安心できるし。
だけど、CSSを勉強しちゃうと、やっぱ完全CSS制御できたらスゴイよなあ…て、思っちゃうのがサガで(笑)

NN Opera は確か共にGeckoエンジンが土台ですよね?あんまり見え方に大差は無い気がします。それでも詳細部分がちと違うってのが泣きたい所っすよねえ。古いバージョンなんて、もう絶対対応させようなんて思えなくなっちゃうし。

今の野望は、現状の自サイトを、モダンブラウザでほぼ同じ外観に整えること。
でもfloatもline-hightもガンガン使ってるんで、絶対ムリだと思うけど(^^ゞ 特にMac IEが。

来年中あたりに、直せれば良いなぁと思うんですが(って随分長期計画だな;)
どうなる事やら。
改造するより、いっそ作り変えた方が早いかもしんないッス…でもそれも嫌だな(笑)
  1. 2005/09/29(木) 22:28:10 |
  2. URL |
  3. 茉莉子 #3RsRQlfI
  4. [ 編集]
> 茉莉子 さん
現状ではテーブルレイアウト+細部CSSが確実ですね。どのブラウザでも、ほぼ同じような表示をしてくれますし。
でも、

http://www.fromdfj.net/index.shtml

↑こちらのサイト</a>とか見ちゃうと、CSS使いこなせると便利だよなーとか思ったり(笑)。(スタイルシート切り替え機能がついたサイトです)

あ、Operaは独自エンジンです。ネスケとFirefoxがGeckoエンジン…なので、最低でもIEとOperaとGecko系は確認した方がいいだろうと。
シムサイトは多い時で1日200くらいVisitが(世界のあちこちから)あるんですが、90%くらいはIEですね。残りの10%がOperaとGecko系みたいです。(もちろん、他ブラウザもちらほらと姿を見せます)
「IEだけ表示できればいい」と思わせるほど、IEのシェアが高いってことはわかってるんです。ただ、FirefoxとかOpera使ってる人はわりと「いろいろと、わかってる」方が多いんで、あんまりヘンな表示をするものを出したくないんですよ(笑)。

現状サイトをモダンブラウザでほぼ同じ外観に……正直、厳しそうですね(^^;)。
もともと全てのブラウザに対応する事自体が無理ですし。
CSS切ったときに、サイト閲覧に不便がないようなhtmlを記述する方がいいのかも。

サイトを直そうとしてることだけでもエラいっすよ(笑)。
私は本当にどーしようもなくなるまで、このサイトは改装はしないつもりです。他のサイトを利用してCSSの勉強はしておこうと思いますけど。

そういえば、この前茉莉子さんのページ内に「消し忘れたと思われるタグ」を見つけたんですよ。
余計なタグが表示に影響することがあるので、後ほどこっそりお知らせしますね。
  1. 2005/09/30(金) 11:12:55 |
  2. URL |
  3. 安茂 #9K64Lzaw
  4. [ 編集]
おお、Operaが独自でしたか…失礼いたしましたm(__)m
あーんど、ご指摘ありがとうございました。全然気がついてませんでしたよ;

>FirefoxとかOpera
確かに通好みとでも申しましょうか(^^ゞ
ライトユーザーでは在り得ませんからね。恥ずかしくないモノという安茂さんのお気持ちは理解できます。
何にしてもDVDよりも先にブラウザの規格統一をお願いしたい(絶対ムリだけど:爆)

>切り替えCSS
色変えるのはねー、自分のサイトじゃあやるつもりは無いんですけど、ブラウザによって切り替えするのは興味はあります。でもいちいち対応ブラウザごとにCSS書くのも、果てしないしね(笑)
バグ技で特定ブラウザに読み込ませない技は、見よう見真似で使ってもいますけど、やっぱワケわかんないッスよ;;
CSSは奥深いです。
  1. 2005/09/30(金) 13:38:49 |
  2. URL |
  3. 茉莉子 #3RsRQlfI
  4. [ 編集]
茉莉子さん、こんにちは。差し出がましいですが。

たとえばIEの場合、

ツール→インターネットオプション→ユーザー補助

と開くと、サイトから送られてきたスタイルを無視して、ユーザー独自のスタイルシートを指定することができます。どんなにがんばってCSSを書いても、その見た目はユーザーによって自由に変えられるということを意味しています。

これひとつとってもわかると思いますが「どのブラウザでも同じ表示を」ってのははっきり言ってしまうと無駄な労力です。
なぜか。元々Web上の文書ってものは印刷物とは違い、閲覧者の環境は様々異なり、同じ見た目でみんなが読むことをハナから想定していないからです。フォントひとつ取ったって、制作者と同じフォントが閲覧者の環境にあるとは限らないのはご存じの通り。

HTMLとCSSが文書論理構造と見た目という役割分担をしている目的は、異なる環境でも情報の欠落無く文書が伝わるということですから、制作者が作ったCSSで閲覧しても、CSSを無効にして閲覧しても、「ちゃんと読める」ってことを目指すのは大変重要なことだと思います。

もちろん、自分が作った文書も、その見た目もやはり作品ですから、制作者の思惑通りの見た目で見て欲しいと思うのは人情だと思います。その点は否定しませんが、「あくまでも同じ見た目」を目指すのはWeb上の文書として本質ではなく、本質ではないからこそそういう機能はどこからも提供されていず、当然大変苦労すると思います。

「どのブラウザでも問題なく読めるを目指す」「あくまでも同じ見た目」この二つ、どちらもCSSの勉強にはなるでしょう。でも後者の場合は今だけ使える裏技テクニックみたいなのが上手くなるだけで、長く使える技術が身に付くとは言い難いかと。

ふぅ、仕事中の息抜きのつもりが長々書いてしまった(汗)。すんまへん。
  1. 2005/09/30(金) 15:41:25 |
  2. URL |
  3. 安茂旦那☆ #Eh9okx9A
  4. [ 編集]
なんか安茂さん文体違うと思ったら旦那さんだったんですね(笑)

すいません、言葉が足りませんでしたm(__)m
勿論、現状で丸っきり同じ見映えを追及したいと思っているのではありませんよ。ユーザー独自のCSS指定ができるのも承知していますし、より正確なマークアップを学ぼうとしたことが、CSSを勉強しようと思った理由ですし。ただ今よりも、IE以外でも例えば背景消えちゃって結果読み辛いとか、そういう点をなんとか改めたいと思っているのです。

今の所、自サイトは時々centerでちょっと手を抜いたり、使い勝手の点からリンクで別窓開けたりもしてますが、何より正しい意味でのマークアップには一応気を使っているつもりですし、その方向性を崩すような事はしたくないと思っています。
勿論今でもカンペキであるなんて思ってはおりませんが;;

私がお伝えしたかったのは、CSSを学び始めて一番戸惑う事が、やはりブラウザでの対応の差だと思うのです。W3C準拠といえど、その意味の汲み取り方や発展性、あるいはバグとか、ブラウザによって全く違ってしまう現状ですよね。そこでCSS書くのがイヤになる人もたくさんいるに違いないと思っちゃうぐらいのこの混乱を、もうちょっとなんとかして欲しいなあと思っている、という事です。

プロのWEB製作者さんの元にすら、いまだにCSS制御オンリーサイトの依頼が来る事は少ないと読みました。折角のCSSも、敷居が高くちゃ意味が無いような気がします。冒頭で安茂さんも仰っているような「テーブルレイアウト+CSS」のカタチが安心できるなんて言葉が、早く死語になって欲しいなと思うのです。

一個人サイトとしては、やはりパっと見で見やすくないと、なかなかお客様のハートをゲットする事は難しいです(笑)
勿論、CSSナシでもちゃんと情報を提供できる状態である事が前提でありますが。

しかし仕事の息抜きでCSSを語る旦那さん。
息抜きになりましたか?(笑)
(て、紛らわしく書いてるアンタの所為だから;;すませんっm(__)m)
  1. 2005/10/01(土) 00:12:33 |
  2. URL |
  3. 茉莉子 #3RsRQlfI
  4. [ 編集]
的はずれなコメントでもうしわけありませんでした(汗)。

ブラウザ側の対応がもうちょっとなんとかならないと・・・というのはよくわかります。全く同じに対応しろとは言わないけど、未対応プロパティが多かったり、大きく崩れたりってのはカンベンして欲しいですよね。

でもだからこそ、テーブルレイアウトを使い続けることは良くないんですよね。こういう間違ったテクニックが標準として広がっていると、ブラウザベンダーもCSSへの対応に力を注げないと思うわけでして。

ホームページビルダーなどを普通に使うと、正しくないページがガンガンできてしまうのも何とかして欲しいところです。
  1. 2005/10/01(土) 09:22:53 |
  2. URL |
  3. 旦那☆ #EPufAmtA
  4. [ 編集]
いつの間にか、コメント欄が育っている……(笑)。

もう少しブラウザ側のCSS対応を何とかしてくれると助かるんですけどねー。
ついでに「ホームページビルダー」が非推奨のタグをはき出さず、まともなCSSを使うようなプログラムにしてくれるとブラウザ側も少し考えてくれるんじゃないかとか。「ビルダー」でwebサイトの世界に入ってくる人は多いので(笑)。

サイトは見栄えも大事ですからね。
ある程度解釈を統一してもらわないと、気楽にデザインできませんです。

でも、現行のCSSそのものにも不満があったりします。
もう少し簡単にセンタリングできるようにしてほしいとか。
(だから、非推奨の<CENTER>タグ使われちゃうんだよ……(^^;))
  1. 2005/10/02(日) 09:26:20 |
  2. URL |
  3. 安茂 #9K64Lzaw
  4. [ 編集]

コメントの投稿


管理者にだけ表示を許可する

トラックバック

トラックバックURLはこちら
http://nog.blog15.fc2.com/tb.php/448-a0dcc00b
この記事にトラックバックする(FC2ブログユーザー)
| HOME |

Profile

このブログへのコメント、トラックバック、リンクはご自由にどうぞ。
ただし、宣伝目的のみであると管理人が判断したコメントや記事と関連がないトラックバックは削除させていただきます。ご了承下さい。


ランキング参加してみました♪


Update news

2008/08/29
FF10ファンサイト

◆Fanfiction
Novel内「もう一人の「彼」 1」
修正&再掲載しました。

2007/01/07
シムピープルサイト

Buyable Skin 更新。

2006/04/01
web素材(FF)

武器のイラストとアイコン。

Entries

Category

Comments

Trackbacks

Monthly

Bookmark(Blog)

◆応援中◆
BearTrack
[BLOG]行くぞ年4回、大好きなニューメキシコ州へ!

Affiliate




ファイナルファンタジー トレーディングアーツ ミニ 第2弾 BOX
FF トレーディングアーツミニ 第2弾
1BOX 2,420円 (税込 送料別)
2008年4月発売予定


ファイナルファンタジー トレーディングアーツ ミニ 第1弾 BOX
FF トレーディングアーツミニ
1BOX 2,335円 (税込 送料別)


ファイナルファンタジー メカニカルアーツ コンチネンタルサーカス 完成品(予約)
FF10の飛空艇フィギュア
この商品のレビュー記事はこちら



プレイアーツアーロン、キター!!
この商品のレビュー記事はこちら
関連記事一覧


ファイナルファンタジーX-2 プレイアーツ no.2 Rikku リュック US版
海外版なら、まだ入手可能。
…って、なにこの14,000円!?
この商品のレビュー記事はこちら

【インディアンジュエリー】

・Four Corners
・SILVER501
・ガウチョ
・サンタフェスタイル
・BLUE CORN
・Country
・ターコイズCOLLECTION
・インディアンジュエリーKC,s
・SUPER SMITH
・H&H TRADING
・インディアンジュエリー ミツボ
・TENORI STONES

【ガムランボール】

・ストラップヤ!
・ANGKASA
・アンジュドール
・ナムチェバザール
・ブルーミンカフェ
・AJARA

BlogPet

Notes

My Livly

『Livly Island』『リヴリーアイランド』は、ソネットエンタテインメント株式会社の商標です。 リヴリーアイランドに関する著作権その他一切の知的財産権は、ソネットエンタテインメント株式会社に属します。 このサイトは『リヴリーアイランド』およびソネットエンタテインメント株式会社とは一切関係ありません。

Search

RSSフィード

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。