2007-09-25

CSSの変更

The Great Genkainada Iron Works ( Blogger )は、

携帯電話からの投稿が中心となるので、


* Updated by: GGIW
----------------------------------------------- */

p.mobile-photo img{/*vertical_171px_256px*/
width : 12.19047619em;
height: 18.28571428em;
}

を適用しない。

2007-09-09

CSSの追加

ブログの道のCSSに追加


/* Updated by: GGIW
----------------------------------------------- */

p.mobile-photo img{/*vertical_171px_256px*/
width : 12.19047619em;
height: 18.28571428em;
}

blockquote{
line-height:1.6em;
}

コンテンツの変更

ブログの道と、コンテンツを投稿を統合。
従来からの(x)htmlサイトに関する情報は my site ラベルで管理
ブログに関する情報は myblog ラベルで管理

ブログの道は、個人的備忘録として活用する。

2007-09-02

モバイルからの送信テスト

携帯端末から投稿実験

写真は、今年活躍したニューモデル。
スノーシューラビットでシャックをこさえた極浮力型
鈎も変えたので極耐久型、耐久試験では50匹以上の好成績。

久々の大ヒットでした。

2007-03-07

(X)HTMLタグの見直し

先日から体調を崩し、昔買った本を読み直しました。
ドキュメントに対する理解のなさに唖然としています。
ディビジョンとパラグラフの使い方が今でもよく理解できていませんでしたが、
これまで使っていなかった

<q>、
と<blockquote>、
と<pre>、
と<code>、
と<dfn>、
と<kbd>、
と<samp>、
と<var>、
と<tt>、
と<abbr>、
と<acronym>、
と<cite>

おおごとです。

2007-02-26

an ultimate weapon for ieMac5.x

先日から、htmlとCSSの修正を行っていましたが。他ではうまくいくのですがieMac5.xでうまくいきません。
うまくいかないというより、大変危険な状態です。
クラッシュしてしまいます。
「プロパティによってはinheritは効きません」と古い本に書いてありました。
早速

{
color: inherit;
}



{
/*¥*/
color: inherit;
/**/
}

に変更すると、
何ともなかったように振る舞ってくれます。効きませんじゃありません。
少なくとも「color: inherit;」のときは、大爆発です。
とても危険です。

trick for ieWinAll and ~ieMac5.x

特定のブラウザに適用したり、しなかったり。

1.~ieWin6には適用されないが
  ieMac5.xには適用される

html>body ~ {
  property:value;
}

2.ieMac5.xには適用されない

~~~{
  property/**/:/**/value;
}

3.ieWin6.x(Standard)だけには適用しない

~~~{
  property/**/:value;
}

4.ieWin7とMOSeに適用する

html[xmlns] ~~~ {
  property:value;
}

5.MOSeだけに適用する

html[xmlns]>/**/body ~~~ {
  property:value;
}

、ということです。
うまく利用すると、こんなことができます。

例1

html>body ~~~{
  font-size/**/:/**/xxx;
}

これは、ieWin6.x以下とieMacに適用しない。
つまり、ieWin7とMOSeだけに適用する。

例2

html[xmlns]>/**/body ~~~{
  font-size/**/:/**/xxx;
}

これは、ieWin7以下とieMacに適用しない。
つまり、MOSeだけに適用する。

ちょっとしたパズルです。

2007-02-25

htmlの修正

htmlの構造を確定する

1.<html></html>


 

2.<body></body>


  ~ieWin5.5対策を採る
   

    body{
     text-align: center;
    }
  で、センタリングを行い
    #plate{
     text-align: left;
    }
  で、#plate要素(全体)の左揃えを行う
   

  

3.<div id="plate"></div>


    各種コンテンツを記述。
    見栄えの全体調整を行う
   

4.<div id="head_bar"></div>


     ヘッドバー。
     メニューのスキップや、ラベル、ロゴの表示
    

4ー1.<div id="go_to_main_contents"></div>


     メニューをスキップし本文"#main_contents"へジャンプ。
     サイトマップの表示(サイトマップは未作成)
    

