ChaichanPapa-World !

燈明日記(2009/03

◆ インデックス

◆ 2009年3月

2009-03-31 Windows上のPerlで改行コードをLF(0x0a)にするには

通常、Windows上で改行処理をする時の改行(\n)のコードは、CR LF(0x0d0a)です。

しかし、Linux用にファイル出力をする時は、LF(0x0a)にしたいのです。

エスケープ文字にも\rや\nは有りますが、LFになるもは無いのです。


この場合は、オープン後にbinmodeします。

すると、ファイル出力時には改行コードがCR LFでなくLFのみになるのです。

use strict;
use warnings;

open(FH, '> linuxfile.txt') or die "open error($!)";
binmode(FH);
print FH "TEST1\n";
print FH "TEST2\n";
close(FH);

2009-03-31 Windows2003サーバーのIIS6でCGI-Perlを動かす時の留意点

Windows2003サーバーのIIS6でCGI-Perlを動かすには、WindowsXP-IIS5の設定プラス以下が必要です。

あと、IIS6からはきめ細かな設定ができるようになっています。

詳しくは以下のリンクの周辺をお読みください。

2009-03-31 立て板に水の如く

スピーチが上手い人のことを『立て板に水の如く』と称することがありますね。

『立て板に水』とは、大辞泉では『よどみなく、すらすらと話すことのたとえ』となっています。


逆に、詰まりながらしゃべるスピーチ下手な人を『横板に雨垂れ』と称するそうです。

前準備なしにいきなり振られると、誰でも『横板に雨垂れ』状態になりますね。


そういえば、前準備万端で臨んだ子供のバスケットの打ち上げの挨拶で、『横板に雨垂れ』どころでなく『メロメロ』状態で10分の1も話せなかったことを思い出しました(悲)。


ということで、『立て板に水の如く』話すには、話すことを前もって論理整然とすることはもちろん、人前で上がらない訓練が必要ですね。

2009-03-30 関心って、実は愛のこと!

『人間というものは自分に対して他人から関心をもってもらいたいものである』とよく言われています。

私がブログやウェブページを毎日更新し続けるのも、もしかしたらコレなのかも知れません。


夫婦であればパートーを、親子であれば親子同士、仕事であればお客さまに対して・・・関心をもつこと!

そして、関心をもってくれることが分かると、嬉しくなりこちらも関心を持ち、こんどは相手が嬉しくなり、プラスのスパイラルになっていくのです。


逆に相手が自分に対して関心を持っていないと思った瞬間から、相手に対する感謝や協力しようとする気持ちが無くなってしまうのです。


そういえば、『愛の反対は無関心である』とマザーテレサが確か言っていたと思うのだけれど・・・

・・・だとしたら、愛の反対の反対は関心であるということになる。

つまり、関心って愛のことだったみたい・・・。


追記:

このことを書いてから、家族への言葉掛けが多くなっています。

本当に関心って愛ですよ!

2009-03-30 ふりだしパート2

前回は、仕事のふりだしのお話しをしました。

今回は、体調のふりだしのお話しです。

かつて『過敏性腸症候群』を「腹巻き」と「コーヒー断ち」でなんとか乗り切りましたが・・・。

良くなって来ると、いつのまにか、腹巻きもせず、コーヒーも復活してしまうものなのですね・・・人間って。


でも、今回の土日のようにまた体調が悪くなって、後悔するわけです。

今また、「腹巻き」と「コーヒー断ち」を誓います・・・。


とにかく、体調維持は、胃腸にやさしく生活をするしかないですね。

2009-03-29 ダウン

昨日、朝起きたら悪寒があり、吐き気する。熱も37度あり(普段は35度台)・・・。

ということで、折角の土日を寝込み三昧することとなりました。


ここ一年以上は、病気などしたことがなかったのに、ここ数日の残業が効いたのかも、この程度の残業でダウンとは年をとりました。

2009-03-29 人間ジュークボックス

ダウンして布団の中で寝ていると、ダイニングの方から、長男とママの歌声が聞こえてきました。

ダイニングでママがリクエストをして、長男がギターを弾き、2人で好き放題に歌っているのです。


実は、この2人、歌がメチャクチャ上手いのです。

って、長男はプロを目指しているので上手いのは最低条件なのですが・・・。


とりあえず、生の弾き語り人間ジュークボックスっていいなぁと思い、ある意味プロの歌手を子供にもつ特権かな・・・なんて思いました。


つながり / 小池啓仁

2009-03-29 意外と役に立ちますよ!

私は今、ツールとしてExcelとPerlを使った仕事をしています。

ここ数日は残業で、分からないことは、ネットで調べるのですが、ほとんど「VB-TIPS」と「Perlノート]で用が足りるのです。


いやー、ExcelとPerlを使っているには、「VB-TIPS」と「Perlノート]の2つのページは意外に役に立つ!

こんな役に立つページは、誰が作っているのだろうかって・・・すみません私でした!

2009-03-27 ふりだしに

ここ数日の残業は、何だったんだって状況になりました。

もともと動いていたシステムが、ある日急に動かなくなり、原因を調査し、それらしき原因をみつけ、対策を施して、やっと復旧が出来たかと思ったら、対策する前のシステムが何も無かったかのように動きはじめました(オイ)。


まさにラビリンス、Windows2003サーバーの世界は・・・。

とにかく、ふりだしに戻りました(泣笑)。


しかし、このトラブルのお陰で、いろいろなことを体験でき、いい勉強ができました。

2009-03-26 プログラマ的『針の穴を通す思い』

意味不明なタイトルですみません・・・。

たとえば、PCからWINDOWSサーバーへファイル(COM系)をアップロードし、そのファイルを元にCGIで処理をして結果をPCへ返したとします。

たったこれだけの、ごく普通のことですが、実は以下の条件をすべてクリアしないとならないのです。

ざーっと、こんな感じです。

これで、タイトルの意味がわかりましたか・・・とか。


そういえば、CSSの段組みレイアウトもこんな感じですね。

まさに、プログラマ的『針の穴を通す思い』ですね。

2009-03-25 『Perl で Win32::API プログラミング入門』リンクメモ

Win32::APIモジュールやDynaLoaderでの「Hello, World!」プログラム


今の私のレベルでは、チンプンカンプンですが、とりあえずメモしときます。


