Web標準にアプローチ　〔まいまいのお宿。〕

全912件 (912件中 101-150件目)

< 1 2 3 4 5 6 7 8 ... 19 >

• 

  フォームコントロールにdisabled属性を指定すると･･･

  Web標準の教科書HTMLタグ＋スタイルシート辞典ちび詳解HTML ＆ CSS ＆ JavaScript辞典改訂版HTML ＆ XHTML（第5版）例題50＋演習問題50でしっかり学ぶHTML標準テキスト 先日の不具合の原因が分かりました。 $ENV{'CONTENT_LENGTH'}が取得できないやら、ゼロになるやらの件ね。　⇒IEとFirefoxのHTTPヘッダーの違いにやられる･･･まぁ、なんて言うか、してやられました！私、フォームコントロールに、disabled属性を指定したことがなくてその意味をちゃんと理解していなかったの。disabled属性は、フォームコントロールを不可にしてさらに、フォームデータを送信しないのが、本来の仕様なんですね。しかしながら、WinIE6などは、そのまま送信･･･　え！？仕様と違う動きをしていたの。Firefoxは仕様どおりの動きをするわけで･･･原因としてはそこにありました。やっていたことは送信ボタンを押したら下記のスクリプトのような状態になるようにしていたんです。（実際は、Javascriptでしています。参照アドレス*1に記載）<form name="form1" id="form1" method="post" action=""><input type="text" name="textfield" disabled="disabled" /><input type="text" name="textfield2" disabled="disabled" /><input type="text" name="textfield3" disabled="disabled" /><input type="submit" name="Submit" value="送信" disabled="disabled" /></form>あー！こんな状態じゃ、 $ENV{'CONTENT_LENGTH'}が取得できないわけですよ。ああ、解決してよかった♪■disabled属性の説明INPUT要素が選択不能とされている。従って、ユーザの入力を受け付けることもなく、またこの値がフォームデータと共に提出されることもない。⇒[参照] http://www.asahi-net.or.jp/~SD5A-UCD/rec-html401j/interact/forms.html#adef-disabled*1 参照アドレス [二重送信防止]http://www.futomi.com/lecture/javacss/double_block.html ･････つづくWeb標準にアプローチ（サイト版） || 東京２３区中心・駅近ホテルズ

  2006/10/10

  コメント(0)

• 

  IEとFirefoxのHTTPヘッダーの違いにやられる･･･

  CGI＆PerlポケットリファレンスPHP（ピーエッチピー）ポケットリファレンス改訂版最速攻略CGI／Perl作り方入門まるごとPerl！（vol．1）はじめてのPerl／CGIプログラミング増補改訂版結城浩のPerlクイズ 久しぶりに Perl と格闘中です。Perl5になるまでは、よく使われていたと思われるフォーム値の受け取り方。　read(STDIN, $query, $ENV{'CONTENT_LENGTH'})こうやってから、キーと値に振り分けて、あれこれするって手法ね。私は、初期の頃から CGIpmを使って取得していたのでこの辺りの取得方法は、見たことあっても、ちょこまかと改変することしかなくて詳しく見つめたこともなかったのね。$ENV{'CONTENT_LENGTH'} も、超久しぶりに見たわ（笑）環境変数に頼るとろくなことがない！と思って、あんまり使ってこなかったんだけどちょーっと今回、ここにやられたわ～$ENV{'HTTP_REFERER'} なんてInternet Security とかの設定で送られてこなくて、ブーブー言ったもんだ！で、今回の CONTENT_LENGTH 。知らなかったんだよね。ブラウザによって、HTTPレスポンスヘッダが違うなんて。IEで実行テストをしているプログラムのデバッグもどきをしているんだけどFirefoxで実行したら、フォーム値取得しないんですよ～「え！マジかよ！」えぇ、マジです。この原因がHTTPレスポンスヘッダだったのです。Firefoxは CONTENT_LENGTH を送信しないのが標準設定。プログラムで、ごにょごにょしたら、できるのかもしれないけど、どーすんだよ？そんなことで悩むよりも、CGIpmで取得しちゃったほうが楽なんだよね。環境変数いらないモンねぇ。上の方法だと、どうしても、環境変数に頼っちゃう。・・・ということで、全体を見渡してからCGIpmへ移行する案を提示してみようと思っているところ。ただ、考慮しなくちゃいけないのは、POSTとGETの場合分けだね。if($ENV{'REQUEST_METHOD'} eq 'POST'){    read(STDIN, $query, $ENV{'CONTENT_LENGTH'});}こんな風にして、GETをはじいているとなると送信されてきたリクエストがPOSTかGETかを判別しなくてはならない。環境変数に頼るしかないかな～ここんところは。自分じゃない人のプログラムをデバッグしていると違う視点から見られて、お勉強になります。こんな考え方が！とかね＾＾CGIpmの使用方法は、こちらのページがとっても参考になりますよ。HTTPヘッダに関しても、色々書かれています。http://www.futomi.com/lecture/form/cgi-pm.htmlレスポンスヘッダを調べるために、以下のツールを使いました。Firefox用http://chrispederick.com/work/webdeveloper/IE用http://www.blunck.info/iehttpheaders.htmlこれで、半日が過ぎました･･･-- 追記 --原因が分かりました⇒10/10の日記に記載 ･････つづくWeb標準にアプローチ（サイト版） || 東京２３区中心・駅近ホテルズ

  2006/10/08

  コメント(5)

• 

  続・ フォームの入力欄に気を遣うためのJavascript

  Web標準の教科書CSS Zen Garden bookスタイルシートスキルアップ・デザインブック（1）スタイルシートスキルアップ・デザインブック（2）Dreamweaver 8 Web標準デザイン詳解ガイド 以前に「フォームの入力欄に気を遣うためのJavascript」って記事をエントリーしました。あの例は、ちょっとお粗末的な部分があるので、少し付け加えたいと思います。入力欄に初期値として、「入力してください」などのメッセージがいれてあるのを、クリックすると消し去るという機能を追加したね。で、お粗末な部分というのは、入力して、途中でやめてもう一回入力しにかかったときに、途中まで入力した内容が消えちゃうってなモンだ！あれれ・・・＾＾；そこのところをもうちょっと配慮してあげよう！ということでさらにブラッシュアップしたものを追記したいと思います。■フォームの入力欄に気を遣うためのJavascriptシングルラインの場合の例<input name="comment" type="text" value="入力してください" onfocus="change(this.form)" onclick="change(this.form)">マルチラインの場合の例<textarea name="comment" cols="25" rows="5" onfocus="change(this.form)" onclick="change(this.form)">入力してください</textarea>Javascriptに記述すること（シングルもマルチも同じ）function change(form) {　if(form.comment.value == '入力してください') {　　　　　form.comment.value = '';　}}※Javascriptの緑の文字とマルチライン、シングルラインの緑の文字は対応させてご参照ください。onFocusに加えて、onClickも入れてあげようね。んで、最初から入力欄に入っているメッセージを「入力してください」にしてあってフォーカスがあたったときや、クリックしたときに、メッセージが最初の状態のままだったらメッセージを消して、それ以外のときは、何もしないってのがJavascriptで書いてあります。input要素やtextarea要素に「this.form」って書いてあるのは英語を和訳したそのままの意味なので、そのまま変更なく、書いておいてくださいね。こんな感じで、ちょっぴりユーザビリティをアップさせてみました＾＾サイト版Web標準にアプローチの足跡帳もこれと同じように更新してみたよ。動きを確認してみたい方は、どうぞ、足を運んでみてください。最近、ちょろっと書き込みがあって、嬉しかったりします♪ページランクもいただいちゃって、小躍りしています。次、ランク更新されるときには、せめて３になるように、記事の追加などなど、頑張らなくちゃ！ここのブログもね、なんだか、googlebotさんが、よくおいでになるの。連続アクセスだよ～どこぞのスパムさんかと思っちゃった＾＾；調査されちゃったのかしら～ ･････つづくWeb標準にアプローチ（サイト版） || 東京２３区中心・駅近ホテルズ

  2006/10/08

  コメント(0)

• 

  色指定について思うこと

  Web標準の教科書WEBレイアウト・セオリー・ブックスタイルシートスキルアップ・デザインブック（1）スタイルシートスキルアップ・デザインブック（2） スタイルシートスキルアップ・デザインブック（2）をしていて思ったことを少し。CSSで色指定をするときの表記方法って、いくつか種類があるよね。「#888888」「#888」「rgb(50%,50%,50%)」「rgb(128,128,128)」「gray」。こんな感じで、沢山あります。私は、最初と最後のタイプを良く使うんだけど、一般的にもそうかなって思うの。で、スタイルシートスキルアップ・デザインブック（2）では「rgb(50%,50%,50%)」のタイプの指定も良く出てきて、「もしかして、よく使うの？」って思ったりしたワケ。この書籍は、海外の翻訳版なので、外国ではrgbでの指定も多いのかな？そんな風にも考えられるんだけど。でも、疑問なんだ！Dreamweaver も Fireworks もスポイトを使って吸い取った色とかパーセントで取得できないしPhotoshopのカラーパレットでは、パーセント指定は出来ないでしょう。２５６色指定だもんね～カラーピッカーでは、色んなタイプに変換されて表示されているし、子弟も出来るけど。（描画色をHTMLコードとしてコピーってヤツは、ちょっと便利だね）Illustrator もカラーパレットでは、２５６色指定。カラーピッカーでは、RGBのところは、同じく２５６色指定だもんね～一体、どうやって容易に、パーセントで色を吸い取ったり作ったりするんだろう？？？そういうツールがあるんかな？こんな疑問が、沸々と沸いてきたのですよ。余談ですが、インフォアクシアの「カラー・コントラスト・アナライザー」は、なかなか良い。動きが軽いのが、何より嬉しいところですね～色合わせをしたりするときに、とってもいいですよ。拡大されんの！言葉で説明するのは難しいね～＾＾；色を吸い取るツールは、数あれど、これはなかなか画期的でないかい？■色指定について⇒色指定は正しく指定しましょう - Web標準普及プロジェクト⇒スタイルシート［CSS］/スタイルシートの基本/色の指定 - TAG indexなんとなく、雑学本を読みたくて、漁り読みをしています。飲みに行ったりして、「ワリカン」で支払ったりしますよね。あの「ワリカン」って略語だった！とか･･･面白いです♪ ･････つづくWeb標準にアプローチ（サイト版） || 東京２３区中心・駅近ホテルズ

  2006/10/06

  コメント(2)

• 

  CSS：プロパティの一括指定を覚えてファイルサイズを節約

  Web標準の教科書WEBレイアウト・セオリー・ブックスタイルシートスキルアップ・デザインブック（1）スタイルシートスキルアップ・デザインブック（2） スタイルシートで、ファイルサイズを節約しましょう。CSSに少し慣れてきたら、プロパティの一括指定を覚えるといいですね。記述するのも速くなるし、ファイルサイズも抑えられるし。ただ、一括指定の順番に気をつけたり、省略できないプロパティがあったりするのでその辺は、徐々に覚えていって使えるようになったらと思います。私が最近覚えて使えるようになったのは、背景関連のプロパティ一括指定。paddin や margin、border 関連は、もっと最初の頃に覚えちゃいましたよ♪随分、楽ちんになったものです。今は、font 関連のプロパティの順番と必須のプロパティを覚えています。使っていると、覚えていくものですよ！他にもあるけど、とりあえず、この辺りからスタートですね。近頃の重宝物は、border-widthです♪■プロパティの一括指定backgroundborderborder-widthfontmarginpaddingちらりちらりと、お仕事案件が入ってきております。ビビリながら、FLASHとか勉強しています。膨大なファイル数のCGIを解読しなくてはならない可能性も大です（笑）でも、ちょっとワクワク＆ドキドキしてます。私、プログラミングは嫌いなはずだよ。けど、なんとなくやってしまう、変な性分なんですね～出来たときが嬉しいからかな＾＾あ！今日のランチは、うどんすきにしました。昨晩の残り物にお出汁とつゆをプラスして、卵も落としました。濃いめにして、ぐつりぐつり。･･･んまいっ ･････つづくWeb標準にアプローチ（サイト版） || 東京２３区中心・駅近ホテルズ京風うどんすき　権太呂鍋【722】

  2006/10/04

  コメント(2)

