CSSの最近のブログ記事
メニューを<ul><li>を使って作り、CSSで背景画像を入れて、テキストはいらないので、、、
と思ってtext-indentをしようと思ったら完全に無視されました。
調べてみると、親要素にtext-alignを指定していると効かないようです。
情けないですが、そんなことで30分翻弄されました。
▼参考にしたサイト
Web Design Memo: text-indent:-9999pxが効かない
と思ってtext-indentをしようと思ったら完全に無視されました。
調べてみると、親要素にtext-alignを指定していると効かないようです。
情けないですが、そんなことで30分翻弄されました。
▼参考にしたサイト
Web Design Memo: text-indent:-9999pxが効かない
Firefox3.5(windows)で、ページ内にswfobjectで貼ったFlashや、aタグでくくった画像にフォーカスがあたったときに点線が出ます。
aタグ内はそんなに気になりませんでしたが、Flashでは、どこまでがFlashエリアかが一目瞭然で、いまいちだったので、この枠線の消し方をいろいろ試してみました。
下のサンプルはFlashを貼った部分のdivのID名がflashだった場合です。
念のため、:focusでないときも入れてみました。
aタグ内はそんなに気になりませんでしたが、Flashでは、どこまでがFlashエリアかが一目瞭然で、いまいちだったので、この枠線の消し方をいろいろ試してみました。
下のサンプルはFlashを貼った部分のdivのID名がflashだった場合です。
念のため、:focusでないときも入れてみました。
#content,
#content:focus{
outline:none;
}
Flash内で使えるCSSはあまり多くはありませんが、基本的なテキストの装飾などは簡単につけることが出来ます。
下の例では、test_txtの<a>にcolorとマウスオーバー時のtext-decorationを設定します。
CSSではtext-decorationですが、ActionScriptで書くときはtextDecorationなので気をつけます。(他にもActionscriptで使う場合に普通のCSSと異なるものがあります)
下の例では、test_txtの<a>にcolorとマウスオーバー時のtext-decorationを設定します。
CSSではtext-decorationですが、ActionScriptで書くときはtextDecorationなので気をつけます。(他にもActionscriptで使う場合に普通のCSSと異なるものがあります)
import flash.text.StyleSheet;
function setStyleSheet(txt){
var style:StyleSheet = new StyleSheet();
var main_a:Object = new Object();
main_a.color = "#ff0000";
var main_a_hover:Object = new Object();
main_a_hover.textDecoration = "underline";
style.setStyle("a", main_a);
style.setStyle("a:hover", main_a_hover);
txt.styleSheet = style;
}
//上の関数setStyleSheetでスタイルを規定し、あとは引数でtest_txtを投げるだけで反映されます。
setStyleSheet(test_txt);
下のサンプルのようにCSSを設定したところ、aタグの通常の状態では背景画像が入りますが、ロールオーバー状態では画像が表示されません。
いろいろとググったところ、全角スペースの混入や@charsetを消すなど、どれを試しても相変わらずIEやFirefoxなどは問題ないのに、Safariのみうまくいきませんでした。
試しにa:hoverのbackgroundを背景色にすると、ちゃんと規定サイズの12×12pxの正方形に色がつきました。
結局は、ロールオーバー用の画像の"_"を一つとって、allow_r1.pngにしたところうまく表示されました。
Safariでは"_"の数に規定があるのか、ファイル名の長さに問題があるんでしょうか？それともSafariのバグ?
よくわかりませんが、ひとまず解決です。
こんなことで小一時間かかりました。
//このサンプルでは、Safariでロールーバー時に画像が表示されません。
いろいろとググったところ、全角スペースの混入や@charsetを消すなど、どれを試しても相変わらずIEやFirefoxなどは問題ないのに、Safariのみうまくいきませんでした。
試しにa:hoverのbackgroundを背景色にすると、ちゃんと規定サイズの12×12pxの正方形に色がつきました。
結局は、ロールオーバー用の画像の"_"を一つとって、allow_r1.pngにしたところうまく表示されました。
Safariでは"_"の数に規定があるのか、ファイル名の長さに問題があるんでしょうか？それともSafariのバグ?
よくわかりませんが、ひとまず解決です。
こんなことで小一時間かかりました。
//このサンプルでは、Safariでロールーバー時に画像が表示されません。
a .allow {
width: 12px;
height: 12px;
background:url(../images/allow_r.png);
}
a:hover .allow {
background:url(../images/allow_r_1.png);
}
iPhone用サイトを作る場合は、画面サイズが縦横で異なります。
画面解像度は320×480なので、コンテンツの幅が320と480の両方に対応して作ります。
表示の際の幅はmeta内のviewportで設定しますが、画面閲覧中に縦横を切り替えた場合の画像サイズの切替を行いたくていろいろ調べました。
下のサンプルでは、SitePoint内の記事を参考に、div#mainimage内のimg1.jpgの幅を、縦の場合は320×160、横の場合、480×240で表示します。
その他レイアウト等もCSS内に同様に記述することで、縦横で分岐することが出来ます。
今回のキーポイントは、iPhoneの表示角度を利用するときに使う、window.orientationです。window.orientationchangeで、縦横切替の際のトリガーになります。
参考記事
Sitepoint : New Articles, Fresh Thinking for Web Developers and Designers
http://articles.sitepoint.com/print/iphone-development-12-tips
画面解像度は320×480なので、コンテンツの幅が320と480の両方に対応して作ります。
表示の際の幅はmeta内のviewportで設定しますが、画面閲覧中に縦横を切り替えた場合の画像サイズの切替を行いたくていろいろ調べました。
下のサンプルでは、SitePoint内の記事を参考に、div#mainimage内のimg1.jpgの幅を、縦の場合は320×160、横の場合、480×240で表示します。
その他レイアウト等もCSS内に同様に記述することで、縦横で分岐することが出来ます。
今回のキーポイントは、iPhoneの表示角度を利用するときに使う、window.orientationです。window.orientationchangeで、縦横切替の際のトリガーになります。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:spry="http://ns.adobe.com/spry">
<head>
<meta name="viewport" content="initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
<script type="text/javascript">
window.addEventListener('load', setOrientation, false);
window.addEventListener('orientationchange', setOrientation, false);
function setOrientation() {
var orient = Math.abs(window.orientation) === 90 ? 'landscape' : 'portrait';
var cl = document.body.className;
cl = cl.replace(/portrait|landscape/, orient);
document.body.className = cl;
}
</script>
<style>
body.portrait #main_image img{
width:320px;
height:160px;
}
body.landscape #main_image img{
width:480px;
height:240px;
}
</style>
</head>
<body class="portrait">
<div id="main_image">
<img src="img1.jpg" width="320" height="160" />
</div>
</body>
参考記事
Sitepoint : New Articles, Fresh Thinking for Web Developers and Designers
http://articles.sitepoint.com/print/iphone-development-12-tips
Flash内からHTML内の背景色を変更したい場合に、ActionScript3.0とJavaScript、CSSの連係プレーで実装します。
FlashからJavaScriptへは、AS2でもよく使ったExternalInterfaceを使い、JavaScriptからCSSへは、document.getElementByIdを使ってdivのID名を探し、.className="クラス名"でクラス名を設定します。
下のサンプルでは、#idname内のbackgroundを3色の中から変更できる仕様です。
FlashからJavaScriptへは、AS2でもよく使ったExternalInterfaceを使い、JavaScriptからCSSへは、document.getElementByIdを使ってdivのID名を探し、.className="クラス名"でクラス名を設定します。
下のサンプルでは、#idname内のbackgroundを3色の中から変更できる仕様です。
//Flash内AS3.0
import flash.external.ExternalInterface;
colorID = no;
var result:uint = ExternalInterface.call("callJS", no);
//JavaScript
function callJS(str) {
switch(str){
case 1: document.getElementById("idname").className = "color1";break;
case 2: document.getElementById("idname").className = "color2";break;
case 3: document.getElementById("idname").className = "color3";break;
}
return str;
}
//CSS
.color1{
width:100px;
height:200px;
background:#ff6600;
}
.color2{
width:100px;
height:200px;
background:#ffffff;
}
.color3{
width:100px;
height:200px;
background:#333333;
}
最近忙しさのせいにして、ブログのアップを怠っています。反省して、来月からまた頑張ります。
PC用とiPhone(iPod Touch)用にサイトを作る際に、レイアウトや、ボタンなどの細かなデザイン処理を替える必要はあるけれど、HTMLは更新性も考えて1つにしたいというジレンマに陥りました。
そこで、HTMLは1枚しか作成しませんが、読込ませるCSSを分岐させることでこれを実現するサンプルです。
下部のAタグでは、リンク先をそれぞれ別に指定するため、HTML内には2つの<a>が並んでいますが、クラス名に.pcbtnと.ipbtnを指定しておき、それぞれのCSSで、不要な方をdisplay:none;で指定して片方のみを表示するようにしてあります。
これは、<a>以外でも同様のクラスを使うことで、<div class="ipbtn">なら、div内をPCなら非表示にしたりすることも可能です。
サンプルページでは、PCとiPhoneで見た時で、コンテンツの幅と背景色、ボタンの飛び先が異なります。
サンプルページは以下から
iPhone&PCで、表示振り分けCSS サンプル
https://www.bute-studio.com/lab/iphone-btn/
サンプルHTML
サンプルiPhone.css
サンプルPC.css
そこで、HTMLは1枚しか作成しませんが、読込ませるCSSを分岐させることでこれを実現するサンプルです。
下部のAタグでは、リンク先をそれぞれ別に指定するため、HTML内には2つの<a>が並んでいますが、クラス名に.pcbtnと.ipbtnを指定しておき、それぞれのCSSで、不要な方をdisplay:none;で指定して片方のみを表示するようにしてあります。
これは、<a>以外でも同様のクラスを使うことで、<div class="ipbtn">なら、div内をPCなら非表示にしたりすることも可能です。
サンプルページでは、PCとiPhoneで見た時で、コンテンツの幅と背景色、ボタンの飛び先が異なります。
サンプルページは以下から
iPhone&PCで、表示振り分けCSS サンプル
https://www.bute-studio.com/lab/iphone-btn/
サンプルHTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>iPhoneCSS_test</title>
<meta name="viewport" content="width=380" />
<link media="only screen and (max-device-width:480px)" href="iPhone.css" type="text/css" rel="stylesheet"/>
<link media="screen and (min-device-width:481px)" href="pc.css" type="text/css" rel="stylesheet"/>
<!--[if !IE]>-->
<link media="only screen and (max-device-width: 480px)" href="pc.css" type="text/css" rel="stylesheet" />
<!--<![endif]-->
</head>
<body>
<div id="wrapper">
<h1>iPhone&PCで、表示振り分けCSS</h1>
<div id="pc">PC</div>
<div id="iphone">iPhone</div>
<a href="http://yahoo.co.jp" class="pcbtn">リンク(PC用)</a>
<a href="http://google.co.jp" class="ipbtn">リンク(iPhone用)</a>
</div>
</body>
</html>
サンプルiPhone.css
@charset "UTF-8";
#wrapper{
width:320px;
margin:0 auto;
}
#iphone{
background:#3CF;
color:#fff;
width:100%;
height:100px;
}
#pc{
display:none;
}
.pcbtn{
display:none;
}
サンプルPC.css
@charset "UTF-8";
#wrapper{
width:900px;
margin:0 auto;
}
#pc{
background:#FCF;
color:#fff;
width:100%;
height:100px;
}
#iphone{
display:none;
}
.ipbtn{
display:none;
}
iPhoneやiPodTouchでPC用に作られたサイトを見た場合、1pxの幅や高さの画像は、縮小されてみた場合に表示されなくなってしまうことがあります。
1pxの幅や高さの画像は、borderの代わりに使い、角丸の枠線を作りたいときなどにも使っています。
そこで、今回はこれを回避するために、iPhoneなどで縮小したときにも表示される角丸の枠線のついたエリアを作ってみました。
IEではCSSのborderで角丸にできないので、画像で対応しています。下のCSSは、IE,Safari(&iPhone),FireFoxを想定しています。
実際には、文字の拡大縮小に対応するために、IEなど、画像にする場合は、バックグラウンドに敷く画像を上部、中央(リピートさせる)、下部に分割させて使います。
1pxの幅や高さの画像は、borderの代わりに使い、角丸の枠線を作りたいときなどにも使っています。
そこで、今回はこれを回避するために、iPhoneなどで縮小したときにも表示される角丸の枠線のついたエリアを作ってみました。
IEではCSSのborderで角丸にできないので、画像で対応しています。下のCSSは、IE,Safari(&iPhone),FireFoxを想定しています。
実際には、文字の拡大縮小に対応するために、IEなど、画像にする場合は、バックグラウンドに敷く画像を上部、中央(リピートさせる)、下部に分割させて使います。
div{
width:300px;
height:100px ;
border:1px #000000 solid;
-webkit-border-radius:10px;/*Safari(iPhone含む)*/
-moz-border-radius: 10px;/*FireFox*/
/*この下IE用にborderを削除し、画像で対応*/
*border:none;
*background:url(bg.gif);
}
InternetExplorer8が公式にリリースされましたが、だんだんとIE8でも検証が必要かなと思い、いろいろなハックを試してみました。
結果、下のハックがIE8のみに適応されるのでわかりやすいかなと思ったので、メモしておきます。
color /*\**/:#333333\9;
の部分を普通に
color :#333333;
と記述しないように気をつける必要があります。
サンプルHTMLはこちら
https://www.bute-studio.com/lab/ie8.html
Internet Explorer7に使うハックはこちらの記事参照
Internet Explorer7のみに適応するCSSハック //CSS
結果、下のハックがIE8のみに適応されるのでわかりやすいかなと思ったので、メモしておきます。
color /*\**/:#333333\9;
の部分を普通に
color :#333333;
と記述しないように気をつける必要があります。
<style>
<!--
#ie8{
background:#ff55ee;
color:#ffffff;
}
html>/**/body #ie8 {
background /*\**/: #ff0022\9;
color /*\**/:#333333\9;
}
-->
</style> サンプルHTMLはこちら
https://www.bute-studio.com/lab/ie8.html
Internet Explorer7に使うハックはこちらの記事参照
Internet Explorer7のみに適応するCSSハック //CSS
4
のように、四角で囲む文字をCSSで扱う機会があったので、記録しておきます。
ふと思うと、今までなら画像で処理してしまいそうでしたが、ブラウザでの文字サイズの変更や、ファイルサイズを1バイトでも減らすことは、サーバーや回線の負荷など、1つは微々たるものでも、何度も表示されれば積み重なっていくので、今回はエコを考えてCSSでの処理となりました。
まあ、とくに目新しい訳ではないですが、次使うときには忘れていそうなので。
//HTML//////////////////////////////////////////////////////////////////
//CSS//////////////////////////////////////////////////////////////////
のように、四角で囲む文字をCSSで扱う機会があったので、記録しておきます。
ふと思うと、今までなら画像で処理してしまいそうでしたが、ブラウザでの文字サイズの変更や、ファイルサイズを1バイトでも減らすことは、サーバーや回線の負荷など、1つは微々たるものでも、何度も表示されれば積み重なっていくので、今回はエコを考えてCSSでの処理となりました。
まあ、とくに目新しい訳ではないですが、次使うときには忘れていそうなので。
//HTML//////////////////////////////////////////////////////////////////
<span class="cubettl"> 4 </span> //CSS//////////////////////////////////////////////////////////////////
.cubettl{
border-style: solid;
border-width: 1px;
border-color: #000000;
color:#000000;
}
/*Safariのみ見え方が異なるため、ハックで調整*/
body:last-child:not(:root:root) .cubettl {
padding-top:0px;
padding-bottom:1px;
}
広さの単位である、平方メートル（m²）や、容積の単位である立法メートル（m³）を入力するには、Macでは『平方メートル』もしくは『立方メートル』と入力して変換すると表示されますが、HTMLでは認識されません。
Windowsでも同様ですが、HTMLで正しく表示させるには、正しい文字コードで入力するか、上付き文字としてCSSで設定するかが必要です。
//文字コード//////////////////////////////////////////////////////////////////
『平方メートル』もしくは『立方メートル』の文字コード
² : ²
³ : ³
//CSS//////////////////////////////////////////////////////////////////
span.sup{
vertical-align:super;
font-size:80%;
}
参考サイト
特殊文字コード表
HTMLの特殊文字
Windowsでも同様ですが、HTMLで正しく表示させるには、正しい文字コードで入力するか、上付き文字としてCSSで設定するかが必要です。
//文字コード//////////////////////////////////////////////////////////////////
『平方メートル』もしくは『立方メートル』の文字コード
² : ²
³ : ³
//CSS//////////////////////////////////////////////////////////////////
span.sup{
vertical-align:super;
font-size:80%;
}
参考サイト
特殊文字コード表
HTMLの特殊文字
やっぱりどうしてもInternet Explorerなどでうまく他のブラウザと表示をあわせることができず、最後の手段のハックを使う場面が出てきます。
今回はIE7のみに適応したい場面があったので、記録しておきます。
下の例は、#menu ulにmargin-leftをIE7のみ別の値を設定したい時のハックです。
//CSS//////////////////////////////////////////////////////////////////
#menu ul{
padding-top:21px;
margin-left:38px;
}
*:first-child+html #menu ul{
margin-left:76px;
}
今回はIE7のみに適応したい場面があったので、記録しておきます。
下の例は、#menu ulにmargin-leftをIE7のみ別の値を設定したい時のハックです。
//CSS//////////////////////////////////////////////////////////////////
#menu ul{
padding-top:21px;
margin-left:38px;
}
*:first-child+html #menu ul{
margin-left:76px;
}