◆Win32::APIモジュールで

#!/usr/bin/perl
use Win32::API;
my $MessageBox = Win32::API->new("user32", "MessageBoxA", "NPPN", "N");
   $MessageBox->Call(0, "Hello, World!\n", "Message", 0);
http://d.hatena.ne.jp/TAKESAKO/20090324/1237879559

◆DynaLoaderで

#!/usr/bin/perl
use DynaLoader;
sub GetProcAddress {
 my ($DLL, $API) = @_;
 my $path = "$ENV{SystemRoot}\\system32\\$DLL";
 my $libref = DynaLoader::dl_load_file($path);
 pack "L", DynaLoader::dl_find_symbol($libref, $API);
}
my $x86 = ""
. "h\0\0\0\0"
. "h" . pack("P", "Message")
. "h" . pack("P", "Hello, World!\n")
. "h\0\0\0\0"
. "\xb8" . GetProcAddress("user32.dll", "MessageBoxA")
. "\xff\xd0" # call eax
. "\xc3"     # ret
;
DynaLoader::dl_install_xsub("X",unpack"L",pack"P",$x86);&X;
http://d.hatena.ne.jp/TAKESAKO/20090324/1237879559

暇な時にソース解析をしてみますね。

しかし、入門といいながら、ソース解説が全くないですね。

だから逆に調べることになり、入門になるの・・・かも。


追記

Win32::APIモジュールは、標準(5.8.8)では入っていなかったので、ppmでインストール。

WIN2000ノートで問題なく動きました。

ちなみに、DynaLoaderの方は標準で動きました。

2009-03-24 ネガティブな気分

今日、朝6:58の「めざましテレビ」の星占いで、かに座が一位で絶好調でした。

しかし、現実は逆でした。


IIS経由のEXCELよ、お前はどこまで私をイジメるのか(謎)!

2009-03-23 「負けず嫌い」は、実は「負けるのが好き」

たとえば、「食べず嫌い」は、「食べずに嫌い」と言う意味です。

食べずの「ず」は否定の「ず」ですね。


では、「負けず嫌い」は、「負けずに嫌い」と言う意味です。

「負けずに」ということは、「勝つ」ということです。

つまり、「負けず嫌い」とは、「勝つのが嫌い」で、結果的に「負けるのが好き」になるのです。


だから、「負けず嫌い」と言う場面は、本当は「負け嫌い」と言わなければならないのです・・・たぶん。

2009-03-22 「桜咲く季節に」祝1000回!! of 再生回数

YouTubeへ2008/08/18にアップして約8ヶ月、今日、再生回数1000回を達成しました!!

正直にいうと、私だけでも100回ぐらいは聴いていると思いますが・・・それにしても900回はネットの皆さんが聴いてくれたのです。ありがとうございます。


無名の歌手の無名のこの曲を1000回も聴いていただけたことは、ある意味、奇跡なのかもしれません。

今後も、シンガー小池啓仁をよろしくお願いいたします!


桜咲く季節に


丁度、東京でも桜の開花宣言があったばりです。

下の写真も桜が咲いていすね。

小池啓仁


桜咲く季節に『桜咲く季節』が1000回を迎え、また、あの日がやって来ます。

ちゃいちゃんのお友達、今年も遠慮せず、是非遊びにきてください!

ママと一緒にお待ちしています!

2009-03-22 gcc vim Cygwinをインストール

えーと、封印していた(実は単に忘れていた)C言語のネタをFD(フロッピー)の中から偶然に見つけました。


このC言語ネタは、かつてリストラ(5年前)された少し前からまとめていたものなのですが、リストラや新しい仕事に気がいっていたため、お蔵入りになっていたものです。


しかし、現在、UNIX(Linux)はもちろん、C言語のコンパイラーももっておらず・・・、Cygwinにgccがあることを思いつき、Cygwinをネットからインストールしました。


vimもインストールして、5年ぶりにviとccを使ってみました。

UNIXは、かつて仕事で10年以上も使っていたので、5年間のブランクがあっても、昨日のことのように使いこなせました(パチパチ)。


また、ネットにCygwinの情報は沢山あり、インストールや日本語化は簡単にできました。

ということで、今後は、燈明日記でもC言語ネタが登場するかもです!


そうそう、以下は、5年前に私が書いたC言語ネタのページです。

このページのつづきが5年間のブランクを経て開始するのです・・・かも。

実は、このページ、アクセス解析では人気が結構あるんです!

2009-03-22 セレスタミン効果絶大 for 花粉症

ここのところ、鼻が詰まって苦しくて朝早く起きてしまう日々が続いていましたが・・・。

昨日、医者から処方されたセレスタミンを飲んで寝たら、あれほど頑強だった朝の鼻詰まりが消滅していたのです!!

久々の感動感激でした。


しかし、セレスタミンは、ちょっと危険な薬なので、あまり煽る問題がある・・・かも。

これから処方された人は、ちゃんとお医者さんの言う通りに服用してくださいね。


朝方の物凄く大変な苦しさは、花粉症の人なら分かっていただけると思いますが、それがなくったのです。

本当に助かった・・・。神様、仏様、セレスタミン様、ありがとう!

2009-03-21 グーグルアナリティスクのセッション数とは

実践!グーグルマーケティング (Mainichi Business Books)

一時間でわかる「実践!グーグルマーケティング」と言う本を本当に一時間で読み終えました。

内容は、ちょっとしたインターネットユーザなら知っていることばかりでした。

しかし、グーグルアナリティスクの解説に関しては、参考になりましたのでご紹介します。


グーグルアナリティスクは、グーグルのアクセス解析サービスですが、サービスを利用すればわかるように多機能&高機能で、知らない用語が沢山あり、普通の人には使いこなせません。

この本では、以下の6個の指標をキーワードにして、グーグルアナリティスクを見れば理解し易いと書いてありました。

  1. keyword
  2. session(visits)
  3. page views
  4. site overlay
  5. repeat user
  6. time(length of visit)

覚えやすくするために英語の頭文字をとって、ksport(ケースポーツ)としていると書いてありました。

これらを簡単に説明すると以下の感じです。

これらの予備知識をもとにすれば、少しはグーグルアナリティスクを使いこなせる・・・かも!

実はこの本で、初めて「セッション数」の意味が分かりました。

