2006年05月01日

positionプロパティの考察

CSSの中でpositionプロパティは他のプロパティより異質です。
ですのでちゃんと意味を理解しないと使い方がまったく解りません。

positionの意味を理解する上で
static(デフォルト)とfixed(固定)は無視しましょう。

staticはデフォルトつまり何も指定してないのと同じ
fixedはブラウザ(IE)でサポートされておらず
使用するのは現実的ではないからです。

一番よく使うのはrelativeです。
相対位置指定、つまり本来表示されるべき場所からどれくらい離れた場所に表示するかを指定できます。
position:relative; top:10px; left:10px;

ですと本来表示される場所より10px下にさらに10px右に表示されます。
marginやpaddingと同じような感じで複雑な配置が可能になります。

次によく使うのはabsoluteです。
絶対位置指定、つまり親要素からのどれくらい離れた場所に表示するかを指定できます。

親要素とは何も指定がない場合はbody(つまりブラウザで表示されている全画面)が親要素になります。
bodyからabsoluteを適用する要素の間にrelativefixedを指定している要素がある場合その要素を親要素とします。

absoluteの参考記事:cssでページの右上に広告を表示する。
posted by ねこまんま at 00:47
Comment(0) | TrackBack(0) | CSS

2006年04月29日

cssでページの右上に広告を表示する。

当WEBサイト右上に挿入している広告ですが
ブログのタグを複雑に変更して挿入しているものじゃありません。
CSSのpositionで再現しております

ソース
<div style="position:absolute;top:0;right:0;">
<a href="リンク先" target="_blank">
<img border="0" width="468" height="60" alt="" src="バナー画像">
</a>
</div>

このソースをページ内のどこかに挿入すれば自動的に右上に挿入されます。
※poztion:relativeをページ内で使用している場合、その前に記述する必要があります。

右上が空きスペースになっているBlogなんかは結構見かけるので
この方法で簡単に広告を配置してみてはいかがでしょうか?

ちなみに当サイトの広告はA8.netさんからご提供いただいてます。


posted by ねこまんま at 02:05
Comment(0) | TrackBack(0) | CSS

2006年04月28日

cssのみで画像をプリロードする方法

PHPSPOTさんの記事を見て思いつきました。
僕の中で
画像をプリロードする方法の決定版

body{
background: url(path/to/image1.png); /* 読ませたいイメージ1 */
background: url(path/to/image2.png); /* 読ませたいイメージ2 */
background: url(path/to/image3.png); /* 読ませたいイメージ3 */
background: url(path/to/image4.png); /* 読ませたいイメージ4 */
background: none;
}
これだと構造的に無駄なタグを追加する必要もなくjavascriptがoffでも問題なし。

追記2006/06/23



このエントリーの内容では正しく動作しませんでした。
cssで画像をプリロードする方法(改に正しく動作するサンプルを用意いたしましたのでそちらを参照ください。
posted by ねこまんま at 14:48
Comment(0) | TrackBack(0) | CSS

2006年03月12日

CSSで無理やりfloatをclearする方法

MozillaやFirefoxで
『親ボックスに背景画像や背景色を指定して
 子ボックスでfloatが行われている場合
 親ボックスの背景画像や背景色は
 floatが行われない子ボックスまでにしか反映されない』
という挙動があります。

図解するとこんな感じ
csssample1.gif

対応策としては親ボックスの次の要素に
'clear:both'を
適応させてfloatを解除すればいいのですが
'clear:both'を
適応させる為の要素が何も存在しない事があります。

そんな場合
親要素に対して以下のCSSを適応させることで解決します。

div#main:after {
content : "";
display : block;
height : 0;
clear : both;
}


通常だと空要素でもIEは解釈して空白の行を出力しようとしますが。
擬似要素afterやcontentなどのIEが解釈しないCSSで記述する事で解決できます。

posted by ねこまんま at 14:57
Comment(0) | TrackBack(0) | CSS

2006年03月03日

リンクをクリックした際に表示される点線を消す方法

リンクをクリックした際に表示される点線を消す方法です
a:focus{
outline:none;
}

Firefoxで有効。IEじゃ利かないです。
posted by ねこまんま at 01:33
Comment(0) | TrackBack(0) | CSS

2006年02月25日

フォントサイズはどうしましょう?

