気ままに綴る独学メモ帳
CSSに関すること。
clearFixでお馴染みなCSSの擬似セレクタ::beforeと::afterではcontentプロパティというものが使えるわけですが、
::beforeと::afterがIE7以下未対応ということもあって使ってない人は未だ多かろうと思います。
しかしながらレガシーなIEで表示されないから使わないというのは非常に勿体無いので、
今一度contentプロパティで挿入出来る内容についてまとめておこうと思います。
大きく分けると３つです。
MooToolsとCSSでFlashのような滑らかなマウスオーバーやカレント表示を実装するプラグイン。
元ネタはCreate a Sprited Navigation Menu Using CSS and MooToolsで、
よくやるコーディングに合わせて作り直しつつちょっとロジックを変えてクラス化した。
使用する際にはHTMLとCSSにいくつかルールがあります。
全部つなげて作る。順番はなんでもいいです。
デモのやつは上から、通常・マウスオーバー・クリック・カレント、になってます。
Download(psd file):
“SpriteNavigation Demo Base” をダウンロード
mooContreGalleryはhttp://www.contreforme.ch/のProjectsページで使われている
画像拡大、スクロール、インフォメーション表示など一連のエフェクトを貴方のサイトに実装するプラグインです。
本家サイトの動きをClass化＋最新バージョンに対応させつつ再現したものですが、
オプションを変更する事によってエフェクトをお好みにアレンジすることが出来ます。
当プラグインの公開についてはcontreforme sàrlの中の人に許可を頂きました。
This class original source created from contreforme sàrl. Thank you!
また、このプラグインは「これどうやって作るの？」という質問がきっかけで出来たものです。
jQueryではやる気が出ず、MooToolsでの回答になりましたが(笑)質問を送ってくれたH氏にも感謝！
チュートリアル記事はこちら »
次の画像のようなヘッダー部分にある上下に分かれてるナビゲーションメニューを作るとき、
上に並んでるHOME・サイトマップ・個人情報保護方針とその他のulを別にする手法がよくあると思うけど、
普通に１つのリストに書いてクラス振ってfloatとposition駆使して配置するという手もあります。
その方が分けるよりもなんとなく美しい感じがするじゃないですか、XHTMLソース的に考えて。
フォームのボタンについては以前、buttonタグにボタン画像をそのまま入れるという手法を書きましたが、 もう一つ、ボタンの見た目をCSSで変更する手法がございます。 この記事ではCSSでスタイリッシュなフォームボタンを作 … 続きを読む
mooExternalLinkクラスがもっさりしすぎてたので書き直しついでに色々追加しました。
完全に別物になったので名前も変更。ver1.2.3にも対応しています。
mooExternalLinkLiteは様子見て配布しようかな。
jQuery版も追々書き換えたい…。
こんなことします。
上記３つはオン・オフ可。QuickBoxを使用する場合は別途ダウンロードが必要です。
ファイルタイプアイコンはhref末尾のpdfやzip等の拡張子で判別します。
有効な拡張子はドットを除いて２～３文字のものです。オプションで設定してない拡張子にはアイコンは出ません。
拡張子以外にhrefの内容で判別するものは次の通り
矢印で示しているのはアイコン画像の拡張子より前の部分です。
print.pngという画像を用意すればプリンターのアイコンをつけることができます。
フォームのボタンをカスタマイズする場合にオーソドックスなのは、
type="image" を使う（タイプ属性にimageを指定する）background-imageを指定するの2つなんだけど、buttonタグの中にボタンにしたい画像をそのまま入れる手もある。
普通に入れたらこうなるけれども、
CSSをちょっと弄れば…
中の画像入れ替えるだけでokな代物に。
ＩＥ7で変な横スクロールバーが出る件。font-style:italic、position、改行の三点セットでも発生するっぽい？
画像の隣にテキスト、というのではなくて文章だけの場合です。
テキストが一行ならline-heightでおｋだけど、行が複数あった場合はどうする？
テーブル使えば一発だけどdivでやろうとすると結構面倒くさい。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
<title>Vertical Centering Text in DIV</title>
<style>
.centering {
display: table;
height: 300px;
width: 300px;
background: #efefef;
overflow: hidden;
}
.centering-body {
display: table-cell;
vertical-align: middle;
}
</style>
<!--[if lt IE 8 ]>
<style>
.centering {
position: relative;
}
.centering-body {
position: absolute;
top: 50%;
}
.centering-body div {
position: relative;
top: -50%;
}
</style>
<![endif]-->
</head>
<body>
<div class="centering">
<div class="centering-body">
<div><p>et Aenean Vestibulum morbi tristique netus Donec vitae, quam sit Pellentesque eleifend libero ultricies amet placerat Mauris vitae est. ac eu ante. tempor et feugiat egestas. semper. fames amet, malesuada tortor mi egestas sit turpis quam, eget, habitant leo. ultricies senectus </p></div>
</div>
</div>
</body>
</html>
Flashを背景にしてるっぽく見せる手法についてのメモ。
Flashサイトにはしたくないけど背景をガシガシ動かしたい、みたいな時（無さそうだけど）に使えるんじゃないかなー。
まず普通に背景にしたいFlashと内容を追加する。flashのソースについては「ValidなFlash表示ソース」参照。
<div id="content"> <object type="application/x-shockwave-flash" width="500" height="300" title="title" data="index.swf"> <param name="movie" value="index.swf" /> <param name="quality" value="high" /> </object> <div class="section"> <h2>Flash Background sample</h2> <p>背景をガンガン動かしたいならこんな手法もあるよっていう。</p> </div> </div>
今更感漂うけど続くよー
Safari3.1登場。爆速表示で非常に快適なブラウザです。
FireFoxがカスタムし過ぎか最近重いからこの速さはかなり新鮮。
FireFoxでチェックしながら作ってたら大抵Safariでも同じ表示になるんだけど、
今作ってるサイトでSafariがIE6系と同じ表示になる現象が発生したので
Safariにだけ適用するCSSハックを探してたらいいものがありました。
CSS Filter: Safari CSS Hack
Not that Safari 3.0 on Windows is a grade-A browser yet, and not that I have figured out any reasons to need to hack for this browser yet, but two good potential CSS filters include using :first-of-type and -webkit-min-device-pixel-ratio.
CSS, JavaScript and XHTML Explained » Targeting Safari 3 with CSS and JavaScript: Safari3 Hacks & Filters (2008-04-15)
要素を透過させる場合、アルファチャンネルPNGかCSSのフィルターどちらか使えば作ることが出来る。
アルファチャンネルPNGはPNG24とかの保存形式で、背景無し（またはマスクつき）の画像を保存すれば作成出来る。
Div等の背景を透過させる場合、アルファチャンネルPNGで80%くらいに透過させた画像を背景にすると、フィルターと変わらない効果を得られる。
透過フィルターを使った場合、中の要素まで透過してしまうという問題がある。
positionとか色々CSSを駆使すれば回避できないこともないが、アルファチャンネルPNGを使えば中の要素が透けることはない。
以下サンプル
解説は続きに。
クリエイターが身につけておくべき新・100の法則
CSSは下に書いたものが優先されるプログラム的な仕様のほかに、優先順位を決めるルールがある。
よく知られてるのは以下の基本ルール。
さらに、スタイルの個別性を決める数値というものが存在する。
fieldsetにbackground指定（color等）をしたとき、IEだけ上方向にはみ出して表示される。
原因はlegendにまで背景が適用されてしまうため。これはIEのバグらしい。
IEだけ背景なしにしてもよいが、そういうわけにもいかんという場合は、以下の方法で修正が可能。
javascriptが無効の時、有効で使ってるCSSだと表示がおかしくなる場合の回避方法について。
最近作ったサイトが、コンテンツの表示をmootoolsで動かしていて（スライドとかで）、javascript無効にすると まったく見えない状態になってしまう。
XHTMLソースを変更しているわけではないので、CSSだけ変更すれば見れる状態になる。（CSS無効でもXHTMLだからそれなりに見れる）
というわけで、javascriptの有効・無効でCSSを変更する方法についてのメモ。
デザイナーは絶対指定で（つまりｐｘ指定）自分が作ったラフ通りガッチガチに固定しろと主張する人がまだ多いと思うが、巷の流れに乗るなら相対指定にして然るべきという感じ。
しかし、いざ相対指定しようとしたら単位とか数値とかに迷ったりする。
emすら絶対指定だと切り捨てる厳しい人もいるらしいし、相対は継承されるから指定が難しい…
思ったサイズにならないこともしばしばある。
フォントサイズ固定してなきゃデザインが崩れる、なんてのもありがちで。
そこでこのブログのテーマVicunaでも使われてるYUI Fonts CSSの出番です。
外の要素にoverflow:autoなどを指定し、中の要素にposition:relativeを設定したとき、ＩＥではスクロールバーが出てもスクロールがされない。 IE6 bug with overflow and po … 続きを読む
