おまけでついてきたよっ！って言いたいだけです。

お久しぶりの更新で、あまりに酷い人の褌で相撲っぷりですが嬉しかったのでつい。

右のサンプルみたいな写真が500点ついてくるんで、僕のようなインドア派で手持ちの素材が少ない人にはピッタリですね！

利用に当たっては、用途がwebサイトのデザインのみに限定されるものの、1380円で1000px前後の素材が500点もついてくるっておトクですね。今月号は紙のほうがオマケです。

こんな過疎サイトでアフィっても意味ないからアフィりませんが、気軽に使える素材が少ない人はamazonとかで買ってみたらいいんじゃないかな。

アクセシビリティチェック(HAREL)
http://harel.nttdata.co.jp/check?uri=
NTTデータが提供するサービス。採点形式でチェックしてくれます。

点数低っ！次作り直す時は頑張ります。

SEOアクセス解析(SEO TOOLS)
http://www.seotools.jp/001_seoanalyze/?url=
webサイトをSEO的観点から採点しくれるサービス。

ちなみにうちは26点でした。いやーお恥ずかしい。

SEO検索エンジン (Pythagoras)
http://www.pythagoras.bz/index.php/default/detail?url=
webサイトのキーワードや全体的なデータが見れるサービス。

見にくいですけど、このブログがまだwordpressのデフォルトのテーマ(classic)を使ってた頃の画像になってますね。

web戦闘力(影響力)測定(Web Scouter)
http://ja.webscouter.net/info.phtml?u=
外部要因からサイトの戦闘力を算出するサービス。(ブックマークから簡単に計れますけどね)

このブログは89。良く言えば一番最初に天下一武道会に出た悟空と同じくらいらしい。

FC2キーワードチェッカー
http://seo.fc2.com/keywordrate/index.php?m=ct&optid=&url=
FC2のキーワード専門のチェッカー。最適は5％的なアレですね。

とくにこだわった事がないので何も言えないです。

リンクのアンダーラインを自分色で染めたい(調整・装飾したい)場合ってありますよね。そういうときはボーダーでアンダーラインを表現します。ですのでボーダーの幅やスタイル(実線、ドット、ダッシュ等)等で表現が可能です。(その他手書き風等のオリジナルの”飾り”を指定する場合は背景でやります)

1.が普通に指定したアンダーラインのあるリンク

2.飾りがnoneでボーダーの下が2pxのdotted

2.hoverの飾りがnoneでボーダーの下が2pxのsolid

文字と下のボーダーとの距離はline-heightかheightで調整します。その場合はdisplay: block;にする必要があるので少々クセがあります。

html内に＜img＞で画像を表示させた場合は必ずaltを指定する必要があります。このブログはaltが適当なんでけしからんです！最近ではもっぱらユーザビリティやSEOの要素として扱われる事が多いですが、純粋にちゃんと書いてた方が後々ソースを見直したときにも理解が早いですよね。

しかし色んな人の思惑や意図が絡み合って、どうしてもaltが長くなってしまいツールチップの表示が邪魔になることがたまーにあります。

そんなときは＜img＞の中にtitle=”"を入れましょう。そうすることでツールチップが表示されなくなります。ですが、本来の意味で考えると本末転倒になってしまうので積極的にはオススメできません。

僕がサイトを作る場合、基本的にXHTML 1.0 Strictで作ります。そうなると右の画像のようにFirefoxでは画像の下に意図しない隙間が出来てしまいます。

右の場合は特に問題ないのですが、装飾要素のある部位だとこれは致命的です。なのでそういうときはCSSでimgに対して

vertical-align: bottom;

を指定してあげます。こうすることで画像の下に表示されていた隙間は無くなります。

Firefoxはサイト全体が画面内に収まる場合はスクロールバーを表示しません(IEは縦スクロールバー常時表示)。縦にスクロールの必要がある場合にのみスクロールバーが表示されるので、制作側の大きいモニタでは問題なくても、一度に表示できない小さいモニタとFirefoxを使ってサイトを見ている訪問者は、ページ移動の度にスクロールバーが表示・非表示と切り替わってしまいます。

そうなるとページ移動の度にスクロールバーの幅だけ横にズレてしまうので、見ている人に何とも言い難い不安定感を演出してしまいます。サイトの縦幅が全ページ同じなら気にすることもないのですが、なかなかそういう風にはいきません。ですのでそういうときにはCSSに

html>/**/body { overflow-y:scroll;}

を記述することによってFirefoxでの縦スクロールバーの常時表示が実現します。これはIE7以外のモダンブラウザに適用されるようにCSSハックを利用しています。そしてこのハックはW3CのCSS Validatorには通りませんので注意してください。そもそもoverflow-y自体がCSS2.1に存在しないので最初から通らないんですが。

頑張って作ったサイトは自分の作品ですから、できるだけ色んな人に綺麗な状態で見てもらいたいですよね。

またなんか思いついたら書いてみます。

フォトレポートの画像周辺のソースをざっと見ただけなんではっきりとは言えないんだけど、＜a＞と＜img＞の間に空spanが入ってるんでなんとなくやり方がわかったようなわからないような。以前Web Designer WallでやってたCSS Decorative Galleryみたいなのの延長線上+αかなぁとは思うんだけど確証なし。でもまぁあんまり難しい事は出来ないので、簡易バージョンで再現してみました。

a.ann {
display: block;
overflow: hidden;
width: 230px;
height: 142px;
background-image: url(一枚目の画像);
background-repeat: no-repeat;
background-position: center center;
text-indent: -999px;
}

a.ann:hover { background-image: url(二枚目の画像);}

サイズは左から1100px, 1000px, 960px, 900px, 800px, 760px,と6種類が入ってます。あと縦は基本768pxなのですが、別レイヤー(初期不可視)で1200pxも用意してます。それをシフト押しながら上下に動かして好きな長さにしてください。

ブラウザ無しのカンプでクライアントにOKを貰ったものの、実際作ってブラウザ上で見せたら「なんかイメージが違う」と言われたという経験は誰しも一度はあるんじゃないかと思います。まぁ私たちはブラウザを見慣れてるんで大丈夫なんですけどクライアントはそうとは限りませんし、イメージが違う原因は他にもある可能性は高いですが、視覚化できるものはしておいたほうが良いですよね。

私は最初からこれを元に作るってよりは、作ったものをこれに当てはめるって感じで使ってます。だいたいの人は自分用ライフハックみたいなのを用意してると思うので、まだの人は良かったらどうぞ。

レイヤー構成はこんな感じです。IE buttonフォルダは、ブラウザの左上にある”戻る・進む”ボタンが3パターン入ってるだけです。

iebasesize.zip(358 KB)