この業界で昔から議論される内容で、
『フォントの絶対指定にするか?相対指定にするか?』
というものがある。

■相対指定(relative size)とはタグのsize属性で指定するものとスタイルシート(css)のfont-sizeプロパティでem%で指定するものまたはキーワド(small,large..etc)で指定するものを指します。

■絶対指定(absolute size)とはスタイルシート(css)のfont-sizeプロパティでpxで指定するものを指します。

※ 正しい用法では、cmやinを絶対指定といい、pxはemと同様に相対指定です。また、%による指定は絶対とも相対とも言いません。
この議論の際に使われる場合の絶対指定とはIE6以下で文字のサイズを変更した際にフォントサイズが変更されない指定の仕方で、相対指定はそれ以外(サイズが変更されるもの)のことを指します。

相対指定のメリット

相対指定の場合IE6でブラウザから文字サイズを変更できます。文字が小さくて見にくいユーザーなどはブラウザの文字サイズの変更機能を使用して自分に最適なフォントサイズにしてWEBサイトを閲覧できます。

絶対指定する理由

ブラウザで文字サイズの変更できない為、自分の意図により近いデザインをユーザーに見せることができる。

WEBデザイナーとして

WEBデザイナーとはWEBという媒体を使って表現するデザイナーです。
絶対指定することによりWEBブラウザの持つ機能を削減することはデザイナーエゴではないかと思う。

WEBという媒体が未成熟なため
紙媒体と違いサイト製作者が訴求年齢を選定しづらい点問題だと思う。
(検索エンジンからWEBサイトに訪れる際に、ユーザーはそのWEBサイトが高齢向けか若者向けかわからない点)
訴求年齢を選定がしっかりできれば訴求対象に応じてフォントサイズの指定の仕方を変えれるかもしれない。

実は、
ここまで話してきた問題はIE6のみです。
IE6以外のモダンブラウザ[Netscape、Mozilla、Opera、Safari、Firefox]なんかでは文字サイズの指定が相対指定、絶対指定にかかわらずブラウザの機能で文字サイズを変更できます。
(またプレビュー版が出ているIE7もブラウザの機能で文字サイズを変更できるようになってます。)
デザインが崩れるという理由で文字サイズを絶対しているWEBサイトはIE6のみで閲覧可能ということです。
他のブラウザで見たら(文字サイズを変更したら)デザインが崩れるってことですよね。
それは悲しいですよね。

結論

結論としては、
相対指定にすべきである。
デザイナーのエゴをサイト利用者に押し付けるべきではない。

ここ最近は過剰なアクセシビリティが叫ばれています。
すごく身近な、あなたの両親と同じ世代に対してアクセスブルなサイトにしてみませんか?

小さな一歩から本当のアクセスビリティが始まると思いますよ。
posted by ねこまんま at 23:50
Comment(0) | TrackBack(0) | CSS

2005年11月29日

MacIE用のHolly hack

width:500px;//MacIEに対するcss
/*\*/
width:501px;//MacIE以外のブラウザに対するcss
/**/
posted by ねこまんま at 17:14
Comment(0) | TrackBack(0) | CSS

2005年08月03日

formタグの余分な改行を取り除く

formタグを使うと上部に余分な改行が入ります。
cssを使うことによりこの改行を取り除くことができますよ
<form style="margin: 0px;">

よく間違えてborder属性を弄ろうとしてしまいます

★0円から使用可能なレンタルサーバー★

人気のWEBクリエイターblogはここ
posted by ねこまんま at 23:49
Comment(0) | TrackBack(0) | CSS

2005年07月20日

フォームへの入力を操作する

フォームを作成する際に文字の制限ってどうしてます?
ねこはjavascriptとphpで確実に制限しているのですが、
ちょっとすばらしい方法を知ったので披露しときます。
cssを使って半角しか入力させない方法です。
【ソース】
■通常<br>
<input type="text"><br>
■CSS使用<br>
<input type="text" style="ime-mode:disabled">

【ブラウザ】
■通常

■CSS使用


IEでしか動作しなかったりと結構使いどころが難しいです。
phpやcgiなどのサーバーサイドでの処理を忘れずに。。

格安レンタルサーバーはトリップスウェブ! とことん売れています!

人気のWEBクリエイターblogはここ
posted by ねこまんま at 23:26
Comment(1) | TrackBack(0) | CSS