‘xhtml+css’ カテゴリ内エントリ一覧

Page 1 of 212

Dreamweaverでzen codingを使ってみた。

金曜日, 2月 19th, 2010 |

dreamweaver + zen coding

先日、@seltzerさんのUSTREAMを見てからすっかり zen coding に取り憑かれたボク。あ、もちろんPHP入門も素晴らしかったです（次回も楽しみにしています）

残念ながらMacユーザーじゃないので、Codaとか使えないわけですが、Windows環境でもDreamweaver CS4で使えるって事で入れてみました（他にも幾つか対応しているエディタはあります）

このページからZen Coding for Dreamweaver v0.5というバージョンのZen Coding.mxpを拾ってきて実行。そうするとEXTENSION MANAGER CS4が立ち上がるので、画面に従いインストールするだけで完了です。

早速幾つか入力。
DWは新規でhtmlやphpを作ると、設定されているドキュメントタイプのタグが入った状態になりますが、HTML5は設定が無い（どこかでEXTENSIONがあった気もする）ので

html:5

と入力してCtrl+カンマで展開するとさっと以下のようなタグが！！

<!DOCTYPE HTML>
<html lang="en-US">
<head>
	<title></title>
	<meta charset="UTF-8">
</head>
<body>

</body>
</html>

さらにこんな感じで入力して展開すると

div#header>ul.menu>li.name$*3
<div id="header">
  <ul class="menu">
    <li class="name1"></li>
    <li class="name2"></li>
    <li class="name3"></li>
  </ul>
</div>

どーん！素晴らしー！

独自の書き方は覚えなければいけないものの、直感的に分かる気がするのでなんとかなりそう。ただCSSに関しては標準の入力補完で十分かなって思いますね。

wikiっていうタブの中にタグの書き方が載ってます。
HTMLセレクタはこれ

あとlang属性がen-USが標準になっているので、以下のjsファイルの設定値を修正すればOKです。このファイルの中身を眺めてみると、展開する内容の修正も出来そうなので、head内でよく使うタグなんかは追加しておいてもいいかも。

Documents and Settings/ユーザー名/Application Data/Adobe/Dreamweaver CS4/ja_JP/Configuration/Commands/ZenCoding/zen_settings.js

Wordpressであればプラグインもこちらにあります。
WP Zen-Coding

やっぱりMacを買おうかな～

Zen Coding
http://code.google.com/p/zen-coding/

関連する投稿

Posted in xhtml+css | 2 Comments »

IE6で透過PNGを利用してz-indexで画像を重ねる

月曜日, 6月 15th, 2009 |

ie6png

やろうと思ったことがz-indexを利用しないとうまく出来ないなーと思いつつ、PNG画像を作ってサンプル書いてみたけど、まぁ～当然のように逝ってほしいIE6が立ちはだかる。はぁ～めんどい。

Googleが配布しているie7.jsなんかを使えば透過PNG以外にもイマドキな感じに改造してくれるけど、あまりいい印象が無いので（やたらと重かった？）、他を探してみたら簡単で使いやすそうなDD_belatedPNG.jsを見つけました。

まず配布サイトからjs（今日現在0.0.7a）を拾ってきてhead部分でIE6用に読み込みます。

<!--[if lte IE 6]>
<script type="text/javascript" src="js/DD_belatedPNG.js"></script>
<script type="text/javascript">
  DD_belatedPNG.fix('.png_img');
</script>
<![endif]-->

4行目のfix()内で要素名やid、classを指定します（ココではクラス名をpng_imgとしています）あとは該当のimgにこのクラスを指定するだけ。楽チン！

サンプルはこちら　http://vayu.asia/sample/ie6png/

元画像にはクラス指定をしてないのでIE6では周囲がグレーになっていると思います。
ソースは以下のようになってます。

html

<div id="original">元画像（クラス指定なし）<br />
<a href=""><img src="img/sample.png" alt="" /></a></div>
<br />
<div id="block1">ブロック1</div>
<div id="block2">ブロック2</div>
<div id="block3">ブロック3
<a href=""><img class="png_img" src="img/sample.png" alt="" /></a>
</div>

css

#original{
	background:#FFDFFB;
	width:500px;
	height:300px;
}
#original img{
	border:none;
}
#block1{
	background:#0C0;
	width:500px;
	height:300px;
}
#block2{
	background:#FFF;
	width:500px;
	height:30px;
}
#block3{
	background:#999;
	width:500px;
	height:300px;
	position:relative;
	z-index:1;
}
#block3 img{
	position:absolute;
	z-index:10;
	top:-120px;
	left:120px;
	border:none;
}

このブログではPNG対策はしていないので、一番上の画像はグレーっぽいはずです。

関連する投稿

Posted in xhtml+css | No Comments »

自己満足の81点

火曜日, 2月 3rd, 2009 |

昨日に続いて若干修正。lintで一気に81点に。それなりに満足したのでしばらくはこのままいきます。

関連する投稿

Posted in xhtml+css | No Comments »

ツールチップみたいなCSS

土曜日, 10月 11th, 2008 |

