‘CSS’ タグのついている投稿

CSSで画面中央に配置して上下左右が消えない方法

2009 年 5 月 6 日 水曜日

画面中央配置にする方法はposition:absoluteで上下左右50%をとれば出来、幾つかのサイトで紹介されているのが、画面を小さくした時に消える場合が多い。

CSS Happylifeで紹介されている方法ならデザインが崩れない。

このエントリーを含むはてなブックマーク

Firefoxでfloatを使うと背景が伸びない時の対処方法:after擬似クラス

2009 年 5 月 5 日 火曜日

IEでは問題がないが、FirefoxやSafariでfloatを用いると背景が伸びない場合がある。以下がafter擬似クラスを使った対処方法のサンプル。

#name{
background-image: url();
}

#name:after{
content : “”;
display : block;
height : 0;
clear : both;
}

このエントリーを含むはてなブックマーク

text-align:distribute で文字間隔と単語間隔を調整して均等割付する

2009 年 4 月 24 日 金曜日

text-align:distribute はIEのみ採用されているプロパティで、文章を綺麗に整えたい場合に使用する。現在はIEのみ使えるが、今後他ブラウザ(FirefoxやSafari)で採用されるかは不明。

このエントリーを含むはてなブックマーク

CSSとJavaScriptによるドロップダウンメニューの作成方法

2009 年 4 月 24 日 金曜日

CSSのみで作るドロップダウンメニューやJavaScriptのみの方法、それらが混在した方法などがあるが、アクセシビリティなど云々を取っ払って、一番使いやすいのは

JavaScript + Ajax 実践サンプル集さんのドロップダウンメニューだと思う。
http://jsajax.com/DropDownMenuArticle286.aspx

CSSオンリーはコードが複雑になりがちだし、JavaScriptオンリーの場合はさすがにSEO関連の問題もある。Flashもしかり。この辺はサイトの性質やブランディングによって判断すれば良いが、このサンプルは汎用性的に使えるし、わかりやすい。

ただ、サンプルそのものの状態ではクロスブラウンジングされていないので、CSSを少しいじれば(submenuにwidthを指定するなど)問題ない。

このエントリーを含むはてなブックマーク

JavaScriptとCSSで任意にフォントサイズを切り替える方法

2009 年 4 月 20 日 月曜日

大手のニュースサイトなどには、任意でフォントサイズを切り替える方法がある。
最も簡単な方法(検索して一番紹介されている方法)はstyleswitch.jsを用いた方法。

<html>
<head>

<title>フォントサイズを任意で切り替える</title>

<script src=”styleswitch.js” type=”text/javascript”></script>

<link rel=”stylesheet” type=”text/css” href=”style.css” />

<link rel=”alternate stylesheet” type=”text/css” media=”screen” title=”font1″ href=”font1.css” />
<link rel=”alternate stylesheet” type=”text/css” media=”screen” title=”font2″ href=”font2.css” />
<link rel=”alternate stylesheet” type=”text/css” media=”screen” title=”font3″ href=”font3.css” />
<link rel=”alternate stylesheet” type=”text/css” media=”screen” title=”font4″ href=”font4.css” />

</head>
<body>

<span id=”changefont”>
<ul>
<li>フォントサイズ:</li>
<li><a href=”javascript:chooseStyle(‘font1′, 30)”>小</a></li>
<li><a href=”javascript:chooseStyle(‘font2′, 30)”>中</a></li>
<li><a href=”javascript:chooseStyle(‘font3′, 30)”>大</a></li>
<li><a href=”javascript:chooseStyle(‘font4′, 30)”>最大</a></li>
</ul>
</span><!–changefont–>

</body>
</html>

style.css
———————————–
#changefont li{
display: inline;
}

font1.css
———————————–
body{
font-size: 0.9em;
}

font2.css
———————————–
body{
font-size: 1.0em;
}

font3.css
———————————–
body{
font-size: 1.3em;
}

font4.css
———————————–
body{
font-size: 1.6em;
}

上記以外にはjquery.jsを用いる方法等が利用されているよう。

他にも様々な方法を紹介しているサイトはこちら
CSS(スタイルシート)をjavascriptで切り替える色々な方法cookie

このエントリーを含むはてなブックマーク

safariのみ適用するCSS hack(ハック):body:first-of-type

2009 年 3 月 4 日 水曜日

Safari 3のみの適用になるが body:first-of-type でSafariのみCSSを適用する事が可能。

参考:http://coliss.com/articles/build-websites/operation/css/247.html

このエントリーを含むはてなブックマーク

Safariのみ適用するCSS hack(ハック)

2009 年 3 月 1 日 日曜日

html:\66irst-child *****{
SafariのみCSSを記載
}

※但しIE – Safariには適用されない

このエントリーを含むはてなブックマーク

Firefoxでfloatするとリンク時に横線が表示される問題を解決する

2009 年 2 月 13 日 金曜日

selectname a{
float: left;
width: ***;
height: ***;
display: block;
}

firefoxだとリンク時に横に線が表示されてしまう。
outline:0;を指定すれば、横線は消えるが、線そのものがまったく消えてしまい、リンクかどうかの判断がつきにくい。

overflow:hidden;を指定すれば、width, heightで指定したサイズにリンク線が表示される。

このエントリーを含むはてなブックマーク

Safariのみに適用するCSSハック

2009 年 1 月 24 日 土曜日

Safariのみに適用

html*div {
Safariのスタイル
}

このエントリーを含むはてなブックマーク

Firefoxのみ適用するCSSハック

2009 年 1 月 24 日 土曜日

Firefoxのみ適用

html>/**/body{
Firefoxのスタイル
}

このエントリーを含むはてなブックマーク