2004年04月03日

写真風画像(3)

写真風画像写真風画像(2)の続きです。
いろいろ試してみましたところ、seesaaでIE6.0,Firefox0.8両方とも
上手く表示できたのはtableタグを使ってtdにクラスを指定する方法で
した。Firefoxだけならimgタグ、IEはspanタグの使用が有効でした。
多少簡便さは失われますが、方法は以下の通りです。

cssに追加するコード
.pic {
border-top: solid 1px silver;
border-left: solid 1px silver;
border-bottom: solid 2px gray;
border-right: solid 2px gray;
background-color: white;
padding: 6px;
}

記事への記載例
<table border="0"><tr><td class="pic">
<img src="xxxx.jpg">
</td></tr></table>

<?xml version="1.0" encoding="Shift_JIS"?>について調べていたら
スタイルシートでマルチカラムデザインの実現にこんな記述が有りました。
XML 宣言とは、<?xml version="1.0" encoding="Shift_JIS"?>の事です。
これがあると、IE 系では標準モードになってくれず、互換モードで
レンダリングしてしまうのです。もちろん、標準モードで表示してく
れるべきです。この違いによって、まず margin と padding などに
よる位置の算出に差が出てきます。

これが関係しているかどうかすら私にはわかりかねますが、いずれ
にしても、ブラウザによって見え方が違うのは困りますね。

いろいろ教えていただいたFloral Moon(momoさん)の記事
画像を装飾するにトラックバックします。感謝。
posted by 電算担当者 at 11:19| Comment(9) | TrackBack(4) | ブログ考 | このブログの読者になる | 更新情報をチェックする
この記事へのコメント
トラックバックいただいていたのにコメントするの遅くなってすいません。

写真風画像(2)でいろいろな指定表示があって解りやすいです。
説明ベタの私はすごく感心してしまいました!
Posted by momo at 2004年04月09日 20:55
その節はお世話になりました。
今後も宜しくお願いいたします。
Posted by 電算担当者 at 2004年04月10日 09:09
こんにちは。
いろいろな指定の仕方があるんですね〜。勉強になります。
ところで私のところでも写真風枠をつけてみたんですがどうやら、電算担当者さんのやり方と違うようで、全然自信がありません。

もし変な表示になったら教えていただけませんか?
Posted by Candy at 2004年09月16日 14:34
Candyさん
IEでは写真風に見えていますが、firefoxで見ると
http://densan.seesaa.net/article/92432.html
この記事の上から3番目のspanで指定した時のと
同じ様に見えています。
Posted by 電算担当者 at 2004年09月16日 15:08
Candyさん
ごめんなさい、IEではきちんと見えるんでした。
http://densan.seesaa.net/image/candys_diary.gif

firefoxではこんな風に見えてます。
Posted by 電算担当者 at 2004年09月16日 15:18
こんばんは。
みてくださってありがとうございます。
そうですか〜〜、難しいですね。tableタグでtdっていうのは前に試したことがあります。KOuさんのところの暑中見舞いで使わせてもらいました。

今度はそっちでやってみます。また変だったらこっそり教えてくださいね(^o^)
Posted by Candy at 2004年09月16日 19:19
Candyさん
プラウザによって見え方が変わるのは困りますよね。
何とかならないんでしょうかね、これって。
Posted by 電算担当者 at 2004年09月16日 21:39
はじめまして。Seesaaでこじんまりとブログをやっております、hanaboroと申します。画像にうまく枠をつけられなくて、しょんぼりしておりましたら、「グラスの中のビー玉」のびおびおさんがこちらの記事を紹介してくださいました。
この方法、いろいろ試されて編み出されたんですねぇ、すごいです!画像は、tableに入れちゃうといいのですね。実はすでに、コピペさせてもらっちゃたんです。WinのIE,Firefox,Opera,Sleipnir,Netscapeでチェックしましたら、画像枠の部分はどのブラウザでもOKでした。事後報告ですみませんが、どうもありがとうございました。
Posted by hanaboro at 2004年10月22日 18:17
hanaboroさん、はじめまして。
firefox1.0PRでもきちんと表示されていました。
>この方法、いろいろ試されて編み出されたんですねぇ
理屈がわからないので、色々やるしかないのです(泣
私の試行錯誤の記録が役に立って良かったです。
Posted by 電算担当者 at 2004年10月23日 10:42
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント:

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。
この記事へのトラックバックURL
http://blog.seesaa.jp/tb/93170

この記事へのトラックバック

写真風写真!?
Excerpt: よく参考にさせていただいている日々是ブログさんの記事をそのまま参考にさせていただいて試してみました。 画像を写真風に見せる工夫なんですが私は写真を使ってやってみました。 如何でしょう? 自分の覚..
Weblog: ☆☆☆心のオアシス☆☆☆
Tracked: 2004-05-01 05:09

■ムシ+クサ
Excerpt: このエントリーはTrackbackPeopleに参加しています ■「立山アタック」写真 その4 植物+虫 写真って、なんか定番ですが、綺麗なの一枚ぐらいは撮りたくないですか? なんかね、ついつ..
Weblog:  M O O - T _ b l o g
Tracked: 2004-09-16 13:08

画像を写真風に表示する技なり
Excerpt:  M O O - T _ b l o g経由で画像を写真らしく見せる技なるものを発見! そこで、うちの画像もそれっぽくしてみた。 わざわざ新たなエントリーを作るのもなんなので、先日の釣りのエントリーで..
Weblog: ものづくり本音ブログ
Tracked: 2004-09-26 17:26

バス釣り(片倉ダム)
Excerpt: 久々にバス釣りへ行ってきました。 多い年には毎週行っていたバス釣りも、今年はようやく2回目の釣行となりました。 同行者は毎度の雨女の弟さん(T君) 深夜2時過ぎに出発し、船宿に着いたのが4時ちょい前。..
Weblog: ものづくり本音ブログ
Tracked: 2004-09-26 18:06