2009-03-21 花粉症、我慢の限界

ここのところ、朝方(4時頃)鼻が詰まって苦しくて起きてしまう日々が続いていました。

市販の目薬と点鼻薬でなんとか凌いでいましたが、ついに今日、我慢の限界を超えたので、お医者さんへ行きました。


飲み薬は、セレスタミンで、あとアレルギー用の目薬と点鼻薬を2つづつもらいました。

金額的には、市販の目薬と点鼻薬の合計より安いし(健康保険があるため)、セレスタミンが良く効くのです。


しかし、セレスタミンはステロイドも配合されていて、強い薬とのことで長期服用はNGなのです。

本当に花粉症の症状が重い時だけ、セレスタミンを飲むようにしています。


それと、花粉症の飲み薬というのは、基本的に花粉が体内に入ってきても感じさせないように作用するとのことで、つまり、ある意味、脳をマシさせることらしいです。


なので、花粉症の飲み薬は、無意識に脳力が落ち、車の運転とかに注意が必要なのです。

また、プログラマとか閃きを使う職業の人には、飲みたくない薬なのです。


と言うことで、プログラマの私ですが、花粉症に負け、仕事に影響がでないことを祈りながらセレスタミンを飲みました。

って、花粉症でなくとも、仕事や家でボケているので、誤差の範囲かもしれませんが・・・。

2009-03-20 段組みレイアウトの留意点とテンプレート

解説第十二弾です。

本コンテンツは、以下のページのHTML/CSSソースを解説しています。


とにかく、CSSで段組みレイアウトをしていると不可思議な現象に遭遇します。

それは、ブラウザ毎、バージョン毎、表示モード毎の間だを上手く通り過ぎなければならない宿命なのかもしれません。


レイアウト計算では、つねにコンテナー要素の左右のマージン・パディング・ボーダーの幅とwidthの合計を考慮します。

間違っていると、正確なFirfoxは、段組みレイアウトになってくれませんし・・・。

逆に合っていても、不正確なIEでは、段組みレイアウトになってくれません。

ですので、この両方のいい按配のところを見つけることになるのです。


あと、上記がクリアできたとしても、大きなpre要素やtable要素、img要素、長い半角英数字などが悪さをして、カラム落ちになる場合があります。

この場合、ブラウザによっては、各カラムのコンテナーに「overflow:hidden」を指定すると回避できることがありますが・・・回避できないこともあります。


で、大枠の段組みレイアウトができたとしても、そこから詳細の見栄えをCSSで整えるには、めちゃくちゃ根気にいる作業です。

しかも、デザイナー的なセンスも必要で・・・。


ということで、老プログラマの私としては、そろそろこの辺で、CSSから撤退します。

尚、折角なので、段組みレイアウトテンプレートをプレゼントします。

しかし、そのままでは、まったく使い物になりませんので、デザイナー的センスでカスタマイズしてご使用して頂ければ幸いです。


◆段組みレイアウトテンプレート

関連ページ:

2009-03-18 3列段組みレイアウト(サイド固定横幅コンテンツ可変横幅編)

解説第十一弾です。

本コンテンツは、以下のページのHTML/CSSソースを解説しています。

今回は、3列両サイドバー固定横幅コンテンツ可変横幅のレイアウトです。

これは、シリーズで解説している2列右サイドバー固定横幅コンテンツ可変横幅の応用です。

前回の3列パーセント指定横幅のように簡単にはいきません。

とりあえず、以下がサンプルです。

◆ポイント解説

まずは、ポイントのhtml構造とCSS指示です。


・html構造
<div id="wrapper">
<div id="contents_container">
:
:
</div>

<div id="left_sidebar_container">
:
:
</div>
</div>

<div id="right_sidebar_container">
:
:
</div>

・CSS指示
:
#wrapper {
    width:100%;
    clear:left;
    float:left;
    margin-right:-180px;
}
#right_sidebar_container {
    background-color:#ffcccc;
    width:180px;
    float:left;
}
#contents_container {
    background-color:#ccccff;
    width:100%;
    float:right;
    margin-left:-180px;
}
#left_sidebar_container {
    background-color:#ffcccc;
    width:180px;
    float:right;
}
:

はじめに、wrapperとright_sidebar_containerで右サイドバーの2列左コンテンツ可変横幅右サイドバー固定横幅を行います。

つぎに、wrapper内のcontents_containerとleft_sidebar_containerで左サイドバーの2列左サイドバー固定横幅右コンテンツ可変横幅を行います。

すると、結果的に3列両サイドバー固定横幅コンテンツ可変横幅のレイアウトになるのです。


尚、2列左コンテンツ可変横幅右サイドバー固定横幅は、関連ページの本シリーズを読んでもらえると理解できるようになっています。


関連ページ:

2009-03-17 お尻に火がついた

3月末リリース予定のシステムが、今、追い込みにかかっています。

ということで、これから4月頭までは、ブログ更新が滞りぎみになる予定です。


しかし、VBAとPerlを交互に組んでいると、コメントとか文字列連結とかmyとDimを間違えたり・・・。

VBAを組んでいると、いかにPerlがラクチンか分かりますね。

2009-03-16 『桜咲く季節』もうすぐ1000回!!

もうすぐ、桜咲く季節が来ます。

『桜咲く季節』も、もうすぐ再生回数1000回を迎えます。

無名のシンガーの無名の曲がです。

ネットの皆さん、ご清聴、ありがとうございました!



4月の末にツーマンライブがあり、8月にワンマンライブがあります。

詳しくは、また、ご連絡します。

ネットの皆さん、長男:小池啓仁の応援、これからもよろしくお願いいたします!!

2009-03-16 段組みレイアウトの基礎の基礎

解説第十弾です。

本コンテンツは、以下のページのHTML/CSSソースを解説しています。

えーと、今まで解説してきた段組みレイアウトですが・・・「HTMLってなに」、「CSSってなに」って人にはチンプンカンプンだったのだと思います。

なので、今回は、段組みレイアウトの基礎と関係があるところのHTMLとCSSの基礎を解説いたします。


まず、HTML(HyperText Markup Language)とは、文章の要素をタグでマークアップし、文書内の要素を明確化します。

文章内の要素とは、タイトル、見出し、段落、リスト、引用、画像・・・等です。


