新しいウェブサイト: http://pmtea.net/

医療軽減は１割

三井の創始者の家訓ですが、経営において学ぶ事は沢山ありそうです。

前回作ったリセットが、NNやFireFox2 for Macなどで問題があるので、作り直しました。

フォント周りもどうにか詰めたいのですが、まぁ間違ってもいないみたいなので...
あと、MTベースのclearfixも修正しました。


/* 基本フォント ------------------------------ */

html {
    background: #009900;
}

body{
    font-family: Arial, Helvetica, Verdana, "ヒラギノ角ゴPro W3", "Hiragino Kaku Gothic Pro", Osaka, "メイリオ", Meiryo, "ＭＳ Ｐゴシック", sans-serif;
    background: #FFFFFF;
    font-size: 12px;
    line-height: 1.5;
}

h1,h2,h3,h4,h5,h6 {
    font-size:100%;
    font-weight:normal;
}

input,textarea,select {
    font-size: 100%;
}

/*\*/
* html body {
    font-size: 75%;
}
* html table {
    font-size: 100%;
    line-height: 1.5;
}
*:first-child+html body {
    font-size: 75%;
}
/**/




/* 基本タグ ------------------------------ */

body,div,
dl,dt,dd,ul,ol,li,
h1,h2,h3,h4,h5,h6,
p,blockquote,pre,cite,code,caption,
form,fieldset,legend,input,textarea,select,option,label {
    margin:0;
    padding:0;
}
table {
    border-collapse:collapse;
    border-spacing:0;
}
fieldset,img {
    border:0;
}
address,caption,cite,code,dfn,em,strong,th,var {
    font-style:normal;
    font-weight:normal;
}

ol,
ul {
    list-style: none;
}

li img,
dt img {
    vertical-align: bottom;
}
caption,th {
    text-align:left;
}
q:before,q:after {
    content:'';
}

object,
embed {
    vertical-align: top;
}

abbr,acronym {
    border:0;
}


/* --------------------------------------------------------------------------------------
 float解除
--------------------------------------------------------------------------------------- */

.clearfix:after {
clear:both;
content:".";
display:block;
height:0;
visibility:hidden;
}
.clearfix {
display:inline-block;
}
* html .clearfix {
height:1%;
}
.clearfix {
display:block;
}

/* MacIE begin \*/
*+html .clearfix{height: 1%;}
* html .clearfix{height: 1%;}
.clearfix{display: block;}
/* Mac IE end */

jQueryの勉強。。。

とりあえず　つれづれ。。。

〜jQuery 覚え書き〜

・ページが読み込まれたら処理を行う
■$(document).ready();
ショートカット
■$();

・アクセスする。
■$(document.body)
BODYタグにアクセス
■$(".className")
class="className"
■$(document)
function changeTitle(){
$(document).title(new Date());
}
<title>ここにアクセスされるて、日付に変わる</title>

・要素を検索する。
■$(tagName, base)
要素を検索するには2つのパラメーターを指定する。
最初のパラメーター検索するタグ名、2番目のパラメーターには検索する基準位置（ノード）
$("div",  document.body);
ボディ−の中にある、DIVを検索してくる。
■$("tagName > tagName")
ショートカット
■$("tagName tagName"")
特定の階層条件（絞り込み）のタグにアクセスする。
$("div > p")
divの中のpにアクセスする。
$("#main>spna")
ClassやIDにも使える。
■$(tagName).get()
タグの情報を取得して、配列格納されます。

・内容を書き換える
■$(〜).html(text)
$("div").html("書き換え");
■$(〜).text(text)
$("div").text("書き換え");
■$(〜).html()
htmll形式で取得してくる。
■$(〜).text()
text形式で取得してくる。

・タグの数を取得
■$(tagName).size()

・繰り返し処理(each)
■$(~).each(func)
$("li").echi(function(){
$("li").html(変換);
});

・クラス
■$(〜).addClass(className)
クラスの追加。
$("#main").addClass("clearfix");
ID要素mainにclearfixのクラスを追加。
■$(〜).background(color)
■$(〜).background()
■$(〜).color(color)
■$(〜).color()
■$(〜).float(type)
■$(〜).float()
■$(〜).height(value)
■$(〜).height()
■$(〜).width(value)
■$(〜).width()
■$(〜).left(value)
■$(〜).left()
■$(〜).top(value)
■$(〜).top()
■$(〜).overflow(value)
■$(〜).overflow()
■$(〜).position(value)
■$(〜).position()
■$(〜).removeClass(className)
クラスを削除する。
■$(〜).toggleClass(className)
スタイルシートを交互に切替える。
$("#main").toggleClass("class2");
<div id="#main" class="class1">切り替え</div>
class1のスタイルシートを取得保持して、class2に置き換わる。

・DOM
■$(element).after(data)
エレメントの後にデータを追加する事ができます。
$("#main").after("文字を追加します。");
こちらはただ単に追加。
■$(element).append(data)
エレメントの後にデータを追加する事ができます。
$("#main").append("文字を追加します。");
こちらは要素を引き抜いてきて、追加する。
■$(element).before(data)
エレメントの前に挿入する。
■prepend(content))
引数で指定したコンテンツを各要素の先頭に挿入する。
■prependTo(content)
$(A).prepend(B) とした場合にAにBが挿入されるのに対して、$(A).prependTo(B) ではBにAが挿入される。


