はじめてのブログデザイン

ホームページ制作の経験を活かしてブログテンプレートのデザインに挑戦!

スポンサーサイト

--/--/-- -- [Edit]

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

色々なブラウザでの見栄えを確認できるサイト

2007/08/05 Sun [Edit]

Web デザイナーやブログテンプレートの制作者は自分のデザイン&コーディングしたものが、より多くのブラウザで同じように表示されているかを常に意識しながら制作していることと思います。お疲れさまです。

今日はそんな制作者の方達にちょっとだけ便利なサイトをご紹介。

古い IEMac のブラウザ、Linux のブラウザなどでどのように表示されているかを、スクリーンショットで撮影してくれるサイトです。つまり色々なブラウザでの見栄えを確認できるサイトがありました。

スポンサーサイト

続きを読む ≫

CSSハック一覧表

2007/07/30 Mon [Edit]

CSS のハックが少しずつ貯まって来たので一覧表を作ってみました。
CSS ハックとは何か簡単に説明すると、それぞれの WEB ブラウザのバグなどを利用し、特定の WEB ブラウザに特定のプロパティ(設定)を適用させたり、逆に適用させないようにし、CSS 内に併記した複数のスタイルのプロパティ(設定)を、それぞれの WEB ブラウザに振り分ける技術のことです。

これからは私が使用した CSS ハックや詳細などはこのエントリで随時まとめていこうと思います。
追記:2007年12月4日〕
追記:2008年1月12日〕
追記:2009年7月23日〕

続きを読む ≫

SafariとOperaのCSSハック

2007/05/16 Wed [Edit]

覚え書きです。

仕事でボックスに overflow-y 属性を指定してある Web サイトの HTML を修正中に見つけた CSS ハックです。
今回、Mac の純正ブラウザ SafariWindowsOperaoverflow-y では overflow-y 属性を指定出来きず意図したデザインに出来なかったので、overflow にて別途指定しました。

どうやら overflow-yIE 独自の属性のようです。 ちなみに FirefoxMac も Windows も問題なく指定した通り表示されました。

ちなみに意図したデザインとはインラインフレーム(iframe)の変わりに div 要素で同じ見た目にする。でした。


div#hajime {
	width : 200px;
	height : 200px;
	overflow-y : scroll; /* IE独自の属性 */
}

html:first-child div#hajime { /* SafariとOpera用 */
	width : 200px;
	height : 200px;
	overflow : scroll;
}

■結論
Firefox はえらい!ルーールルルルルル♪

■追記(07/05/19)
Netscape(ネットスケープ)を完全に忘れてしまっていました・・・ 結局 IE 独自の属性 overflow-y は使わない事に。

■さらに追記(07/05/21)

overflow : auto;

で、全てが丸く収まりました。

CSSハック一覧表作りました。

Safari の CSS ハック

2007/05/10 Thu [Edit]

覚え書きです。

Mac の純正ブラウザ Safari 用の CSS ハックです。なるべく IE6 用の CSS ハックを利用して制作を心がけているのですが Safari のみに適用させる CSS ハックを見つけたのでφ(・ω・ )かきかき


html[xmlns*=""] body:last-child div.hajime { /*Safari用のハック*/
	font-weight : normal;
}

●課題
CSS ハックにおんぶにだっこで大丈夫?

CSS ハック一覧表を作りました。

斜体・太字(IタグとBタグ)が効かない

2007/03/27 Tue [Edit]

hajime001-greenhajime002-pinkブログテンプレートで、斜体( I タグ)と太字( B タグ)が効かない不具合が発生。

■原因
ブラウザの初期化の為 CSS 内の一番上でユニバーサルセレクタ(*…アスタリスク)を使い font-style と font-weight 属性に normal を指定していた。
※ユニバーサルセレクタ(全称セレクタ)とは、すべての要素を適用対象とするためのセレクタ。
■解決方法
ユニバーサルセレクタの font-style と font-weight 属性を削除し、margin と padding 属性の指定だけを初期化。
■備考
原因を探っている最中 Mac の Safari では I タグ(斜体)は効かない事を知る。

Iknun さん、ご報告ありがとうございました!

Top
はじめてのブログデザイン
Next
Older Entries

はじめに・・・

hajime

Author:hajime
はじめまして!齢32を迎えたおっさんです。
当ブログではホームページ制作の経験を活かして、日々ブログテンプレートのデザインを勉強しています。ご意見ご質問アドバイスなどありましたら、お気軽にコメントください!

ブログテンプレートのご使用についてをご覧頂けると注意点などをご確認いただけます。

ブログテンプレート一覧表では、今迄当ブログで制作してきたテンプレートをご覧頂けます。

はじめてのブログデザイン記事一覧で、気になる記事を探してみませんか?

はじめてのブログはFC2ブログで良いと思うに一票。

Mail Address

Google AdSense

RSSフィード

便利なブックマーク

リンク

ロックオン


ドメインが増えてきたので引っ越し検討中のレンタルサーバー。

カテゴリー

タグクラウド

検索フォーム

最近の記事

最近のコメント

最近のトラックバック

お気に入り

EIZOダイレクト
私の中で出ている1つの答え。それは液晶モニターに関しては今も昔もこれからも EIZO(ナナオ)。

ドメイン検索
a
.com .net .info .mobi

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