h1に画像を入れたいけどSEOも気にしたい時は
相も変わらずWindowsの和文フォントは汚いままなので、"Yahoo! Japan"の様に、Webサイトの題名となる様なタイトルを示す部分は、画像で作られます。HTMLとしても、SEO対策としても本来はh1で囲みたいところですが、正直しんどいのが現状です('A`)
そんなところに、両者を満足させる方法が、Ten CSS tricks you may not know : evolt.org, Codeという記事に。なんでこんな簡単なことに気がつかなかったのだろう… onz
具体的には
<h1><span>タイトル</span></h1>
としてマークアップして、cssでh1の背景に従来の画像を出し、さらにh1の中のspanの内容を見えないところに配置するだけです。
h1
{
background: url(header_img.gif) no-repeat;
width : 768px ;
height : 200px ;
}
h1 span
{
position: absolute;
left:-2000px;
}
という感じで。
spanが気になる人はspanを取って、h1に直接text-indent : -3000px とかでも良さそうです。
ところで、うちのサイトもそうですが、ページ全体を常にウィンドウの真ん中に表示するレイアウトは沢山使われています。
そしてそこに、別にcssで絶対配置したオブジェクトがあった場合、ウィンドウサイズによって絶対配置された要素とその他の要素の位置関係が変わってしまって参ったことはありませんか。
あれ、自分だけ…？('A`)
上から落ちてくるホバーウィンドウの時に悩んだんですが…。
とりあえずこれは、同じ記事の項目9番にも便利な例が載っています。
親要素の配置をrelativeにしておけば、その要素の中でabsolute指定された要素は、その親要素の原点を基準に配置することが出来ます。つまり、ウィンドウサイズが変わっても、相対的な位置関係が維持できます。
-------------
しかし、このevolt.orgでも、WinIEのサイズ計算のバグ対策が乗っていますが、これはDoctype宣言で標準モードにすれば良い気もするのですが、なぜ未だに語られるのでしょう。…何か罠が？
＃追記05/07/25
WindowsIEの6より前ではDoctypeスイッチが効かないとのこと。うぅむ…。
それはともかく、CSS周りはまだまだ苦労するところが多いですね。
ちなみに、個人的には、WinIEの「floatさせた要素のmarginが2倍くらいになってしまう」というバグが一番今のところ悩みの種です。
他は個人的にはあんまり不満は無かったり。
どちらかというと、CSSをどう書けば、他の製作者に意味が伝わりやすいか、他の人が読みやすいか等の方が最近は気になります。
CSSもHTMLもフリーな記述形式なので、非常に製作者ごとに書き方に差が出やいですね。また、少し大きなサイトになれば、量も結構な量になります。
自分が書いたものでさえ、後で見ると意味不明だったり。
きちんとポリシーを作ってやろうと思っても、途中で辛くなってきて適当になってしまったり('A`)
…CSSの各セレクタごとにタグをつけて管理できるツールが切に欲しいです。適用箇所、作った意図、注意点、作成日などを参照できるようなものが。
-------------
ちなみに自分がやっていることは、
「全体に適用されるCSSと個別のページごとのCSSの分割」
「CSSへのコメント付け」
「全体を"header"、"menu"、"contents"、"footer"のような感じでIDを振り、セクションに分割。そしてその中の要素は特に必要が無くとも、それらを親とした、子孫セレクタとして記述」
「クラス名を考えてつけることをサボらない」
くらいでしょうか。
このエントリーのトラックバックURL:
http://www.7korobi8oki.com/mt/mt-tb.cgi/66
» sealy mattress canada from sealy mattress canada
I get many good minutes while serfering your site! Thanks. [続きを読む]
トラックバック時刻: 2006年08月14日 00:26
» queen-mattress from queen-mattress
Very good site! I like it! Thanks! [続きを読む]
トラックバック時刻: 2006年08月14日 02:45
» loris azzaro perfume from loris azzaro perfume
I won 10000$ today! I'm very happy and wanted to say all about this! Have a nice... [続きを読む]
トラックバック時刻: 2006年08月14日 06:06
» coach signature handbag from coach signature handbag
I enjoyed doing this little project, it was easy to so my little brother. [続きを読む]
トラックバック時刻: 2006年08月14日 14:30
» prada white handbag from prada white handbag
Very good site! I like it! Thanks! [続きを読む]
トラックバック時刻: 2006年08月14日 17:22
» discounted prada handbag from discounted prada handbag
You have many friends that post in your guestbook - it is cool! [続きを読む]
トラックバック時刻: 2006年08月14日 17:27
» green prada handbag from green prada handbag
This is my third visit to your site. Keep up the good work. Fun stuff for all ag... [続きを読む]
トラックバック時刻: 2006年08月14日 17:38
» faux chanel handbag from faux chanel handbag
I enjoyed doing this little project, it was easy to so my little brother. [続きを読む]
トラックバック時刻: 2006年08月14日 18:42
» new chanel handbag from new chanel handbag
Hi!I recently lunched my own project and can't find guestbook script for it. I t... [続きを読む]
トラックバック時刻: 2006年08月14日 18:49
» chanel handbag shop from chanel handbag shop
Great site guys!! We frequently drop by to see whats happening back home! Its gr... [続きを読む]
トラックバック時刻: 2006年08月14日 18:53
» chanel brand handbag from chanel brand handbag
This is getting to be a very informative site, we just have to take the time to ... [続きを読む]
トラックバック時刻: 2006年08月14日 19:16
» chanel-real from chanel-real
Sounds like a pretty cool book. Looking forward to next months experiment. [続きを読む]
トラックバック時刻: 2006年08月14日 19:43
» fendi hobo handbag from fendi hobo handbag
Well... I try to say a some words about your site. It's very well. I'm say serio... [続きを読む]
トラックバック時刻: 2006年08月14日 21:02
» discount louis vuitton handbag from discount louis vuitton handbag
Very good site! I like it! Thanks! [続きを読む]
トラックバック時刻: 2006年08月14日 22:49
» brighton handbag from brighton handbag
Hi i just kinda stumbled unto your site and i think its beautiful... [続きを読む]
トラックバック時刻: 2006年08月15日 01:14
» brighton leather handbag from brighton leather handbag
You have many friends that post in your guestbook - it is cool! [続きを読む]
トラックバック時刻: 2006年08月15日 01:30
» teen bedroom from teen bedroom
Fun Site to view and learn. Look forward to more. [続きを読む]
トラックバック時刻: 2006年08月15日 04:40
» premier bathroom from premier bathroom
Good work. It looks cool! You are welcome to my site! [続きを読む]
トラックバック時刻: 2006年08月15日 08:16
» living room couch from living room couch
Hi all. I think that i can say a few words about this site here. It is very nice... [続きを読む]
トラックバック時刻: 2006年08月15日 09:55
» seiko watch from seiko watch
This web-site is the coolest! Now I don't have to feel so intimated by science! ... [続きを読む]
トラックバック時刻: 2006年08月15日 11:59
» seiko 5 automatic watch from seiko 5 automatic watch
I won 10000$ today! I'm very happy and wanted to say all about this! Have a nice... [続きを読む]
トラックバック時刻: 2006年08月15日 12:24
» omega pocket watch from omega pocket watch
Very good site! I like it! Thanks! [続きを読む]
トラックバック時刻: 2006年08月15日 15:07
» tissot t touch watch from tissot t touch watch
Fun Site to view and learn. Look forward to more. [続きを読む]
トラックバック時刻: 2006年08月15日 16:20
» new rolex watch from new rolex watch
Good Moring Great stuff,Keep up the good work. [続きを読む]
トラックバック時刻: 2006年08月15日 17:18
» owned pre rolex from owned pre rolex
Great site guys!! We frequently drop by to see whats happening back home! Its gr... [続きを読む]
トラックバック時刻: 2006年08月15日 17:50
» used rolex from used rolex
Hi all. I think that i can say a few words about this site here. It is very nice... [続きを読む]
トラックバック時刻: 2006年08月15日 18:18
» rolex dealer from rolex dealer
Hi. A lot of interesting info. Cool site! [続きを読む]
トラックバック時刻: 2006年08月15日 18:35
» replica rolex swiss watch from replica rolex swiss watch
Hi! Very eye catching site. Best regards. [続きを読む]
トラックバック時刻: 2006年08月15日 19:13
» designer replica watch from designer replica watch
Fun Site to view and learn. Look forward to more. [続きを読む]
トラックバック時刻: 2006年08月15日 19:26
» free boost mobile ringtones from free boost mobile ringtones
Sounds like a pretty cool book. Looking forward to next months experiment. [続きを読む]
トラックバック時刻: 2006年08月15日 23:52
» download free i730 nextel ringtones from download free i730 nextel ringtones
Hi! Very eye catching site. Best regards. [続きを読む]
トラックバック時刻: 2006年08月16日 14:34
» nextel ringtones creator from nextel ringtones creator
Hi! Very eye catching site. Best regards. [続きを読む]
トラックバック時刻: 2006年08月16日 15:37
» free verizon wireless ringtones from free verizon wireless ringtones
Hi! I want to make the same site that your. I like it very much. Hope thati do i... [続きを読む]
トラックバック時刻: 2006年08月16日 15:48
» verizon ringtones get it now from verizon ringtones get it now
I won 10000$ today! I'm very happy and wanted to say all about this! Have a nice... [続きを読む]
トラックバック時刻: 2006年08月16日 16:26
» lg ringtones verizon vx3300 from lg ringtones verizon vx3300
Thanks so much and good luck on your book. I can tell it will be a winner:) [続きを読む]
トラックバック時刻: 2006年08月16日 16:53
» download mosquito ringtones from download mosquito ringtones
Hi!I recently lunched my own project and can't find guestbook script for it. I t... [続きを読む]
トラックバック時刻: 2006年08月16日 17:59
» man wallets from man wallets
Fun Site to view and learn. Look forward to more. [続きを読む]
トラックバック時刻: 2006年08月16日 18:24
» cingular mosquito ringtones from cingular mosquito ringtones
Hi all. I think that i can say a few words about this site here. It is very nice... [続きを読む]
トラックバック時刻: 2006年08月16日 18:39
» Buy carisoprodol from Buy carisoprodol
Buy carisoprodol [続きを読む]
トラックバック時刻: 2006年10月07日 02:29
» carisoprodol Online from carisoprodol Online
carisoprodol Online [続きを読む]
トラックバック時刻: 2006年10月10日 18:34
» Bdsm comics from Bdsm comics
bdsm comics [続きを読む]
トラックバック時刻: 2006年10月12日 06:38
» California Refinance from California Refinance
get a California Refinance today [続きを読む]
トラックバック時刻: 2006年10月26日 06:57
» debt consolidation from debt consolidation
get a debt consolidation today [続きを読む]
トラックバック時刻: 2006年10月26日 07:36
» ringtones from ringtones
get free ringtones online today [続きを読む]
トラックバック時刻: 2006年10月27日 03:31
» mortgage insurance from mortgage insurance
mortgage insurance [続きを読む]
トラックバック時刻: 2006年11月05日 09:56
» debt consolidation from debt consolidation
Only the best debt consolidation site. [続きを読む]
トラックバック時刻: 2006年11月16日 02:42
» mortgage lenders from mortgage lenders
Only the best mortgage lenders for you. [続きを読む]
トラックバック時刻: 2006年11月16日 03:52
» Cash Advances from Cash Advances
get cash advances online today [続きを読む]
トラックバック時刻: 2006年11月29日 16:00
» debt consolidation from debt consolidation
The best debt consolidation for you. [続きを読む]
トラックバック時刻: 2006年11月29日 19:27
» Low Cost Life Insurance from Low Cost Life Insurance
Online Low Cost Life Insurance [続きを読む]
トラックバック時刻: 2006年12月01日 01:25
» Home Equity Line of Credit from Home Equity Line of Credit
Home Equity Line of Credit [続きを読む]
トラックバック時刻: 2006年12月01日 02:43
» Term Life Insurance Quote from Term Life Insurance Quote
Online Term Life Insurance Quote [続きを読む]
トラックバック時刻: 2006年12月02日 00:25
» Term Life Insurance from Term Life Insurance
Online Term Life Insurance Today [続きを読む]
トラックバック時刻: 2006年12月02日 01:33
» Cash Advance from Cash Advance
Online Cash Advance Fast Now [続きを読む]
トラックバック時刻: 2006年12月02日 06:54
» Term Life Insurance from Term Life Insurance
Free Online Term Life Insurance [続きを読む]
トラックバック時刻: 2006年12月03日 03:35
» Term Life Insurance Quote from Term Life Insurance Quote
Online Term Life Insurance Quote [続きを読む]
トラックバック時刻: 2006年12月03日 04:44
» Term Life Insurance Quotes from Term Life Insurance Quotes
Online Term Life Insurance Quotes [続きを読む]
トラックバック時刻: 2006年12月03日 05:51
» Life Insurance Quotes from Life Insurance Quotes
Fast Online Life Insurance Quotes [続きを読む]
トラックバック時刻: 2006年12月03日 09:10
» refinance from refinance
The best refinance mortgage. [続きを読む]
トラックバック時刻: 2006年12月06日 19:05
» webcam strip from webcam strip
webcam strip qn [続きを読む]
トラックバック時刻: 2006年12月07日 14:28
» imykbrjc from imykbrjc
imykbrjc [続きを読む]
トラックバック時刻: 2006年12月10日 08:53
» Cash Advances from Cash Advances
get a Cash Advances online [続きを読む]
トラックバック時刻: 2006年12月13日 10:55
» lexapro from lexapro
lexapro [続きを読む]
トラックバック時刻: 2006年12月14日 07:25
» mortgage brokers from mortgage brokers
Find the best mortgage brokres online. [続きを読む]
トラックバック時刻: 2006年12月14日 10:23
» home equity line of credit from home equity line of credit
home equity line of credit [続きを読む]
トラックバック時刻: 2006年12月15日 12:16
» lexapro from lexapro
buy lexapro online now [続きを読む]
トラックバック時刻: 2006年12月16日 04:32
» foreclosures from foreclosures
foreclosures online for you. [続きを読む]
トラックバック時刻: 2006年12月16日 11:09
» valtrex from valtrex
buy valtrex online [続きを読む]
トラックバック時刻: 2006年12月17日 05:57
» prevacid from prevacid
buy prevacid online now [続きを読む]
トラックバック時刻: 2006年12月19日 02:56
» paxil from paxil
buy paxil online now. [続きを読む]
トラックバック時刻: 2006年12月19日 03:24
» flexeril from flexeril
buy flexeril online today. [続きを読む]
トラックバック時刻: 2006年12月20日 04:29
» Cash Advance from Cash Advance
2 Cash advance for you [続きを読む]
トラックバック時刻: 2006年12月22日 10:19
» home mortgage rates from home mortgage rates
the best home mortgage rates [続きを読む]
トラックバック時刻: 2006年12月24日 04:19
» debt consolidation from debt consolidation
get the best debt consolidation [続きを読む]
トラックバック時刻: 2006年12月24日 08:42
» mortgage leads from mortgage leads
get the best mortgage leads [続きを読む]
トラックバック時刻: 2006年12月29日 16:04
» ブランド物を1個から卸値で買える方法を知りたくありませんか? from 海外ブランド物激安購入法
自宅にいながら海外から激安で仕入れて日本のオークションに出品する。オークションなら即、現金が手に入ります。これが大きな利益をとるための良い方法だとは、誰もが知っ... [続きを読む]
トラックバック時刻: 2006年12月31日 10:10
» debt consolidation from debt consolidation
get the best debt consolidation [続きを読む]
トラックバック時刻: 2006年12月31日 21:02
» free sprint ringtones from free sprint ringtones
I love it! tIUnxh0cRB [続きを読む]
トラックバック時刻: 2007年02月09日 05:29
» cell phone wallpapers from cell phone wallpapers
Very good article. gSxxnQgp0u [続きを読む]
トラックバック時刻: 2007年02月09日 17:03
» dallas movers from dallas movers
I love it! zNDdgNPohr [続きを読む]
トラックバック時刻: 2007年02月11日 14:10
» buy ambien from buy ambien
Nice! Keep up the good work! m6VI5oWAXt [続きを読む]
トラックバック時刻: 2007年02月12日 13:39
» Plants and flowers from Plants and flowers
I love it! M1qQ9V4j0Q [続きを読む]
トラックバック時刻: 2007年02月25日 02:37
» buy xenical from buy xenical
I love it! JLZwtHTwM4 [続きを読む]
トラックバック時刻: 2007年02月25日 14:47
» free ringtones from free ringtones
Nice! Keep up the good work! uT7qASTMzb [続きを読む]
トラックバック時刻: 2007年04月18日 06:06
» cingular ringtones from cingular ringtones
Very good article. OxqeOJ16bV [続きを読む]
トラックバック時刻: 2007年04月23日 00:06
» nextel ringtones from nextel ringtones
Very useful, thanks! ibiBXHkF8F [続きを読む]
トラックバック時刻: 2007年04月28日 23:37
» ５分で検索順位１位を取れたよ。これからなら、これ。「たった４３ページの本物ＳＥＯマニュアル」 → http://tatta43seo.jugem.jp/ from たった４３ページの本物ＳＥＯマニュアル【ホームページ制作会社F/望月 聡】で稼ぐのはあなた？
初めまして、いつも楽しく拝見しています。この度「たった４３ページの本物ＳＥＯマニュアル【ホームページ制作会社F/望月 聡】で稼ぐのはあなた？」というサイトを作り... [続きを読む]
トラックバック時刻: 2007年12月12日 12:15
» PRADA Phone by LG(L852i) 発売日 from PRADA Phone by LG(L852i) 価格
PRADA Phone by LG(L852i)の発売日と価格について。L852iは世界的ブランドプラダと作り上げた、究極のスタイル。 [続きを読む]
トラックバック時刻: 2008年05月12日 16:44
■コメントはこちらから
サイン・インを確認しました、 . さん。コメントしてください。 (サイン・アウト)
(いままで、ここでコメントしたとがないときは、コメントを表示する前にこのウェブログのオーナーの承認が必要になることがあります。承認されるまではコメントは表示されません。そのときはしばらく待ってください。)
内容を見えないところに配置するのは、CSSが有効かつ画像が非表示な閲覧環境において問題を発生するので、慎重に決めたほうが良いと思います。WinIEのサイズ計算のバグ対策については、6.0は確かにDOCTYPEスイッチングがありますけど、以前のバージョン（5.5や5.01）には実装されてませんから、それらを考慮に含める場合には必要になります。
投稿者 通りすがり : 2005年07月25日 04:09
なるほどなるほど、ありがとうございます。
CSSが有効かつ、画像が非表示という環境が頭に浮かばなかったのですが、ナローバンドやモバイルなどで十分ありうることですね。
参照したURL
http://standards.mitsue.co.jp/archives/000038.html
http://kidachi.kazuhi.to/blog/archives/000922.html
http://www.mezzoblue.com/tests/revised-image-replacement/
想定するターゲット層によって、一考しておく必要がありますね。
投稿者 7korobi : 2005年07月25日 17:01