[k]id » css 

トップページ /

2009年9月5日

[width][height]の読み方って(笑)

週末なので、若干どうでもいい話題で。

この前、最近WEBの業界に転職された方に、何気なく質問されたのですが、
[width]や[height]って、どうやって発音してますか？
って質問されました。

そういえば、度々こういう話題って話になるなーとおもって、
ネイティブだとどうゆう発音になるんだろう。。

goo辞書でしらべてみました。興味のある方は下記からどうぞ！(笑)
スピーカーアイコンを押すと聞けます。

width

height

なるほど！

Filed under: CSS,WEB Tips
タグ:

2009年8月11日

ことえり辞書(Mac OSX)、WEB制作者向け「ことえり用　CSS 変換辞書」公開

この辞書はApple の文字入力支援ソフト「ことえり」のMacintosh OSX用の追加辞書です。

css

昨今のCMS の導入により、ブラウザから直接タグを入力する機会がたまにあります。
その際の入力を支援するためにリスト化し、ことえり登録をしました。
今までは制作で自分用に使用していたのですが、「私も欲しい」というリクエストが多くいただきましたので、
公開させていただきます。みなさまのWEB 制作のお役にたてれば幸いです。


★★使用方法★★
ファイルを解凍すると出来る「css」を「( あなたの名前)/ Library/ Dictionaries」に入れてください。
「ことえりメニュー」→「環境設定を表示」→「辞書」で辞書を選択すると利用出来ると思います。

★★著作権について★★
この「ことえり用 CSS 変換辞書」の著作権は作者である Ca-style が保有します。
再配布は禁止します。
ブログやホームページで「ことえり用 CSS 変換辞書」をご紹介いただき
http://kidokorock.com/2009/08/webtips/kotoeri.html へリンクをいただけると有り難いです。

★★その他★★
・この辞書の使用によってトラブル・損害等が生じたとしても作者は一切責任を負いません。
・他のHP への転載、雑誌等へ掲載する場合はご連絡ください。
・この辞書はOS 10.5.8 で動作検証しています。
・お使いの機種によっては動作しない場合がございます。予めご了承ください。

★★変換例★★

＜＜HTML編＞＞

「めた」で変換

<link rel="canonical" href="" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<meta http-equiv="Content-Type" content="text/html; charset=" />

hで変換
<h1></h1>

brで変換
<br />

pで変換
<p></p>
<p class=""></p>
<p id=""></p>

＜＜CSS編＞＞

cbで変換
border:#000000 solid 1px;
background-repeat:repeat-x;
background-position:center;
background-image:url();

ccで変換
clear:both;
cursor:pointer;cursor:hand;
color:#000000;

ctで変換
text-decoration:underline;
text-decoration:none;
text-align:left;
text-align:center;

等、省略したひらがな語でCSSに変換ができます。他は変換リスト(PDF)でご確認ください。

★★ダウンロード★★
「ことえり用　CSS 変換辞書」
上記に同意しダウンロードする(css.zip)


Filed under: CSS,WEB Tips
タグ: ,

2009年8月6日

CSS Tips 一回設定したbackground-colorを透過に戻す

Bodyとかの要素で一旦設定したbackground-color要素を下の階層で
元に戻したい時の設定の覚え書き

background-color: transparent;
で初期値？にもどります。

body p{
background-color: #ffffff;
}
.class p{
background-color: transparent;
}

いつもあれ？
って思ってしまうので覚え書き

Filed under: CSS
タグ:

2009年5月26日

とってもシンプルに背景画像を横スクロール

IE7も広く普及し、ようやくPNG画像で透過背景や透過画像を扱えるようになったのでは
ないでしょうか。

CSS background- imageで指定した大空の背景を
JavaScriptで横に動かすスクリプトを作ってみました。

若干 FireFox対応で躓いたのでメモとして残しておきます。

↓これを
kumo

サンプル
↑こんな感じでぐるぐる回します。

ソースは

headに

<script language="JavaScript">
<!--
//----------------------------------------------------------------------
//                                         画像を右に移動させるスクリプト
var W=0;
var X=0;
function moveBG()
{	
	if(navigator.userAgent.indexOf("Firefox") != -1){//FOXブラウザの場合
	var H = 0; 
	alert('aa');
	document.body.style.backgroundPosition =  W+" "+H;
	}else{//それ以外のブラウザの場合
	document.body.style.backgroundPositionX = X++;
	}
	W++;
	//ループ対処
	setTimeout("moveBG()",100);
}
// -->
</script>
bodyに
<body onLoad="moveBG();">

でok!



Filed under: CSS,JavaScript
タグ: ,

2009年4月8日

グリッドレイアウト生成ツール（air）「Boks」

WEB制作時の便利アプリの紹介です。
e38394e382afe38381e383a3-1
今日紹介するのは「Boks」です。

これはairアプリケーションで配布されていて、上記からダウンロードし

PC内にインストールすることで簡単にグリッドレイアウトの

下準備が出来てしまう優れものです。

 
例えば、時間のないランディングページの作成やちょっとした

広報ページの作成の時に諜報するのではないでしょうか。

 

使い方は簡単

「Boks」airを起動し、横幅、グリッド数を指定し、

あとは入れ子みたいボックスをドラッグして指定してあげれば完成。

 





null
 

 

それをexportボタンで生成すればhtmlファイルとCSSのフォルダが出来上がります。

スゲー簡単！

Filed under: WEB Tips
タグ: , , ,

Page 2 of 41234