つぎに、CSS(Cascading Style Sheets)とは、HTMLで明確化した要素をどのように修飾(表示)するかを指示します。

HTMLとCSSの関係は、HTMLでマークアップした要素にid属性やclass属性を指定して、それをCSSのセレクタに関係付けします。

また、タグ名だけでマークアップした要素に対しても、タグ名だけで関係付けができます。

ちなみに、id属性は、その文書内では一意(ユニーク)でなければなりません。


具体的(サンプルソース参照)には、div要素のid属性のmain_containerをCSSに関係付けるには、セレクタを#main_containerとします。

また、p要素のclass属性のsidetitleをCSSに関係付けるには、セレクタを.sidetitleとします。

つまり、idが頭「#」のセレクタで、classが頭「.」のセレクタです。

ちなみに、タグ名だけでマークアップした要素は、タグ名のセレクタになります。


サンプルソース
<html>
<head>
<title>テスト</title>
<style type="text/css">
#main_container {       /* #main_containerがセレクタ */
    width:96%;
    margin-left:auto;
    margin-right:auto;
    margin-top:1em;
    text-align:left;
}
.sidetitle {            /* .sidetitleがセレクタ */
    padding: 0.5em 0;
    border-bottom: 1px solid #666666;
}
h1 {                    /* h1がセレクタ */
    margin-bottom:0.5em;
    padding:5px 0 5px 5px;
    border-top:1px solid #888888;
    border-bottom:1px solid #888888;
}
</style>
</head>

<body>
<div id="main_container">
<h1>見出し</h1>
<p class="sidetitle">サイドタイトル1</p>
</div>
</body>
</html>

CSSのセレクタとプロパティをもっと知りたい人は、以下のページをどうそ!

関連ページ:

2009-03-15 お彼岸会

今日は、某教会で春のお彼岸会の式典がありました。


とりあえず、『お彼岸とは』は、以下に2年前に書きました。

最近は、さぼりにさぼっている法華経読誦を久々に心を込めてあげることができました。

ここのところ体調が悪いママも今日は大丈夫で、一緒にお彼岸会へ参加出来たことも、有り難かったです。


しかし、今年ももう3月の中旬ですね。

あっという間に、時は過ぎていきますね。


50歳半ばで、ともすれば守りに入っていますが・・・まだまだ攻めなきゃいかん!

三男もまだ中学2年だし・・・。

3列段組みレイアウト(3列パーセント指定横幅編)

解説第九弾です。


今までは、メインコンテンツとサイドバーの2列段組みレイアウトでしたが、今回は3列段組みレイアウトに挑戦してみます。


挑戦と言っても、あっさり出来てしまいました。

特に3列パーセント指定横幅でのレイアウトは、比較的簡単でした。

しかし、IEのバグには悩まされました。

ul要素中の改行コードに反応して変なスペースが入ってしまうんです。

改行コードを除去するとFirefoxと同じ表示になりました。


まず、HTMLの文書構造は、サンプルページのソースを見てもらえれば分かるように、以下のように非常にシンプルです。

IE用の特別なdiv要素などは必要ありません。

CSSの方も、非常にシンプルです。

left_sidebar_container、contents_container、right_sidebar_containerを親要素に対して、各々フロートさせて、横幅を20%、59.9%、20%でとるだけです。

contents_containerを59.9%にしているのは、60%だとIEではカラム落ちが発生する場合があるためです。


今回の3列パーセント指定横幅段組みレイアウトは、非常にシンプルなのですが、サイドバー2列固定幅の3列段組みレイアウトは、結構難しいです。

これは、次回以降に解説する予定です。


関連ページ:

2009-03-14 休みなしで働く長男

通常、サラリーマンは週休2日で、土日は休みです。

家の長男は、無名のミュージシャンで、普段は休みなしでアルバイトをしています。

しかも、バーのアルバイトで徹夜したあと、2時間ぐらい寝て、昼間のバイトに行き、帰ってきて、2時間ぐらい寝て、また、徹夜のバーのアルバイトにいく、そのくりかえし・・・。

まぁ、ライブで歌う日は、アルバイトを休むわけですが、ある意味、これが本業です。

こんなめちゃくちゃな夢遊病状態の生活をしているので、少しは休んだらと言っても聞きません。


本人曰く

オレみたいな才能もない人間が、この道で食べていくには、こうやってお客さんを掴まなくてはならない。

休んでいる時間なんてないんだ!


たとえ、疲労で死んでしまっても、それはそれで、オレがそれだけの人間だったってこと・・・。


8月に小池啓仁ワンマンライブがあります。

約100人のお客さんに来てもらえるよう、がんばっているのです。

親としては、体力が心配だけど、応援するしかないわけで・・・。

皆さん、長男をよろしくおねがいいたします!


尚、2009/2/22の赤坂ムーブでライブした動画が結構カッコよく撮れたので、みてやってください。

2009-03-14 家の屋根のブリキが3枚飛んだ!

昨晩は強風で、今朝、隣のおじさんがブリキをもって、『これ、御宅のでしょう』と持ってきてくれました。

家の屋根の中央のブリキが少なくとも3枚飛んだようです。

早速、知り合いの大工さんに連絡して直してもらうことになりました。

今の家は、もう築35年以上なのです。

家も徐々にメンテナンスをしていかないとダメですね。

家賃ゼロ・・・なんて言っている場合じゃないですね(誰にともなく・・・)。

2009-03-14 段組みレイアウトの基礎

解説第八弾です。

本コンテンツは、以下のページのHTML/CSSソースを解説しています。


今回は、段組みレイアウトの基礎的なところを解説してみます。

スタイル指定なしのHTMLから徐々に段組みレイアウトのHTMLへ進化させていきます。

まずは、スタイル指定(CSS)なしのHTMLです。

尚、HTMLソースは、ブラウザで表示させた後、ブラウザのメニューからの表示で見てください。

まず、サンプル1でCSSを使わず(見やすくするため「background-color」は例外)以下の構造のHTMLを表示しています。


サンプル1では、ブラウザのデフォルトでのマージンとパディングがあるので、サンプル2ではこれをゼロにします。


サンプル3では、サンプル2でのcontents_containerを左フロートさせ右側へsidebar_containerを回り込ませてみます。