・DOM属性参照
■$(〜).attr({attrName: value})
$("#main > img").attr({ src : "pic2.jpg", alt : "ピクチャー2"});
#Mainの中のimg がpic2.jpgの画像に入れ替わる、altも同様に入れ替わる。
■$(〜).attr(attrName, value)
■$(〜).attr()

・エレメントを複製する。
■$(element).clone()
 $("#main").clone();
 
 ■closest([expr])
 指定要素から最も近い親要素を選択する。
 <div id="main">
 <ul>
 <li></li>
 <li></li>
 </ul>
 </div>
 liをクリックするように設定した場合、一番近い親の要素mainを選択します。

CSSコーディングをする上で、下準備とも言えるリセットなのですが･･･
このリセット基盤にもなる重要な部分でもあるので、あとあとのコーディングのしやすさにもかかわってきます。

*（アスタリスク）を使い全てに適応させていたのですが、これだと何かと細かい問題も出るので･･･色々試行錯誤しているのですが･･･


それより頭が痛いのが、フォントのリセットです。
何年か前ではpixel指定でよかったのですが、ユーザービリティー上フォントを固定してはならぬ！
っと言うご達しが各社で出され、%またはemでコーディングしなければなりません。
画像とデザインをするのは、pixelですので･･･%もemもモダンブラウザーでのディフォルト値が基準になってしまうので･･･意図しない大きさになってしまう事があり。
デザインしにくいのです。

デザイン性を重視する企業の場合、改行位置にも煩いので困りものです。
かといって、現在潮流となっているFONTにpixel指定しないっと言う流れも取り入れなければなりません。

そこで、モダンブラウザーの標準pixelである16サイズなのでこれを利用して、100%=16px 100:16=X:10　X=62.5%で10pxになるわけです。

これをBODYかHTMLタグ無いに仕掛けると、標準10pix になるのです。
1em=10pxになるので、12pxだと1.2em 16pxなら1.6emになるわけです。
1em=16pxだと12pxを表すのに･･･ 1:16=X:12 X=0.75　なので　12pix=0.75em　になりとっても、計算するのウザいです。

Yahoo UI　やことYUIでは13pxになってしまい、これも表を見ればどってことは無いのですが、私頭が悪いので･･･あとで見直したときに分かり易くしておきたいので、62.5%=10pxにしておきたのです。

これも主流（グローバルスタンダード）ではなさそうなんで･･･
只今、また見直し中･･･半年に一回こう言う自己問答を繰り広げているのでした。。。

オリジナルで良い塩梅で作るか、みんながわかるように･･･YUIを使ってカスタマイズを作るかだな。。。

css.zip

大きな地図で見る

FlashでSWFの位置とHTMLの位置が違う場合で、外部読み込みや相対パスなどでSWFの外部へ読み込みにいく場合、相対パスがうまく取れず、取得できないことがある。
FlashはHTMLから読んだ位置からパス位置を見るので、SWFを読み込むHTMLの位置が変わってしまえば、うまく読み込めないのだ。

フルパスで記述してやれば解決する話なのだけど、プレビューしたときにフルパスにしてやるとうまく見れない。
そこで、Flash自身に自分のファイル位置を取得してやるということになる。

_url　は　自分自身のフルパスを取得してくる。



ファイルを取得したい場合は、後ろのurl.swfが必要なくなる。
自分自身の名前を決めうちする場合は、lastIndexOf()で"/"までを取得させる。
"/"はたくさんあるので、Math.max()で/の一番最後の/をとってくる。
取得してきたものに、substr()で後ろを除去した形で取得する。
"/"より前になるので、substrを使うときにmaxで取得してきたモノに+1して"/"を含めて取得してやる。
var swfUrl = this._url;
var checkNum = Math.max(swfUrl.lastIndexOf("/"), swfUrl.lastIndexOf("¥¥"));
var swfPath = swfUrl.substr(0, checkNum+1);


これで、自分自身のパス位置を取得することができる。

PHPを勉強するのに、便利そうなサイトをペタリ。

無断リンクなので、怒られたらLINK切ります。

 

サンプルコード付きの実践的なＰＨＰのリファレンスを公開しています。

PHP入門

php簡単講座：そふぃのPHP入門

基礎から解る！PHP入門講座

レッツPHP!