01 | 2017/02 |  03

  1. 無料サーバー

User forum-FC2BLOG-Info-Edit Template-Post-Edit-Upload-LogOut

CSSやJavascript自習の苦闘史を綴っていきたい。恐縮ですがJavascriptを有効にしてご覧ください。
2005年12月から社会問題も掲載!


新管理画面を利用するように、随所のショートカットを変更

新管理画面が登場(FC2インフォメーション FC2ブログリニューアルのお知らせ)してから、約1ヶ月半が経過しようとしてます。

まだまだ不具合や仕様変更を要望したい箇所がありますが、そろそろ安定的に動くようになったようなので、Myブログの随所に設置してあるブログ利用上の各種ショートカットを新管理画面用に一斉に切り替えました。例えばブログ最上部にある小さな文字の各種ショートカット先を、全て新管理画面用のURIに変更しました。

これによりログイン時に旧管理画面からスタートしていた昨日までの使い方から、ログインを含めて全てを新管理画面で操作することになります。

外部スタイルシートのtitle属性について

まさかそんなところに原因があるとは・・・

jQuery UI のresizableとdraggableを利用し始めて、約一週間程が経過しました。

この間IEではリサイザブルなのに、FirefoxやOperaではアンリサイザブルな状況が続いており、その原因をずっと探求してきました。

実行用コードのミスだろうか?、css設定ミスだろうか?、マイJavascriptコードと干渉しあっているのだろうか?───等々、この一週間様々な原因を探求して来ました。しかし、上記のいずれにも原因があるとは思えず、もしやと思ってresizable用のcssをHTML内に置いてみたら、IE以外でもリサイザブル出来ることが分かりました。

そこで外部cssファイルのインクルード方法に問題があるのではないか、と思い至りました。そんなことは全く考えてもいなかったことなので、正直戸惑ってしまいました。

外部cssファイルをコピペしたのが間違いの出発だった

そもそも、外部cssファイルはこのブログを開設した3年前から、ずっと触ることなくそのままにしてきました。cssファイルの追加等必要なかったからです。

今回初めて、jQuery UIのリサイザブル要素を利用するために、外部cssファイルを追加しました。その時には、当然のことのように jQuery UI ホームページから借用してコピペで追加しました。

ところが、IE以外のブラウザでリサイズできない原因は、まさにこのコピペにありました。

元コードのlinkタグ内にtitle属性があることなd気にもとめずに、コピペして利用したのです。

そしてIEでは何の問題もなくリサイズが出来てしまいました。

今から思えば、このIEのバグが問題の究明を遅らせたと言えるかも知れません。

▲ToTop

外部cssファイル指定時の属性指定について

IE以外のブラウザでリサイズできなかった原因は、必要となるcssファイルが全く読み込まれていないことでした。

そしてそうなったのは、linkタグ内にtitle属性が存在していたためであることが、本日やっと判明したのです。

title属性をつけてスタイルシートを読み込む場合の注意点 - Web標準普及プロジェクトを読んで初めて、title属性の振る舞いを知ったのですが、異なるtitleを持つ複数のlinkタグが存在する場合には、2番目以降のtitle属性を持つlinkタグで指定されたcssファイルは読み込まれない、と言うのです。

Fc2ブログの場合title属性を有するlinkタグが既に存在していますから、その後に異なるtitle属性を有するlinkタグを設けた場合には、当該cssファイルは読み込まれない訳です。

上記サイトからlinkタグのtitle属性に関する注意点を抜粋します。
<link rel="stylesheet" href="foo.css" type="text/css">
<link rel="stylesheet" href="bar.css" type="text/css" title="グループ1">
<link rel="stylesheet" href="hge.css" type="text/css" title="グループ2">
 この例ではまず、最初の例と同様に固定スタイルシートのfoo.cssと、 二番目の優先スタイルシートのbar.cssが読み込まれます。
 しかし、この時点で初期に読み込まれる優先スタイルシートのグループはそのtitle属性値であるグループ1に決定されます。 次に出現するlink要素は優先スタイルシートではありますが、別の名前(グループ2)を付けられていますので、グループが異なります。 そのため、この例では三番目のhge.cssは読み込まれません。

