Category Archives: XHTML+CSS

[CSS]CSSで簡単に拡大画像をアナウンスする

0
Filed under XHTML+CSS

CNET JAPANのニュースにフォトレポート(リンク先は新型PSPのフォトレポート)という形式の記事があるんだけど、そこでは写真上ににカーソルが乗った瞬間に、「写真をクリックすると次へ移動します」みたいなのが写真の上に出てくるんです。で、それを見てたらふと「写真をクリックすると拡大します」みたいな感じでも使えるような気がしたので、真似したくなった。

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

Read More »

[XHTML+CSS] 引用を装飾してみる

0
Filed under XHTML+CSS

ブログをやってると引用(blockquote)をすることが多いので、とりあえず引用符?ちょんちょん?ダブルクオート?を作って見ました。

引用符 wikipedia
引用符(いんようふ)は、約物の一つ。文中において、他の文や語を引用していることを示す役割を果たす、引用部分を囲む一対の記号。コーテーションマーク、クォーテーションマーク、クオーテーションマーク、引用符号とも言う。

こういうの装飾方法って、おしゃれ系ブログとかで良く見ますよね。うちのCSSはこんな感じです。

blockquote {
	background-color: #F2F2F2;
	background-image: url(/画像1.gif);
	background-repeat: no-repeat;
	background-position: 2% 0.5em;
	width: 95%;
	margin: 0 auto 1em auto;
	padding: 0px;
	border: 4px solid #939393;
}
blockquote p {
	text-align: justify;
	text-justify:inter-ideograph; /* IE独自 */
	background-image: url(img/画像2.gif);
	background-repeat: no-repeat;
	background-position: 98% bottom;
	padding: 2em 13.5% 1.5em 13.5%;
	margin-bottom: 0.5em;
	font-size: 85%;
	line-height: 1.5;
}

blockquoteの背景に左上の”(ダブルクオート)を指定して、中のPの背景に右下の”(ダブルクオート)を指定するかんじです。

うちは横幅が960px-760pxの擬似リキッドですので、ちょっと数値とかが面倒です。あと、いろいろ色指定したりボーダー使ったりしてるんで長いっすね。backgroundはあえてショートハンドで書いてません。

普通にやるなら

blockquote {
	width: 500px;
	padding-left: 60px;
	background: url(img/画像.gif) no-repeat left top;
}
blockquote p {
	padding-right: 60px;
	background: url(img/画像2.gif) no-repeat right bottom;
}

をベースとしていじっていく方がいいと思います。

[CSS] 追記 – 白銀比固定で指定した横幅までリキッドなエラスティックレイアウト

0
Filed under Web Design, XHTML+CSS

なんか題名が意味不明になってしまいました。メイン部とサイドバーが白銀比を保ちつつ、指定した横幅(例:760px~960px)まで可変なエラスティックレイアウトです。

うんごめん日本語苦手なんだ。こういうのってなんて呼べば良いんだろう。勉強不足で申し訳ない。

たぶんいろんな所でCSSに詳しい人が解説してるんじゃないかと思うので、運悪くこのページを開いてしまった人へ参考までに。
(と予防線を張る)

Read More »

Web担当者になったらハッキリ理解しておきたい単語

0
Filed under Web Design, XHTML+CSS, 日記


わたくしごとで恐縮ですが、Webサイトを作る場合に意思の疎通を妨げるのが言葉に対する認識の違いだったりします。

例として
A「ブログ形式(weblog)で更新していくなんてどうですか?」
B「ブログ形式(日記)?そんなもんいらないよ」
みたいな

まぁこれはどちらも間違いじゃないですし詳しい方が歩み寄れば良いのですが、やはり現場レベルの人間と営業の方が話したりすると、そういう言葉に対する認識のズレによってギスギスしちゃったりするもんです。

Read More »

Firefoxのページスクロールの自動出現を制御する

0
Filed under Web Design, XHTML+CSS

Firefox等でサイトを見た場合ページの内容量(使用モニタからはみ出した場合)によってスクロールが出たり出なかったりして、一瞬レイアウトがずれているように感じてしまうことがあります。

もちろんレイアウトはズレて無いのですが、製作中にいちいちカクカクされると本来なら気づくべきレイアウトのミスも見逃してしまいがち。また最終的に出来上がったときにカクカクされるとイマイチ印象がよくない。なのでそういうときはCSSで常にスクロールバーを表示させましょう。一番簡単なやり方は

CSS

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

このhtml>/**/bodyはIE7以外(Operaもだよね?)のモダンブラウザにCSSを適用させる為のCSSハック。
Firefox2, safari3.1.1(win), IE6, 7 , 8(IEtester) で確認。
注意として、この場合Operaには適用されないみたいなので気をつけてください。
なので完全にしたい人は別々にハックしてください。

あとIE8 beta1についてはまさしくインターネットファッキンエクスプローラー(どこかのサイトがそう呼んでた)
なのでノーコメントで。

てかIE8だとズレまくりんぐ。