4ー2.<div id="hb_ggiw_label"></div>


     ラベルhb_label.jpgの表示
     「トップページ」
       "http://www.venus.dti.ne.jp/ggiw/"へジャンプ
    

4ー3.<div id="hb_ggiw_logo_02"></div>


     ロゴhb_logo_02.gifの表示
     「上鹿川の日々・つりの生活」
       "http://www.venus.dti.ne.jp/ggiw/ggiwfish/"へジャンプ
   

5.<div id="head_menu"></div>


     ヘッドメニュー。
     各メインへジャンプ。
     リスト<ul id="head_menu">を使用
   

6.<div id="mainContents"></div>


     額縁
     "frame"等へ名称変更を行うこと
    

7.<div id="crumbs"></div>


      パンくずリスト
    

8.<div id="layer1"></div>


      本文の見栄え調整。
     

9.<div id=""></div>


       空の<div>
     

10.<h3 id="main_contents" class="bar3"></h3>


       本文のはじまり。ジャンプの目標になっている。
     

11.<div id="div class="img_box_left""><div id="div class="img_box_right"">


       本文中のイメージ表示領域を確保するため使用
       「注意」「コメント」「サイズ」等のクラスを作成すること
      

11−1"img_box_left"


       の
       

       { float: left;
        width: 21em;
        margin-left: 0;
        margin-right: 1em;
        margin-top: 0; }
       

      

11−2"img_box_right"


       の
       

       { float: right;
        width: 21em;
        margin-left: 1em;
        margin-right: 1em;
        margin-top: 0; }
       

       調整
      

11−3.<div id="img_box_left">


       に内包された"p"

p{ font-size: 83%;
         width: 20em;
         margin: 1.67em .3em;
         text-indent: 0;
         line-height: 1.17em;
        font-family: sans-serif;}

       の調整
      

11−4.<div class="mycroon"></div>


       の調整
       「曲名」「作詞」「作曲」「編曲」等のクラスを作成すること
      

11−5.<div class="my_song_book"></div>


       「くり返し」等のクラスを作成すること




99.<div id="footWarning"></div>



default_10.jsで付加される

以上を基本とし、必要に応じ外部スタイルシートを作成、読み込み上書きで調整する。

修正、改良の要点


外部スタイルシート「default_2007_00.css」


基本外部スタイルシートは"default_2007_00.css"とする。
最初に、
@import "default_2007_01.css"命令を行う。

バージョン4には適用可能な宣言だけとすること。

基本的なセレクタ(要素・ID・クラス)に基本的な宣言(プロパティ・値)だけをすること。

@import "default_2007_01.css"
    ・
    ・
body{
width: 45em;
margin-top: 0;
background-color: #ffffff;
color: #000000;
text-align: center;
}
#plate{
text-align: left;
}
    ・
    ・
   基本的な宣言
    ・
    ・

外部スタイルシート「default_2007_01.css」


基本外部スタイルシート"default_2007_00.css"から「@import "default_2007_01.css"」で読み込む。
ieWin、ieMac専用の外部スタイルシートは極力避け、ハックを使用し上書きすること。
ハックの基本は、

body{
/*width: 45em;*//*default_2007_01.cssで宣言済み*/
/*margin-top: 0;*//*default_2007_01.cssで宣言済み*/
margin-left: auto;
margin-right: auto;
padding: 0;/*opr body要素の余白を消す*/
font-size: small;
}
/* ieWin6.x and ieWin7の追加*/
/* replace ieWin5.x~6 with ieWin7. hide from ~ieWin6 */
html > body{
font-size: small;
/* replace ieWin7 with ieMac5.x. for ieMac5.x ¥*//*/
font-size: small;
/*End for ieMac5.x*/
}
/* replace ieWin7 & ieMac5.x with MOSe. hide from ieWin7 & ieMac5.x */
html[xmlns]>/**/body{
font-size: medium;
}

に準じ行うこと

2007-02-24

見栄えだけの調整