mouseover時Popupに画像活用の補足:cssで画像先読み

ポップアップ画像表示が遅延するのはイヤラシイ

表示すべき画像はonmouseoverイベントハンドラー関数内に記述されているため、当該画像が属するエントリイがブラウザに読み取られた場合に、キャッシュされない。通常のタグ内にあるsrc画像ならば自動的にブラウザは読み取るが、リンク要素のイベントハンドラー内の画像は、当該ページが開かれたときには読み取られない。onmousemoveイベントが当該箇所で発生したときに初めて、当該画像の読み取りが始まる。

このため文字と違って画像のポップアップは表示されるまでに時間が掛かってしまい、折角の効果が半減してしまう。

そこで考えた。───ポップアップ画像をキャッシュデータに先読みしておけば、いざ出陣となったときにスタンバイは完了しているわけだから、直ぐに表示される筈だ。

かくして、エントリイの最下部に、display:none スタイル設定を行ったdiv要素を設け、その中にポップアップ画像を表示させるよう書き込んだimgタグを設けておき、先読みさせることにした。

これは見事に奏功している。

Amazonおまかせリンク(TM) ベータ版の採用

Amazonおまかせリンク(TM) ベータ版をmyblogに貼り付けた。Google AdSenceに次ぐ広告掲載第二弾である。

今回もまた、これで儲けようなどという意図は微塵もなく、やってみた、たったそれだけのことである。

それでも、関連する書籍を探したい需要は私自身に良くあることだから、決して無駄にはならないだろう、と慰めている。(苦笑)

それにしてもGoogle AdSenceと同一のボックスサイズを採用したのは、先行したGoogle AdSenceの影響の大きさを雄弁に物語っているといえるだろう。

block & inline

blockとinlineについてちょっと語ってみたい。

2005年7月5日初稿、2006年12月14日改訂

それは良くあることだろう、と思う。

本来block要素でありながらinlineにしたり、その逆だったり・・・。段落要素内のAタグなどそのような例の最頻度の例だろう。

さて、LIブロック内でA要素をcssでblock要素にすると、IE6後方互換モードにおいては奇妙な現象が起こる。それはブロック要素内において二重にブロック要素を配置した場合のIE6後方互換モードの一般的法則なのかもしれないが、ブロック内ブロックはそれぞれにブロックであることを主張する!

それにより二つのブロックが形成されることになり、予期せぬ改行あるいは段落が挿入されてしまう!

この続きを読む

IE7日本語正式版とHomepageデザイン──MyBlogの改訂(1)

 IE7正式版の登場を期に重い腰を上げ、マイブログのHTML、CSS及びJavascriptの見直しを行うことにした。ここに、IE7 beta2版への次のようなコメントが大変参考になった。

IE7 beta2では、CSS2.0のセレクタや「fixed」による固定位置表示、すべての要素に対する「:hover」の指定などに対応しつつ、XML宣言の記述によって発生していた問題が修正されるなど、要望の大きかった部分への対応・修正が行われている。

しかし、フロート(回り込み)関連や、プロパティを組み合わせたときに発生する細かなバグに関しては修正されていない部分も残っており、正式版リリースまでにどのぐらい修正されるかが注目される。

一方で、セレクタなどの対応により、未対応のセレクタやバグを利用し、IEに適用するスタイルシートをコントロールしていた「CSSハック」と呼ばれるテクニックは使用できなくなる。そのため、制作者側にもバグなどを利用せず、標準規格に準拠した形でページを作成することが求められるようになると言えるだろう。

【特集】CSS実装徹底検証! そこが知りたいInternet Explorer 7 (1) 01-01 Internet Explorer 7 beta2のCSS実装 (MYCOMジャーナル)


段取りは次のようにする。

  1. 改訂箇所をリストアップする。
  2. 順次「効果」を確認しながら改訂を進める。