一見、IEもFirefoxも段組みになります。

しかし、sidebar_containerは親要素の100%の横幅になっているだけで、実は段組みではないのです。

フロートさせたブロックレベル要素の後につづくフロートでないブロックレベル要素は、あたかも前のフロート要素が無かったようにレイアウトされるのです。


では、段組みさせるのは、どうするかというと、後につづくブロックレベル要素もフロートさせます。


これで、IEもFirefoxも段組みになりました。

しかし、IEは、ウインドウの大きさを変えると、段組みになったり、カラム落ちになったり不安定なのです。

これを解決するには、sidebar_containerの横幅を30%から29.9%にすると、IEでも大丈夫になりますね。

どうやら、IEでは、レイアウト計算で誤差がでるようです。


これで、段組みが完成しました。

しかし、ulやol要素の点や番号の表示が変です。

なので左マージン(margin-left:25px;)をとり、いい感じになりました。


このように、レイアウト横幅を親要素のパーセントで指定すると比較的簡単に段組みレイアウトができます。


関連ページ:

2009-03-13 右サイドバーを左サイドバーへ

解説第七弾です。

本コンテンツは、以下のページのHTML/CSSソースを解説しています。


今回、解説しているCSSソースは、右サイドバーの段組レイアウトです。

実は、以下の3箇所のrightとleftを逆すれば、左サイドバーの段組レイアウトになります。

#contents_container {
    background-color:#ccccff;
    width:100%;
    clear:left;

    margin-right:-200px;  /* 右サイドバー */ 
/*    margin-left:-200px;    左サイドバー */

    float:left;           /* 右サイドバー */  
/*    float:right;           左サイドバー */

}
#for_ie_wrapper {
    margin-right:200px;   /* 右サイドバー */ 
/*    margin-left:200px;     左サイドバー*/
}

右サイドバーは、メインコンテナーを幅100%(親要素に対して100%)で左フロートさせ、右マージンを200pxネガティブさせ、空いたところに右サイドバーを回り込ませます。


左サイドバーは、これを逆にするだけです。

つまり、メインコンテナーを幅100%(親要素に対して100%)で右フロートさせ、左マージンを200pxネガティブさせ、空いたところに左サイドバーを回り込ませます。


関連ページ:

2009-03-12 CSS詳細部の解説2(メニューバー)

解説第六弾です。

本コンテンツは、以下のページのHTML/CSSソースを解説しています。


今回は、メニューバーCSSの詳細を解説します。

/*--- menubar ---*/
#menubar_container ul {
    width: 100%;
    list-style-type: none;
    background-color: #eeffff;
}
#menubar_container li {
    width: auto;
    float: left;
    border-right: 2px groove #cccccc;
    height:2.2em;
}
#menubar_container li a {
    text-decoration: underline;
    display: block;
    width: auto;
    padding: 0.5em 1em;
    background-color: #eeffff;
    color: #000000;
}
#menubar_container li a:hover {
    background-color: #99ccff;
    color: #ff0000;
}
http://d.hatena.ne.jp/chaichanPaPa/20090214/1234611010

menubar_container内のul要素の幅を親要素main_containerの幅100%とし、リストの点を無しにして、バックカラーをとりあえず#eeffffとします。

/*--- menubar ---*/
#menubar_container ul {
    width: 100%;
    list-style-type: none;
    background-color: #eeffff;
}

menubar_container内のli要素の幅を自動にし、左フロートさせ、右ボーダーを2px(groove #cccccc)とり、高さ2.2emとします。

これは、普通のダウンリストを左フロートさせることでメニューリストにしています。

#menubar_container li {
    width: auto;
    float: left;
    border-right: 2px groove #cccccc;
    height:2.2em;
}

menubar_container内のli内のa要素をアンダーラインして、インライン要素からブロックレベル要素に変え、あとは以下略。

a要素をブロックレベル要素にすると親要素のli内にピッタと収まるのです。

#menubar_container li a {
    text-decoration: underline;
    display: block;
    width: auto;
    padding: 0.5em 1em;
    background-color: #eeffff;
    color: #000000;
}

menubar_container内のli内のa要素の擬似クラスhoverにバックカラーを指定して、フォーバー(マウスオン)すると色が変わるようにしています。

#menubar_container li a:hover {
    background-color: #99ccff;
    color: #ff0000;
}

関連ページ:

2009-03-11 CSS詳細部の解説1

解説第五弾です。

本コンテンツは、以下のページのHTML/CSSソースを解説しています。


少しづつテンプレートソースのCSSの詳細部を解説していきます。

/*--- Detail layout ---*/
/*--- body ---*/
body {
    font-family: "MS Pゴシック", sans-serif;
}
#main_container {
    border: 1px solid #cccccc;
    background-color: #eeffff;
}

/*--- header ---*/
#header_container {
    padding: 1em 20px 1em;
}

/*--- footer ---*/
#footer_container {
    padding: 1em 0px 1em;
    text-align: center;
}
http://d.hatena.ne.jp/chaichanPaPa/20090214/1234611010

body要素でプロポーショナルゴシック系のフォントをとりあえず指定しています。

該当フォントがない場合は、サンセリフ体のフォントが使用されます。

body {
    font-family: "MS Pゴシック", sans-serif;
}

main_containerには1ピクセルソリッドのボーダー線を引きます。色は「#cccccc」。

バックカラーはとりあえず「#eeffff」としました。

#main_container {
    border: 1px solid #cccccc;
    background-color: #eeffff;
}

header_containerはパディングを指定しています。

以下のように引数の数によって解釈が異なります。

今回は3つなので、上と下が1emで、左と右が20pxになります。

ちなみに、emは、現在のフォントサイズを1とした相対指定で、pxは、ピクセルで色情報を持つ画素数指定。

/*--- header ---*/
#header_container {
    padding: 1em 20px 1em;
}

footer_containerもパディングを指定しています。

また、テキストを中央寄りにしています。

/*--- footer ---*/
#footer_container {
    padding: 1em 0px 1em;
    text-align: center;
}

関連ページ:

2009-03-10 花粉症、かなり来てますね!

土曜日ぐらいから、凄い勢いで花粉が来ていますね。

鼻が詰まって、朝方は寝苦しいです(寝る前に点鼻薬を指すので寝る時は大丈夫)。


