2008-07-05

xHtmlの見直しー０１

２００３年に　HTML 4.01 Strict　でサイトを立ち上げ
２００５年に　XHTML 1.0 Strict　に移行しましたが

局所的処置を行っただけのサイトを根本的に見直してみようと考えている。
投稿者 時刻: 0 件のコメント:
ラベル:

2008-04-16

ggiw_mobile の CSS 変更

１．投稿日の表示を大きめに変更し

h2.date-header {
padding-top: 15px;
color:$footercolor;
padding-bottom:0px;
margin-bottom:0px;
font-size: 120%/*90%*/;/*update by ggiw*/
}


２．投稿の上部と下部に若干の隙間を設けました

.post-footer {
color:$footercolor;
margin-top: 30px;/*update by ggiw*/
margin-bottom: 30px;/*update by ggiw*/
}
投稿者 時刻: 0 件のコメント:

2007-09-25

ＣＳＳの変更

The Great Genkainada Iron Works ( Blogger )は、

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


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

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

を適用しない。
投稿者 時刻: 0 件のコメント:
ラベル: ,

2007-09-09

ＣＳＳの追加

ブログの道のＣＳＳに追加


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

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

blockquote{
line-height:1.6em;
}
投稿者 時刻: 0 件のコメント:
ラベル: ,

コンテンツの変更

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

ブログの道は、個人的備忘録として活用する。
投稿者 時刻: 0 件のコメント:
ラベル: ,

2007-09-02

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

携帯端末から投稿実験

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

久々の大ヒットでした。

投稿者 時刻: 0 件のコメント:
ラベル:

2007-03-07

(X)HTMLタグの見直し

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

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

おおごとです。
投稿者 時刻: 0 件のコメント:
ラベル: ,

2007-02-26

an ultimate weapon for ieMac5.x

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

{
color: inherit;
}

を

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

に変更すると、
何ともなかったように振る舞ってくれます。効きませんじゃありません。
少なくとも「color: inherit;」のときは、大爆発です。
とても危険です。
投稿者 時刻: 0 件のコメント:
ラベル: , , ,

trick for ieWinAll and ~ieMac5.x

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

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

html>body ~ {
　　property:value;
}

２．ieMac5.xには適用されない

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

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

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

４．ieWin7とMOSeに適用する

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

５．MOSeだけに適用する

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

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

例１

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

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

例２

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

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

ちょっとしたパズルです。
投稿者 時刻: 0 件のコメント:
ラベル: , , , ,

2007-02-25

htmlの修正

htmlの構造を確定する

１．<html></html>


　

２．<body></body>


　　~ieWin5.5対策を採る
　　　

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

　　

３．<div id="plate"></div>


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

４．<div id="head_bar"></div>


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

４ー１．<div id="go_to_main_contents"></div>


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

４ー２．<div id="hb_ggiw_label"></div>


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

４ー３．<div id="hb_ggiw_logo_02"></div>


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

５．<div id="head_menu"></div>


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

６．<div id="mainContents"></div>


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

７．<div id="crumbs"></div>


　　　　　　パンくずリスト
　　　　

８．<div id="layer1"></div>


　　　　　　本文の見栄え調整。
　　　　　

９．<div id=""></div>


　　　　　　　空の<div>
　　　　　

１０．<h3 id="main_contents" class="bar3"></h3>


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

１１．<div id="div class="img_box_left""><div id="div class="img_box_right"">


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

１１−１"img_box_left"


　　　　　　　の
　　　　　　　

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

　　　　　　

１１−２"img_box_right"


　　　　　　　の
　　　　　　　

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

　　　　　　　調整
　　　　　　

１１−３．<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;}

　　　　　　　の調整
　　　　　　

１１−４．<div class="mycroon"></div>


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

１１−５．<div class="my_song_book"></div>


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




９９．<div id="footWarning"></div>



default_10.jsで付加される

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

修正、改良の要点


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


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

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

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

@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;
 }

に準じ行うこと
投稿者 時刻: 0 件のコメント:
ラベル: , ,

2007-02-24

見栄えだけの調整

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

cssについてはCSSでSiteのtrick 本文を参照のこと。
投稿者 時刻: 0 件のコメント:
ラベル: ,

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　変更）
投稿者 時刻: 0 件のコメント:
ラベル: , , ,

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に適用する値を書く
 }


、とするとうまくごまかせます。
投稿者 時刻: 0 件のコメント:
ラベル: , , ,

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で表示が乱れている。
投稿者 時刻: 0 件のコメント:
ラベル: ,

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の削除を検討すること。
投稿者 時刻: 0 件のコメント:
ラベル: ,

2007-02-18

trick for Internet Explorer version 7

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


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


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

それからが大変です、ＳＰ２が何処にあるか分かりません。やっと見つけてインストールするまで半日かかってしまいます。
私のサイトは、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」を３カ所訂正して今日の作業を終えることにします。

CSS Validatorの検証も
合格です

投稿者 時刻: 0 件のコメント:
ラベル: , , , ,

ブログサイトの追加

鉄爺（てつおんじ）の活動支援ブログ
鉄爺の部屋を追加
投稿者 時刻: 0 件のコメント:
ラベル: ,

サイドバーの変更

リンクを追加
W3C notesはＷ３Ｃ関連のリンク
My Favorite Sitesはブックマーク
、として編集する
投稿者 時刻: 0 件のコメント:
ラベル:

2007-02-17

鉄爺の部屋

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

2007-02-13

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

307行
list-style:none
263行にも有りました
投稿者 時刻: 0 件のコメント:
ラベル: ,
登録: 投稿 (Atom)