• 

  Flash：Action Scriptを使うときに相対指定と絶対指定で躓いたら

  おしえて！！ Flash 8 ActionScriptActionScriptポケットリファレンスFlash MX ActionScriptほぼ10行道場 超久々にFlashを触っています。というより、久しぶりすぎて、基礎から叩き上げているところです。無料でこんなにも親切なサイトがあるのか！？ってくらい分かりやすいサイトがありますね。その辺は、また、後日、改めてまとめたいと思います。今日は、そのうちで、へぇ～と思った１ページをピックアップ！HTMLでもCSSでも、コードを書くものならなんでも付きまとってくる絶対指定 と 相対指定 ってあるでしょ。あれね、やっぱFlashでも付きまとってくるわけですよ。イマイチ分からん！という方は、ここで学んでみるといいと思います。今までで、一番親切で分かりやすいと思いました。http://1art.jp/flash/le/lesson15/lesson15.htmこのページは、Action Script の解説ページなのでHTMLでもCSSに記述するときとは、様子が違うけれど、概念を理解するのにはとってもわかりやすい。この手のことをするのがFlashがはじめてだったら、尚のことだね。記憶は、相当にボロボロと抜け落ちています（笑）お仕事きそうなサインがあったので、再勉強中なんだけどまともに使えるだろうか。心配ですね～そうそう、余談だけどWeb標準にアプローチ（サイト版） ねGoogleさんでもちょいと順位が上がってきてるの。「Web標準」で検索して２番目だった。MSN Live Search は上位のままキープ。Yahooはね～、どこにいるんでしょう？（笑）（↑）この子でも、ここのブログが少し順位を上げています。ポチッとしてくれると嬉しいな♪ ･････つづくWeb標準にアプローチ（サイト版） || 東京２３区中心・駅近ホテルズ

  2006/10/01

  コメント(0)

• 

  ページ背景の指定はきちんとする！

  本日夕刻、スタイルシートスキルアップ・デザインブック（２）を実践中！Project3まで進んでいます。ここで、印刷プレビューをしてみて気づいたことがあります。それは、ページの背景。応用問題に入る前に、解説を参考に、あれこれ自分で試してみました。h2要素に背景色を設定してみたりね。ここのProjectでは、ページの背景色を指定していません。これをしていないと、Firefoxで印刷プレビューをしたときに、ヘンテコになるんです。<body><h2>あああ</h2><table>　　 ：　　略</table></body>こんなソースコードに対して、設定したCSSはh2 { background: gray; }簡略化してこんな感じ。このまま、Firefoxで印刷プレビューをするとあたかもページ背景にgrayを指定したように全面灰色になっちゃうの。で、ページ背景を設定したら、直っちゃうということなんですよ。body { background: white; }h2 { background: gray; }簡単に書くとこんな感じ。HTMLだけでページを作るときもそうなんだけど、ページ背景ってちゃんと指定してあげないと時々悪さをする。悪さって言うか、あれれ？って思うだけなんだけどね。昔、body要素にbgcolor属性を指定していなくて、ネットスケープでヘンテコになったことがあります。原因は似たようなモンでしょう。そうそう、Project2のレビューは書いていないんだけどfloatに関して、非常にお勉強になりました。Project3では、ボーダーの設定について、新たな発見がありましたよ。次は応用問題だぁ～頑張らなくちゃ！そーいや、Flashもスキルアップしないといけない（汗）スタイルシートスキルアップ・デザインブック（2）著者：エリック・A．メイヤ ／吉川典秀出版社：毎日コミュニケーションズサイズ：単行本／279p発行年月：2006年01月本体価格3,000円(税込 3,150 円)送料別【コメント】初級レベルを脱出した人向けの書籍です。説明書きの調子が、面白いんですよ！「ちょん切られる」とか、その他ちょぼちょぼ（笑）親しみやすさも売りのひとつのようです。私は、このシリーズの(1)を購入していませんが、十分に楽しめます♪ちなみに、CSSを触り始めたのは今年の5月中旬頃だったと思います。少しできるようになったけど、実践的なことを学びたいなという方には良書となることでしょう☆お天気の良い日が続きますね。でも、月曜日から、崩れる模様･･･週末に思いっきり羽を伸ばしてくださいね！ ･････つづくWeb標準にアプローチ（サイト版） || 東京２３区中心・駅近ホテルズ

  2006/09/30

  コメント(0)

• 

  ウェブページをきちんとした構造でマークアップするメリット

  Web標準の教科書WEBレイアウト・セオリー・ブックスタイルシートスキルアップ・デザインブック（1）スタイルシートスキルアップ・デザインブック（2） 今更ながらに実感したことなんです。テーブル（表）をCSSでデザインしていたときのことなんだけどね。テーブルって<table><tr><td></td></tr></table>で構成できるでしょ。最小構成ってこんな感じだよね。他にも、<th><thead><tbody><tfoot>があるんだけどこれらを適切に使ってあげると、CSSを指定する上でとってもメリットがある。もちろん、class属性なんかを使って指定してあげることも出来るけどそれを使うよりは、タイプセレクタを使ってあげるほうがスマートだよね。あ！タイプセレクタってのは、要素名のみをセレクタにすること。tableとかtheadとかね。class属性を使いまくると、管理が複雑になるしできるだけソースコードをクリーンにしたいってこともある。例えば、テーブルの一行目、見出し部分だけにCSSを適用したいとする。背景色を付けたり、見出しを太く大きくしたいときがあると思うの。theadやthを使わずに構成したとしようね。このとき、どうしても、class属性を指定してあげないと見出し部分だけにCSSを適用できないよね？（他にスマートな方法があるのかな～）<table><tr class="midashi"><td>・・・略・・・</td></tr><tr><td>・・・略・・・</td></tr><tr><td>・・・略・・・</td></tr></table>こんな感じね。けど、theadを使って、マークアップしてあったら、class属性なんてイラナイ。<table><thead><tr><td>・・・略・・・</td></tr></thead><tr><td>・・・略・・・</td></tr> <tr><td>・・・略・・・</td></tr> </table>直接、theadに対してCSSを適用してあげればいいから。「thは使うけど、theadやtbodyやtfootなんて使わないよ。」「めんどっちーなー・・・」なんて思っていたけど、ちゃんと書いておくとメリットがある。テーブルのヘッダーやフッタを使わない（装飾しない）ってのならなんら問題ないかもしれないけど最初からそうしておくことで、あとから装飾したいときとか、他の人がするときとかメリットが沢山あるんだなって実感したのでした。 ･････つづくWeb標準にアプローチ（サイト版） || 東京２３区中心・駅近ホテルズ

  2006/09/29

  コメント(0)

• 

  フォームの入力欄に気を遣うためのJavascript

  JavaScriptポケットリファレンス改訂第3版Web標準の教科書 時々見かける、気の利いた機能を追加してみましょう。お仕事のついでに見つけたものなんですけどね。時々見かけるでしょう？こういうの。▲入力欄をクリックすると下の図のように消える。　▼それぞれの入力欄をクリックすると、表示されていたテキストが消える。　▲（左）検索フォームなどで見かけるタイプ／（右）コメント入力欄などで見かけるタイプクリックしたら、valueに「空」を入れているのは、なんとなく想像のつくところ。でも、どーやってすんだろう？なんて思っていたんですね。まさか、ここまで短いスクリプトを仕込んでやるだけでよいとは思ってもいなくて。■フォームの入力欄に気を遣うためのJavascriptシングルラインの場合の例<input name="name" type="text" value="入力してください"  onFocus="javascript:this.value=''">マルチラインの場合の例<textarea name="comment" cols="25" rows="5"  onFocus="javascript:this.value=''">メッセージをお願いします</textarea>消えて欲しいなら、もともと、入れておかなければいい！って思うかもしれませんね。でも、Web標準の視点からすると、マルチラインのテキストエリアには、入れておくことが推奨されています。こんなちょっとのコードを書くだけで改善できるのなら、してみてもいいなって思いませんか？私は、早速しちゃいました♪ ･････つづくWeb標準にアプローチ（サイト版） || 東京２３区中心・駅近ホテルズ

  2006/09/28

  コメント(8)

• 

  Firefoxを使おう！

  私、愛好家です♪　フォクすけ可愛い～♪

  2006/09/27

  コメント(4)

• 

  もしかして、カード決済が出来なくなったショップ増えた？

  ようやく貯まった、５桁ポイントを使って久しぶりのオンラインショッピング。本当は、３倍くらい貯めて、土屋鞄製造所でバッグを買いたかったのだけどその前に欲しいものが出来ちゃって。えへ。そっちへ進行方向を変えちゃいました。また、貯めなくては！お買い物をしていて気づいたんだけどカード決済が出来なくなったショップさんが増えてませんか？私が行くトコ、行くトコ･･･とまでは言いませんが良く行くトコがちらほらとカード決済が選択肢になくなっていて、えー！って思っちゃってね。全額、楽天スーパーポイントで買うから、私自身は何の問題もないんだけど気になっちゃって、気になっちゃって。あ！しまった！金曜日に買えばよかった！･･･２倍･･･＾＾； ･････つづくWeb標準にアプローチ（サイト版） || 東京２３区中心・駅近ホテルズ

  2006/09/26

  コメント(6)