しかし、CSS(スタイルシート)は、素人(自分)が手を出しては、趣味の時間では間に合わないですね。

泥沼にはまって、いくら時間があっても足りないです。


仕事(VBAとPerlで開発)の方は、突然の休暇とかで、メチャクチャ忙しくなっています。

最近は、VBAの世界が、なんか面白くなってきています。

ということで、今日は、こんなところです。ではまた!


そうそう、今日は3月10日、実は24回目の結婚記念日なのです(忘れてた!)。

まぁ、24年間にはいろいろあったけど、とにかく、子供が大人になるまでは、前に進むしかないですね(誰にともなく・・・)。

2009-03-09 西八王子の病院へ行きました

今日は、西八王子の病院へママを連れて行きました。


本当は、ママが1人で行く予定でしたが・・・調子が悪いとのことで、私が休暇をとって付き添いました。

まぁ中年の女の人は、更年期とかで、いろいろと大変なわけです。


で、診察とか検査とかで13時過ぎまで掛かり、帰りにちょっと遅い昼食を武蔵境駅前のイトーヨーカドーでとり、家に着いたのが15時ごろになってしまいました。


ちなみに、今日は3月9日で「感謝の日」だそうです(病院の掲示板に書いてあった)。

どうしてかというと、3と9で「さんきゅう」「サンキュー」「Thank you」・・・。


日本語では、「Thank you」を「すみません」と言うことがあるけど、英語での「すみません」は「excuse me」ですね。


つまり、「ありがとう」と「すみません」は、「Thank you」と「excuse me」に各々一対一に対応していないのですね。

って、何を説明しているのか自分・・・ということで、またあした!

2009-03-08 段組みレイアウトのCSS解説

解説第四弾です。

本コンテンツは、以下のページのHTML/CSSソースを解説しています。


今回は、段組みレイアウトのCSS解説です。

段組みレイアウトは、floatプロパティやpositionプロパティを使う方法がありますが、今回はfloatプロパティを使います。

また、本ソースは「Summary layout」と「detail layout」分けてあり、今回は 「Summary layout」の所を解説します。

尚、本コンテンツを読みこなすには、スタイルシートの基本的な知識が必要です。

また、スタイルシートのリファレンスで調べないとならないかもしれません。

以下は、そんな人のための『スタイルシート概説リファレンス』です。


今回解説のソース引用
<style type="text/css">
/*--- Summary layout ---*/
* {
    margin:0;
    padding:0;
    border-width:0;
}
body {
    text-align:center;
}
#main_container {
    width:96%;
    margin-left:auto;
    margin-right:auto;
    margin-top:1em;
    text-align:left;
}
#header_container {
    background-color:#ffffcc;
}
#menubar_container {
    background-color:#eeffff;
}
#contents_container {
    background-color:#ccccff;
    width:100%;
    clear:left;

    margin-right:-200px;
/*    margin-left:-200px; */
    float:left;
/*    float:right; */

}
#for_ie_wrapper {
    margin-right:200px;
/*    margin-left:200px;  */
}

#sidebar_container {
    background-color:#ffcccc;
    width:200px;
    float:left;
}
#footer_container {
    background-color:#ccffcc;
    width:100%;
    clear:both;
}
http://d.hatena.ne.jp/chaichanPaPa/20090214/1234611010

まず、はじめにすべての要素のマージンとパディングとボーダー(margin:0; padding:0; border-width:0;)をなし(ゼロ)にします。

これは、スタンダードモードとクワークスモードで同じように表示(レイアウト)させるためのもので、クワークスモードでは、本来のwidthとheightの長さに対して、パディングとボーダーの長さが余分に加算されるので、値をゼロにするわけです。

あと、マージンまでゼロにするのは、マージンがあるとレイアウトの計算に誤差が発生し、予想不可能な事態になったり、まぁ、ゼロにしとくとなにかとレイアウトがし易いのです。

 * {
    margin:0;
    padding:0;
    border-width:0;
}

つぎに、body要素に対して「text-align:center;」をします。

これは、IE対策で、これをしないとIEでは、子要素のブロックレベル要素をセンタリングしません・・・。

body {
    text-align:center;
}

「#main_container」では、横幅(width)を96%にして、左右マージンを自動(auto)にし、本要素をセンタリングします。

「text-align:left;」をしているのは、IE対策で、body要素に対して「text-align:center;」をしているのを元にもどしています。

#main_container {
    width:96%;
    margin-left:auto;
    margin-right:auto;
    margin-top:1em;
    text-align:left;
}

これは、body要素に対して「text-align:center;」をしたことにより、ブロックレベル要素はセンタリングが必要ですが、インライン要素(テキスト等)はセンタリングが不要なためです。


「#header_container」と「#menubar_container」は、レイアウトを見やすくするために、とりあえず要素に色をつけています。

#header_container {
    background-color:#ffffcc;
}
#menubar_container {
    background-color:#eeffff;
}

「#contents_container」は、自身を左側にフロートさせ、サイドバーを表示するためのスペースを確保するために、右ネガティブマージン(マイナスマージン -200px)しています。

普通、マージンは内容領域の外側にとるものですが、ネガティブマージンは内容領域の内側にとり、ある意味、内容領域を少なくすることなのです。

尚、「clear:left」しているのは、メニューバーコンテナーのli要素で「float:left;」しているのを解除しています。

#contents_container {
    background-color:#ccccff;
    width:100%;
    clear:left;

    margin-right:-200px;
/*    margin-left:-200px; */
    float:left;
/*    float:right; */

}

「#for_ie_wrapper」は、親要素のcontents_containerで右ネガティブマージンした分、右マージンして相殺しています。

本当は子要素セレクタ「#contents_container>*」をしたいのですが、IEでは無視されます(Firefoxは大丈夫)。ですので、しかたがなく、こうしています。

#for_ie_wrapper {
    margin-right:200px;
/*    margin-left:200px;  */
}

「#sidebar_container」は、自身を左側にフロートさせ、横幅を固定の200pxにしています。

しかし、前の要素も左側フロートなので、結果的に右側に回りこみ、段組レイアウトになるわけです。

#sidebar_container {
    background-color:#ffcccc;
    width:200px;
    float:left;
}

なぜ、左側フロートさせているのに右側にレイアウトするかというと・・・。