cssを修正し、見栄えだけieWin,ieMac,MOSeに対応完了

cssについてはCSSでSiteのtrick 本文を参照のこと。

trick 本文

../diary200y/dialy200ymmdd.html/の本文中の文字サイズを
とりあえず

#layer1 {
width: 43em;
margin-left: auto;
margin-right: auto;
line-height: 140%;
}
/*ieWin6.x  and ieWin7のdiary200ymmdd.html用に追加*/
#plate #mainContents #layer1{
font-size: 110%;
width: 96%;
}
/* hide from ~ieWin6*/
html > body  #plate #mainContents  #layer1{
font-size: 112%;
width: 94%;
/*for ieMac5.x ¥*//*/
font-size: 100%;
width: 100%;
/*end for ieMac5.x*/
}
/* hide from ~ieWin7*/
html[xmlns]>/**/body #plate #mainContents  #layer1{
font-size: 99%;
width: 43em;
}



、としてごまかします。
default_2007_00.cssで使用中止(20100515 変更)

default trick

トリックのデフォルト

body{
margin: 0;
padding: 0;
background-color: #ffffff;
color: #000000;
font-size: small;
         ここに、ieWin6.xに適用する値を書く
}
/* hide from ~ieWin6*/
html > body{
font-size: small;
         ここに、ieWin7に適用する値を書く
/* for ieMac5.x ¥*//*/
font-size: medium;
         ここに、ieMac5.xに適用する値を書く
/*end for ieMac5.x */
}
/* hide from ~ieWin7*/
html[xmlns]>/**/body{
font-size: medium;
         ここに、MOSeに適用する値を書く
}


、とするとうまくごまかせます。

2007-02-21

htmlの修正を要する

../diary200y/dialy200ymmdd.html/の表示でhtmlの記述が非構造的である。

<div id="mainContents">
<ul id="crumbs">
</ul>
<div id="layer1" class="article_01">
<div>
<h3 id="main_contents" class="bar3">2007年1月3日</h3>

<div id="head_bar">

<p><br class="float-clear" / >

修正と再調整を要する。
ieMac5.xで表示が乱れている。

2007-02-20

cssの調整

../diary200y/dialy200ymmdd.html/の表示で

id #layer1に検討を要する。
また、html側で

<div id="layer1" class="article_01">
<div>
<h3 id-"main_contents" class="bar3">****年**月**日</h3>
</div>
</div>


で不要と思われるdivの削除を検討すること。

2007-02-18

trick for Internet Explorer version 7

そういえば私のサイトが、新しいInternet Explorerでどう見えているのかチェックをしていませんでした。
Internet Explorer version 7をインストールすることにしますが、なかなかうまくいきません。
マイクロソフトのサイトは、「あんたのPCには新しいInternet Explorerがお似合いさ」
、というのですが


インストーラーからは、「おまえのマシンにはInternet Explorer version 7は、インストールできないぜ」
、と冷たくあしらわれます。


悩んだすえ、「そうだSP2にアップしてなかった」
、とふと気付きます。

それからが大変です、SP2が何処にあるか分かりません。やっと見つけてインストールするまで半日かかってしまいます。
私のサイトは、Internet Explorer version 7でも何とか見えていますが、少しだけ字が大きいようです。
今までは、

#plate{
font-size: 100% !important;
font-size: 91%;
}

で、ごまかしていましたが ieWin7 はごまかせません。

#plate{
font-size: 91%;
line-height: 3em;
}
/* hide from ~ieWin6*/
html > body #plate{
font-size: 85%;
}
/* hide from ieWin7*/
html[xmlns]>/**/body #plate{
line-height: 100%;
font-size: 100%;
}





#head_menu li{
font-size: 75%;
line-height: 3em;
}
/* hide from ~ieWin6*/
html > body #plate #head_menu li{
line-height: 220%;
font-size: 60%;
}
/* hide from ieWin7*/
html[xmlns]>/**/body #plate #head_menu li{
line-height: 100%;
font-size: 100%;
}