テキストリンクにマウスオーバーした時に画像やテキストをピョコっと出したいなぁ～と言う事で、スクリプトをいろいろ探したりしながら悩み探すこと数時間。割とシンプルなCSSでいい感じの物が出来たので載せておきます。
PHPSPOTさんのところで紹介してあるものを多少アレンジした物です。

以下のサンプルページのような感じになります。
CSSでツールチップのサンプルページ
IETesterで見たところ、IE5.5は不具合があるけどそれ以外は大丈夫そうです（IETesterの記事がまだ引っ越し後の整備が出来てない；；）

HTMLソース

<ul>
<li><a href="index.html" class="tooltip">テキスト<span><img src="exmple1.jpg" alt="例１" width="60" height="45" />ツールチップ内テキスト</span></a></li>
<li><a href="index.html" class="tooltip">テキスト<span><img src="exmple2.jpg" alt="例２" width="60" height="45" />ツールチップ内テキスト</span></a></li>
<li><a href="index.html" class="tooltip">テキスト<span><img src="exmple2.jpg" alt="例３" width="60" height="45" />ツールチップ内テキスト</span></a></li>
<li><a href="index.html" class="tooltip">テキスト<span>ココはテキストのみにしてみた</span></a></li>
</ul>

CSSソース

a:hover {
	background:#ffffff;
	text-decoration:none;
}
a.tooltip span {
	display:none;
	padding:5px;
	margin-left:8px;
	width:200px;
	height:auto;
}
a.tooltip:hover span {
	display:inline;
	position:absolute;
	background:#fffaf0;
	border:3px double #a0522d;
	color:#583822;
	font-size:0.8em;
	line-height:1.3;
}
a.tooltip:hover span img{
	float:left;
	border:none;
	margin:0px 7px 5px 0px;
}

CSSはほとんどサイズ調整とか装飾なので必要なのは少しだけですね。スクリプト使わなくても意外とシンプルに出来るもんです。

2008/10/16追記
ロボットが隠しテキストと見なしてスパム扱いするかは不明ですので、ご注意を。ユーザビリティでした事であって、意図した隠しでなければ問題ないと思いたいです。
あと、音声ブラウザはdisplay:none;の中身を読まないみたいですが、今回みたいな指定の場合はどうなのでしょうか？その辺も不明です。

関連する投稿

Posted in xhtml+css | 2 Comments »

Webフォント

土曜日, 6月 28th, 2008 |

ブラウザ間の差異は頭の痛い問題だし、WEBフォントが正式に実装されるのは随分先だろうけど使い方次第で面白そうですね。

独自拡張じゃなくって、こうゆう事をぜひIEに真っ先にやってもらいたいものです。絶対的なシェアに胡坐をかいてるように思えてどうも好かんっす。

文字のアウトラインを表示する–FirefoxとSafariのCSS対応

Bye bye for now !!

関連する投稿

  • 関連する投稿はありません。

Posted in xhtml+css | No Comments »

定義リスト横並びの続き

金曜日, 3月 28th, 2008 |

たくさん情報は出てくるのでソースは以下のような感じで落ち着いたのですが、１つ気になった事はこのソースのSS（IE7のSSです）を見てもらえば分かるのですが、真ん中の行の半角数字のところで左ボーダーが切れてdlに指定した背景色が見えちゃってます。
IE6でも同様、FirefoxとOpera（共に最新版）は問題なく表示されます。
ただこのフォントはメイリオなのでMSPゴシックだとどのブラウザでも問題なし（ねすけはわかりません；）
メイリオでもテキストの中に１文字でも全角が入れば直ります。もしかしたら高さ関係のプロパティで直せるのかな？
こんなの常識？？私が無知なだけなのかも＾＾；覚書です。

htmlはこんな感じで

<dl>
	<dt>定義リスト</dt>
	<dd>テキストテキストテキストテキストテキストテキストテキスト</dd>
	<dt>定義リスト</dt>
	<dd>0123456789</dd>
	<dt>定義リスト</dt>
	<dd>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</dd>
</dl>

CSSはこんな感じ

@charset "utf-8";
dl{
	width:600px;
	border:1px solid #333333;
	border-top:none;
	background:#CCCCCC;
}
dt{
	border-top:1px solid #333333;
	padding:5px;
	float:left;
	clear:left;
	width:100px;
}
dd{
	margin-left:100px;
	border-top:1px solid #333333;
	border-left:1px solid #333333;
	padding:5px;
	background:#FFFFFF;
}

Bye bye for now !!

関連する投稿

Posted in xhtml+css | No Comments »

定義リスト横並び

木曜日, 3月 27th, 2008 |

なんか教科書どうりにはまったという思い・・・

dl dt ddを横並びにしてテーブル風にしたいと思い、dtを左floatしてdtの幅指定と同じ値をddの左マージンに指定して、って定番のやりかたみたいですが、、、

IEさんどこか逝ってくれ

と思うのは私だけじゃないよね＾＾；

ハックとかよく解らないしボーダーを完全なテーブル風まで付けなければ
なんとか見れる程度にはなる気がするので
よさげな感じに落ち着いたら覚えでソース書きます。

Bye bye for now !!

関連する投稿

Posted in xhtml+css | No Comments »

Page 1 of 212
ブログ内検索：
  • ブログ村
  • ブログランキング
  • ブログピープル
  • blogram