「float:left」は、ブロックレベル要素を左側に寄せ、後に続く要素を右側に回り込ませるもなのです。


「#footer_container」は、フロートを解除させています。

本当は、今回は「clear:left」なのですが、rightの時を考慮してbothとしときます。

#footer_container {
    background-color:#ccffcc;
    width:100%;
    clear:both;
}

尚、float指定した要素には、仕様的に必ずwidthを指定します。


関連ページ:

2009-03-08 次男の卒業式

昨日は、次男の高校卒業式でした。

ママと一緒に大成高校の体育館(式場)へはじめて行きました。


3年前の入学式の時は、まだ建設中で、今回、はじめてなのです。

って、大成高校の体育館は、知る人は知る凄い体育館なのです・・・。


卒業式は、厳粛な雰囲気の中、終始行われました。

校長先生が言っていましたが、こんな厳粛な卒業式は、ここ数年なかったということでした。

それだけに、当たり前のことを当たり前に行うことが、実は凄く大変なことだと実感をされていました。


校長先生の挨拶で心に残ったことは、2つありました。

あと担任の先生は、「1人では何も出来ない、仲間の助けがあって初めて出来る」、とにかく仲間が大切だと説いていました。


学校の雰囲気、卒業式の雰囲気、クラスの雰囲気、すべてがいい感じで次男は良い3年間を送れたみたいです。

校長先生、担任先生、ありがとうございました。


卒業式のあと謝恩会で美味しいもの食べて、帰って来ました。


しかし、関係ないけど、花粉が沢山来てますね。

昨日は、某教会の宿直だったのですが、鼻つまりで眠れなかったです・・・。

2009-03-06 HTMLマーキングで文章構造化

解説第三弾です。

本コンテンツは、以下のページのHTML/CSSソースを解説しています。

今回は、ソースの順番ではスタイルシート(CSS)の所の解説なのですが・・・、先にbody要素の中身を解説します。

body要素中の文章構造が理解出来て、はじめてそれ対して見栄えのCSSを適用することが出来るのです。

<body>
<div id="main_container">

<div id="header_container">
<h1>見出し1</h1>
<p>テキスト</p>
</div>

<div id="menubar_container">
<ul>
  <li><a href="#">リンク</a></li>
  <li><a href="#">リンク</a></li>
  <li><a href="#">リンク</a></li>
  <li><a href="#">リンク</a></li>
  <li><a href="#">リンク</a></li>
</ul>
</div>

<div id="contents_container">
<div id="for_ie_wrapper">
<h2>見出し2</h2>
<p>テキスト</p>
<p><a href="#">リンク</a></p>
<h3>見出し3</h3>
<ul>
<li>aaaaaaaaaaaaa</li>
<li>bbbbbbbbbbbbb</li>
</ul>
<ol>
<li>1111111111111</li>
<li>2222222222222</li>
</ol>
<h2>見出し2</h2>
<p>テキスト</p>
<p>テキスト</p>
<p>テキスト</p>
<p>テキスト</p>
<p>テキスト</p>
</div>
</div>

<div id="sidebar_container">
<p class="sidetitle">サイドタイトル1</p>
<ul class="sidenavi">
  <li><a href="#">リンク</a></li>
  <li><a href="#">リンク</a></li>
  <li><a href="#">リンク</a></li>
  <li><a href="#">リンク</a></li>
  <li><a href="#">リンク</a></li>
</ul>
<p class="sidetitle">サイドタイトル2</p>
<ul class="sidenavi">
  <li><a href="#">リンク</a></li>
  <li><a href="#">リンク</a></li>
  <li><a href="#">リンク</a></li>
  <li><a href="#">リンク</a></li>
  <li><a href="#">リンク</a></li>
</ul>
</div>

<div id="footer_container">
<p>Copyright &copy; 著作権表記. All Rights Reserved.</p>
</div>

</div>
</body>
http://d.hatena.ne.jp/chaichanPaPa/20090214/1234611010

今回のテンプレートの文章構造は、まず、body要素の中身をmain_containerというidのdiv要素でラッピングします。

これは、本来、body要素がコンテナーなのですが、IEではバグがあり、しかたがなくラッピングします。


つぎに、main_containerの中を以下の5つの要素に分割します。

上記5つの要素をコンテナーとして、それ単位に段組レイアウトを行います。


本来、見栄えを意識せず、文章を構造化するためにマーキングします。

そのためにHTMLとCSSの仕様が厳密に決められているのです。

そして、ブラウザが仕様通りに実装されていれば、まさにその通りなのですが・・・。

現実は、仕様通りに実装がされていません。

なので、苦労して複数のブラウザの仕様に合うように、HTMLとCSSのコーディングを工夫する必要があるのです。


次回は、やっとCSS段組みレイアウトの解説になる予定です・・・つづく。


追記 for_ie_wrapperについて

contents_containerの要素をfor_ie_wrapperでラッピングしています。

これは、IEでは子要素セレクタが効かないための処置です(IE7では効くらしい・・・)。


関連ページ:

2009-03-04 SEOとメタ要素とタイトル要素

解説第二弾です。

このカテゴリーは、前回ご紹介した以下のソースをソース単位に解説するシリーズになります。


今回は、CSSレイアウトとは直接関係のない内容になります。

しかし、SEO(サーチ エンジン オプティマイゼーション)と関係がありますので、知っておくとお得かもしれません。


以下の引用で順番に、html要素の開始、head要素の開始、meta要素が5個、title要素が記述されています。

<html lang="ja">
<head>
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta name="Description" content="ページの概要">
<meta name="Keywords" content="キーワード1,キーワード2,キーワードetc">
<title>テスト</title>
http://d.hatena.ne.jp/chaichanPaPa/20090214/1234611010

はじめのhtml要素は、lang属性が指定されています。

これは、当該要素の属性値及び内容テキストの基本言語を指定します。

jp以外には以下のようなものが少なくともあるようです。

head要素は割愛して、次のmeta要素の上3つは順番に以下を指定しています。

尚、文字コードでのShift_JIS以外の指定は、以下を参照のこと。

また、http-equiv属性は、本来、サーバーがHTML文書を出力する時に、このmeta要素の内容を使ってHTTPヘッダを生成するものだったのですが、実際はブラウザがmeta要素を見て文字コードを判断するのに使用されています。