で、ieWin7もごまかすことにします。
外部ファイル「default_100.css」を3カ所訂正して今日の作業を終えることにします。

CSS Validatorの検証も
合格です

ブログサイトの追加

鉄爺(てつおんじ)の活動支援ブログ
鉄爺の部屋を追加

サイドバーの変更

リンクを追加
W3C notesはW3C関連のリンク
My Favorite Sitesはブックマーク
、として編集する

2007-02-17

鉄爺の部屋

先輩の、活動を少しでも応援しようと新しいサイト
鉄爺の部屋を作成しました。
ライブや映画のご案内が中心ですが。地域福祉に関するものも投稿していく予定です。

2007-02-13

サイドバーのリストについて

307行
list-style:none
263行にも有りました

サイドバーのリストについて

307行
list-style:none;

2007-02-12

大変です

別のブログ CSSでSite を「HTMLの編集」
、という投稿エディタ(WYSIWYG)ツールで見てみると
「< span style=" font-family: ********; font-size: ***%;" >」のたたき売り状態です
スタイルシートを整理するのに一苦労です。
当然、他の投稿もチェックすべきでしょうが、そんな勇気はありません

trick for Internet Explorer version 5.x

昨日の投稿「trick for version 4.x 」で第4世代ウェブブラウザに対するトリックを投稿しましたので、今日は第5世代のInternet Explorer 5.x(Windows and Macintosh)に対するトリックを考えていきます。
今後、このサイトでは

ns4 == Netscape/4.x (Macintosh and Windows)
ie4 == Internet Explorer/4 (Macintosh and Windows)
ieMac4.5 == Internet Exprorer/4.5 (Macintosh)
ieMac5.x == Internet Explorer/5.x(latest/5.2) (Macintosh) Tasman
ieWin5== Internet Explorer/5 (Windows)
~ie5.5 == before Internet Explorer/5.5 (Windows)
ieWin5.5== Internet Explorer/5.5 (Windows)
ie5.5~ == after Internet Explorer/5.5 (Windows)
ieWin6 == Internet Explorer 6.x(latest/6.0.2600) (Windows) Trident

ieWinAll== Internet Explorer(Windows)

MOSe == mozilla/ Opera/Safari enhancement
moz5.0 == mozilla/5.0(Firefox , Mozilla and Netscape7.1) Gecko
opr == Opera/6.x/7.x/8.x(latest/8.51)(Macintosh and Windows)
saf == Safari(Macintosh) KHTML
と、表示することにします。


Band Pass Filterテクニック
大まかには、
Internet Explorer 5.5 (ieWin5.5)が一つの境目のようです。
ieMacは5.2.3が最終バージョン(個人的には好きでした)ですがMac版のIEはWin版とまったく異なるものと捉えた方がよいみたいです。
それでは、
1.ieWin5
2.ieWin5.5
3.~ieWin5.5
4.ieMac5.x
の順に外部スタイルシートを読み込むことにしましょう。ただし、この方法はttyメディア(固定ピッチフォントのテキストが表示される端末。テレタイプ等)を使っていたらうまくいかないかもしれません。もしご利用の方は他の無難なメディアを探すしかありません。でも、テレタイプにi要素(イタリック)てあるのかしら。

1.ieWin5だけが読み込むもの

@media tty{
i{content:"¥";/*" "*/}};@import'****.css';{;}/*";}
}/**/

2.ieWin5.5だけが読み込むもの

@media tty{
i{content:"¥";/*" "*/}}@m;@import'****.css';{;}/*";}
}/**/

3.ieWin5と5.5だけが読み込むもの

@media tty{
i{content:"¥";/*" "*/}}@import'****.css';/*";}
}/**/

4.ieMac5.xだけが読み込むもの

/*¥*//*/
@import"****.css";
/**/

となります。
専用のものだけを読み込んだり、後から読み込んで上書きしたりしながらウェブブラウザに合わせたスタイルシートを適用していくわけです。
これが、
Band Pass Filterと言うテクニックです。