• 

  CSS Nite in Nagoya 長谷川さんのネタを少し咀嚼してみました

  スタイルシートスタイルブックWeb designer 2．0進歩し続けるWebデザイナーの考え方Web標準の教科書WEBレイアウト・セオリー・ブックスタイルシートスキルアップ・デザインブック（1）スタイルシートスキルアップ・デザインブック（2） ちょっとしたことですが、色々いじってみたコトをメモします。よかったら、試してみてくださいね。イベントに参加していなくても、ヒントは見つかるんじゃないでしょうか？※核になる部分だけのソースコードです。※赤字部分が追加 or 変更した部分です。※もとのレポート（CSS Nite in Nagoya の私のレポ）は、こちらをご参照ください。１．テーブルで行の交互に背景色を付ける偶数行目だけに背景色を付ける⇒奇数行目も背景色に色をつける※(X)HTMLのソースコードは、適当に簡略化して、適当なテキストを入れてあります。------------ CSS------------.evenrow{    background: #efefef;}.oddrow{    background: #ddefef;}------------ Javascript------------function rowcolor(){    var rows = document.getElementsByTagName("tr");    for(var i=0; i<rows.length; i++){                if (i%2==1){            rows[i].className = "evenrow";        }else {            rows[i].className = "oddrow";        }    }}------------ (X)HTML------------<table><tr><th>No.</th><th>Name</th></tr><tr><td>001</td><td>Akio.Suzuki</td></tr><tr><td>002</td><td>Taro.Kimura</td></tr><tr><td>003</td><td>Maki.Sakura</td></tr><tr><td>004</td><td>Aiko.Murata</td></tr><tr><td>005</td><td>Jiro.Tanaka</td></tr></table>２．四方角丸を表現する（↑）こんな感じにしたいと思います。参加者さんへのメッセージ^^firstChild、lastChildのところです。※かなり簡略化しています。やってることはほとんど同じ。ちょっとだけ咀嚼。------------ CSS------------※画像は適当に作りました。（top.gif：上の角丸／btm.gif：下の角丸）body {    background: #cccccc;}#content {    width: 400px;    background: white;}#content .intro {    background: url("./img/top.gif") no-repeat top center;}#content .more {    background: url("./img/btm.gif") no-repeat bottom center;}p {    padding: 5px 10px;}------------ Javascript------------function findchild3(){    var content = document.getElementById("content");    var p = content.getElementsByTagName("p");    p[0].className = "intro";    p[p.length-1].className = "more";}------------ (X)HTML------------「id="content">」で改行すると一つ目の<p>のCSSが有効にならないので何とか解決したくてトライしたのが上のJavascript。<div id="content"><!--もとはここで改行していません--><p>段落１</p><p>段落２</p><p>段落３</p><p>⇒つづきはこちら</p></div>３．リンク先のドキュメントに応じてアイコンを表示するスクリプト的な咀嚼はなしです。アイコンに注目してみました。これに使われていたアイコンたちは、SILK ICONSですね。どっかで見た～と思っていたら。結構、緩いライセンスで自由に使える1000種類のアイコンたちです。Creative Commons license（http://www.creativecommons.jp/）の2.5に帰属しています。バックリンクとメールをすればOKかな。詳しくは調べてみてください。⇒famfamfam.com: Silk Iconshttp://www.famfamfam.com/lab/icons/silk/----------------------------長谷川恭久さんの著書　●スタイルシートスタイルブック　●Web designer 2．0進歩し続けるWebデザイナーの考え方 ･････つづくWeb標準にアプローチ（サイト版） || 東京２３区中心・駅近ホテルズ

  2006/09/25

  コメント(0)

• 

  CSS Nite in Nagoya より帰還　（レポートアップ）

  2006年9月23日。待ちに待った CSS Nite in Nagoya に参加してきました。台風14号は日本からそれて行ってくれたおかげで名古屋の空は快晴！お昼ご飯を食べすぎて苦しい思いをしながら、会場へ向かいました（笑）午後３時～７時半くらいまでという、なかなかなの長時間。信じられないくらい肩が凝りました（汗）もうちょっとゆったり座りたいな～というのが会場コンディション？の感想。室内は綺麗で、スクリーンもくっきり見えて、そのあたりは満足でした。帰宅後は、疲れて果ててバタンキュ～。10時間以上爆睡！充実感も疲労度もマックスだったようですよ。今も、頭がギュ～って感じで、まだ眠れますね（笑）いくらでも眠れそうだけど、忘れないうちに色々とレポに残します。プレゼンターは、以下のお三方。益子貴寛さん（著書「Web標準の教科書」は私の愛読書です）http://www.cybergarden.net/長谷川恭久さん（テンポ抜群のプレゼン進行）http://www.yasuhisa.com/could/鷹野雅弘さん（会場のウケが活動力？･･･笑）※まぐまぐから発行されている　 「DreamweaverでWeb標準(XHTMLとCSSでサイト構築)」を読んでいると　 より理解が深まります【益子さんのプレゼン　～サイバーガーデンが考える次世代のWebライティング～】事前に配布資料があって、予習ができました☆お三方ともそうですが、プレゼン慣れしているな～というのが正直な感想。楽しいけれど、印象、プレゼン進行ともにクールですね。少しキーワードが難しくて、ハテナをぶっ飛ばしながら聞いてました。この辺りが、ご本人もあげていた「ミドルレンジをどのあたりに想定するか」なのでしょう。表現の仕方について、かなり凝縮されて説明されていたので頭がギュ～！となってしまいました。コンテンツの配置、フォームの設計、表現の仕方。「私、やっちゃってるよ！」と、ココロのなかで呟きながら今後は「*（アスタリスク）をフォームの必須項目のマークにしないぞ！」と決断したのでした。⇒フォローアップ：益子貴寛さんの資料（PDF＆MP3）【長谷川恭久さん　～CSS3をJavaScriptで先取り実装！～】お願いですから、あまりツボにはまらせないでください。クリエイターさんってのは、愉快な方が多いですが、長谷川さんはツボですね。テンポが抜群で、飽きさせない。お三方の中で、一番プレゼン時間が短く感じました。JavaScriptって可能性が広がって楽しいですね～「なんちゃって」でしか使ったことがなかったのでもっと有効的な使い方ができる！とワクワクして聞いていました。10行以下のコードで表現の可能性が広がるなら、使ってみたいと思いませんか？ネタとしては、以下の３つ。テーブルで行の交互に背景色を付ける四方角丸を表現するリンク先のドキュメントに応じてアイコンを表示するより、クリーンな（X）HTMLコードに、より役割を分担した構造にするために･･･著書「スタイルシートスタイルブック」もそういった視点から、書かれているのかな～「１」のネタは、鷹野さんのメルマガでも違った切り口？で紹介されていました。長谷川さんのプレゼン中にもあった JavaScript のライブラリ「prototype.js」を使ったものです。http://blog.mag2.com/m/log/0000169311/107712347.html少し長いですね。学んできたことを組み合わせたら、もうちょっと短いコードがかけそうな気がしています。document.getElementsByTagNamedocument.getElementByIda[i].getAttribute("href")これと、JavaScript とか、他のプログラム言語を知ってるだけで随分と表現の可能性が広がりますね！私、学生の頃、プログラミングは大っ嫌いな科目でした。就職してから、まともに覚えたのですが、「やってて良かった～☆」と思うのはこんなとき。短いコードなら、割と楽に追えるし、少々長くてもなんとかね。ちょっと嫌いなくらいがちょうどいいのかも。好奇心が勝てばね。⇒フォローアップ：長谷川恭久さんの資料（PDF&MP3）【鷹野雅弘さん　～Web標準時代のDreamweaverテンプレート活用～】テンプレートを軽んじちゃぁいけないのでしょうね～と思いつつ、どうも億劫になったり（笑）有効的に使うのはアイデア勝負ですね。鷹野さんのパワーブック？の中身を覗き見しつつのプレゼンでした。そこにテンプレートのヒントがあったりして。基本のレイアウト別のテンプレートを登録しておくってはどうよ？色んなマルチカラムのレイアウトパターンがあるよね～いくつか、ソースコードとして保存しているけど、そういうのを登録するのも活用方法だなと。テンプレートを活用して、よりクリーンなソースコードで組み上げていくときのポイントとかコツとか。そいうったものを吸収してきました。プロパティインスペクタは使わない（やや語弊がありますが <(_ _)> ）･･･私はほとんど使わない･･･HTMLエディタを使うことが多いてのもあるけど。DW使うときは隠してしまえ！（笑）とか思ってる私。便利なのは、画像の縦横サイズが自動で入るトコなんだけど。そこをクリアすれば本当にイラナイ。テンプレートでbodyを変更する方法これ、メルマガで読みました＾＾「今、このカテゴリにいますよ」を表現する方法とか。http://blog.mag2.com/m/log/0000169311/106746861.htmlbodyのid属性を変更すると、ページごとのCSS設定が楽になる！「CSSシグネチャ」というそうですよ。⇒bodyのid属性の変更をDreamweaverMXで試してみました♪【下図（A）】テンプレートで属性を編集可能にする方法組み合わせ技の「@@PageTitle@@」は目からウロコですね。参加者には分かるハズ！⇒目からウロコ技をDreamweaverMXで試してみました♪【下図（B）】テンプレートでオプション領域を設定する方法長いページには「トップへ戻る」をつけて短いページには付けないといったタイプのテンプレートの設定方法。これも、メルマガで予習済み♪しかーし！実践してみたのは、イベント後（汗）⇒DreamweaverMXで試してみました♪【下図（C）】テンプレートでリピート領域を設定する方法同じ形（レイアウト）のもの（テーブルとかリストとか）をポンポン追加したり順番を変えたりするのに超重宝！新着情報とか、カタログの一覧ページとかを例に、その重宝振りを伝授してみえました＾＾⇒DreamweaverMXで試してみました♪【下図（D）】（A）bodyのid属性を変更（B）@@PageTitle@@（C）トップへ戻る（D）リピート領域CSS Nite が鷹野さんのメルマガのライブ版的なところがあるのでメルマガ（バックナンバーでも十分☆）を読んでおくと、もっともっと分かりやすいと思います。予習と復習って感じですね。DWって使えるところは、本当に使える。テンプレート用のコメントタグは、ちょっとお邪魔だけど･･･Studio8 欲しい･･･でも、高いので手持ちのバージョン（MX）で実践できるところを使っていこう！と決意して帰宅して今日。全部MXで、できるんですね（汗）バージョンアップする必要なーし！えへ。私が、DWをはじめて触ったのは、就職してからでした。「使って覚えろ！」ってのは、まぁよいのですが便利な使い方とか、ベースになる部分は、教育すべきではないか？と思います。適当に使い始めると、勿体無いところがいっぱいあって・・・これも良し悪しかもしれないけれど知らなくて要領悪くなっちゃうのは企業的にマイナスでしょう？なんにしても、好奇心とモチベーションが問題か（汗）「そんな余裕ない！」ってのが本音っすかね（笑）⇒フォローアップ：鷹野雅弘さんの資料（PDF&MP3）【ためになるCSS Nite in Nagoya スポンサー（など）情報】クリエイティブコモンズhttp://www.creativecommons.jp/こういうライセンスがあるんですね。「All Rights Reserved.」だけじゃない！a-bloghttp://www.a-blog.jp/トライアル版があるそうです。30日間がトライアル期間。・・・ってことは、払わなかったらキャンセルってことかな？人材派遣・転職支援のデジタルスケープhttp://www.dsp.co.jp/Webディレクターさんを渇望してらっしゃいます。名古屋まで行くと、この手の職は困らない？VOXhttp://www.vox.com/新しいSNSのカタチ･･･ですね。withDhttp://wd.dsp.co.jp/WEB・ゲームなど各分野のデザイナー・クリエイター・ITエンジニアの方のための仕事探し応援サイトWCANhttp://www.wcan.jp/ムービーとPDFが載っかっていました。以上で～す！それから･･･鷹野さんをはじめ、プレゼンターの益子さん、長谷川さん、スタッフの皆さんお疲れ様でした。次回があれば、また、参加したいイベントです！CSS Nite 公式ブログhttp://cssnite.jp/レジュメやら資料やら、当日の音声やら、アップしてくれるので有難やぁ～<(_ _)> ･････つづくWeb標準にアプローチ（サイト版） || 東京２３区中心・駅近ホテルズ

  2006/09/24

  コメント(4)

• 

  class属性に複数のクラス名を設定する（区切り文字は空白文字）

  スタイルシートスキルアップ・デザインブック（1）スタイルシートスキルアップ・デザインブック（2）詳細HTML基本活用辞典 学びました。　　class="aaa bbb"なんじゃ～それ！？！？！？クラス属性の値に空白文字が含まれているものに遭遇しました。これは、複数のクラス名を割り当てるときの書き方ということが分かりました。W3C勧告の日本語訳から説明を抜粋します。このことって調べてもあまりヒットしてこないのよね。7.5.2 要素識別子: id属性とclass属性　　　：　　 中略　　　：　　　class = cdata-list [CS] この属性は、ある要素に1つのクラス名を割り当てるか、または複数のクラス名を設定する。幾つの要素に対してでも、同じクラス名あるいはクラス名群が割り当てできる。複数のクラス名については、空白文字によって区切らねばならない。http://www.asahi-net.or.jp/~sd5a-ucd/rec-html401j/struct/global.html週末はお出かけなので、台風の進行方向を気にしていたのだけどどうやらそれていくようです。たぶん。海のほうへぐにっと ･････つづくWeb標準にアプローチ（サイト版） || 東京２３区中心・駅近ホテルズ

  2006/09/21

  コメント(0)

• 

  「スタイルシート・スキルアップ・デザインブック２」レビュー其の壱

  実践中！実践中！「スタイルシートスキルアップ・デザインブック（2）」の実践中！Project1終了です。この書籍はProject10まであるんですよ。まず、難点をあげておきますと･･･サポートサイトからダウンロードしてきたファイルのどのHTMLファイルを見たら書籍の該当箇所のプロセスまで進んでいるのかがわからないところですね。これは、ちょっとわかれば、ブラウザに表示することで判別可能な部分もあるけれど。今ここですよ！って目印を付けてくれるともっと使いやすいと思いました。あと、いきなり文書化宣言が変わっているのにビビリました！最初のファイルは HTML4.0 Transitional。いつの間にやら HTML4.01 Transitional。これが違うだけで、スタイルシートの適用のされ方が違って、どーこー！？って迷子になっちゃいます。（ch0102.htmlとch0103.htmlで変わっています。）良い点は、やっぱり楽しいし、手に取るように（やや戸惑いつつも･･･笑）わかる！レベルアップしているの感覚があるところこの感覚はやってみなくちゃ、わからないものですね。Project1で、私が得たスキルは、絶対配置の有効的な使い方です。うん。これよく分かってなかったのですが、理解が深まった感じですよ。float愛好家とまでは言わないけれどfloatしか使えていなかったので、とっても嬉しい実習でしたProjectの最後についている応用問題も（１）は楽勝にできるようになりました。（２）は梃子摺りました･･･理解できないものがひとつ。むむむ･･･div#infoのmargin-topの値の求め方が分からない･･･もしも、この書籍を実習して見える方がいらっしゃったら教えてくださると嬉しいです♪ま、すんなり分かっちゃうのも面白くないので、後日、振り返ってみることにします。スタイルシートスキルアップ・デザインブック（2）著者：エリック・A．メイヤ ／吉川典秀出版社：毎日コミュニケーションズサイズ：単行本／279p発行年月：2006年01月本体価格3,000円(税込 3,150 円)送料別【コメント】初級レベルを脱出した人向けの書籍です。説明書きの調子が、面白いんですよ！「ちょん切られる」とか、その他ちょぼちょぼ（笑）親しみやすさも売りのひとつのようです。私は、このシリーズの(1)を購入していませんが、十分に楽しめます♪ちなみに、CSSを触り始めたのは今年の5月中旬頃だったと思います。少しできるようになったけど、実践的なことを学びたいなという方には良書となることでしょう☆夕日の綺麗な夕方でした。空見てますか？ ･････つづくWeb標準にアプローチ（サイト版） || 東京２３区中心・駅近ホテルズ

  2006/09/21

  コメント(2)

• 

  アイコン表示が正しくない！

  どうにも、こうにも気持ち悪い。アプリケーションの関連付けはOKなのに、アイコンの関連付けが変です。こういうヘンテコさは、初めてですよ。Illustrator10のアイコンが、あっちこっちで暴走しています。フォルダによってアイコンが変化（へんげ）！▼なんで、電源マークやねん！▼なぜに、フォルダになってるのさ！▼新規作成して保存したらOKなのに･･･この手の不具合はどうやって直す？キーワードが思いつかないんだよね。さーて。わかったら、ここに追加します。ご存知の方、教えていただけると嬉しく思いますです ･････つづくWeb標準にアプローチ（サイト版） || 東京２３区中心・駅近ホテルズ

  2006/09/21

  コメント(2)

• 

  スタイルシートでテーブルの折り返し禁止設定ができる

  Web標準の教科書WEBレイアウト・セオリー・ブックスタイルシートスキルアップ・デザインブック（1）スタイルシートスキルアップ・デザインブック（2） やっぱできるんね。テーブルで折り返し禁止の設定をするのに「<td nowrap>」ってするでしょ。あれ、スタイルシートじゃできないのかな～って疑問だったんだけどちゃんとありました。それ様のプロパティが。ちなみに「border-collapse」は使わないほうがいいのです。MacIEはアウトですし、他でも少々･･･<table cellspacing="0">として回避することをオススメします。⇒http://www.htmq.com/style/border-collapse.shtml■セルの折り返しを禁止する------------ CSS------------th , td { white-space: nowrap; }------------ (XHTML)------------<table cellspacing="0"><tr><th>サイト名</th><td>Web標準にアプローチ</td></tr></table>------------white-space⇒http://www.htmq.com/style/white-space.shtml新総理が誕生しましたね。しかし、小泉さん（前首相）は凄い！ドラマにもなっちゃったし。ウチは、母上様が見ておりました。私は、横目で通り過ぎたくらいで（笑）似てるな～ってね。岩城滉一さんの表情が。物まねみたいに（笑） ･････つづくWeb標準にアプローチ（サイト版） || 東京２３区中心・駅近ホテルズ

  2006/09/20

  コメント(2)

• 

  お気に入りのWeb本

  Web標準の教科書スタイルシートスキルアップ・デザインブック（1）スタイルシートスキルアップ・デザインブック（2） 久しぶりに「Web標準の教科書」を読み返してみました。必要に応じては、読み返す本です。教科書だけあって、リファレンス的にも使えるし記憶を蘇らせてくれる代物です。すっかり忘れるものですね～あっはっは！ウェブページを作っていると「h1」などの見出し要素や段落要素の「p」は頻繁に使います。が！忘れていたよ。「h1」などの見出し要素や段落要素の「p」はブロック要素を含めない！ちなみに、ご存知、スタイルコンテナとして使われるブロック要素の「div」はOKです。で、ついに、「スタイルシートスキルアップ・デザインブック（2）」に手をつけたの中に載っているデザインを見るだけでも楽しそうなんだけどその前に、カバーと本文に描かれているイラストがなんとなく好み♪描いた人のお名前は裏に書いてあるんだけど検索にはヒットしなくて、ちょっぴし、残念。やっぱ、読み物にイラストはいいよ。手書き風のイラストは馴染めるよ。週末は、CSS Nite in Nagoya。台風がやってきそうだけど、大丈夫かしら。台風14号、ヤギの中心気圧は960hpa。名前が笑える。 ･････つづくWeb標準にアプローチ（サイト版） || 東京２３区中心・駅近ホテルズ

  2006/09/19

  コメント(0)

• 

  Web標準時代の角丸ボックス

  Web標準の教科書スタイルシートスキルアップ・デザインブック（2） 鷹野さんのメルマガを引き続き実行中です。とってもよいバックナンバーがあったのでご紹介しますね。鷹野さんとは、「DreamweaverでWeb標準(XHTMLとCSSでサイト構築)」を発行してみえる方で、CSS Nite の主催者株式会社スイッチの代表です。■Web標準時代の角丸ボックスhttp://blog.mag2.com/m/log/0000169311/107100182.htmlこの辺りの日のバックナンバーから遡って読んでみるととてもメリットがあると思います。角丸ボックスやそれを応用した角丸タブの作り方が詳しく解説されています。使ってみたくなっちゃいますね～テーブルを使わないでも、これだけスマートにできちゃいます。嬉しいWeb標準へのアプローチ方法ですね。台風は去りました。次の台風が発生していますね。晴れの間に洗車してきます＾＾ ･････つづくWeb標準にアプローチ（サイト版） || 東京２３区中心・駅近ホテルズ

  2006/09/18

  コメント(0)

• 

  CSSレイアウトヘルプ

  Web標準の教科書速習Webテクニックスタイルシート上級レイアウト IE7beta3 のWeb標準実装具合が気になる中、IE6のバグ回避法についての必見ページをメモ。■CSSレイアウトの定石　WinIE6バグ回避法http://mb.blog7.fc2.com/blog-entry-83.html「フォントサイズとスタイルシートについて思う」で「%」と「ems」は使わないでおこうと思う、と書いたのだけどこのページを読むと、IE7が定着するまでは「%」がベストっぽいと考えるようになった。「%」での指定と「キーワード」での指定をうまく使うか･･･実装差異には泣かされるね～掛け合わせになっちゃうのは、計算上面倒くさいんだけどな（汗）難しい専門用語は多用されてないので、言っていることもわかりやすいと思うよ。margin、paddin、width、border の決まりごともこのあたりから覚えていったらOKじゃないかな？って思います。私、とっても助かりました～♪時々覗くと、バグ関連、いいコト書いてあるかも。な～るほど！ってヤツがね！ ･････つづくWeb標準にアプローチ（サイト版） || 東京２３区中心・駅近ホテルズ

  2006/09/17

  コメント(0)

• 

  スタイルシートによる画像置換について思う

  Web標準の教科書WEBレイアウト・セオリー・ブックスタイルシートスキルアップ・デザインブック（1）スタイルシートスキルアップ・デザインブック（2）　鷹野さんの発行されているメルマガを１号からズンズンやってみています。Dreamweaverの使い方よりも、Web標準に重きを置いて読んでいますよ。使い方でも、ほぉ～！と思うところは、やはり沢山ありますね。CSSとテンプレートの組み合わせのところは参考になりました♪「これは、これは！」と思うバックナンバーはまた、サイト版Web標準にアプローチに掲載したいと思いますテンプレート、活用せにゃ～んで、スタイルシートによる画像置換について、思うところがあります。結局、今のところ、しないほうが良いのではないか、というのが私の心中。本心。スパム扱いになっちゃったり、そうでなくなったりホームページ読み上げソフトで読んでもらえなかったり･･･画像の代替テキストがクローラに読んでもらえないこともあったというけれど今は、どうなんでしょうね～ソースコードを上から順に読んでいくってだけ考えると読んでもらえそうだけど･･･なんか矛盾してるよね！画像にしたいってコトは目立たせたい！目立たせようと思うと、マークアップ的には重要性が低くなる！むぅ～http://blog.mag2.com/m/log/0000169311/106976250.html画像置換に関しては、この号から１１回にわたって、バックナンバーがありますよ。半年くらい前のメルマガなので事情が変わっているかもしれませんがどの手法をとっても、どこかに欠点があったりして、私としてはしっくりきません（汗）良いところがあれば、悪いところもある。これは仕方のないことかもしれないけれど（X）HTML＋CSSの要素にPHPなんてものを加えれば回避できなくもないこともあるしみんな、いいトコ取りをすればいいしね。PC、モバイル、携帯（キャリア別）とかで入り口を変えてあげるのも手ですね＾＾私としてはタイトルロゴや、メニュー画像など、装飾のみの要素でない画像は使う！ってことで。きちんと代替テキスト（alt属性）は記述して作っていくことにします。鷹野さんのメルマガはこちらです（↓）■DreamweaverでWeb標準(XHTMLとCSSでサイト構築)CSS Nite を主催されている株式会社スイッチの鷹野雅弘さんのメルマガ。ムービーつきの解説で、とってもわかりやすいです。⇒メルマガ登録はこちらからいやぁ、はやぁ、台風が近づいているんですよね？東海地方は月曜あたりが一番近づくそうですけど、暑い！西に少し傾いた太陽が暑いっつーの！台風はデッカイ勢力を保ったまま、少し速度を上げて北上中！ ･････つづくWeb標準にアプローチ（サイト版） || 東京２３区中心・駅近ホテルズ

  2006/09/16

  コメント(0)

• 

  オオイヌノフグリの芽が出たようです

  今年の春に野原からいただいてきたオオイヌノフグリ。種になるまで窓の外で育てて、小さな鉢のまま放置！その子たちがどうやら発芽しちゃったようですよ！　何かの芽が出てるな～雑草かな～･･･もしかしたら･･･なんて思っていて、広場のお友達に教えてもらって気づいたんです。＞そういえば、オオイヌフグリはその後いかがですか？＞我が家はいくつか芽が出てきてすくすく育ってます。これを見て、急いで調査！オオイヌノフグリの芽だったら成長の記録をつけるんだ！･･･ということで写真つきでアップ！http://www.dainippon-tosho.co.jp/yagi/2002/020401/020401.htmここ（↑）で確認した結果、間違いないでしょう。発芽したのはオオイヌノフグリだ！フリー百科事典『ウィキペディア（Wikipedia）』によると、原産地はヨーロッパだそうです。以下、引用です。オオイヌノフグリ（大犬の陰嚢、学名Veronica persica）とはゴマノハグサ科クワガタソウ属の越年草。別名、瑠璃唐草・天人唐草・星の瞳。ヨーロッパ原産の帰化植物。路傍や畑の畦道などにみられる雑草。早春にコバルトブルーの花をつける。花弁は４枚。ただしそれぞれ大きさが少し異なるので花は左右対称である。花の寿命は１日。葉は1-2cmの卵円形で鋸歯がある。草丈10-20cm。名前のフグリとは陰嚢のことで、実の形が雄犬のそれに似ていることからこの名前が付いた。ただし、これは近縁のイヌノフグリに対してつけられたもので、この種の果実はそれほど似ていない。だから、正しくは、イヌノフグリに似た大型の植物の意である。近縁種にイヌノフグリ、タチイヌノフグリなどがある。いずれもオオイヌノフグリより小型で、花は遙かに小さいので目立たない。なお、日本の同属にはクワガタソウの仲間があり、これは山地から高山に分布する花の美しい野草である。もしかしたら、オオイヌノフグリじゃないのかも？イヌノフグリやタチイヌノフグリって品種があるらしいね。http://www.asahi-net.or.jp/~bd8m-msd/piclg062.htmlかと思いきや、やっぱりオオイヌノフグリらしい。イヌノフグリとは随分と大きさが違うのね。ふむふむ。タチイヌノフグリとは、花が咲く頃の葉っぱの様子が違うみたい。http://had0.big.ous.ac.jp/~hada/plantsdic/angiospermae/dicotyledoneae/sympetalae/scrophulariaceae/tachiinunofuguri/tachiinunofuguri.htm ･････つづくWeb標準にアプローチ（サイト版） || 東京２３区中心・駅近ホテルズ

  2006/09/16

  コメント(2)

• 

  フォントサイズとスタイルシートについて思う

  Web標準の教科書WEBレイアウト・セオリー・ブックスタイルシートスキルアップ・デザインブック（1）スタイルシートスキルアップ・デザインブック（2） すっげーよ！CSS Nite in Nagoya の参加申込者数が200人を超えたってよ！最初144人が定員だったから、とっくに打ち切られていると思ったのにまだ、受け付けるってよ！迷っている方がこの記事読んでくれていたら、駆け込みですよ！プレゼントもいっぱいあるどー☆　⇒http://cssnite.jp/nagoya/info_nagoya.htmlさて、本題（笑）スタイルシートでフォントのサイズ指定をする機会って割と多いと思うんだけどここでちょっとメモ。よく使うのが「%」だよね。「px」も多いな～。私はなるべく「%」なんだけど･･･これがちょっとね～ems や % は、掛け合わせの問題がある！90%に指定された内側で、さらに90%と指定すると･･･（涙）･･･ややこしいっつーの！という訳で、ems と % は使うのを避けたほうがいいって感じです。ユーザビリティの視点から見ると、px もよろしくないですね～IE6だと、文字の大きさが変えられないからね。xx-small、x-small、small、medium、large、x-large、xx-largeこれらを使っていこう！と思うのですが表示サイズがブラウザによってマチマチなんざんすよね～ばーかー！画像とテキストのバランスが難しい。デザイン的な視点と、レイアウトバランス、それにユーザビリティ。そうそう。納得できるフレーズを見かけたのでメモです。　　クローラこそ、アクセシビリティが必要もっともだと思いませんか？＾＾ ･････つづく Web標準にアプローチ（サイト版） || 東京２３区中心・駅近ホテルズ

  2006/09/15

  コメント(0)

• 

  リコリスとデュランタ咲く～デュランタのお手入れ～

  NHK趣味の園芸Q＆A（春）NHK趣味の園芸Q＆A（秋）NHK趣味の園芸Q＆A（冬）別冊NHK趣味の園芸「園芸入門」NHK趣味の園芸手帳 裏庭にリコリス（写真左）とデュランタ（写真右）が咲きました。　　実はこのリコリス、今年初めて植えたんじゃないんですよ。もう、何年も前に球根を購入してね、ずっと葉っぱしか出てこなくて無理なのかな～と思って花壇の隅のほうに、とりあえず植わっているって感じ（笑）なーんのお手入れもしていないのに、今年初めて咲いちゃったんです。品種は何かな～？？？　「アイドル」　「たおやめ」　「山の根ロゼ」このあたりだと思うんだけど、お詳しい方が見えたら教えて欲しいですね！私としてはロゼっぽいと思っています。http://lycoris.jp/この（↑）サイトにリコリスの情報がいっぱい載っていますよ。こんなに種類があるなんて知らなかったよ～。彼岸花のお仲間なのね。それーと、そのお隣にモサモサと枝葉を伸ばして咲いているデュランタくん。品種はタカラヅカだと思います。デュランタタカラヅカ随分と豪華なお名前ですね＾＾夏の初めにモサモサしている枝葉をバッサバッサ切ってしまったのがいけなくてお花があまり咲いていません。お花が付くところを切っちゃいました（汗）デュランタのお手入れについてメモしますね。■デュランタのお手入れ（鉢植え）花が終わったら花の穂を切り落とす地植ものは花が終わったら半分ほどに切り詰めて鉢に植えて室内で越冬させる（デュランタの故郷は南米なんです）花が終わった後は、化学肥料か液肥をあげる（冬はあげない／油かすはあまりよくない）ゴールデンウィーク頃に剪定する剪定したら、鉢から出して、古い土を振るって根を半分くらいにカットする太陽とお水が大好き！よく日に当てて、土が乾いたらたっぷりとお水をあげる今は地植えにしちゃってるので鉢植えにして玄関とかに飾れるくらいに美しいデュランタにしてみたいと思っています♪紫の花房が垂れる様は、秋の藤みたいでとっても綺麗なの。増やしやすい植物だそうなので、立派に増やしてみたいです。 ･････つづく Web標準にアプローチ（サイト版） || 東京２３区中心・駅近ホテルズ

  2006/09/15

  コメント(5)

• 

  リストタグで横並びメニューと縦並びメニューを作成する

  Web標準の教科書WEBレイアウト・セオリー・ブックスタイルシートスキルアップ・デザインブック（1）スタイルシートスキルアップ・デザインブック（2） CSSでメニューを作るときのメモです。リストタグを使って横並びメニューを作る例をよく見るけれど縦メニューを作るときと何が違うのかな？と思っていたの。display:block;背景色を変化させたりするときにリンクテキストの範囲のみ適用範囲にするんじゃなくてそのブロックを適用範囲にしようと思うとブロック化するためにこれを使うわけだけど･･･■横並びメニューul {    margin: 0;    padding: 0;    list-style: none;}li {    float: left;}li a {    display: block;    width: 100px;    height: 30px;    text-align: center;    color: black;}さーてと。上のソースに一行追加すると、横並びメニューが縦並びメニューになるんですよ。うーん。うーん。考えた結果、ulの括りに width:100px; と入れてみる。リストの横幅を li a で指定している横幅を参照して適当な値を入れてあげればOKだよね。この場合はボーダーも余白もないから100pxでOKってわけ☆ ･････つづく Web標準にアプローチ（サイト版） || 東京２３区中心・駅近ホテルズ

  2006/09/14

  コメント(2)

• 

  Windows Live Search

  Web標準の教科書スタイルシートスキルアップ・デザインブック（1）スタイルシートスキルアップ・デザインブック（2） MSNサーチっていつ変わった？今、Windows Live Search になっているね。少し前、パソコンのリカバリをしてメッセンジャーを再インストールしたときにWindows Live Messenger に名称がかわっていたし。Microsoftさんってば、何かしているのかしら？ちなみに、サイト登録のアドレスはこれ。以前と変わっているのかな？　http://search.msn.co.jp/docs/submit.aspx検索のアドレスは変わっているね。　http://www.live.com/?mkt=ja-JPそして、Web標準にアプローチ（サイト版）が、今、上位におります。　Yahoo!にもGoogleにも拾われてはいるので目に見えるところに上げられるようにがんばらなくちゃ！やっぱ、ためになる記事のリンク集は欲しいな～と思っているの。益子さんとか鷹野さんとか矢野さんとかの記事はとってもお勉強になるもの。他にも有益な記事を埋もれさせたくないし、自分も欲しいし＾＾ ･････つづく Web標準にアプローチ（サイト版） || 東京２３区中心・駅近ホテルズ

  2006/09/14

  コメント(0)

• 

  リンクの指定をするスタイルシートの設定の記述順序ってのがある

  Web標準の教科書スタイルシートスキルアップ・デザインブック（1）スタイルシートスキルアップ・デザインブック（2） 最初から洗いなおしてみると、基本が抜けていることに気づくのが人ってもので（汗）昨日の media に続いて、リンクについても再認識です。気にしてますか？リンクの指定をするスタイルシートの設定の記述順序。この順番でないと、うまく表現できないことがあるそうですよ。私、簡略化するために、よくこう書きます。a:link , a:visited , a:active { text-decoration : none; }a:hover { text-decoration : underline; }これだと順番が駄目なのね。むふぅ～■リンクの指定をするスタイルシートの設定の記述順序　（１）a:link　（２）a:visited　（３）a:hover　（４）a:active今日は先ほどからお天気が良くなってきました。少し寒いですね～キティちゃんブランケットを肩に掛けています（笑）昨晩、母上にお仕事のことでちょっと話したことを父上に話したらしく父上･･･少し心配なさった模様。　　　「がんばれよっ！」ってわざわざ言いに来たの。わたしが鈍感だったら「なんのこっちゃ？」って思うだろうな～（笑）人生って歩んでいくのが難いっす ･････つづく Web標準にアプローチ（サイト版） || 東京２３区中心・駅近ホテルズ

  2006/09/14

  コメント(2)

• 

  CSSの指定時の「media="screen"」が背景色を隠した原因

  詳解HTML ＆ XHTML ＆ CSS辞典改訂版Designing with Web standardsWeb標準の教科書スタイルシートスキルアップ・デザインブック（1）スタイルシートスキルアップ・デザインブック（2） 知～らなんだ。知～らなんだ！そりゃそーだわな！と思いながらも実感してなくって知～らなんだ！CSSで body { background:gray; } とかしてそれが記述してある外部CSSファイルにリンクするのに「<link href="cmn.css" rel="sty ・・・・・略････」って書くよね。属性に media="all" ってのは良く書いていて、それも何気になので気づかなかった。知人に「このサイトはどうして背景が印刷されないの？」って聞かれて「スタイルシートの設定がどうのこうのなってると思う」と答えたのは数ヶ月前だったかな？嘘っぱちでもないのだけど、犯人さんは media="screen" なんだよね。これだけだと、印刷時には背景がない状態になっちゃうんだよね。どのスタイルも適用されないってことか。いくらCSSに body { background:gray; } って書いてあってもグレーの背景は印刷されないわけです。ふむふむ。全部同じスタイルでよければ media="all" でいいわけだけどそうじゃなかったら、表示用、印刷用のスタイルシートを準備してそれぞれのファイルへのリンクと、指定をしてあげればヨシってことです♪実際に試してみたのは今日が初めてでした（笑）  ■全部共通の時の指定<link href="all.css" rel="stylesheet" type="text/css" media="all" />■表示用の指定<link href="csrn.css" rel="stylesheet" type="text/css" media="screen" />■印刷用の指定<link href="prnt.css" rel="stylesheet" type="text/css" media="print" />台風の影響で雨降ってます。遠くにいても、台風は侮れないんですってぇ～湿った空気が流れ込んで秋雨前線が活発になって局所的に大雨になったりして。ジメジメは梅雨シーズンだけでたくさんよ～そんな時はこの可愛いお顔を。　　めっちゃ、いいわ～グッズも売ってるんだよ。こちらにて　⇒　はんなり豆腐のウェブサイトお目当てはこの子達　⇒　はんなり豆腐のストラップ ･････つづく Web標準にアプローチ（サイト版） || 東京２３区中心・駅近ホテルズ

  2006/09/13

  コメント(4)

• 

  IT Pro コラム ： Web標準の基礎と実践

  Web標準の教科書スタイルシートスキルアップ・デザインブック（1）スタイルシートスキルアップ・デザインブック（2） 以前に読んだ記事も含めて、改めて７回分全部読みました。IT Pro コラム ： Web標準の基礎と実践http://itpro.nikkeibp.co.jp/webdesign/※真ん中くらいまでスクロールすると見えてくるよ！「Web標準の教科書」の著者、益子氏が書いているコラムなので大体のところは落とさずに頭に蓄えられていました。普通にできるようになっていました。マークアップ的にはね。でも、やっぱり抜け落ちるのが人の脳だわ（笑）第5回の「11.属性は略記できない」ってところが完全に抜けていたのよね～これは、改めて頭に入れておかないと！今のところ、XHTMLで記述しているものでcheckedを使ってないのでセーフだったけどね（汗）■Web標準のお約束：属性は略記できない！正：　<input type="radio" checked="checked" />誤：　<input type="radio" checked />※XHTMLで記述しない場合は「<input type="radio" checked="checked">」です。今日ね、一年ぶり？にデュランタの花が咲きました。多分、「宝塚」って種類だと思います。もっと花っぷりが良くなったら写真をアップしま～す＾＾ ･････つづく Web標準にアプローチ（サイト版） || 東京２３区中心・駅近ホテルズ

  2006/09/12

  コメント(0)

• 

  ずんずん横にレイアウトするスタイルシートの設定

  Web標準の教科書スタイルシートスキルアップ・デザインブック（1）スタイルシートスキルアップ・デザインブック（2）HTML ＆ CSSHTML／XHTML（エクスエイチティーエムエル）＋CSS例解スタイル辞典ホームページ作成マスターブック（HTML ＆スタイルシート基本） floatで左右に指定しなくても、ずんずん横にレイアウトが出来るんです！知らなかった･･･当たり前なのかな～？試したコードは以下の通りです。「a」「b」ってクラスを二つ指定してあるけど、「a」だけでもいい。色が同じだとわかり難いから二つ指定しただけですので＾＾ついでにメモ。.menuでwidthを指定しないと、<div class="menu">～</div>の下に余白が出来るので注意ですよ！（IE6だけかな？）---------- CSS----------.menu {    width: 500px;    margin: 0;    padding: 0;}.a {    float: left;    width: 100px;    margin: 0;    padding: 0;    background-color: pink;    text-align: center;}.b {    float: left;    width: 100px;    margin: 0;    padding: 0;    background-color: orange;    text-align: center;}---------- (X)HTML----------<body><div class="menu">    <div class="a">メニュー１</div>    <div class="b">メニュー２</div>    <div class="a">メニュー３</div>    <div class="b">メニュー４</div>    <div class="a">メニュー５</div></div></body>---------- 表示----------「スタイルシートスキルアップ・デザインブック（2）」を買いました。残念ながら（１）は書店にはなかったんです。やってみた感想は、また後日、徐々にレポートしていきますね！ ･････つづく Web標準にアプローチ（サイト版） || 東京２３区中心・駅近ホテルズ

  2006/09/12

  コメント(2)

• 

  意外なところから何かを感じるもの

  Web標準の教科書スタイルシートスキルアップ・デザインブック（1）スタイルシートスキルアップ・デザインブック（2） CSS実装徹底検証! そこが知りたいInternet Explorer 7。やっと読んだよ。アドレスを見ると http://journal.mycom.co.jp/special/2006/ie7beta2/ ってことはこれ、ベータ版２の時のなのね。今、ベータ３。感想というか･･･ややっこしい！（笑）私が良かった～♪と思った点は　（２）XML宣言が標準規定どおりに有効　（３）セレクタの対応の「 body > p 」のような親要素の直下の子要素に対する記述が有効　（５）:hoverの適用先が全要素　←　ちょい嬉しい＾＾　（８）画像で置き換えた旧字体なんかの文字を含む行の高さが指定どおりOK☆　（１５）回り込んだテキストがズレたり消えたりすることがなくなった　（２３）ブロック要素化による問題が解消こんなとこかな。この記事を読んで、これだ！！！って思った実装差異がある！表示崩れを起こしている原因って、もしかして、（１８）のようなことかも。「回り込みの問題」計算ミスったり、paddingとかの表示のされ方の差異だったりね～とっとっと。これを読みながら、横目でテレビを見ていたのです。テレビをつけていると本当に色んな情報が入ってくるね～狭小住宅の番組だったんだけど建築家さん？の言葉がちょっとばかり耳に残ったんだ～。　　　　車や家具を買うように家を買って欲しいこんな感じ。確か９坪ハウスの建築デザイナーさんだったような気がするんだけど。記憶が曖昧でスミマセヌ<(_ _)>どうして心に響いたのか。そういう風に家が買えたら良いなって思ったわけではなくって多分、ウェブのサービスとして何か生まれないかな？って頭の中で何かに変換されたんだと思うのよね。「９坪ハウス」ってネーミングもいい感じだしコンセプト？ってか、そういうのもいい感じ。数字ってインパクトあるじゃん。頭にも残るし目にも残る。そして、好奇心が疼いて検索してしまった！「９坪ハウス」ひっかかるのかな～と思いつつ検索ボタンを押すと･･･あるね～（笑）http://9tubohouse.com/このサイトのデザイナーズファイルってところに載っている建築家さんかもしれない。一番上のおじさま。印象が似てる。サイトデザインもさ～、めっちゃシンプルだけど、これはこれで成り立っているというか、いい☆私の頭の中で、何かが融合されてる感じがする。うん。んでもって、ちょっと迷っていることもある（笑）他に見たテレビといえば、聞こえてきた情報って言ったほうが良いかもしれないけど再放送の･･･番組名忘れてた･･･ドウモイ酸中毒のお話。海洋汚染によって赤潮が発生して、貝とかが食べるケイ藻が侵される。貝とかの海産物は、人や鯨の食料となるから、それまた侵されて、中毒にかかる。それは、自然の復讐っぽいものであるとか･･･なんか、ちょっと複雑な心境になってしまった。何かに触発されているような感じね。全然関係なさそうなところから意欲の前の何かを動かされて迷ってるみたいなことがあるな～寝て覚めたら、スッキリしているかしら（汗）・・・ってな感じで、しばらく意味の通じない記事を書いちゃうかも。書くと整理されて、何かが見えてくるっていうじゃない？＾＾ ･････つづく Web標準にアプローチ（サイト版） || 東京２３区中心・駅近ホテルズ

  2006/09/10

  コメント(0)

• 

  Web標準関連リンク

  Web標準の教科書スタイルシートスキルアップ・デザインブック（1）スタイルシートスキルアップ・デザインブック（2） Web標準に関する素敵なリンク集のメモです。やっと、CSS実装徹底検証! そこが知りたいIE7 をちゃんと読んでます。IE７かぁ～それ用にあてるマシンがないわ･･･と思って今日も配信されてきたメルマガを読んでいるとスタンドアローーーーーーーーーーーーーーーンがある！配布サイトは英語版だけど、なんとかなるぜよ！（笑）⇒Internet Explorer 7 Beta 3 in standalone modehttp://tredosoft.com/IE7_standalone（ページの下部にダウンロードリンク有り）早速起動してみた！タブブラウザーだった！XML宣言の実装差異が解消されていた！ん？「メニュー」とか「編集」とかいうボタンっつーか、あれはどこいった？オプションとかから引っ張り出すのだろうか？まぁいっか＾＾　これで表示状況をテストできるね♪■Alternative Design Project by Momomohttp://adp.daa.jp/WebデザインテクニックやWebのことについて、色々と書かれている。メモブログのように付けているブログのようだが、内容は内容は濃くって、しかも読みやすい。■DreamweaverでWeb標準(XHTMLとCSSでサイト構築) http://www.mag2.com/m/0000169311.html 鷹野雅弘さんが発行しているメルマガのバックナンバーを ひと通り実行してみたい。 バックナンバーは有難いことに全部公開されている！ 最近、ちょっと･･･Dreamweaverは･･･と思っていたけど 使い方だけじゃなくて、Web標準にフォーカスしてある内容なので、一読しておきたい♪ ■CSS実装徹底検証! そこが知りたいIE7 http://journal.mycom.co.jp/special/2006/ie7beta2/ 随分前にプリントアウトしたけど さっと目を通しただけでちゃんと読んでなかった記事。 IE7は、どうやらまだまだWeb標準には歩み寄りの度合いが･･･（汗） 全２４記事あるので結構大変ね～ ■Web標準の基礎と実践 http://itpro.nikkeibp.co.jp/article/COLUMN/20060613/240726/?ST=webdesign Web標準の教科書の著者、益子貴寛さんが書いているIT Pro のコラム。 このコラムは、まだ、終了していなくて、第７回まで掲載されいるところ。 以降の記事も楽しみ♪ 今日は湿度が高くって、なんだか蚊も多い気がします。湿気が多いと蚊は元気になるのでしょうか？ ･････つづく Web標準にアプローチ（サイト版） || 東京２３区中心・駅近ホテルズ

  2006/09/09

  コメント(2)

• 

  東京の駅周辺情報は東京メトロウェブサイトで見る！

  東京23区中心・駅近ホテルズの更新準備中。作ってみなくちゃわからない、ホテル情報の不足さを超実感です！だってね～「○○駅から徒歩○分」とか言われても、東京に疎い私にはわからない。○番出口とか○○線とかちゃんと載せてもらわないとね～地図もお粗末というか、あれじゃ迷子になるよ。迷子になりそうな地図だと予約する気も失せると思うのよね。駅名が一緒で○○線ってあるけど、それが離れている駅なのかくっついているのかもわからないしね～っとまぁ、自分のわからないことを一杯書き溜めて更新の材料にしちゃうので☆そんでね、すっげー有難いサイトを見つけたのだ！東京路線のことなら東京メトロに聞け！ってことですのだ！凄いよ。みんな利用しているのかな～私が始めていくなら家にいながら駅周辺のことが映像で見られるって凄く安心する材料になる！⇒東京メトロの路線名・駅ナンバリングから検索上のリンクをクリックして、どこかの駅名をクリックする。さらに、「出入口案内図」をクリックして、赤い番号をクリックする！すると･･･まぁ！なんと！パノラマで出口周辺の景観が見られるではないですか！嬉いったら、凄いったら！今の作業をする前に、無駄な作業をしてしまった。無駄を踏み踏みしつつ、覚えていくのだ！がんばるのだ！ ･････つづく

  2006/09/07

  コメント(2)

• 

  テキストページをワンランクアップ◇SimpleAPI 見出しジェネレーター

  Web標準の教科書スタイルシートスキルアップ・デザインブック（1）スタイルシートスキルアップ・デザインブック（2） 面白～いツールを紹介するよ。今朝読んだメルマガに紹介されていたツールなので既に知っている方もいるかもしれませんね～「SimpleAPI 見出しジェネレーター(仮)」http://img.simpleapi.net/font/上の画像は、見出しジェネレータで作ったタイトルだよ！テキストばっかりで、もうちょっとメリハリつけたいな～と思ったりしたらこのツールを使ってみると、嬉しくなっちゃうかもしませんね～縦横サイズが好きに出来るから、メニューボタンも作れるしテキストを画像にしたいものなら何でもいけるね。工夫次第だ！Simple API は、開発日記もあるから、リリースされるツール情報もチェックしたいところ。せっかく見つけた素敵なツールなのでWeb標準にアプローチ（サイト版）の無料ツール集のページも更新したの。このサイト、ちょっとだけアクセスが上がってきたんだよ！不思議なキーワードで検索してくる人もいるわ～面白い！ ･････つづく

  2006/09/05

  コメント(2)

• 

  スタイルシートスキルアップ書籍紹介

  外に出たついでに本屋さんへ行ってきました。スタイルシートでレイアウトをする大枠がわかってきたので次のステップに進むために参考にする書籍の下見のために出向きました。スタイルシートスキルアップ・デザインブック（1）レッスン形式でマスターするCSSの実践テクニック＆アドバイス著者：エリック・A．メイヤ ／吉川典秀出版社：毎日コミュニケーションズ監修者：株式会社ミツエーリンクスサイズ：単行本／367p発行年月：2005年12月本体価格：3,200円 (税込 3,360 円) 送料別スタイルシートスキルアップ・デザインブック（2）CSSマスターになるための「プロ技」集中講座著者：エリック・A．メイヤ ／吉川典秀出版社：毎日コミュニケーションズ監修者：株式会社ミツエーリンクスサイズ：単行本／279p発行年月：2006年01月本体価格：3,000円 (税込 3,150 円) 送料別この２冊がいいのではないかと、候補にあげてきました。「スタイルシートスタンダード・デザインガイド」もいい感じなんだけど具体例でステップアップできて、私と相性がよさそうな書籍でした（笑）株式会社ミツエーリンクスが監修だしWeb標準には力を入れていると思われるのだ！ミツエーリンクスのウェブサイトでは、ここでよくブログ記事などを読んでいてためになっているのよん。ポイントで買っちゃおうかな～バッグも欲しいんだけどな～ ･････つづく

  2006/09/04

  コメント(2)

• 

  CSSで大枠のレイアウトはできるようになったけれど･･･

  セオリー・オブ・スタイルシートWeb標準の教科書 歯医者さんに行って、ちょこちょこっとお仕事をしたら、もうお昼＾＾；一月ほど前、お仕事で初めてCSSレイアウトでページを組んでみました。組んでアップするところまでは良かった。・・・が、しかし、難しいんですよ。更新のことを考えて、更新しやすいつくりにするって難しい。ページ内にテーブルレイアウトをする必要が出てきたり。テーブルレイアウトが悪いわけではないし、必要なときには使えばいいのだけどここでテーブルを使うときは、この指定で！って決めちゃうとあとあと後悔するというか、そういうことがあったりして。ボーダーやら余白やらね。要素に対してスタイルを指定してしまうと後悔することがあるね～そういうことを実感したりして。反省→インプットです！わかりやすいマークアップって難しいわ～大枠のレイアウト以外のところにも、ちゃんと名前をつけたほうがいいね。table、p、dl、ulあたりの要素ね。そういうのって、ソースを汚すことになるのかな～今後は、大枠のレイアウトの内側でのCSS指定について練習しなくてはなりません。メニューいじりや、イベント表とか、告知とか、いろんなタイプの「中身」について。ちゃんとできるようになるまで、大枠以外はCSSでする！ってことに囚われないほうがいいかもしれません。徐々にStrictに移行していくほうが身のためっぽいです（汗） ･････つづく

  2006/09/02

  コメント(2)

• 

  楽天BLOGの横の記念マーク

  楽天アフィリエイト＆楽天広場徹底ガイド改訂版楽天アフィリエイト実践テクニックガイドブログ成功バイブル 楽天広場じゃなくなっちゃった楽天のBLOGサービス。楽天BLOGなんだってね～５周年を期に名称まで変えちゃったのね。うーん。楽天広場徹底ガイドとか「楽天広場」って名称はちょっとばかり浸透していると思うんだけど。そういうの変えちゃうのって、ちーとアイタタタ感があるんだけどな。そしーて！　　　　　　　　　変わってます！5周年記念コイン？マークが変わっています！これ、ジャンジャン、バージョンアップしていったら面白いのに～。Googleさんみたいに、何かの記念日に、敬意を表す何かね。私、割とこういうの好き♪今日は、頭がぼへぇ～としていて、何もする気にならない。する気にならないけど、更新準備とかしてみたりしてそれでも、気合すら入らないので濃い目の珈琲で誤魔化（←漢字変換できた）したりしみています。あら？？？いつの間にか動く絵文字＾＾ちょいと最近、面白い絵文字サービスに遭遇してそのサービスを使っている方へブログコメントをするのが楽しみになっています。よく感情を表してくれるんですよ。可愛い絵文字万歳！思ったときに、思ったことを綴るブログ（モブログ）もいいかもね～一日にどれくらい投稿しちゃうだろうか？構えて書くと、なかなか投稿数が稼げないんだけど、ラフなスタイルだったらどうだろうね～綴っていくだけ無駄っぽいけど（笑）mixiでそれしちゃうと、繋がりがめんどっちぃ気もするしね～そうして、mixi離れをする人もいるっていうし。えーっと、たらたらと綴ってしまいました。おとなしく更新準備しますです＾＾； ･････つづく

  2006/09/01

  コメント(4)

• 

  Web標準とIE7 -XML宣言改善-

  Web標準の教科書 外は虫の音がして、窓からは涼しい風が入ってきています。日が落ちて暗くなったら、すっかり秋の気配ですね。お仕事を待っている間と、駅近ホテルズの更新の気分転換にIE7のWeb標準っぷりについて、ちょっと読んでいました。XML宣言の阿呆っぷりが改善されるようですね。んまぁ、これっくらいはとっとと直していただきたいものです。宣言したら、下位互換モードで表示されるってどないやねん！次のWeb標準にアプローチ（サイト版）の更新のネタはIE7についてにしようと思っています。改善された点、保留にされた点、多々あるようだけれどどこまで反映されるんでしょうね～Windows Vistaの発売が来年１月とか言われていてそれに乗っかるIEがIE7+とかいうそうですよ。なーんか、ロゴも発表されたようですね～どこに載っていたっけ？⇒ここ参照（IE公式ブログの記事）「そのまんまやんっ！」ってすっごく、突っ込みいれたいんですけど～（笑） ･････つづく

  2006/08/31

  コメント(2)

• 

  楽天広場の左上にご注目！

  今日気づいたんだけど、みんなは気づいているのかな？　　　　　　　　　　今日は、駅近ホテルズの更新準備をしていたの。Googleさんでは、ちょぼちょぼと良い位置に占めているページもあってね。でも、アクセス数は、まだ、イマイチ。当然ですわな。コンテンツが有りません！（笑）東京の駅名とか地名とかチンプンカンプンなんだけど千代田区あたりは少しだけ位置関係がわかるようになった！全然わからんから、駅を探すのも一苦労ですよ。 ･････つづく

  2006/08/30

  コメント(4)

• 

  WindowsXP HomeEdition に PostgreSQL をインストールする

  PHP ＆ PostgreSQLで作る実用WebシステムPostgreSQL（ポストグレスキューエル）徹底入門最強データベースPostgreSQL 8構築ガイドPostgreSQL徹底活用ガイドfor WindowsPostgreSQLオフィシャルマニュアル改訂新版実践PostgreSQLSQLクイックリファレンスSQLポケットリファレンス改訂新版初めてのSQL書き込み式SQLのドリル よし！サーバ系のセットアップはPostgreSQLで最後だ！http://y-kit.jp/saba/ にもインストール方法は載っているんだけどインストーラパッケージのことは記載がないのでhttp://www.postgresql.org/ ここでウロウロしてインストーラパッケージを探すことにしたの。Apache⇒Perl⇒PHPとインストールしてきて、どこにいけばいいのかなんとなく検討がつくようになったし。http://wwwmaster.postgresql.org/download/mirrors-ftp?file=binary%2Fv8.1.4%2Fwin32%2Fpostgresql-8.1.4-1.zipここからダウンロード。リカバリ前は「postgresql-8.1.2-1-ja.zip」を使っていたけど8.1系がバージョンアップされていたので「postgresql-8.1.4-1.zip」をダウンロード。日本国旗をクリックしてダウンロードしたけどダウンロードファイルに「ja」が含まれていなかったのが少し不安点。解凍したフォルダの「postgresql-8.1.msi」のほうをダブルクリックして、インストール開始。インストーラパッケージがふたつあって、よくわからんけど、とりあえず始める。Service configuration（↓下図参照）でパスワードが求められるので、とりあえず入れる。Nextで進んでいくと、「ランダムパスワードにしますか？」みたいなことを英語で聞かれる。宅内だけで動けばいいので、セキュリティとか無視。わかりやすいものにしたいのでランダムパスワードにはしないってことで「いいえ」を選択して次へ進む。Initialise databese cluster（下図参照）で今度はデータベースのパスワードかな？それが要求される。またまた、適当に決めて、入力して次へ進む。Enable procedural languages にいくつかチェックボックスがあるんだけどよくわからんので、デフォルトのまま（PL/pgsqlにチェックの入った状態）Next。次の Enable contrib modules もそのままの設定でNext。（Admin81ほにゃららってヤツだけにチェックの入った状態）Ready to install になってインストール開始！モジュールが要ったら、後から足せばよいわ（笑）ここで、しまった！と思ったことを思い出す･･･まぁ、いいわ！と思って、データベース内のデータはバックアップを取らなかった。PHPとSQLのことで調べたことを殴りメモのように入れたヤツだけはバックアップするべきだった･･･アトノマツリですが＾＾；はい！無事PostgreSQL 8.1 がインストールできました。Windowsメニューにも追加されているので、そこにある Command Prompt を起動する。いつものほうじゃないことに注意すること。面倒なだけでできるんだろうけど（笑）動作確認してみると･･･えーっと・・・どうやって起動するんだっけ？psql.exe -h localhost -p 5432 *** "postgres"メモはこう。「***」はデータベース名だよね。確か。でも、データベース無いよね。作ってないもん。どうやって作る？？？Windowsメニューに pgAdmin III があるので、それを起動して中身を見てみる。「ツール」⇒「接続」でパスワードを入力して接続すると、データベースの状態がわかる。「postgres」ってデータベースが最初からあるらしい。なんとなーく、標準で入っているって聞いたような記憶が蘇る。そうだっけ？＾＾；psql.exe -h localhost -p 5432 postgres "postgres"これでEnterキーを押すと･･･OK！違うデータベースを作って、起動し、テーブルも作ってみる。※psql.exe -h localhost -p 5432 ttest "postgres"で起動したふぅ～　できたみたい＾＾Command Prompt の文字が前使っていたバージョンより、大きくて太い気がするな。見やすくていいけどね。これにて終了。 ･････つづく

  2006/08/29

  コメント(2)

• 

  PHP5.1をインストールする（Apache+PHP）

  PHP 5リファレンス＆逆引きユーザー便利帳PHP ＆ PostgreSQLで作る実用WebシステムはじめてのPHP 5（ファイブ）プログラミング（エキスパート編）PHP（ピーエッチピー）ポケットリファレンス改訂版PHP（ピーエッチピー） 5．0＋MySQL 5．0で構築する最速Webシステム初めてのPHP 5SEのトホホな舞台裏10日でおぼえるPHP 5入門教室 お次も http://y-kit.jp/saba/ を参照してPHPのセットアップ。以前はPHP4.x（たぶん、4.4.2）を使っていたんだけど、PHP5へバージョンアップ。http://y-kit.jp/saba/ には、PHP4.3.1で説明が書かれているよ。今の4.x系の最新バージョンは 4.4.4 です。で、私は 5.1.6 をダウンロード。説明どおりにすればOK・・・なのは4.x系の場合。5.x系の場合は、ちょっと様子が違うようです。ヒントは http://y-kit.jp/saba/ に載っているのでこうかな？ってあてはめながら設定してみたことをメモ。（うまくいったので、忘れないようにね＾＾）■PHP5.1.6のインストール（１）「php-5.1.6-Win32.zip」を解凍すると「php-5.1.6-Win32」フォルダができる。（２）Ｃドライブ（C:\）に「php」（半角小文字）というフォルダを作って「php-5.1.6-Win32」フォルダ内のデータを全て移す。■PHPの設定変更（１）C:\php\php.ini をメモ帳などで開く。（２）以下の設定を確認する　　　　　register_globals = Off　　　　　magic_quotes_gpc = Off　　　　　extension_dir = C:/php/ext/（３）「extension=php_mbstring.dll」という部分を探し、コメントアウトを外す。　　　　　extension=php_mbstring.dll（４）「[mbstring]」という部分を探し、以下のように編集する。「[mbstring]」の直下に「output_handler = mb_output_handler」という一行を追加する。この辺は適宜コメントアウトすること。（下の設定は、コメントアウトしてある文章を省略してある。）[mbstring]output_handler = mb_output_handlermbstring.internal_encoding = EUC-JPmbstring.http_input = autombstring.http_output = SJIS;mbstring.encoding_translation = Offmbstring.detect_order = autombstring.substitute_character = none;（５）あとは必要に応じてしましょっと＾＾■PHPを使うためのApacheの設定変更（１）Apacheの「httpd.conf」をメモ帳などで開く。（２）「LoadModule」が並んでいる部分の末尾に次の一行を追加。　　　　　LoadModule php5_module C:/php/php5apache.dll（３）「AddModule」が並んでいる部分の末尾に次の一行を追加。　　　　　AddModule mod_php5.c（４）「<IfModule mod_mime.c>」の下の「AddType」が並んでいる部分に次の二行を追加。　　（CGIの関連付けを追加した箇所）　　　　　AddType application/x-httpd-php .php　　　　　AddType application/x-httpd-php-source .phps（５）「DirectoryIndex」という行に「index.php」を追加。（CGIの関連付けを追加した箇所）　　　　　DirectoryIndex index.html index.cgi index.phpphpinfoで動作確認してみたところ、この設定で動いているようだけど「extension_dir = C:/php/ext」っが、ちょっと不安（汗）http://allabout.co.jp/internet/database/closeup/CU20050320A/（↑）ここを見ると大丈夫そうね。ちょっと安心（笑）http://tsuttayo.sytes.net/php/install2/win.php?ver=5.0.1&os=Windowshttp://www.koikikukan.com/archives/2004/07/28-012010.phphttp://www.goodpic.com/mt/archives/000577.htmlっとまぁ、ちょこちょこ設定方法が載っているね。どうやら、あっているらしいv（＾▽＾）v ･････つづく

  2006/08/29

  コメント(0)

• 

  Perl5.8をインストールする（Apache+Perl）

  10日でおぼえるPerl／CGI入門教室第2版*初めてCGIを学ぶときはこの手の書籍がお勧めWindows XPで作る最強の自宅サーバーPerlベストプラクティス最速攻略CGI／Perl作り方入門Perlの絵本Perl／CGI逆引き大全600の極意CGI＆Perlポケットリファレンス*私の愛用本。コンパクトサイズなので狭いスペースでもOK！ 続いて、http://y-kit.jp/saba/のPerlセットアップ手順を参照してインストールをする。ActivePerlをGETしにいかなくちゃね。http://www.activestate.com/store/languages/register.plex?id=ActivePerl（↑）こんなページが表示されて、しかも英語じゃん？たどたどしく読んでダメモトで「NEXT」ボタンを押す。ほっ。なんも情報は要りませんでした。最新情報とか欲しかったら、アドレス入れてね～とかその程度みたいね＾＾「Windows」の「MSI」をクリックするとインストールパッケージがダウンロードされる。リカバリ前にバックアップしてあるのは「ActivePerl-5.8.7.813-MSWin32-x86-148120.msi」。今回ダウンロードしたのは「ActivePerl-5.8.8.817-MSWin32-x86-257965.msi」。Perlくん。ちょっとだけバージョンアップしています＾＾動作確認用のprintenv.plのアイコンが･･･（笑）ActivePerlのトカゲくんになってる。さぁ、動作確認もOK。----------　　：　 略　　：SERVER_PORT="80"SERVER_PROTOCOL="HTTP/1.1"SERVER_SIGNATURE="<ADDRESS>Apache/1.3.24 Server at localhost Port 80</ADDRESS>\n"SERVER_SOFTWARE="Apache/1.3.24 (Win32)"SYSTEMROOT="C:\WINDOWS"WINDIR="C:\WINDOWS"----------上は、printenv.plの表示結果の一部なんだけど、ポート80使っているよね。Apache2.xをインストールしようとしたとき、どうしてできなかったんだろう・・・（⇒参照： Apache 2.x系 のインストールで躓く⇒断念して1.x系をインストール）ま、次はPHPのインストールってことで。 ･････つづく

  2006/08/29

  コメント(0)

• 

  Apache 2.x系 のインストールで躓く⇒断念して1.x系をインストール

  ApacheクックブックApache運用技法Apacheハンドブック第3版 これは、インストールの記録です。失敗もあり！自分メモです。Windowsでサーバ構築をするのに、わかりやすくて私が利用しているページがるの。これは、ずーっと前にPHP+PostgreSQLをやってみようと思ったときに広場にもメモったページだよ。■自宅サーバーで行こう - Windows XP & ADSL編http://y-kit.jp/saba/----------JAPAN APACHE USERS GROUP の新着情報で更新されているApacheのバージョンを確認して安定していそうな1.x系の最終バージョンのWindowsインストールパッケージをダウンロードしようとしたところ･･･ない･･･バックアップしてある、リカバリ前のApacheをインストールしようかとも思ったけれど2.x系の安定していそうなバージョンをインストールすることにした。2.0.58っぽいけど、2.0の一番新しいものにしようと思う。宅内で使うだけだから、バージョンをそんなに気にしなくてもいいかもね。perlやらPHPとの相性のほうが心配だ～2.0.59をインストールしたところ何かがヘンテコなようで、No installer service named "Apache2".と言われる。自分で設定するところなんてないなだけどな。インストールパッケージでインストールしているんだから･･･（失敗したパッケージ：apache_2.0.59-win32-x86-no_ssl.msi）どうやら、通常作成できるものができないらしい。make_sockがだめらしい。Nortonとかが邪魔しているのかな～と思って、向こうにしても駄目だし･･･ここを見ると、ポート80を何かが既に使用しているために出ているエラーみたいだけど何が使っているのさ？http://oshiete.nikkeibp.co.jp/kotaeru.php3?q=1675050（↑）こういう記事を見つけたんだけど、Apacheが共存しているわけでもないので他のアプリケーションがポート80を使っているってことは判明だわね～（2.x系はポート80で起動およびサービスの登録をしようと試みるらしい）はぁ～とため息をつきつつバックアップしてある以前から使っていたバージョンのApacheのインストールを試みることにする。apache_1.3.24-win32-x86-no_src.exe　これね。なんとね～。難なくインストール完了。お決まりの「あなたの予想に反して、このページが見えているでしょうか?」もちゃんと見えたし。OKってことね。2.x系をインストールするときには、何かあるの？？？気になるじゃないか～！！！今や、Apacheのインストールパッケージでサーバにあがっているもののほとんどが2.x系で、1.x系がない。私が目視した限りで見つけられたのは、富士ゼロックスにあるものだけ。apache_1.3.34-win32-x86-src.msiが最新のもの。1.3.35はないな～http://ring.fujixerox.co.jp/archives/net/apache/dist/httpd/binaries/win32/■JAPAN APACHE USERS GROUPhttp://www.apache.jp/■Installer Package（JAPAN APACHE USERS GROUP）http://www.apache.org/dist/httpd/binaries/win32/なにはともあれ、Apacheのインストール完了。ポート80は、よく使うポートなのは知っているんだけど、実際どんなものに使われるのかがわかっていません。プリンタとか関係ないよね？あれはプリンタポートだよね？使われているポート番号とアプリケーションって、何かで見られるのかな？（httpd.confでポート番号って触れたりするのかな？とか、ふと思ったり。）さて、次はPerlだじぇ～ ･････つづく

  2006/08/29

  コメント(6)

• 

  サイドメニューのないタイプ（メイン型）でも楽天広場の「メッセージを送る」ボタンは設置できる

  私の広場のページは、メイン型といわれるものです。このタイプにすると、サブ項目に設定されている、フリーページとかメッセージを送るリンクは設定できませんね。でーもぉ～！！！一度、「メッセージを送る」のリンク先をコピーしておくとテキストリンクなど、自分でリンクを設定してあげると、使えるじゃないですかぁ～！！！サブ項目に表示されないだけで使える！　⇒まいまいさんにメッセージを送るクリックした？クリックしてみた？？？ちゃんとメールフォームが表示されたでしょう＾＾広場では、諦めていたことだったので、ひょんなことから発見してしまってラッキー☆私が、メイン型にしているのは、サイドを表示すると、狭いから（笑）下までビロローンと余白取っちゃって、そんな下までいらないよ･･･ってことでね。メイン部分で２分割とか３分割とかすればいいしフリーページもトップで表示したいものだけを表示できるようにしたかったのでね。めんどっちぃことではありますが（汗）設置方法もメチャメチャ簡単ですよ＾＾下のソースをコピペして、赤（楽天のID）と青のところを変更してやってみてね。（上で書いたように、リンク先はご自分のメールフォームのアドレスをコピーしてもできます。）【自分でメールフォームを好きなところに設置する】<a href="http://plaza.rakuten.co.jp/oyadomymy/mailboxform/">まいまいさんにメッセージを送る</a> ･････つづく

  2006/08/29

  コメント(0)

• 

  パソコンを買ったときの状態に戻す⇒ソフトの再インストール⇒データをPCに戻す

  今日は２４時間テレビを飛び飛びで見つつWindowsのリカバリをしていました。アップデートとか時間かかるねぇ　●再セットアップ　●Office XP Personal　●Studio MX　●Illustrator　●Photoshop　●Internet Security 2006　●インターネット関係　●プリンタドライバ（メーカーサイトからダウンロード）　●Windows Update（SP2にすること）　●Firefox、Opera、Netscape　●Skype、MSN Messengerここまでで、朝の９時半頃から、１２時間くらい経過　●データ戻し　●フリーソフトインストール　●デジカメソフト　●ネットワーク　●Apache、Perl、PHP、PostgreSQLのセットアップあとは、こんなもんかな。うひゃー！寝るまでに終わんないな。テレビ見たいし（笑）CMで走り回っていて、何度階段の昇り降りをしたことか！良い運動になった一日でした。チャンチャン♪ ･････つづく

  2006/08/27

  コメント(2)

• 

  CSS Nite in Nagoya 参加申し込み

  以前から待ち望んでいた CSS Nite。http://nagoya.cssnite.jp/日時：2006年9月23日（土曜日）　時間：15時～19時（予定）（上のアドレスに詳細が載っています。）名古屋で開催されることになって、日程も決まって、あとは参加費用がどこまで下がるか。銀座での開講は、きっとスポンサーが沢山ついているからなのでしょう。無料。名古屋開催は、参加費用がスポンサーの出現によりかわります。一番下がって２０００円。協賛会社が、ぼちぼち出てきてくださっているので、参加することにしました♪スクール形式ってのが気になるところなのですが＾＾；Web標準の教科書の著者さんである益子氏と拝読しているメルマガの発行者さんである鷹野氏もいらっしゃるとあって楽しみにしています♪事前登録が必要ですので、Web標準、CSSに興味のある方は参加申し込みをされてはいかがでしょうか？ ･････つづく

  2006/08/26

  コメント(2)

• 

  イヤホンカバー検索中

  探し物があります。スカイプするときに使っているイヤホンのカバー。ちょっとフワッとした丸っこいカバーです。あれだけって売っていないのかな～なくても話せるし、聞こえるけど、機械丸出しって感じで好かないんです丸ごと買ってもいいんだけど、他は故障していないし、勿体無いんよね。もしも、売ってるよ～情報などありましたら、教えていただけると嬉しいです♪ちーと、電気屋さんでも覗いて来よう！ ･････つづく

  2006/08/25

  コメント(2)

• 

  ホンコンカポック成長中

  ６月の上旬だったかな？我が家のカポックがいきなり枯れ始めました。元気そうな幹を選んで短くして、鉢に植えました。切り取られた幹の葉っぱたちがかわいそうで、何とか生きないかな？って思ってその中でも元気そうな枝をいくつか選んで水栽培にしていました。そして、７月５日の日記にも書いたように、水栽培カポックちゃんから根っこが生えてきました♪あの後、数週間後にもまた根っこが！後の子達は、ひとつを除いて、腐ってしまったの。でも、根っこの生えた二つの小さな枝が根付いてくれることを祈って、小さな鉢に植え替えたのが、数週間前かな？そして今日････　　　出ーてーる～ぅ！！！！！ちょっと大きい芽と、ちょっと小さい芽が、出ーてーる～ぅ！！！！！弱っちゃっても生きるんだ！後ろ側に見えているのが、水栽培で育てた、子供たちの親の枝。あんなになっても、ちゃんと芽吹くんですね。もとのホンコンカポックもなんとか元気になってくれて、綺麗な葉っぱをワンサカと付けているよ。もう、枯れんじゃないよ～＾＾ ･････つづく

  2006/08/24

  コメント(2)

• 

  ヤバイ！と思ったらリカバリー

  今朝、我がlavieちゃんを起動したら、「○○が見つからない」というアラートが出た。時々、何かのアラートが出るけど、まぁいっか…って思って、そのまま使っている。でも、今日は、何かが頭に走ったんだよね。「ヤバイかも…？」ここ１週間近く歯が痛いし、数日前まで５日間ほど微熱が続いて嫌な予感がしていたんだよね。関係ない？^^;直感的な何かは信じておいた方が身のためなので、リカバリーすることにしました。データも沢山たまって来ているので、ちょうどいい機会ね♪データのバックアップしていますか？先日先輩のMacちゃんがショートしちゃって、あの世行き。大切なデータがふっ飛んだんだそうです。もちろんお仕事データもあり…私のバックアップ方法は、外付けのHDに避難させるものと何かの手違いで外付けHDすらも認識しなくなっちゃった場合に備えてどーしても欲しい、あるいは、近日中に必要なものをCDに保存するものとネットワークでMacPowerBookに待避させるものにわけます。続行して作業したいものとかは、Macへお引っ越しなのね。さーて、今日は、スカイプでの打ち合わせ、それにお出かけの予定もある。バックアップをとりつつ、進められるモノを進めて、リカバリーだー！ウェブ系のソフト、メールの設定、インターネットの設定。それから、Apache、PHP、Perl、Postgres　…　結構あるな　…メモを頼りに、ちゃんとインストールできることを祈る。以前に、広場に書いているはずなのだぁ～あ！ネットワークの設定もあったんだ。色々とドキドキ。壊れる前にメンテナンスしようね～^^久々に、Macにて投稿。プレビューができんかった… ･････つづく

  2006/08/23

  コメント(4)

• 

  Web標準対応レイアウト-４カラム（４段組）レイアウト

  できるホームページスタイルシート入門Web標準の教科書ウェブデザインの教科書 昨日追加した最後の記事は、４カラム（４段組）レイアウト。これは、駅近ホテルズでも採用したレイアウト（ヘッダー、フッターは付いているけど）なのね。４カラムレイアウトができれば、色んな形にレイアウトを切ることができると思うんだっ。マルチカラムレイアウトの記事を書いてよかったな～と思っているの。だってね、何故かしっくりこなかったんだけど手応えあったっていうか、自信が付いたんだよね。Web標準にアプローチのサイト版のほうを読んでもらったらわかると思うんだけどその様子が、文面と内容からわかってもらえるかな♪って自負しております＾＾苦節3ヶ月強･･･っかな？超初心者レベルだと、掘り下げ方が足りないと思うけど少しはタグがわかるレベルもっと言えば、ちょっとだけでもCSSがわかれば、読めるモノじゃないかなぁ～と思っているの。色々書きたくて、書いちゃったりもしたけどできるだけ削って、CSSの設定がわかるように努力しました。CSSって言っても、ほとんど英語なので何を指しているか意味合いはすぐにでも覚えられると思うよ。各ページにAdsenseを仕込んだほうがいいのかな～と思いつつちょーっと入れ所に迷いを感じていて未だ仕込めず･･･ [第００１号]とか書いている下がいいかな？って思っているんだけど、どうだろ？ページの内容によって置き場所を変えるってのもありだよね～画像のないページなら、サイドにAdsenseがあってもカッコ悪くないかも。さぁ、４カラムレイアウトの中身へ･･･始まりはこんな感じね。とうとうマルチレイアウトの最終章にやってきました！（←ちょっと大袈裟） 最後は、「レイアウトを考える」の「４カラムType4-a」のレイアウトを例にお話しますね。今までのところで、忘れてしまったり、自信がないかも･･･って思うところがあったら、振り返って復習してみてください＾＾>>続きはこちらo(ﾟ▽ﾟヽ)(/ﾟ▽ﾟ)o ﾚｯﾂｺﾞｰ♪ ･････つづく

  2006/08/22

  コメント(0)

全912件 (912件中 101-150件目)

< 1 2 3 4 5 6 7 8 ... 19 >