あと、http-equiv属性で、基準スタイルシート言語や基準スクリプト言語を指定するのは、上記の役割を拡張し、「デフォルト情報」として明示します。これは、style要素やscript要素でなく、要素毎のstyle属性やonclick属性などでスタイルやスクリプトを定義する場合に必要なのです。


次のmeta要素のDescriptionは、html文書の概要を指定します。

必ずではないですが、グーグルとヤフーでは、ここに書かれている概要が検索内容で表示されることがあります。


次のmeta要素のKeywordsは、html文書のキーワードを複数指定します。

本html文書に関係のあるキーワードを沢山記述しておきましょう。


最後にhtml文書の最重要要素のtitle要素です。

要素内容がブラウザのタイトルバーに表示されたり、検索内容のタイトルになったりしますので、必ず、意味のあるタイトルを記述しましょう。

最重要キーワードなども括弧して、タイトルの一部に入れたりするとSEO的にはよいかもです。



尚、一言、言っておくと・・・HTML文書は、文書を構造化するものであって、サーチエンジン(グーグルやヤフー)の検索順位を上げるためのものではありません。

しかし、メタ要素とタイトル要素を上手く記述することで、検索順位が上がるのも事実なのです。


ということで、今回はCSSレイアウトとは無関係の内容でした。つづく・・・。


関連ページ:

2009-03-03 ドキュメントタイプと表示モード

お待たせしました。これからは、このカテゴリーを徐々に攻めていきます。

このカテゴリーは、前回ご紹介した以下のソースをソース単位に解説するシリーズになります。

まずは、解説第一弾で、以下のソースの一行目を解説します。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
http://d.hatena.ne.jp/chaichanPaPa/20090214/1234611010

これは、ドキュメントタイプ宣言と言います。

HTML文書の一行目には、必ずこのドキュメントタイプ宣言が必要です。

ドキュメントタイプ宣言には、大きく分けて「Strict」と「Transitional」*1があります。

今回は、「Transitional」としました。

理由は、「Strict」にしてHTMLを間違えるより、「Transitional」にして正しいHTMLを書こうと心がける方が良いと思ったからです。

また、アフィリエイトの関係で「Strict」に書けない場合もありますし・・・。


実は、このドキュメントタイプは、ブラウザの表示モードを決定します。

表示モードには、以下の2つがあります。

大雑把に言うと、「Strict」がスタンダードモード(標準)で、「Transitional」がクワークスモード(互換)になります。

詳しくは以下を参照のこと(引用に問題があればご指摘ください)。

HTML ver DTD IE6 N6.2 IE5(Mac)
なし なし 互換 互換 互換
HTML3.2 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN"> 互換 互換 互換
HTML4.0 Strict <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"> 標準 標準 標準
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html/40/strict.dtd"> 標準 標準 標準
HTML4.0 Transitional <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 互換 互換 互換
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html/40/loose.dtd"> 標準 互換 標準
HTML4.01 Strict <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> 標準 標準 互換
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 標準 標準 標準
HTML4.01 Transitional <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 互換 互換 互換
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 標準 標準 標準
XHTML1.0 Strict <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 標準 標準 標準
<?xml version="1.0" encoding="Shift_JIS"?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

互換 標準 標準
XHTML1.0 Transitional <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 標準 標準 標準
<?xml version="1.0" encoding="Shift_JIS"?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

互換 標準 標準
XHTML1.1 Strict <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> 標準 標準 標準
<?xml version="1.0" encoding="Shift_JIS"?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

互換 標準 標準

http://www.redout.net/data/dtdmode.html

同じCSS(スタイルシート)を指定していても、表示モードにより見た目が異なって表示されるのです。

一番の違いは、ブロックレベル要素のwidthとheightの解釈の違いです。

詳しくは以下のリンクの「ボックスモデル」を参照してください(引用に問題があればご指摘ください)。

  • 内容領域(content):テキストや画像などが表示される領域
  • パディング(padding):内容とボーダーの間の余白
  • ボーダー(border):パディングの外側にある枠線
  • マージン(margin):ボックスの最も外側にある、他の要素との余白
http://codezine.jp/article/detail/2479?p=2

要は、クワークスモードでは、本来の長さ(スタンダードモード)にpaddingとborderの長さが加算されてしまうのです。


また、「ユーザのブラウザ」と「HTML文書のドキュメントタイプ」との組み合わせにより、表示モードがスタンダードになったり、クワークスになったり不定なのです。


したがって、段組みレイアウトをするにあたり、スタンダードモードとクワークスモードで同じように表示させるには、paddingとborderをゼロにすればよいわけです。


と言うわけで、段組みレイアウトは、ブラウザとドキュメントタイプに影響されないようにCSSを組んでいきます。


ちなみに、ドキュメントタイプ宣言の記述フォーマットの説明は以下にあります。


関連ページ:

*1:他にFramesetもある

2009-03-02 ExcelVBAでシート名を求める

シート数は「Worksheets.Count」で、シート名は「Worksheets(インデクス番号).Name」です。

これを元にシート名を求める関数を組んでみました。

ちなみに、インデクス番号は1オリジン(1から始まる)です。

また、シートを削除してもインデクス番号が歯抜けになることはありません(必ず1から始まる連番)。


シート名取得関数
Function getSheetNames() As Variant
Dim vntSheetNames() As Variant
Dim int_i As Integer

    ReDim vntSheetNames(Worksheets.Count - 1)
    For int_i = 0 To Worksheets.Count - 1 Step 1
        vntSheetNames(int_i) = Worksheets(int_i + 1).Name
    Next
    getSheetNames = vntSheetNames
End Function

テストサブルーチン
Sub test()
Dim vntSheetNames As Variant
Dim vntSheetName As Variant
    
    vntSheetNames = getSheetNames()

    For Each vntSheetName In vntSheetNames
        MsgBox vntSheetName
    Next
End Sub

2009-03-01 3月になりましたね・・・

なんか、技術ネタの方はスランプで、ネタを練る気になれません。

とりあえず、今日はもう3月なので、燈明日記2月分をウェブページに変換しました。

3月は、桜の咲き始める季節です。

また、例の日がやってきます。早いものでもう9年が経とうとしています。


桜咲く季節に/小池啓仁