Box Model Hackテクニック
ie4~5.5達は、幅(width)や高さ(height)を指定するとボーダー(border)とパディング(padding)を含んだ範囲に適用してしまいます。当然正しい解釈は内容(content)だけに適用しなければならないのです。そこでvoice-familyプロパティの値に¥(あくまでもバックスラッシュ・エスケープです。CSS2で「¥」は、後ろの文字の特別な意味を消してしまいます)を使用したBox Model Hack は、

****{
ie4~5.5までに適用するの値
voice-family: "¥"}¥""; voice-family: inherit;
ie6以後に上書き適用するの値
}

と書くと。
CSS2が理解できないie4~5.5達は真ん中にある"}"で宣言が終わったと勘違いしてしまいます。
つまり、
****{
ie4~5.5までに適用するの値
voice-family: "¥"}
と理解してしまいます。
でも、CSS2が理解できるie6以後のie達は真ん中にある"}"で宣言が終わったとは勘違いしません。つまり、

****{
ie4~5.5までに適用するの値
voice-family: "¥"}¥"";
voice-family: inherit;
ie6以後に上書き適用するの値
}

と、新たな値を上書きしてくれるのです。


、というトリックです。スタイルシートを使用してサイトを創造しはじめた黎明期には最先端のものです。しかし、その場しのぎにはもってこいですが、後の管理が大事です。ウェブブラウザに特化した外部スタイルシートで管理する方が楽ちんです。それにトランプの「神経衰弱」ゲームのように、適用するカードを順番にめくっていくのも楽しみの一つです。

なお、詳しくはBox Modele Hackをご覧ください。

2007-02-11

trick for version 4.x

1.Netscape 4.x とWindows Internet Explorer 3には外部スタイルシートを読ませない

@importを実行すると Netscape 4.x の初期バージョンは強制終了やフリーズを引き起こす虞があります。Netscape 4.x には外部スタイルシートは読ませてはいけません、最初からはじいてしまいましょう。

<link href="****.css" rel="stylesheet" type="text/css" media="screen,print">

とlink要素のmedia属性が"screen"以外であれば"all""screen,print"のように複数であれば、彼らは何がなんだか解らなくなってしまいます。

2.Internet Explorer 4 (Macintosh and Windows)にも外部スタイルシートを読ませない

IE 4 は@importで読み込める外部スタイルシートは

@import url(****.css);のURL形式は読めますが
@import url"****.css";の文字列形式は読めません

そこで、@import url"****.css";の文字列形式で指定すれば、彼も何がなんだか解らなくなってしまいます。

3.Macintosh Internet Explorer 4.5 にも外部スタイルシートを読ませない

ieMac4.5 は@importで読み込める外部スタイルシートは

@import url(****.css);のURL形式は読めますが
@import url("****.css");の二重引用符で囲まれたURL形式は読めません

そこで、@import url("****.css");の二重引用符で囲まれたURL形式で指定すれば、彼にも何がなんだか解らなくなってしまいます。

何故こんなにややこしい事するの
1.2.3を実行するとNetscape 4.x とWindows Internet Explorer 3 & 4.x には外部スタイルシートが適用されなくなります。
めんどくさいのに何故かというと、彼らはCSSでうまく振る舞えません。それなら、いっそ使わない方がいい。
第4世代以前のウェブブラウザには構造化された文章で読んでいただく、当然第5世代以後のウェブブラウザでも一番大切なのは、構造化された文章以外無いのだが。

外部cssファイル

最初に読み込まれる 外部スタイルシートのファイルには文字コードを必ず書きましょう。
でも、
後から読み込まれる外部スタイルシートのファイルには文字コードを書くと
css-validator  http://jigsaw.w3.org/css-validator でエラーになります。

@charset "Shift_JIS"; と書けば、その後ろの部分で日本語のコメントやフォントを指定できます。

まとめてホイ(border-style)

値設定方法border-styleの他にも
**=margin,padding,border-width,border-colorのプロパティでも同じように
** : 全;
** : 上下 左右;
** : 上 左右 下;
** : 上 右 下 左;
と指定できます。