◆改訂箇所一覧◆

  1. xml宣言時のIE6における強制的な後方互換モード適用とIE7でのこの解消
    IE7ではxml宣言を正しく解釈するようになった。これまでは、xml宣言があると有無を言わさずIE6が互換モードになってしまうバグがあったので、どうせ互換モードになってしまうならばと、DOCTYPEは後方互換モードを指定していた。IE7によるxmlバグ解消によって、DOCTYPE宣言を初めて標準モード指定に切り替えることとし、IE6以下対策はCSSハックにて行うことにする。
  2. IE5.5及びIE6後方互換モードでのボックスの罠問題への対処
    xml宣言を既述し、DOCTYPEを標準モードに変更すれば、IE7は標準モードで、IE6は後方互換モードで走ることになるので、これまでのIE対策としてのボックスの罠CSSハックをIE7に対して無効にしなければならない。
  3. JavascriptにおけるIE対応部分の編集
    ボックスの罠に関わって、Javascriptにおけるボックス幅の指定値を、IEのバグ値とその他のモダンブラウザにおけるCSS正規値とに使い分けている 。このため、DOCTYPEを標準モードで指定することにより、IE7用とIE6下用の2つのIE対応 width 指定を行わなければならなくなる。

◆引き続き残すCSSハック◆

  1. IE6以下におけるボックスの罠
    現行のマイブログは互換モードで走らせている。標準モードDOCTYPE宣言へ切り替えても、xml宣言がある限りIE6は従来通り互換モードで走ることになるので、これまでのボックスの罠CSSハックはIE6互換モード及びIE5.5対策として残すことになる。
  2. MacIE5.0におけるmargin一括指定不可問題
    MacIE5.0が現在どれほど使われているのかよく分からないし、果たして今日時点でもこれを考慮する必要があるのか、疑問に思わないでもないが、当座はこれに対するハックは現状のまま残すことにする。

Internet Explorer 7日本語版について

11月2日、Internet Explorer 7日本語版が正式に公開された。

これによりタブブラウザがやっと一般的になるが、問題は盛り沢山のバグを内包していたIEが、今回のメジャーバージョンアップによってCSSにどの程度「正当に」準拠したブラウザになったのかどうかであり、そのことは同時に、これまでさんざん作者を悩ましてきたバグ対策を、どの様に見直す必要があるのか、という新たな悩ましい問題を引き起こす。


これまでIE互換モードで走らせていた多くのサイトは、そのままでIE7において意図したとおりに表示されるのか?

IE7で正しく「なってしまった」CSS解釈部分について、IE6以前用とIE7用とに分けざるを得ないのではないか?そのためのハックはどのようにするのか?

───このような新たな作業をサイト作者に強いることになるだろう。そしてそれはすなわち、我がFC2ブログにおいても、面倒なCSS書き換え作業を強いられることを意味する。


偏にIE6あるいはIE5.5が余りに普及し、かつCSSバグが多かったが故に、そしてIE7においてCSS解釈が正しくなればなっただけそれだけ、IE6以前用とIE7用の2つのCSS分を書かねばならないことになるわけで、迷惑千万な話である。


