CSSで画面中央に配置して上下左右が消えない方法
2009 年 5 月 6 日 水曜日画面中央配置にする方法はposition:absoluteで上下左右50%をとれば出来、幾つかのサイトで紹介されているのが、画面を小さくした時に消える場合が多い。
CSS Happylifeで紹介されている方法ならデザインが崩れない。
‘CSS’ タグのついている投稿
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で指定したサイズにリンク線が表示される。