まとめてホイ(border-color)

まとめてホイ(border-color)
値設定方法はborder-colorの他にも
**=margin,padding,border-width,border-styleのプロパティでも同じように
** : 全;
** : 上下 左右;
** : 上 左右 下;
** : 上 右 下 左;
と指定できます。

まとめてホイ(border-width)

まとめてホイ(border-width)
値設定方法はborder-widthの他にも
**=margin,padding,border-color,border-styleのプロパティでも同じように
** : 全;
** : 上下 左右;
** : 上 左右 下;
** : 上 右 下 左;
と指定できます。

まとめてホイ(padding)

まとめてホイ(padding)
値設定方法はpaddingの他にも
**=margin,border-width,border-color,border-styleのプロパティでも同じように
** : 全;
** : 上下 左右;
** : 上 左右 下;
** : 上 右 下 左;
と指定できます。

まとめてホイ(margin)

まとめてホイ(margin)
値設定方法はmarginの他にも
**=padding,border-width,border-color,border-styleのプロパティでも同じように
** : 全;
** : 上下 左右;
** : 上 左右 下;
** : 上 右 下 左;
と指定できます。


trick for Windows Internet Explorer

Windows Internet Explorer にだけ外部cssファイルを読み込ませる

<!--[if IE]><link rel="stylesheet" href="*****.css" type="text/css" media="screen" /><![endif]-->
とheadで書くと、Windows Internet Explorer だけが読み込みます。

trick for Mac Internet Explorer 5.x

ブラウザに特定のcssを適用する
Mac Internet Explorer 5.xはコメント文/**/が不得意のようです
コメント終了の印「*/」の直前に「¥(\)」を書くと次の
コメント終了の印「*/」が現れるまで読み飛ばします

まず

/* for ieMac5.x*/
/*¥*//*/
@import "default_100ieMac.css";
@import "default_101ieMac.css";
/**/

と書くと、太字のようにコメント文が3文あるように読んでしまいます。
これでMac Internet Explorer 5.xだけに適用するdefault_100ieMac.css」と「default_101ieMac.css」を読ませ

次に
/* Hides from ieMac5.x ¥*/
@import "default_100.css";
/* End hide from ieMac5.x
*/
と書くと、太字のようにコメント文があるように読んでしまいます。
その他のmozilla, Opera, Windows Internet Explorer はコメント文が2文あるように読みます。これでその他に適用する値「default_100.css」を上書きします。



margin

初期値: 定義無

適用要素: 全

継承: せず

パーセント指定: 包含ブロック幅に対する割合

値設定方法
margin : 全;
margin : 上下 左右;
margin : 上 左右 下;
margin : 上 右 下 左;


emを標準とする。
左右をautoでセンタリング。ieMac5.Xはtable要素をセンタリングしない=bag。

opr(opera)6はパディング(余白)を持っている

body{padding: 0;}でない(仕様)ため、

body{padding : 0; }をdefaultで設定すること

バグ:

ieMac5.Xはtable要素をセンタリングしない。

trick for Windows Internet Explorer 6.x

ブラウザに特定のcssを適用する
Windows Internet Explorer

!important宣言をサポートしていません。
だから、まず
!important宣言をしてmozillaや OperaやSafariに最優先で適用させ
次に
Windows Internet Explorerに適用する値を上書きします。
例えば

#fishingday_img{
float : left ;
width: 18em;
/* Hides from ieMac5.x ¥*/
margin-left: 1em !important;
margin-left: 0;
/* End hide from ieMac5.x */
}
このよう書くと
1.
MOSe(mozilla/ Opera/Safari enhancement)には
margin-left: 1em;
2.
Windows Internet Explorerには
margin-left: 0;
3.Macintosh
Internet Explorerには
ここでは何もありません(から何も適用されません)
が適用されます。

追伸
Windows Internet Explorer7はサポートしたようです。

携帯からの投稿

全てのブログサイトのリニューアルが完了しました

やっと携帯から

携帯から投稿が出来ました

でも、画像はアップできません