そこで、決してやりたくないがやむを得ず、マイブログのCSS書き換え作業について、順次まとめていくことにしたい。久しく弄ってなかったCSSを1年ぶりくらいに見直すことになるわけで、改めてCSSの基礎から振り返る必要が出てくるかも知れない。(;´д`)トホホ

100万突破の序でに(苦笑)

 FC2ブログ作成に特化した書籍が発売されていることを今日知った。
 (Amazon.co.jp: さすが!と言わせる FC2ブログ徹底攻略術: 本: 持丸 浩二郎
 「初心者から上級者まで」との宣伝文句だが、7X0mの覚え書き - 「FC2ブログ徹底攻略術」を購入しました によれば、明らかに初心者向けであり「アクセス解析を設置できる程度の知識がある方なら必要ないでしょう」とのこと。
 買わないで良かった(苦笑)。
 

パン屑リストの若干の修正

 各エントリイは特定のcategoryと特定の年月のいずれにも所属するので、カテゴリイと年月を併記するパン屑リストへと変更した。


 ホーム>Category>YearMonth>this Entry を
 ホーム>Category|YearMonth>this Entry と変更したのだ。


 そしてこれまでは、「所属するCategory内の当該年月のリスト」を適切に表示する方法を思いつかなかったので、YearMonthにはリンクを貼らずにいたのだが、カテゴリイと年月を並列表記することによって、当該年月をクリックした時に、カテゴリイに関係なく当該年月のエントリイ一覧を表示してもおかしくなくなったので、リンクを貼った。
--------------------------------------------------------
 なお、数ヶ月前に用意されたブロック変数 <!--titlelist-->~ <!--/titlelist--> と、<%titlelist_title>などの単変数を利用すれば、或るカテゴリイに属する或る年月のエントリイ一覧を取得することは、Javascriptを利用して容易に可能となる。
 しかし、これまで利用してきたパン屑リストを作成した時点では、これらの変数は用意されていなかったため、Javascriptで或るカテゴリイに属する或る年月のエントリイ一覧を取得する方法をあれこれと苦心惨憺したのだが、完成に至らなかった。
 そして今日。結局のところ、「或るカテゴリイに属する或る年月のエントリイ一覧を取得する」ことに、たいした意味がないと悟り、パン屑リストの並列表記へと変更したのであった。

久しぶりにテンプレートを弄る

 以前から気に掛かっていたが面倒なので放置していた「修正後コメントタイトル非表示」バグを修正した。name属性値が間違っていたのだ。コメント編集ブロックのタイトル部分inputタグ内において、×:name="comment[title]" → ○:name="edit[title]"であった。
 なお、この部分は公式テンプレートを弄っていないので、元のdeathテンプレートに内在していたバグだと思われる。
 事の序でに、コメント修正時において、修正前コメントのタイトルがデフォルト値で表示されるように加筆してみた。この方がより便利なことは間違いないからだ。
 コメント編集ブロックのタイトル部分inputタグ内に、value="%edit_title"を追加すれば可能となるのでは、と推測して試してみた所、案の定そうであった。───ちょっと嬉しい。

リンク集を拡充

 Fc2が変数で提供しているリンク集は単に一次元のリストであり、分類が出来ないのでこれまで使用を疎ましく思っていた。
 しかし折角の変数を利用しない手もない。「このブログをリンク集に登録する」という簡単なスクリプトによるリンク追加機能も活かしたい。そこでリンク集の中の1つのジャンルとしてFc2リンク集を設置してみた。未だ登録数はごく僅かだが随時拡充していきたい。

訪問者履歴表示用のfootprintブロック変数が作動しない

 fc2ブログの訪問者リスト変数<!--footprint-->~<!--/footprint-->はうまく作動しないようだ。
 phpbbにこのブロック変数に関するスレッドがあり、やりとりが行われているが、そこでも何も表示されないことが何人かの人から報告されている。
 まだテスト中ということか?

Entry 情報をTitle直下にも設置

 エントリイフッターはその名の通り、エントリイの最後部に付くのが一般的である。そこには当該エントリイ投稿日、属するカテゴリイ分類、付けられたコメント数、トラックバックの数等が表示される。そして、その情報はBrowsingする際に結構貴便利な情報を含んでいる。


 であるならば、貴重な情報(エントリイフッターに盛り込まれている情報)は、出来るだけ早い段階で閲覧者に開示されるべきだろう。またそのような情報なのだから頻繁に使う可能性があり、Titleの傍にエントリイナビを配置することは余りに当たり前すぎる(苦笑)。


 そんなわけで、エントリイナビ情報をTitle直下にも配置してみた。
 しかし、個別エントリイ表示以外のモードの時には、各エントリイの上下にナビ的な一行が挿入されるのは邪魔に感じるので、個別エントリイモードの時のみ上下にエントリ情報が表示されれば済むことだ。
 そこで個別エントリイ表示の時のみ上下にエントリイナビを設置することにした。


 効果の程や如何に?????

ナビゲートにおける「次」と「前」

 Fc2ブログでは、「次」と「前」が特殊な使われ方をしていることについては、このブログを始めたときに誰でも気がつくことだろう。
 次のエントリイ、前のエントリイといえば「普通」は、時制的に考えて、前とは過去であり、次とは未来である。
 ところがFc2ブログのnextentryは一つ前の過去のエントリイであり、preventryは一つ後の未来のエントリイなのだ。<%nextpage_url> でも <%prevpage_url> でも同じ使い方をしている。preとは一つ後の未来の意味であり、nextとは一つ前の過去のことなのだ。
 それ故に共有テンプレート(最近は全くテンプレートそのものに関心がないので見ていないので、1年前の初期の頃のそれに限定されるかも知れないが)では、ナビゲーションバーはおかしなことになる。1つ前と思ったのに後になり、その逆も真なり、と言うわけだ。
 これは困った事と言わねばならない。どうしてこんな英語の使い方をしたのか確たる理由は分からないが、今更変数定義を変えるわけにも行かないだろうから、そのような仕様として諦めるしかないだろう。


 さて、そのような次第であるため、これまでナビゲーションバーでは過去が右に、未来が左に位置していた。
 しかし、幾何学において、あるいは工程表に於いて、あるいはまた日常的な様々なシーンで時制を表す場合の慣行において、「過去は左に、未来は右に」が常識である。
 従ってこれまでも気持ち悪かったのであるが放置していたこの問題を今日解決した。
 ナビバーの左右を入れ替えて、過去のエントリイへのリンクは左側に置き、未来は右にしたのである。

Memo:拡張パン屑リスト(2)──CSS編──

次に拡張パン屑リストのCSSについてまとめておく。

ここに、拡張パン屑リスト内に取り込んだブラウジングメニューのスタイルシートについても簡単に触れておく。

breadCrumbsList用スタイル設定
  • 四周に余白を設けるためのmargin設定は、Mac版IEのバグを考慮して短縮形による設定を避けた。
  • borderについては特に記すほどのことはない。
  • paddingは文字と四周の罫線の隙間を設定しただけである。
  • 背景色指定はタイトル部の太い帯と同一色とした。
clone階層メニュー用スタイル設定

階層メニュー用のスタイル設定は、cloneの本体である階層メニューに対して沢山設定してあるので、そのclass設定はそのままclone階層メニューにも適用できることになる。ここでは、本体の階層メニューに対するスタイル設定については割愛し、cloneの為に新たに設定したスタイル設定だけを記述した。

  • 当然絶対配置指定が必要である。
  • このエレメントのdisplay初期値は隠蔽とする。

以上でパン屑リストのCSSは完了である。リンク部分の表示をどうするかちょっと悩んだが、このブログ全体に適用している設定をそのまま引き継ぐことにしたので、特に定めなかった。

Memo:拡張パン屑リスト(1)──HTML編──

今後のために、Myパン屑リストのHTML、CSS及びJavascriptについて整理しておく。まずはHTMLから。

HTML文

  • まずパン屑リスト用の固有の not_index_area を設けた。我がテンプレートにおけるindex_area ではパン屑リストは必要ないからだ。設置位置は当然エントリイタイトルの上になる。このarea内に必要となるパン屑リストのためのHTML文を挿入した。
  • 次に適当なid名を持つdiv要素を設ける。CSSでパン屑リストのレイアウトと表情を設定するために必要となるからである。ここではパン屑リストを直訳してbreadCrumbsListとした。
  • 設置したbreadCrumbsList div要素の中に、パン屑リスト用のHTML文を挿入するだけでパン屑リストHTML文は完成だ。
  • 以上のHTML文を以下に記載しておく。(※ ここに括弧数字はこの場の説明用であって、HTML文内には不要である)

HTML文各行説明

  • (1):ホームページ(=トップページ)へのリンク
  • (2):固定リンク表示(個別エントリイ表示)の場合のパン屑リスト
  • (3):カテゴリイ表示の場合のパン屑リスト
  • (4):月別/日別の場合のパン屑リスト
  • (5):検索結果表示の場合のパン屑リスト
  • (6):コメント修正画面の場合のパン屑リスト

謝辞

上記方法によるパン屑リストは、phpbbのこちらのやりとりにおけるpinoさんの回答をを全面的に援用させていただいた。pinoさんに感謝!!

追記

  •  ブログブラウジング用の階層メニューは、HTML、CSS及びJavascriptが一体となって機能しているため、HTML文だけ記述しても何の意味もない。別途切り離して記述したい。
  •  日別表示の場合には月別表示と異なるパン屑リストが必要となる。しかし、上記HTML文では日別表示には対応していないし、そもそもHTMLで日別表示の場合のパン屑リストを作ることは出来ないと判断した。そこで日別表示の場合には、Javascriptによって独自のパン屑リストに置き換えるようにしている。  その内容も別途記述することにする。

拡張パン屑リスト

これまでスレッドテーマへの投稿を極力行ってきたが、スレッド自身がころころ変わるので面倒だ。今後は投稿はやめることとする。

さて、パン屑リストを作成した結果、その片隅にブログ全体を閲覧するメニューが欲しいとの思いを強くし、ここ数日格闘を続けてきた。それが今日やっと完成したので、記録しておきたい。

拡張パン屑リスト画像
拡張パン屑リスト画像

それは一般的に言われるJavascriptによる階層メニュー(プルダウンメニューとも呼ぶらしい)であるが、次のような大きな特徴を持っている。

その特徴とは既にこのブログ内に存在している階層メニューをDOMを使って複製(cloneNode)して配置したことである。

そのため、clone元のHTML文随所にちりばめられているid定義を、DOMによって異なるネーミングに変更してid重複を避ける、という荒技を使う必要に迫られ何とかそれを実装した。

Firefoxでは正しくHTML内の改行1つ1つをNodeと解釈するが、IEにおいてはそれはNode扱いとならないため、ここでもまた、ブラウザ毎のDOM実装の差異を考慮してスクリプトを組まざるを得なくなった訳で、それ故に困難さが増した。

一言で言えば、多大な時間を要したのは特殊な解釈をしてしまうIEのDOM仕様との格闘に明け暮れたためだ。

なお、拡張パン屑リストの完成序でに、not_permanent_area表示時において、そのGroupに属するエントリイ一覧を表示するようにした。Top頁=Index頁において実現しているタイトルだけの一覧を各Group表示の最上部に配置したのだ。ここにおいて、Index頁同様に、エントリイタイトルにonmouseoverすると、本文の要約(200文字)を表示(<%topentry_discription>単変数)する仕様としたことは言うまでもない。

以上が拡張パン屑リストのあらましであるが、これだけではどの様に作成されているのか、後で辿ろうと思った時の記録としては余りに一般的・抽象的すぎる。そこでその構造をここに記録しておき、後の反芻・反省・記録呼び覚まし等々に活用することにしたい。とはいえ、今晩は疲れ切ったので機会を改めて総括することにしよう(苦笑)。

パン屑リストを設置

 スレッドテーマ「ブログ・カスタマイズ」に投稿するが、テーマは生者必滅、栄枯盛衰が激しく、ちょっと前に存在したスレッドテーマが今日は消えていることが少なくない。仕様と言えばそれまでだが、このため継続的、長期的に存在し続けるスレッド一覧は数少なく、果たして投稿して意味があるのか、疑問に思わざるを得ない。


 さて、かねてより計画していたパン屑リストをやっと設置した。
 現在、次の4つの表示形式に対応させたところだ。
・個別エントリイ表示時(http://hkom.blog1.fc2.com/blog-entry-num.html)
・カテゴリイ別表示時(http://hkom.blog1.fc2.com/blog-category-num.html)
・月別表示時(http://hkom.blog1.fc2.com/blog-date-yyyymm.html)
・日別表示時(http://hkom.blog1.fc2.com/blog-date-yyyymmdd.html)


パン屑リスト画像




 なお、サイト内検索結果表示時(http://hkom.blog1.fc2.com/index.php?q=query)にも、それに相応しいパン屑リストを設けたいと考えている。


 更に、作った結果を見て思ったのだが、パン屑リスト行の一部にブログナビゲーション用のプルダウン階層メニューを設置すれば、使い勝手がより向上するだとう、と模索しているところだ。


 実は、既に「Open Menu」をクリックすることによりブログナビゲーションを表示するようにしている。しかし、パン屑リストを作ってみて、その一画にブログナビゲーションツールがあればより便利だと思ったのだ。
 ここで課題となるのは同じ情報を2箇所に設置する場合の合理的な対処法である。それこそ該当部分のHTMLを複写してHTML本体内に情報を重複させることは明らかに無駄であろう。
 そこで、初めてDOMのcloneNodeを使って挑戦してみようと思う。

この続きを読む

CSSクラスネームの法則的ネーミングの勧め

 CSSファイルを作る場合、id名やclass名をいかに客観的、明示的に作るかという点に悩まされる。
 CSS学習の最初の頃は、闇雲にネーミングしてしまうものだ(「ルールなきネーミング」とでも呼んでおく)。
 暫くすると、大文字/小文字の使い分けもさることながら、どの様なルールでネーミングをするべきか、悩むことになる。そして到達した結論は次のとおりである。
 もしかしたら誰かの参考になるやも知れぬので、敢えてここに書き留めておくことにしたい。


 それは結論から言えば、スタイルシートのスタイル属性と値の正式な宣言文に依拠する方法である。こうすることにより正式な宣言文を覚えるのにも役立つし、可読性も極めて高くなる。
 例えば、あるHTML部分で「margin-left:2em;」を適用したいとする。その時にはまずスタイルシートにおいて次のようなネーミングのclassを設定する。


 .ml_2 {margin-left:2em;}


 margin-leftの最初の文字 m とハイフンの後の最初の文字 l をつなぎ合わせ、その後にアンダーバーを入れて値を単位抜きで記述するのだ。アンダーバーの前は属性名となり、その後は属性値となることが味噌である。もちろんハイフンではなくアンダーバーを使ったのは、属性値にマイナスが来る場合があるためである。ハイフンとマイナスは同じ記号となるので、区切り文字をハイフンとすると属性値がマイナスの場合には判読しにくくなるのだ。
 ここに全スタイルシートにおいて、margin、padding、text-indennt等のコンテンツの位置に関するスタイルは、その単位をemとするようにする。


 その時にはHTMLでは次のように記述すれば良いわけで、この方法の要点は「クラス名は何だったっけ?」───と思い悩むことがなくなる点にある。


 <div class="ml_2">なんたらかんたら</div>


 こうすると、ちょっと2文字右に寄せたい段落や、インデントを掛けたい段落に対して、簡単にclass設定を行えるし、何を設定するのか、常に正式な宣言文をイメージすることにより、その短縮形であるCSSクラス名も覚えることなく、自然に浮かんでくることになる。




 というわけで以下に記憶不要のクラスネーミングの例を掲載しておく。


 pl_3  padding-left:3em;
 mr_2  margin-right:2em;
 ti_-2  text-indent:-2em;
 f_l   float:left;
 br_2  border-right:2px;(この場合にはCSSにおいて単位をpxとする)
 bc_red background-color:red;
 ta_r  text-align:right;
 d_n  display:none;
 d_b  display:block;
 p_a  position:abusolute;

flashテスト

 これはflashファイルのテストです。

 90%近いシェアを握っているインターネットエクスプローラの描画エンジンを利用したタブbrowser。沢山のタブbrowserがあるが、多機能、カスタマイズフリー、スクリプト利用等で一日の長がある。Gekkoエンジンへの対応も行われ、IEからの自立独立の方向に向かっている。2005年7月にはIE7が登場する見通しの中で、今後の発展が望まれる。

 多様なCSS作成支援機能を備えた、タグ入力式 HTML&CSS作成支援エディタ。スキンデザインもすっきりしている。テキストエディター上で作成するよりも確実で安全にタグ打ちが出来る。
文字コードを選べないのが欠点。

 StyleNote同様のタグ入力式 HTML&CSS 作成支援エディタ。長年使用してきたが現在StyleNoteに乗り換えつつある。

 クリップボード履歴情報を活用する為のソフト。画像まで履歴を取ってくれるのが嬉しい。このソフトを使わない日は絶対ない程に重宝し、愛用している。

 起動中のウィンドウの「コピーできない」説明文などの文字列を取得し、コピー可能な文字データにするツール。何かと便利。

 ストリーミングデータを保存することが出来るソフト。動画利用には不可欠なソフトだ。

 無料ながらレイヤー機能を有し、スクリプトによる拡張も可能な、sleipnir作者が提供している優れもの画像編集ソフト。

 画面キャプチャソフトと言えばこれに勝るものなし、ではないだろうか? 様々な取得方法を有しており、ブログ作成にもHomepage作成に不可欠だ。Jtrimと並んでWoodyBellsの作品。

 複数ファイルの同時編集は出来ないが、透過pngも作れる画像編集ソフト。
(以下当該サイトから抜粋)初心者にも簡単に操作が出来るフォトレタッチソフトです。多くの加工機能で画像に様々な効果を与えることができます。非常に軽快に動作するため、ストレスなく操作できます。

 Animation Gifファイルを作れる無料ソフト。

 キャプチャソフト。画面内にサイト全体が表示しきれない場合でも、これを使えば全体をキャプチャすることが出来る。

 画像処理。画像のフォーマット変換のみならず、色数やサイズ、圧縮率の変更まで一括処理できてしまう『BatchGOO!』は、大量の画像をまとめて処理したいときに大変便利なソフト。BMP, TIFF, JPEG, PCX, PNG の相互変換をはじめ、色数・サイズ・解像度の統一、JPEG圧縮率の調節など、ホームページ用の画像や携帯電話用の壁紙を揃えるのに抜群の相性を見せる。(Vectorの当該ソフト紹介頁より抜粋引用)

 名前から直ぐに想像が付くように画像のサイズを測るためのソフトだ。Homepage作成には欠かせない。2カラム、3カラムのレイアウトを行う場合に大変重宝する。

 ランチャーソフトは沢山あるが、中でもこれが一押しだ。2年以上使ってきたがその操作性には毎日満足している。これを使い始めてからデスクトップには一切のアイコンを表示することをやめてしまった。

 AdobeReader7によって、起動時間が長すぎるという長年のユーザーの不満はある程度解消した。そのためこの高速化ソフトは存在価値が低下してしまったかもしれない。AdobeReader6迄はこのソフトによる起動高速化で恩恵を受けてきた。

 IE専用が難点だが、様々なサイト内でIDやパスワードを入力するのに重宝するソフト。コンテキストメニューから簡単に起動できるのがGood! sleipnir等のIEの描画エンジンを利用しているブラウザでも使える。

 利用しているパソコンの諸元値を取得するには、このソフトがベストだ。インストール済みソフトの一覧が取得できるのも嬉しい。

 WMPは機能が豊富なだけ重い。RealPlayerも同様だ。そこでMedia Player Classicを使いたい。動作が軽快なだけではなく、対応しているファイル形式もすこぶる多く、これひとつで、wmvもrmも表示できてしまうのだから凄い! 数多あるMedia Playerの王様と言えるだろう。

 自宅でPCを起動しているときには必ず起動しているメディアプレーヤー。何かと過剰なWinampよりも、起動も速くスキンはシンプルだ。

 DivX, Xvid, Mov, Vob, Mpeg, Mpeg4, avi, wmv, dv, などの動画をDVD-Video形式に変換できるフリーソフト。クリックするとDVD関連ソフト紹介サイト=「DVDなToolたち」なるHomepageが開きます。

200710061305
200709240040
200701130501
200612161139
200612140200
200611220911
200611212008
200611041221
200604301838
200604172341
200511250053
200511231136
200511230000
200511160158
200511112137
200511110131
200511090001
200511051025
200510260030
200507100346