2026
2025
2024
2023
2022
2021
2020
2019
2018
2017
2016
2015
2014
2013
2006年06月の記事
全42件 (42件中 1-42件目)
1
-
近頃の迷惑トラックバック
Web標準の教科書２冊目にピッタリのレベル。分厚いんだけどね、罫線に助けられる。手放せない私のバイブル。HTMLポケットリファレンス改訂第5版ちょっとだけタグを覚えたらもっと沢山知りたくなるね。ポケットサイズでパソコン周りに置いてもお邪魔ムシにならないの。 新手ですね。最近の迷惑トラックバック。来ませんか？不思議なアドレスのトラックバック。「http://pt.afl.rakuten.co.jp/ ･･･略･･･ 」こんな感じで、アフィリエイトリンクなんですよね。やる気になれば、飛ばせるわな。この手法は実現できます。でも、迷惑ですから。ちょっと、拒否設定リストに登録でもしておきますか（笑） ･････つづく【簡易テーブルタグ作成ツール】[Pit-Design]Webのツール素材置き場のVer1、Ver2をよろしくね。* HOME *
2006/06/30
コメント(6)
-
Internet Explorer 7 の Web標準模様
Web標準の教科書２冊目にピッタリのレベル。分厚いんだけどね、罫線に助けられる。手放せない私のバイブル。HTMLポケットリファレンス改訂第5版ちょっとだけタグを覚えたらもっと沢山知りたくなるね。ポケットサイズでパソコン周りに置いてもお邪魔ムシにならないの。 Web標準が元気です。あちこちで、Web標準ネタを見つけます。あのサイトも見たい。このサイトも見たい。全部見られるわけがない！（笑）今日は、以前から気になっていたInternet Explorer 7 （IE7） の仕様について。進捗具合を見てみようと検索してみました。IE7は、これまでのCSSの解釈に関するバグ修正より多くのWeb標準サポートが期待できるようです。一方では、完全に準拠というわけではない･･･みたいなことも書かれていました。「正式版の出荷時点でW3C勧告に対する互換性テストに合格をするのは無理」ともありました。ってことは、駄目ジャン！ふふぃ～表示に関して独自にこだわる？のはどうかと思うんですけど。機能は独自に色を出してもいいもんだけど表示に関しては何のメリットもないじゃんね～！！！CSSは2.1をサポートし、より強化されるようなのと個人的にはタブブラウザに変身する点が期待所ですね。変な表示しないでくれよ～Windows XP Service Pack 2 用Internet Explorer 7 Beta 2 Previewhttp://thesource.ofallevil.com/windows/ie_intl/ja/ie7/default.mspx ･････つづく【簡易テーブルタグ作成ツール】[Pit-Design]Webのツール素材置き場のVer1、Ver2をよろしくね。* HOME *Flashにwmv形式のファイルを読み込んだらアホぐらい容量が増えおった！
2006/06/29
コメント(0)
-
タイトル画像部分をCSSで設定するメリット
Web標準の教科書２冊目にピッタリのレベル。分厚いんだけどね、罫線に助けられる。手放せない私のバイブル。HTMLポケットリファレンス改訂第5版ちょっとだけタグを覚えたらもっと沢山知りたくなるね。ポケットサイズでパソコン周りに置いてもお邪魔ムシにならないの。 タイトルだけということはないのですが、メリットです。先日、Web標準を意識してXHTML+CSSでサイトを作成していた時に気づいたことです。タイトルに画像を使った以外は、文字ベースのページです。その画像はimg要素を使わずにスタイルシートで指定しました。作ったページをモバイル（携帯電話）で見てみたところ当然ながら画像のない文字ばかりの画面が映し出されました。実際の試作ページとは違うのですが、数日前の記事「練習で作ったCSSマルチカラムレイアウトとCSS無効時の表示」で状況を見ていただくとある程度の様子がわかると思います。で、この時に、( ﾟoﾟ)ﾊｯ っと思ったんです。気づいたんですね。携帯電話でウェブページを見るには１ページ辺りの容量に制限があるんですよ。「見られません！」って言われることも多々あることです。画像はとっても重たいですからね。テキスト（文字）とは比べ物にならない！なんと言えばいいか･･･もしも今回の試作ページで画像をimg要素で指定していたら容量オーバーで見られなかったと思います。CSSに対応していない私の携帯電話はCSSを無効にして、ウェブページを表示したんですね。ここで、( ﾟoﾟ)ﾊｯ っと思いませんか？Web標準を意識した作り方をしているといろんなプラットフォームに対応したサイト作りが出来てしまうんですよ！こりゃ凄いわ！ちなみに楽天広場のタイトル画像もスタイルシートで指定していますね。スタイルシートで背景画像を指定するにはこんな感じで記述しますよ。【タイトル画像をスタイルシートで記述する】---------- XHTML----------<div id="title"><span id="titlealt">サイト名</span></div>---------- CSS----------div#title {background-image: url(".titile.gif");}span#titlealt {display: none;}display: none を指定すると「サイト名」が表示されなくなるのでimg要素のalt属性のような役割を果たすよ。必要のないときは、指定すべきじゃないんですけどね～＾＾ ･････つづく【簡易テーブルタグ作成ツール】[Pit-Design]Webのツール素材置き場のVer1、Ver2をよろしくね。* HOME *Yahoo!もWeb標準に取り組みだした！html 4.01 Strict +CSS 2.1でページ作成中。スタッフブログに乗っていたよ
2006/06/28
コメント(6)
-
日記にアクセス解析をつけることにしました
Web標準の教科書２冊目にピッタリのレベル。分厚いんだけどね、罫線に助けられる。手放せない私のバイブル。【予約】全部無料でつくる行列のできるブログアクセス解析でホームページの集客を極める本今日からあなたもホームページデビュー 以前にも書きましたが、ここのブログのアクセス数増加中！ということで、アクセス解析をつけてみることにしました。ちゃんと動いてくれるか心配はありますが経過観察です＾＾私が設置したのは、アクセス解析忍者。手裏剣マークを時々見かけませんか？あの子です。「Web標準」でどれだけアクセスが伸びるのかなってことも楽しみですね。うーん。あんまり伸びない？＾＾；コンテンツ重視で作り始めている、「凝り」のサイト。調査するのに時間がかかりますね。最初は誰も来ないでしょうから基本に忠実に毎日１ページでもいいから情報を増やしていきたいところです。本体と、モバイルとブログと連動していこうかな～凝り系の読み物、情報ってちょっとお外で･･･って時にも読みたくないですか？オフィスで簡単凝り解消！とか、うーん、他に他に･･･待ち時間に目立たずできるストレッチとか、雑学増やしてみたり･･･最近気づいたWeb標準のメリットがあります。ありますが、今回の記事タイトルに沿わないので、次回＾＾ ･････つづく【簡易テーブルタグ作成ツール】[Pit-Design]Webのツール素材置き場のVer1、Ver2をよろしくね。* HOME *まじめにサイト構築しようと思うと大変ですね～
2006/06/27
コメント(4)
-
サイト構築初心に戻ります
Web標準の教科書２冊目にピッタリのレベル。分厚いんだけどね、罫線に助けられる。手放せない私のバイブル。HTMLポケットリファレンス改訂第5版ちょっとだけタグを覚えたらもっと沢山知りたくなるね。ポケットサイズでパソコン周りに置いてもお邪魔ムシにならないの。 やっとひと仕事を終え、新しいサイト構築の構想を練ってます。CSSテンプレ配布をメインにしようと思ったのですがそれはやめました。まだまだ、お勉強しないといけないことが山盛りだからです。アフィリエイト･･･というかネット収入を得ようと（今もありますが、もうちょっとマジで。）ドメインを取ってレンタルサーバを借りました。私の性分としてどうしてもデザインに凝ってしまう傾向にあるので今回はそれを二の次にすることにしたんです。思ったとおりにデザインできないとつまらなくなってしまうんですよね。困ったちゃんです。ビジュアル的なデザインは後回しにしてサイトの充実を図ることを第一にしました。メインテーマは「凝り」です。そう、肩凝りとかの凝り。ここから連想ゲームをすると、広く展開が望めそうです。調査したり、作り上げていく時間が大変ですけどね。そうそう、トップページの軽量化を最近公私共に怠っていたのですが今読んでいる副業サイトのオーナーさんの日記で改めてその重要を知らしめられました。トップページの重いサイトは、Web標準の目的に背きますしまた、ユーザビリティの点でも劣りますしね～随分古い記事なので55KB目標！と紹介されていましたが今はどんなもんでしょうか。私の勤めていた会社では100KBを目標にしていました。インターネットが高速化されて、それほど重さを気にしなくなってきていますがやっぱりサイトの顔！トップページは軽いものにこしたことはありませんよね。サーチエンジンのトップページで、表示待ちストレスを感じたことってないです。やっぱり重要なんだ！ ･････つづく【簡易テーブルタグ作成ツール】[Pit-Design]Webのツール素材置き場のVer1、Ver2をよろしくね。* HOME *「Web標準」で検索したときのYahoo!順位の変動が激しいです。30位～70位をo(-￣*o))))...ｳﾛｳﾛ...((((o*￣-)o⇒人気blogランキング
2006/06/26
コメント(0)
-
Flashムービー「このコントロールをアクティブ化して使用するにはクリックしてください」は困ります
Web標準の教科書２冊目にピッタリのレベル。分厚いんだけどね、罫線に助けられる。手放せない私のバイブル。HTMLポケットリファレンス改訂第5版ちょっとだけタグを覚えたらもっと沢山知りたくなるね。ポケットサイズでパソコン周りに置いてもお邪魔ムシにならないの。 Flashムービーが、変なんですよ。いつも通りに、WebページにFlashムービーを埋め込んでWindows Internet Explorer で動作確認をしたところこんなツールチップ（メッセージ）が表示されたんです。このコントロールをアクティブ化して使用するにはクリックしてくださいは？つい最近までそんな表示なかったよね。私、何か間違えたのかと思って検索してみたら･･･APPLET 、EMBED 、または OBJECT要素によって読み込まれた Microsoft ActiveX コントロールとは直接対話できません。このようにマイクロソフトのサイトに記載があったの。詳細は「ActiveX コントロールのアクティブ化」をご覧くださいね。2006年3月16日にちに更新されている。どうりで、いきなり変になった！と思ったわけです。使ってるんですよね。EMBED要素に、OBJECT要素。Flashが書き出してくれるソースコードは、この二つの要素を使って書き出されているの。（他にもあるけど）まったく、困ったちゃんです。苦肉の策で、こんな風に仕様変更されたらしいんだけどユーザビリティ（使い勝手）の面から見ると、非常にうっとうしいだけだと思うんですよね。回避できるならしてあげたい。ってか、私のポリシーとして、こんなヘンテコで使いにくい物をお客さんに納品できないわ。先に書いた「ActiveX コントロールのアクティブ化」にも対応策は記載されているの。ん～。一般向けでないのは仕方のないことなのかな。実際にすることは簡単なんだけどね。マイクロソフトの文面から簡単に読み取れるのはJavascriptを使えってこととdocument.writeでHTMLソースを書き出せよってこと。んならばってことで、Flashで書き出された該当箇所のソースコードをJavascriptで書いてみることにしたのよ。ジャバースクリプトォなんてわかんなーい！って言わなくても大丈夫。簡単ですわ。ちょっと端折っちゃうけど、下のような感じですよ。【１】HTMLソースの<OBJECT>から</OBJECT>を切り取ってJavasacript(01v.js)に貼り付ける。【２】貼り付けたソースの一行一行に、document.writeを付け加えて（青字部分）、保存する。document.write('<OBJECT ･･･中略・・・ WIDTH="320" HEIGHT="260" id="01" ALIGN="">');document.write('<PARAM NAME=movie VALUE="01.swf">');document.write('<PARAM NAME=quality VALUE=high>');document.write('<PARAM NAME=bgcolor VALUE=#000000>');document.write('<EMBED src="01.swf" ･･･中略・・・ </EMBED>');document.write('</OBJECT>');【３】HTMLソースを切り取った部分に以下のように記述する。<script type="text/javascript" xsrc="01v.js" ></script>これで、「このコントロールをアクティブ化して使用するにはクリックしてください」と表示されなくなった。ふぅ～。検索していると面白いことに、これをお仕事にしてるところがあるよ。対応策、公開されちゃってますけど？んまぁ、いきなりの仕様変更だったので、ちょっとビックリしちゃった。Flashを使ったサイトを運営されている方、ひと手間必要になっちゃいましたね。 ･････つづく【簡易テーブルタグ作成ツール】[Pit-Design]Webのツール素材置き場のVer1、Ver2をよろしくね。* HOME *Microsoftさんよ、他のブラウザに乗り換えられちゃうよ？JavaScriptポケットリファレンス改訂第3版チョコッと使えると便利ですよ。⇒人気blogランキング
2006/06/25
コメント(2)
-
練習で作ったCSSマルチカラムレイアウトとCSS無効時の表示
Web標準の教科書２冊目にピッタリのレベル。分厚いんだけどね、罫線に助けられる。手放せない私のバイブル。HTMLポケットリファレンス改訂第5版ちょっとだけタグを覚えたらもっと沢山知りたくなるね。ポケットサイズでパソコン周りに置いてもお邪魔ムシにならないの。 ぷはぁ～。今の私の限界です。サーバを借りたので、XHTML+CSSでテストサイトを立ち上げました。といっても、妥協だらけです。リンク先も一個もないので、公開は控えますね＾＾； こんなんを作ったんです。ちょっとズルっ子してますがんと、WindwsはIE、Firefox、Opera、Netscapeで確認したところ崩れているところはありませんでした。MacintoshもIEとNetscapeで確認したところOKでした。なので妥協。どこを妥協したかというと･･･白い余白があるでしょう。下に。お花の写真の下に。本当は10pxくらい空いているだけにしたいんだけどCSSのpositionプロパティとfloatプロパティをよく理解していないためにゆとりを持たせています。heightを設定してね。こんなゆとり、本当は ( -.-)ﾉ ・ﾟﾟ・。ﾎﾟｲｯピッチリ２段組、３段組ならOKになってきたんだけれど作ったレイアウトのように「CSS Templates」みたいに中と右のレイアウトの上にサイト名が乗っかっちゃうようなレイアウトがイマイチわかりません。自分で宿題作って、やっていくしかないですね＾＾；とりあえず、１２個の宿題を作ります。どこかでサンプルを持ってきて、お勉強するかもしれません。奥が深いですね。ついでに、このページを携帯電話（P525iS）で見たらどうなるか確認してみました。<?xml version="1.0" encoding="Shift_JIS"?>CSS Templates1columntype1-0001type1-0002type1-00033columnstype3-0001type3-0002type3-00032columnstype2-0001type2-0002type2-0003otherstype4-0001type4-0002type4-0003こんな感じでした。XHTMLに対応していないと、こうなるんでしょうか？＾＾；冒頭に表示されるXML宣言が丸見えです。携帯などモバイル機器対応にしようと思うと「XHTML＋CSS」より「HTML4.01Strict＋CSS」を選択するのが賢明そうですね。 ･････つづく【簡易テーブルタグ作成ツール】[Pit-Design]Webのツール素材置き場のVer1、Ver2をよろしくね。* HOME *作りたいコンテンツはCSSテンプレ以外にもいっぱいある！⇒人気blogランキング
2006/06/24
コメント(2)
-
Macromedia Web ボタンの配布元
超図解Flash 8 Basic ＆ Professional対応 はぁ～、FlashPlayerも必要だった！ひとつ前の記事で、 WindowsMediaPlayerとRealPlayer QuickTimeの３つの形式に合ったウェブバッジ（ダウンロードボタン）のメモをしたのよね。Macintosh と Windows を考慮してのことだったんだけどFlashPlayerでいいならいっぱいファイル形式を準備しなくてもいいかなぁという安易な考えが･･･チラリホラリということで、Macromedia Web ボタンの配布元をメモ。アドレスが adobe なのがまだ慣れないですね～Macromedia Flash Player ロゴとスタイルガイドhttp://www.adobe.com/jp/macromedia/style_guide/buttons/http://www.adobe.com/jp/macromedia/style_guide/logos/flashplayer/ ･････つづく【簡易テーブルタグ作成ツール】[Pit-Design]Webのツール素材置き場のVer1、Ver2をよろしくね。* HOME *背中の痛みはもしかしたら姿勢性症候群かもしれませんよ！⇒人気blogランキング
2006/06/23
コメント(2)
-
プレイヤーダウンロード ウェブバッジ（WindowsMediaPlayer/RealPlayer/QuickTime）
Web標準の教科書２冊目にピッタリのレベル。分厚いんだけどね、罫線に助けられる。手放せない私のバイブル。Web屋の本Webの世界は急速です。巷ではWeb2.0が騒がれていて、そこには何かある！って思わせる雰囲気がありますね。その何かを読んでみませんか？ 毎度の事ながら、いつも探し回るウェブバッジとガイドライン。ウェブバッジというよりダウンロードボタンと言った方が一般的か。どうして、ウェブバッジとガイドラインは直ぐにわかるところにないのかな？といつも思うのですよ。サクサクっと探せますか？んまぁ、そんなに必要に迫られるものではないのかもしれないけれど「動画配信したいんだけど、したことないから･･･」などと持ちかけられると、適当なことは言えないでしょう。WindowsMediaPlayerとRealPlayerQuickTimeの３つの形式があればOKかな。忘れないようにメモしておこう！Windows Media Player ダウンロードボタンロゴとガイドラインhttp://www.microsoft.com/japan/windows/windowsmedia/licensing/logo.aspxhttp://www.microsoft.com/japan/windows/windowsmedia/licensing/WMPlogo.aspxRealNetworks 製品ロゴのダウンロードとガイドラインhttp://www.realnetworks.com/company/logos/japanese/index.htmlhttp://www.realnetworks.com/company/logos/japanese/policy.htmlQuickTimeアップルテクノロジーWebバッジの使用ガイドラインhttp://www.apple.com/jp/about/webbadges/badges1.htmlhttp://www.apple.com/jp/about/webbadges/index.htmlお気に入りに登録しておけばいいんだけどさ自宅にいつもいるとは限らないので、ここにメモをね。他の人のお役に立てるかもしれないし＾＾ ･････つづく【簡易テーブルタグ作成ツール】[Pit-Design]Webのツール素材置き場のVer1、Ver2をよろしくね。* HOME *AdSenseちょっぴり報酬がありました＾＾Google誕生⇒人気blogランキング
2006/06/23
コメント(0)
-
HTML4.01 strict と transitional における画像余白？の差異（解決編）
Web標準の教科書２冊目にピッタリのレベル。分厚いんだけどね、罫線に助けられる。手放せない私のバイブル。HTMLポケットリファレンス改訂第5版ちょっとだけタグを覚えたらもっと沢山知りたくなるね。ポケットサイズでパソコン周りに置いてもお邪魔ムシにならないの。 謎の余白、解決しました。ブログの繋がりって素晴らしい昨日のコメント、見て！見てぇ～面白い気付きや、こんな感じでどうかな？とか本当に助かりました。display: block が救世主でしたよ！画像の隙間でお悩みの方昨日の記事と今日の記事は役に立つと思いますよ。ちょいとソースをペッタンコと貼り付けておきます。こうしておくと、あとで使えて私としてもとっても役に立つんですよ！アクセス数もちょっぴり増えたしクリック数の割りに成約率がちょっとだけ良かったりいいことだらけです。<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html lang="ja"><head><meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"><title>画像余白回避テスト</title><style type="text/css"><!--img { display: block; border: none;}--></style></head><body><img src="rose_s.jpg" width="120" height="120"><img src="rose_s.jpg" width="120" height="120"></body></html>▲スタイルシートは本来、外部ファイルにしたほうがいいんだけど テストってことで、ヘッダ内に書いてます<(_ _)>そして、ちょっと使えそうなメニューボタンを作ってみました。こういう風につかうと実用的ね。▲出来上がりイメージ▼メニューボタンのソースの例<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html lang="ja"><head><meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"><title>画像余白回避テスト</title><style type="text/css"><!--img { display: block; border: none;}--></style></head><body><a href="index.html"><img src="home.gif" alt="ホーム" width="100" height="20"></a><a href="prof/index.html"><img src="prof.gif" alt="プロフィール" width="100" height="20"></a><a href="blog/index.html"><img src="blog.gif" alt="ブログ" width="100" height="20"></a><a href="gallary/index.html"><img src="gallary.gif" alt="ギャラリー" width="100" height="20"></a><a href="sitemap.html"><img src="sitemap.gif" alt="サイトマップ" width="100" height="20"></a></body></html>▲こちらも同じく、ヘッダ内でスタイルを設定しています。BR要素を使わなくても、ちゃんと改行して見えていますね。凄いですね～ ･････つづく【簡易テーブルタグ作成ツール】[Pit-Design]Webのツール素材置き場のVer1、Ver2をよろしくね。* HOME *テストで使ったボタンの素材です。持って行ってもＯＫですよん＾＾ ↑↑↑ クリックしてもリンクしていません（笑） ↑↑↑⇒人気blogランキング
2006/06/22
コメント(6)
-
HTML4.01 strict と transitional における画像余白？の差異
Web標準の教科書２冊目にピッタリのレベル。分厚いんだけどね、罫線に助けられる。手放せない私のバイブル。HTMLポケットリファレンス改訂第5版ちょっとだけタグを覚えたらもっと沢山知りたくなるね。ポケットサイズでパソコン周りに置いてもお邪魔ムシにならないの。 もぅ、ムカつきましてございますよ！HTML4.01 strict と transitional のこんなところに落とし穴！しかもブラウザの実装差異ですよん！えぇ、こんな実装差異ありですか！？ 画像が２枚、改行して入っています。こんな感じ。<body><img src="rose_s.jpg" width="120" height="120"><br><img src="rose_s.jpg" width="120" height="120"></body>改行しただけでどうして隙間？ちなみに、IEはWinもMacもOKです。上下の間に隙間はありません。他、壊滅的！このような状態になるのはHTML4.01 strict と transitional の規則？違いであることに気付くのに１時間くらいかかってしまった･･･私はFirefoxをメインで使っているのでIEで見るまでこの差に気付かなかったの。HTML4.01 strict<!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""http://www.w3.org/TR/html4/loose.dtd">ああ、もう、strictに拘る所ではないし、transitionalにしちゃおうかな。transitionalだと、くっつくのよね。画像に対してmarginをゼロにしても、paddingをゼロにしても意味ないし･･･こんなときどうする？ ･････つづく【簡易テーブルタグ作成ツール】[Pit-Design]Webのツール素材置き場のVer1、Ver2をよろしくね。* HOME *詰まりたくないところで躓いてしまった！しっかり学ばないといけません！「XHTMLマークアップ＆スタイルシート」リフォームデザインガイドブック⇒人気blogランキング
2006/06/21
コメント(4)
-
期待膨らむWeb標準！Opera 9 正式版ダウンロード開始
Web標準の教科書２冊目にピッタリのレベル。分厚いんだけどね、罫線に助けられる。手放せない私のバイブル。実践Web 2．0 Ajaxプログラミング入門近頃注目を浴びております。「XHTMLマークアップ＆スタイルシート」リフォームデザインガイドブックWebリデザイン、リコーディングの需要は年々増加。一から作るより面倒だったり難しかったり。この書籍、救世主になってくれるか？ Web標準を追ってる最中、新しいバージョンのブラウザが誕生！Operaは、なかなか使えるヤツですよ。次回起動するときに前回終了したところからスタートしてくれる機能が一番嬉しい。他にも多彩な機能が搭載されたらしいよ。今はね、アクセス集中中につきOperaサイトにはアクセスし難い状態になっているの。３回トライしたけど全然だめ。Web標準も強化されたんだっけ？そこら辺のこととかも知りたいから、早くアクセスしたい！折角、早起きしているので、みんなからのアクセスが少ない時間にダウンロードしてみることにするよ！【Opera 9 ダウンロード】 http://jp.opera.com/download/IE（Internet explorer）も早くバグバグ状態から脱出してくれないかな～バージョン７がβ版だっけ。一刻も早くβ版を脱出してくれぃ～シェアが多いだけに、サイト構築やその他諸々で面倒くさいのです。表示差異くらいはなくして、統一して欲しいよ。みんな、快適に使いたいって気持ちは損益関係なくあると思うんだよね。他の機能で張り合ってくれるのは、全然構わないからさ。表示の点では仲良くしてね<(_ _)>ちなみに、私のメインブラウザはFirefoxです。私たちの間では、「火狐さん」とお呼びしています（笑） ･････つづく【簡易テーブルタグ作成ツール】[Pit-Design]Webのツール素材置き場のVer1、Ver2をよろしくね。* HOME *今年初めてのお素麺が本日のランチでした⇒人気blogランキング
2006/06/20
コメント(0)
-
Web標準のフォームレイアウト／白猫一族
Web標準の教科書２冊目にピッタリのレベル。分厚いんだけどね、罫線に助けられる。手放せない私のバイブル。HTMLポケットリファレンス改訂第5版ちょっとだけタグを覚えたらもっと沢山知りたくなるね。ポケットサイズでパソコン周りに置いてもお邪魔ムシにならないの。 以前に書いた広場の記事を引っ張り出してきてお仕事しました。⇒フォームレイアウトVer.01⇒メールフォームにひと工夫！（コントロールのグループ化）ほぼコピペでいいのが助かる！fieldset要素を使ってコントロール（input要素など）をグループ化したり項目の頭にポイントをつけてみたりしてね。メモしてあったおかげで、随分とすんなりできたんだけどそれでも、配置をするのに、２～３時間かかってしまった！急ぎでないので、練習と思ってやってみたんだよ。実践でもしない限り身に付かないしね。プレビューしていて思ったんだけどMacOSXのIE（Internet Explorer5.1）ってさなんであんなにファイル参照ボタンの周りに枠とるの？おまけに何で透過じゃなくて、白いのよ？恰好悪いんですけどぉ～それはさておき、コントロールのグループ化を復習しておきましょう＾＾ コントロールのグループ化<fieldset>ここに中身を書く</fieldset>ムッシムッシと暑い午後でしたね～暑かったんだけど、にゃんともかわいらしい猫ちゃんの声がしたので窓の外を覗いてみました。やん可愛い仔猫ちゃんお外に出てみたら、一族が居りました。4匹いるのがおわかりいただけるでしょうか？母猫は手前です。仔猫ちゃんは黒っぽいので親は美しい黒猫さんだと思われます。お隣で飼い猫認定を受けている数少ない猫さんが父猫さんなのです。シャッターチャンスがあったら父猫さんもご紹介するわ～ ･････つづく【簡易テーブルタグ作成ツール】[Pit-Design]Webのツール素材置き場のVer1、Ver2をよろしくね。* HOME *私の部屋のエアコンは２５度にしか設定できません。半分壊れています。⇒人気blogランキング
2006/06/19
コメント(0)
-
Try CSS 3Columns Layout! （positionがいい感じ）
Web標準の教科書２冊目にピッタリのレベル。分厚いんだけどね、罫線に助けられる。手放せない私のバイブル。HTMLポケットリファレンス改訂第5版ちょっとだけタグを覚えたらもっと沢山知りたくなるね。ポケットサイズでパソコン周りに置いてもお邪魔ムシにならないの。 先日紹介した Mollio CSS/HTML Templates 。これかなりお勉強になります。ただ、中身もガッチリ組んであるのでマルチカラムレイアウトを学ぼうと思うとちょっと苦戦するかも。上のテンプレートは、Trigger-off で紹介されていたサイトさんね。毎日のようにテンプレートサイトさんを紹介しているブログなので参考にするサンプルが欲しい人には重宝モノだと思いますよ！テーブルレイアウトじゃなくても、ホント色々できる。まだ、２段組レイアウトしか満足にできないけどMollioサイトで type-c を学べば３段組もある程度できるようになると思うの。ステップアップ学習とかじゃないから自分で盗み取るのです。見て学べ！ってヤツですね。私は、float でレイアウトするほうが、頭で理解しやすいんだけどどうも position のほうがカッチリと組める感じがしてくるの。実際どうなんだろう。まだ、２、３タイプしかサンプルに当たっていないのでもっといろんなタイプに挑戦して習得していきたいです。実際にできたレイアウト群はこの間とった独自ドメイン運用サイト（メインサイト）に載せていくの。夢は膨らむよ～こういうことして、稼げたらいいなという私の夢です。Web標準化が加速していますね。Yahoo!で検索すると、日々、２ページ目以降の表示順がバシバシ変わっている。ここのブログの順位もバシバシと変わっています（笑）脱！テーブルレイアウト！しましょうよ！ ･････つづく【簡易テーブルタグ作成ツール】[Pit-Design]Webのツール素材置き場のVer1、Ver2をよろしくね。* HOME *まだ、ダ・ヴィンチ・コード読んでいる人、手を上げて！⇒人気blogランキング
2006/06/18
コメント(0)
-
1週間連続 （200アクセス/1日）
Web標準の教科書２冊目にピッタリのレベル。分厚いんだけどね、罫線に助けられる。手放せない私のバイブル。リピーターをがっちりつかむホームページ戦略128の法則えぇ、がっちり掴みたいですとも！目的を持って労力を費やすとはよく言うことですね。 当ブログへの１日のアクセス数が増えています。検索エンジンから来てくださった方、広場のお友達ありがとうございます。やっぱり、ある程度、的を絞ったブログはアクセス数が伸びるようです。ここの他に、Google AdSenseの審査通過用に日記ブログを書いたり（意外と確実に通るものです。）初めからアフィリエイトをしてみようと思ってある日にしたことをメモしているブログお試し系のブログとメインサイトの構築を進めているんだけど長く続けている広場のブログが一番強いです。アクセス数の点から見るとね。たったの200。されど200なのです。うん。こことアフィリエイトのブログからメインサイトにうまくアクセスが流れるようにしたいなと思案中ですのよ。メインサイトはシンプル伊豆ベスト･･･シンプルイズベストでまいりたいと思っています。（どうして伊豆なんて変換すんのよ！）マジで稼ぎたいけど、ノウハウなんてゼロなので色々してみるしかないわね～。Web標準のお仲間が少しずつ増えているのが嬉しいと思う今日この頃でした☆ ･････つづく【簡易テーブルタグ作成ツール】[Pit-Design]Webのツール素材置き場のVer1、Ver2をよろしくね。* HOME *眠くてたまんないんです。どうして？⇒人気blogランキング
2006/06/17
コメント(4)
-
IT Pro の連載で「Web標準の教科書」著者、益子氏の記事掲載中
Web標準の教科書２冊目にピッタリのレベル。分厚いんだけどね、罫線に助けられる。手放せない私のバイブル。 おっはよ～ん。益子氏の記事がIT Proに登場です。日本では第一人者的な存在なのかな～Web標準といえばこの人！みたいな。Web標準のお勉強をしてみたい人は「Web標準の教科書」がとっても役に立つと思いますよ！【 第１回 なぜWeb標準が「ホット」なのか】http://itpro.nikkeibp.co.jp/article/COLUMN/20060613/240726/ちゃんとWeb標準しよう！と思うとフリースペースや無料ブログがキツイものがあるね。今朝は早起き。いえ、今朝も早起き。そこら辺の準備を整えることにします。そうそう、先日紹介したCSSテンプレート。とってもお勉強になります。レイアウトの枠だけにしてみると、よりわかりやすくなりますよ！では、本日もお勉強でーす＾＾ ･････つづく【簡易テーブルタグ作成ツール】[Pit-Design]Webのツール素材置き場のVer1、Ver2をよろしくね。* HOME *激しく眠いです⇒人気blogランキング
2006/06/16
コメント(5)
-
伊勢神宮の勾玉池へ満開の菖蒲園を見に行きました
伊勢市は菖蒲の花盛り。伊勢神宮の勾玉池に菖蒲を見に出かけました。凄い咲きっぷりでしょう。菖蒲（ショウブ）と似ているのはなんだっけ？杜若（カキツバタ）だっけ？菖蒲とアヤメは同じ花？アヤメって変換すると「菖蒲」。謎はいっぱいだけど、本当に満開で、満足度100点の咲きっぷりでした。モンシロチョウが沢山飛んでいたので、止まっている姿を撮りたかったのですが人がいると、少し遠くの菖蒲に移ってしまうんですよね。残念。菖蒲の花びらのつき方が、こんなにも違うんだ！とビックしました。ひらひらびらびらといっぱい花びらがあるように見える種類やとっても模範的な形をした種類、花びらの薄い種類や厚くてしっかりした種類など多種多様ですね。この写真も昨日のバラに劣らずなかなかの撮れ具合だと思ってるんですよ。どーですかー？＾＾；フレームに収まっているだけでも、かなりの菖蒲が咲き誇っているのがわかると思います。カメラを構えている私の姿を想像してくださいな。かなり、這い蹲っています（笑） ･････つづく【簡易テーブルタグ作成ツール】[Pit-Design]Webのツール素材置き場のVer1、Ver2をよろしくね。* HOME *明日からはまた、Web標準関連、悪戦苦闘のCSSレイアウトなどWebに関することを綴りますね。⇒人気blogランキング
2006/06/15
コメント(12)
-
終わりかけの薔薇を見に神宮会館ばら園へ
薔薇の季節は少し過ぎてしまったけど、ばら園へお出かけしてきました。終わりかけだったけど、薔薇の香りがしてリフレッシュできましたよ♪そういう効用ってあったっけかな～？写真は、撮ってきた中で一番綺麗で、一番気に入ったアングルのものなの。お花が見ている視点でフレームに収めるのが割りと好きです。これはちょっとズレちゃったかな～？でも、コントラストはなかなかでしょ＾＾薔薇の名前って、メチャメチャ種類がありますね。皇室の方のお名前がついた薔薇もありました。プリンセス・ミチコ、プリンセス・マサコ、プリンセス・アイコ。クリスチャン・ディオールってのもあったんですよ～びびっくりぃ～！！！名前だけのことはあります。かなり立派な真紅の赤色でした。こちらに、咲いている薔薇の品種がたくさん載っています。なんと楽天さんのショップでした＾＾検索して見つけてびっくりです。私の撮った薔薇はゴールドバニーのようですよ。金色のウサギさん？明日もお写真アップしまーす！菖蒲も見てきたのです＾＾ ･････つづく【簡易テーブルタグ作成ツール】[Pit-Design]Webのツール素材置き場のVer1、Ver2をよろしくね。* HOME *暑い一日でしたね。明日からお天気崩れるそうですよ。⇒人気blogランキング
2006/06/14
コメント(2)
-
bizドメインに関する規約
Web標準の教科書２冊目にピッタリのレベル。分厚いんだけどね、罫線に助けられる。手放せない私のバイブル。 bizドメインを取ろうと思って、お名前.comの規約を読んだの。で、「え！？」ってことが書いてあってね。正社員していたときですら、あんまり読んだことなかったのに。（っと、ちょっと暴露してみる。）「え！？」って思ったのはこの部分。【ドメインの決め事メモ：お名前.comより抜粋】http://www.onamae.com/other/agreement/registration/「商用利用に限定してドメイン名を使用することが可能であり」・・・んまぁ、ビジネス用のものだからね。（そうだよね？＾＾；）ということで、comドメインにしました。ドメイン取得に1000円かからないとは・・・個人用とか自分の会社だったらいいけどサービスとしてどうですか？とオススメするのは安すぎると気が引けてしまうのよね。んなこと言わずに、バシバシ行けぇ～って思いますか？ちなみに、お名前.comで取得していません。ドメイン取得するだけで、4000円近く。（信頼はできるのですが・・・）安いところなら、ドメイン取得料＋レンタルサーバ料がそんだけで賄えるよね。個人ユーザは節約なのです。 ･････つづく【簡易テーブルタグ作成ツール】[Pit-Design]Webのツール素材置き場のVer1、Ver2をよろしくね。* HOME *お金にならないお仕事します。請負人は辛いぜぇ～そんな私にポチッと⇒人気blogランキング
2006/06/13
コメント(4)
-
アクセス数、いつの間にやら９万カウント
Web標準の教科書２冊目にピッタリのレベル。分厚いんだけどね、罫線に助けられる。手放せない私のバイブル。HTMLポケットリファレンス改訂第5版ちょっとだけタグを覚えたらもっと沢山知りたくなるね。ポケットサイズでパソコン周りに置いてもお邪魔ムシにならないの。 今朝早くに超えたようです。広場の生活も長く続いたもんです。２年超えましたよ。最近では、広場の方より、外からの訪問者さんがグッと増えました。Web標準やら、スタイルシートやらのキーワードでいらっしゃるのでしょうか。日記にアクセス解析をつけていないのでサッパリわかりません＾＾；付けようかな。９万アクセスか～１０万まではどれくらいかかるでしょう。６月１２日からちょっと気にしてみよう！ちょっとムカつく（いえ、ちょっとどころではない！）ことがあったのですが、まぁ、いいこともあります＾＾これを励みに、涼しくなったら、お仕事します。今朝から全然はかどらなかった～！！昨日も書いたけど、やっぱりドメイン欲しい。それほど気張らなくてもコストパフォーマンス抜群（笑ってくれる人いるよね？）になったもんですね。年間４０００円くらいで運営できてしまう。マジで考えよう！運気がいいので、明日かな＾＾ ･････つづく【簡易テーブルタグ作成ツール】[Pit-Design]Webのツール素材置き場のVer1、Ver2をよろしくね。* HOME *日にちくらい守ってください。キチンとするのってそんなに難しいですか？これがムカつき原因のひとつです＾＾；⇒人気blogランキング
2006/06/12
コメント(0)
-
素晴らしいぞ！CSSレイアウトのテンプレート
Web標準の教科書２冊目にピッタリのレベル。分厚いんだけどね、罫線に助けられる。手放せない私のバイブル。HTMLポケットリファレンス改訂第5版ちょっとだけタグを覚えたらもっと沢山知りたくなるね。ポケットサイズでパソコン周りに置いてもお邪魔ムシにならないの。 朝の日課。Web標準をキーワードにしてブログサーフィン。今日はよい収穫がありました。Yahoo!のブログ検索でブログを読んで回るっていると「CSSでレイアウトされたtemplates。。」の記事に目がとまる。ここで紹介されていたCSSレイアウトのテンプレート配布サイトがとっても素晴らしい！９分割レイアウトに苦戦している私には、とっても有難かったの。お勉強をするには良いですよ。ソースコード、レイアウトサンプル（PDF、PSD）がダウンロードできます。このブログ、お気に入り行きです。テンプレート情報が配信されています。いろんなテンプレートがサクサクと作れるようになりたい。９分割レイアウト苦戦の特効薬を見つけるぞ！【お気に入り行きのブログ】 ブログ名：Trigger-off アドレス：http://trigger-off.seesaa.net/えぇ、あらためまして、おはようございます。６時前起床を始めて１０日目の朝です。いいですね。朝寝をしないって！毎朝、別ブログに日記を投稿しているんだけど夜になって、振り返ると、投稿したのが凄く前のように感じるくらい一日がたっぷりあります。早起き、万歳！ ･････つづく【簡易テーブルタグ作成ツール】[Pit-Design]Webのツール素材置き場のVer1、Ver2をよろしくね。* HOME *ブログサーフィンもなかなか！人気blogランキング
2006/06/12
コメント(2)
-
楽天市場って入力したら･･･
Web標準の教科書２冊目にピッタリのレベル。分厚いんだけどね、罫線に助けられる。手放せない私のバイブル。HTMLポケットリファレンス改訂第5版ちょっとだけタグを覚えたらもっと沢山知りたくなるね。ポケットサイズでパソコン周りに置いてもお邪魔ムシにならないの。 「らくてんいちば」って入力したら、どうやって変換されますか？私のキーボードはお馬鹿をしてくれました。「らくてんいちば」って入力したらね･･･「楽・市場」。あのぉ～どういう解釈しているんでしょうか？でも、この変換よくない？面白い。「楽・市場」ネーミングに著作権・・・いやネーミングは登録商標とかその類（たぐい）か＾＾「楽・トラベル」とか「楽・ショッピング」とか。あふぉぉ～なことを考えてしまいましたなんで「らくてんいちば」って入力していたか気になる？気にならないかな？（笑）アフィリエイトって何よ？っていうことについてSeesaaくんでタカタカ書いていたら、「楽・市場」になっちゃったの。化けたかと思った！今更何言ってんの？って言われそう。でもね～。実はよくわかってない。システム自体はわかってる。うん。わかってる。商品を売るって感じのじゃなくてなんか、こー、もっと違うスタイルを取れないかなと。そーでないと私には無理だわ。楽天とアマゾンしか登録してないから他のＡＳＰ？も登録しようかなと思いつつ器になるサイトがないことに気づいてしまった！独自ドメイン、レンタルサーバ・・・登録するかな～。ちょいと面白いドメイン名がスッポリ空き空き状態なんですわ。どこぞのホームページと混同しそうな気もしますが・・・気に入ってしまった・・・も・・・文句言われないよね？ドキドキなんだけど。 ･････つづく【簡易テーブルタグ作成ツール】[Pit-Design]Webのツール素材置き場のVer1、Ver2をよろしくね。* HOME *怪我した手が治ってまいりました。外れかかった皮膚が再生を試みています。そんな皮膚に応援を！人気blogランキング
2006/06/11
コメント(2)
-
【WinIEってやつは･･･編】脱テーブル！９分割マルチカラムレイアウトに再挑戦！
Web標準の教科書２冊目にピッタリのレベル。分厚いんだけどね、罫線に助けられる。手放せない私のバイブル。HTMLポケットリファレンス改訂第5版ちょっとだけタグを覚えたらもっと沢山知りたくなるね。ポケットサイズでパソコン周りに置いてもお邪魔ムシにならないの。 マルチカラムレイアウトには苦戦しますね＾＾；SeesaaBLOGをいじくっているんだけどなかなか手強いざんす。大分、わかってきたけど。あれ、意外と使えるわ～FC2のほうがカスタマイズしやすいかも･･･しれないな。なんだかね。独自ドメインが欲しくなってきた。いざ、取得しようと思うとドメイン名が･･･決まらない･･･ドメインが欲しいなって思ったのは、アレです。あっちこっちにある無料スペースやらブログのパスワードやらアドレスやら、なんやら･･･うざこくなってまいりまして（やや方言？）＾＾；さて、本題。前回まで、９分割のマルチカラムレイアウトに挑戦していて微妙に挫折気味な結末に終わっているんだけどちょっと進歩＾＾（アレはアレで使える部分もあるけど、９分割としては･･･）ほぼ、OKな状態までこぎつけました。一応、これでもヘンテコにはならないんだよね～けっど、ちょいーと違うの（Safariは未確認＾＾；）▲Windows Internet Explorer 6 以外▲Windows Internet Explorer 6ｴｪｯ!?(* □ )~~~~~~~~ ﾟ ﾟなんで、黒が出ないんでしょ。黒（black）は全体を囲ったdiv要素の背景に設定してある。グレー（gray）は中の段、top、sidebar_a、sidebar_b、middlebottom_left、bottom_rightに設定してあってシルバー(silver)はfooterに指定してあるんだよね。うみゅ～(´･ω･`)右下端っこを気をつけて使えばまずまず実用レベルだけどね～ソースコードは、こちらです。⇒９分割マルチカラムレイアウト ･････つづく【簡易テーブルタグ作成ツール】[Pit-Design]Webのツール素材置き場のVer1、Ver2をよろしくね。* HOME *ドメイン、どーしよー。そんな私にポチッと⇒人気blogランキング
2006/06/10
コメント(4)
-
脱テーブル！９分割マルチカラムレイアウトに挑戦！【メイン部（４）】ほぼ完結
だーっと来ました【手順８】。一応、今回で９分割マルチカラムレイアウト完成･･･のはず＾＾；「はず」の部分は最後で（滝汗）早速box_dを分割しましょ。【５】幅50%左に配置（bottom_left）【６】幅50%右に配置（bottom_right）もう左右に分割する方法はわかりますね？わからなかったら【手順４】から、おさらいしてみてね＾＾ではソースコードを。---------- XHTML---------- ： 省略 ：<!-- Main ++++++++++++++++++++++++++++ --><div id="box_a"> <div id="box_b"> <div id="box_c"> <div id="top">top</div> <div id="middle">middle</div> <div id="box_d"> <div id="bottom_left">bottom_left</div> <div id="bottom_right">bottom_right</div> <div class="clear"></div> </div> </div> <div id="sidebar_b">sidebar_b<br /><br /><br /></div> <div class="clear"></div> </div> <div id="sidebar_a">sidebar_a<br /><br /><br /></div> <div class="clear"></div></div> ： 省略 ：---------- CSS---------- ： 省略 ：div#box_d { width: 100%; background-color: #FFFF99;}div#bottom_left { float: left; width: 50%; background-color: #FFEEBB;}div#bottom_right { float: right; width: 50%; background-color: #FFCC99;} ： 省略 ：完成イメージ「navi<br /><br /><br /><br />」 「sidebar_a<br /><br /><br /><br />」 「sidebar_b<br /><br /><br /><br />」として簡易的に高さを変えてみました。ほぼ完成全ソースコードはこちら実は･･･ちょっと････イタダケナイ点が･･･ありまして･･･Windows Internet Explorer 6 ････ OKWindows Firefox 1.5 ････ OKWindows Opera 8.5 ････ OKWindows Netscape 7.1 ････ NGMacintosh Internet Explorer 5.1 ････ 微妙Macintosh Netscape 7.02 ････ NGなんです.....(((((/･o･)/ﾆｹﾞﾛｰ!!なんででしょう？何ででしょう？これが今の課題です。Web標準の教科書２冊目にピッタリのレベル。分厚いんだけどね、罫線に助けられる。手放せない私のバイブル。HTMLポケットリファレンス改訂第5版ちょっとだけタグを覚えたらもっと沢山知りたくなるね。ポケットサイズでパソコン周りに置いてもお邪魔ムシにならないの。【手順３】まで進めてあるソースコード諸々セットをアップしました。最初の準備が面倒っちぃ方へ＾＾ ⇒自己解答形式（exe/35KB） ⇒LZH形式（lzh/3KB）手順１：デフォルトソースコード／手順２：コンテナ名／手順３：まずは３分割／手順４：ヘッダー部左右２分割／手順５：メイン部（１）／手順６：メイン部（２）／手順７：メイン部（３） ･････つづく【簡易テーブルタグ作成ツール】[Pit-Design]Webのツール素材置き場のVer1、Ver2をよろしくね。* HOME *ひゃー！親指の付け根、内側？（手のひらの端）を1.5cmほどそぎ落としそうになりました。タイプするとき擦れて微妙に痛い！そんな私にポチッと⇒人気blogランキング
2006/06/09
コメント(0)
-
CSS：幅指定と余白の関係
幅を指定したときと指定しないときの違いのメモ。IEは指定すると幅100%に指定すると横スクロールが出る。MacもWinも同様。▲Interner Explorer（GIFアニメ。スクロールの様子）幅100%ごとpaddingが設けられる。▲Firefox（IE以外はＯＫの様子）幅100%の内側で、paddingが設けられる。ありゃー！タブがいっぱい表示されたままスクリーンショットを撮ってしまった！ご愛嬌ということでご勘弁を＾＾；これ、ＮＧの例---------- XHTML---------- ：<body><div id="container"> <div id="content">content</div> <div id="sidebar">sidebar</div></div></body> ：---------- CSS----------div#container { width: 100%; padding-left: 150px;}div#content { float: left; width: 70%; height: 50px; background-color: #FFCC99;}div#sidebar { float: right; width: 30%; height: 50px; background-color: #FF9900;}これ、ＯＫの例 ---------- XHTML ---------- ： <body><div id="container"> <div id="content">content</div> <div id="sidebar">sidebar</div> </div> </body> ： ---------- CSS ---------- div#container { padding-left: 150px; } div#content { float: left; width: 70%; height: 50px; background-color: #FFCC99; } div#sidebar { float: right; width: 30%; height: 50px; background-color: #FF9900; }Web標準の教科書２冊目にピッタリのレベル。分厚いんだけどね、罫線に助けられる。手放せない私のバイブル。HTMLポケットリファレンス改訂第5版ちょっとだけタグを覚えたらもっと沢山知りたくなるね。ポケットサイズでパソコン周りに置いてもお邪魔ムシにならないの。 ･････つづく【簡易テーブルタグ作成ツール】[Pit-Design]Webのツール素材置き場のVer1、Ver2をよろしくね。* HOME *医龍見逃しました･･･お慰みにおひとつ⇒人気blogランキング
2006/06/09
コメント(2)
-
脱テーブル！９分割マルチカラムレイアウトに挑戦！【メイン部（３）】
サクサクッと【手順７】へ行っちゃいましょ。では、今回はbox_cを三段積むように設定。【３】を幅100%に設定（top）【４】を幅100%に設定（middle）【５】【６】セットを幅100%に設定（box_d） 前回のソースの<div id="box_c">box_c</div>のテキスト部分「box_c」にdiv要素を３つ追加すればOKなのよん＾＾えぇっと誤解がないように･･･例えば「【３】を幅100%に設定（top）」ってのはbox_cの幅に対してtopの幅が100%ってことね。ページ全体の100%ではないのでご注意を実際にソースコードを見てましょ。コンテナ名が違うだけで、み～んな設定は一緒！---------- XHTML（index.html）---------- ： 省略 ：<!-- Main ++++++++++++++++++++++++++++ --><div id="box_a"> <div id="box_b"> <div id="box_c"> <div id="top">top</div> <div id="middle">middle</div> <div id="box_d">box_d</div> </div> <div id="sidebar_b">sidebar_b</div> <div class="clear"></div> </div> <div id="sidebar_a">sidebar_a</div> <div class="clear"></div></div> ： 省略 ：---------- CSS（original.css） ---------- ： 省略 ：div#box_c { float: left; width: 75%;}div#sidebar_b { float: right; width: 25%;}div#top { width: 100%;}div#middle { width: 100%;}div#box_d { width: 100%;} ： 省略 ：完成イメージ「navi<br /><br /><br /><br />」 「sidebar_a<br /><br /><br /><br />」 「sidebar_b<br /><br /><br /><br />」として簡易的に高さを変えてみました。Web標準の教科書２冊目にピッタリのレベル。分厚いんだけどね、罫線に助けられる。手放せない私のバイブル。HTMLポケットリファレンス改訂第5版ちょっとだけタグを覚えたらもっと沢山知りたくなるね。ポケットサイズでパソコン周りに置いてもお邪魔ムシにならないの。【手順３】まで進めてあるソースコード諸々セットをアップしました。最初の準備が面倒っちぃ方へ＾＾ ⇒自己解答形式（exe/35KB） ⇒LZH形式（lzh/3KB）手順１：デフォルトソースコード／手順２：コンテナ名／手順３：まずは３分割／手順４：ヘッダー部左右２分割／手順５：メイン部（１）／手順６：メイン部（２） ･････つづく【簡易テーブルタグ作成ツール】[Pit-Design]Webのツール素材置き場のVer1、Ver2をよろしくね。* HOME *人気blogランキングに登録してみたんだけど･･･＾＾；
2006/06/08
コメント(0)
-
脱テーブル！９分割マルチカラムレイアウトに挑戦！【メイン部（２）】
ジャン！ジャン！ジャン！と【手順６】。今回はbox_bを分割。この部分も前回と考え方は同じなのでコピペでほぼ完成＾＾前回のソースの<div id="box_b">box_b</div>のテキスト部分「box_b」に書き込むの。ちょっと分割パーセントを変更して設定してみましょ。【３】～【６】セットの幅をページ全体の75%、左側に配置（box_c）【７】の幅をページ全体の25%、右側に配置（sidebar_b）ソースコードはこれ（赤字部分が追加箇所）----------XHTML(index.html)---------- ： 省略 ：<!-- Header ++++++++++++++++++++++++++ --><div id="header"> <div id="title">title</div> <div id="navi">navi</div> <div class="clear"></div></div><!-- Main ++++++++++++++++++++++++++++ --><div id="box_a"> <div id="box_b"> <div id="box_c">box_c</div> <div id="sidebar_b">sidebar_b</div> <div class="clear"></div> </div> <div id="sidebar_a">sidebar_a</div> <div class="clear"></div></div><!-- Footer ++++++++++++++++++++++++++ --><div id="footer">footer</div> ： 省略 ：----------CSS(original.css)---------- ： 省略 ：div#box_a { width: 100%;}div#box_b { float: left; width: 80%;}div#sidebar_a { float: right; width: 20%;}div#box_c { float: left; width: 75%;}div#sidebar_b { float: right; width: 25%;} ： 省略 ：完成イメージのようになったらOK！完成イメージ「navi<br /><br /><br /><br />」 「sidebar_a<br /><br /><br /><br />」 「sidebar_b<br /><br /><br /><br />」として簡易的に高さを変えてみました。Web標準の教科書２冊目にピッタリのレベル。分厚いんだけどね、罫線に助けられる。手放せない私のバイブル。HTMLポケットリファレンス改訂第5版ちょっとだけタグを覚えたらもっと沢山知りたくなるね。ポケットサイズでパソコン周りに置いてもお邪魔ムシにならないの。【手順３】まで進めてあるソースコード諸々セットをアップしました。最初の準備が面倒っちぃ方へ＾＾ ⇒自己解答形式（exe/35KB） ⇒LZH形式（lzh/3KB）手順１：デフォルトソースコード／手順２：コンテナ名／手順３：まずは３分割／手順４：ヘッダー部左右２分割／手順５：メイン部（１） ･････つづく【簡易テーブルタグ作成ツール】[Pit-Design]Webのツール素材置き場のVer1、Ver2をよろしくね。* HOME *ア・・・アフィリエイトって何だっけ？＾＾；む・・・昔聞いたような＾＾；彼方もすなるアフィリエイトというものをワタシもしてみんとてするなり。
2006/06/08
コメント(0)
-
生ですか？牛ですか？
たまには駄ネタもいいでしょう。ネットで騙されたんです･･･＾＾； 牛 騙した犯人です。この犯人さん、何て読みますか？「牛」ですか？「生」ですか？すっかり騙されました（笑） Web標準の教科書２冊目にピッタリのレベル。分厚いんだけどね、罫線に助けられる。手放せない私のバイブル。HTMLポケットリファレンス改訂第5版ちょっとだけタグを覚えたらもっと沢山知りたくなるね。ポケットサイズでパソコン周りに置いてもお邪魔ムシにならないの。 脱テーブル！９分割マルチカラムレイアウトに挑戦！連載中！ 【手順３】まで進めてあるソースコード諸々セットをアップしました。最初の準備が面倒っちぃ方へ＾＾ ⇒自己解答形式（exe/35KB） ⇒LZH形式（lzh/3KB） 手順１：デフォルトソースコード 手順２：コンテナ名 手順３：まずは３分割 ･････つづく【簡易テーブルタグ作成ツール】[Pit-Design]Webのツール素材置き場のVer1、Ver2をよろしくね。* HOME *今朝も早起き６時前＾＾
2006/06/08
コメント(1)
-
脱テーブル！９分割マルチカラムレイアウトに挑戦！【メイン部（１）】
floatに悩みつつ･･･【手順５】へ参りましょう。今回はメイン部。box_aを左右に分割します。でも、ちょっと失敗してみましょう。【３】～【７】セットの幅をページ全体の80%、左側に配置（box_b）【８】の幅をページ全体の20%、右側に配置（sidebar_a）※番号はこちら参照この設定、【手順４】とそっくり！ラッキー☆コピペでいいね～！名前だけ変更して･･･えっちらほっちら･･･（緑の太字部分をコピーして、赤の太字部分へペーストして･･･）･･･と思って作業を進める･･･----------XHTML(index.html)---------- ： 省略 ：<!-- Header ++++++++++++++++++++++++++ --><div id="header"> <div id="title">title</div> <div id="navi">navi</div></div><!-- Main ++++++++++++++++++++++++++++ --><div id="box_a"> <div id="box_b">box_b</div> <div id="sidebar_a">sidebar_a</div></div><!-- Footer ++++++++++++++++++++++++++ --><div id="footer">footer</div> ： 省略 ：----------CSS(original.css)----------div#header { width: 100%;}div#title { float: left; width: 80%;}div#navi { float: right; width: 20%;}div#box_a { width: 100%;}div#box_b { float: left; width: 80%;}div#sidebar_a { float: right; width: 20%;}div#footer { width: 100%;}でっきたかな？できたかな？IE（Internet Explorer）・・・OK！v(≧∇≦)v いえぇぇぇぇいっ♪Firefoxはっっと････ 表示結果撃沈図 崩れ具合がわかりやすいようにXHTMLのソースコードに「navi<br /><br /><br /><br />」「sidebar_a<br /><br /><br /><br />」として簡易的に高さを変えてみました。わかりやすいように、背景色を設定しています。headerにはblack、box_aにはgrayfooterにはsilverを設定しました。（他は記載を省略します）見えてないし、崩れまくり！これになって欲しいのこれに！ こちらも同様に簡易的に高さを設けています。えぇと･･･直さなくちゃ！直さなくちゃ！どこ直す？んー。floatで配置をするときには、注意が必要なんでございまする。知らんかった･･･というか理解してなくて失敗したのが･･･（過去の産物）で、わかった！魔法をかけてあげないとイカンのです。私にとっては魔法＾＾ clear:both; クリアーボスの登場です！勝手にそう呼んでます（笑）このお方が調整してくれるんです。一段終わったらclear:both。一段終わったらclear:both。うん。この例で言うとtitle、naviが終わったらclear:both。box_b、sidebar_aが終わったらclear:both。回り込みを解除してあげるのです。そう、今までのことはなかったことにしてくれ･･･と命令してあげるの。floatで左右に振ったときはclear:bothで回り込みを解除すると覚えればいいね。は～。スッキリスッキリ長々とスンマセン。手直ししたソースコードを下に書きます。（赤い太字が追加場所）----------XHTML(index.html)---------- ： 省略 ：<!-- Header ++++++++++++++++++++++++++ --><div id="header"> <div id="title">title</div> <div id="navi">navi</div> <div class="clear"></div></div><!-- Main ++++++++++++++++++++++++++++ --><div id="box_a"> <div id="box_b">box_b</div> <div id="sidebar_a">sidebar_a</div> <div class="clear"></div></div><!-- Footer ++++++++++++++++++++++++++ --><div id="footer">footer</div> ： 省略 ：----------CSS(original.css)----------div#header { width: 100%;}div#title { float: left; width: 80%;}div#navi { float: right; width: 20%;}div#box_a { width: 100%;}div#box_b { float: left; width: 80%;}div#sidebar_a { float: right; width: 20%;}div#footer { width: 100%;}div.clear { clear: both;}お疲れ様でした～ワタシ＾＾；<div class="clear"></div>って空タグ（要素）になっちゃうのが心地悪いんだけど･･･なんとかならんかね＾＾；この辺りのお勉強をするのに「Horio's home page スタイルシートの使い方」がとってもわかりやすい！テキストを読んでもリファレンスを見てもカシコマッタ文書を読んでもぼや～んとしかわからなかったんだけれどここは図解つきで、頭にパッと入った感じがするんよ。ちょいと長いけど、フロートレイアウトってトコロを参考するとイイコトあるかも？Web標準の教科書２冊目にピッタリのレベル。分厚いんだけどね、罫線に助けられる。手放せない私のバイブル。HTMLポケットリファレンス改訂第5版ちょっとだけタグを覚えたらもっと沢山知りたくなるね。ポケットサイズでパソコン周りに置いてもお邪魔ムシにならないの。【手順３】まで進めてあるソースコード諸々セットをアップしました。最初の準備が面倒っちぃ方へ＾＾ ⇒自己解答形式（exe/35KB） ⇒LZH形式（lzh/3KB） 手順１：デフォルトソースコード 手順２：コンテナ名 手順３：まずは３分割 手順４：ヘッダー部左右２分割 ･････つづく （次回はbox_bを刻んでみましょ。）【簡易テーブルタグ作成ツール】[Pit-Design]Webのツール素材置き場のVer1、Ver2をよろしくね。* HOME *ここ終わったら仕事に戻ります＾＾；キャー！そっちのけ＾＾；
2006/06/07
コメント(0)
-
増えてる！Web標準関連検索ワード
毎朝チェックしている「Web標準」登録サイト&ブログ。何ヶ月か前までは「Web標準」で検索しても関連検索ワードは列挙されていませんでした。これ、Yahoo!検索の話ね＾＾；で、少し前に「ホームページ制作 web標準」になって数日前？に「ホームページ制作 web標準, web標準 xhtml」になったの。増えた！ん？注目度がアップしている？浸透してきている？あるキーワードを追っているとこういうことがわかるんですね。ちょっと面白いじゃないか＾＾Web標準の教科書２冊目にピッタリのレベル。分厚いんだけどね、罫線に助けられる。手放せない私のバイブル。HTMLポケットリファレンス改訂第5版ちょっとだけタグを覚えたらもっと沢山知りたくなるね。ポケットサイズでパソコン周りに置いてもお邪魔ムシにならないの。 ･････つづく【簡易テーブルタグ作成ツール】[Pit-Design]Webのツール素材置き場のVer1、Ver2をよろしくね。* HOME *起床時間５時４５分。４日連続６時前起床。朝の時間がたっぷりで有効利用できます！v(≧∇≦)v いえぇぇぇぇいっ♪
2006/06/07
コメント(4)
-
脱テーブル！９分割マルチカラムレイアウトに挑戦！【ヘッダー部】
お月様が綺麗ですね。月を見ながら【手順４】へ。【手順４】ヘッダー部分を作る（２分割）･･･【１】【２】 ⇒レイアウト図はこちら参照前回の記事で足掻いた（あがいた）ことは置いておいてheaderの中身を組んでいきましょっと。【１】の幅をページ全体の80%、左側に配置（title）【２】の幅をページ全体の20%、右側に配置（navi）この設定をする。このタイプ（floatで指定する）の設定はmarginやらpaddingを指定しないほうが･･･前者、周りに余白作ります。後者、内側に作るけれど、押し出します･･･ シタカッタラ、イレコ、イレコデスカ。コノタイプ。 イタインデスカ･･･アリャ！ シッパイシテモオコランデネ！赤い太字部分が今回の追加箇所よ＾＾---------- XHTML(index.html)---------- ： 省略 ：<!-- Header ++++++++++++++++++++++++++ --><div id="header"> <div id="title">ヘッダー：タイトル</div> <div id="navi">ヘッダー：ナビ</div></div> ： 省略 ：---------- CSS(original.css)----------div#header { width: 100%;}div#title { float: left; width: 80%;}div#navi { float: right; width: 20%;}div#box_a { width: 100%;}div#footer { width: 100%;}早起きすると一日が長いです。いっぱい色んなことができて一石二鳥です。「早起きは三文の徳」という言葉があります。んとぉ～「三文の得」だと思っていた私は、あふぉ～です。これに懲りずに明日も早起きしたいと思います。はぁ～腹減ったぞ～！！！（笑）Web標準の教科書２冊目にピッタリのレベル。分厚いんだけどね、罫線に助けられる。マーカー引いて、しっかり学べる。手放せない私のバイブル。HTMLポケットリファレンス改訂第5版ちょっとだけタグを覚えたらもっと沢山知りたくなるね。ポケットサイズでパソコン周りに置いてもお邪魔ムシにならないの。【手順３】まで進めてあるソースコード諸々セットをアップしました。最初の準備が面倒っちぃ方へ＾＾ ⇒自己解答形式（exe/35KB） ⇒LZH形式（lzh/3KB） 手順１：デフォルトソースコード 手順２：コンテナ名 手順３：まずは３分割 ･････つづく （次回はbox_aの部分を刻んで見たいと思います）【簡易テーブルタグ作成ツール】[Pit-Design]Webのツール素材置き場のVer1、Ver2をよろしくね。* HOME *お仕事で１時間ほどロスしました。でも３日かかるかな？って思っていたことが･･･（＾＾）v
2006/06/06
コメント(0)
-
CSS：背景にまつわるエトセトラ
マルチカラムのレイアウトが自由自在に操れたら素敵じゃない？もちろんCSSで設定したもので。Web標準目指すならテーブルレイアウト( ｡･･)/⌒□ﾎﾟｲ 「脱テーブル！９分割マルチカラムレイアウトに挑戦！」ってことで色々とお試ししながらレポートを書いているんだけど背景で詰まった！まさかこんなところで詰まるとは！お試しで下のソースコードでテストしたら･･･こんなになりました･･･（黒枠はつけていません<(_ _)>）bodyにはwhite（白）が指定してあるのよ。でもheader（【１】【２】セット）にもbox_a（【３】～【８】セット）にもfooter（【９】）にも#CCCCCC（薄いグレー）が指定してあるの。んで、titile（【１】）には#FFCC99（桃色？）navi（【２】）には#F7E6BD（薄いピンク）が指定してある。※番号はこちら参照background-colorの規定値はtransparent（透明）だからtitileの下の空白部分は･･･薄いグレーになるんじゃないのかいっ！そー思うんだけど、ところがドッコイ！div要素って形無き枠って感じだからね。bodyに指定してある背景色の白色が透けて見えるんだろうね。WinIE6だけは･･･透けないで薄いグレーなんだけど･･･＾＾；実際に使うときは、headerに背景色を指定することは･･･ないだろうから＾＾；んまぁ、いいかな。お試しソースコード---------- XHTML----------<div id="header"><div id="title">ヘッダー：タイトル</div><div id="navi">ヘッダー：ナビ<br />ヘッダー：ナビ<br />ヘッダー：ナビ<br />ヘッダー：ナビ<br /></div></div>---------- CSS----------body { background-color: white;}div#header { width: 100%; background-color: #CCCCCC;}div#title { float: left; width: 50%; background-color: #FFCC99;}div#navi { float: right; width: 50%; background-color: #F7E6BD;}div#box_a { width: 100%; clear: both; background-color: #CCCCCC;}div#footer { width: 100%; background-color: #CCCCCC;}騒いでばっか？で申し訳ないので（笑）【手順３】まで進めてあるソースコード諸々セットをアップしました。最初の準備が面倒っちぃ方へ＾＾ ⇒自己解答形式（exe/35KB） ⇒LZH形式（lzh/3KB） 手順１：デフォルトソースコード 手順２：コンテナ名 手順３：まずは３分割Web標準の教科書２冊目にピッタリのレベル。もうちょっと知りたいんだけど･･･キチンとしたサイト作りをしたいんだけど･･･こんな望みに応えてくれる私のバイブル。HTMLポケットリファレンス改訂第5版ちょっとだけタグを覚えたらもっと沢山知りたくなるね。ポケットサイズでパソコン周りに置いてもお邪魔ムシにならないの。ちょっと気になることがあるんだけど。titileとnaviの境にborderじゃなくて境界線を小細工したかったらどうするんだろう・・・こりゃ課題だぜっ！ ･････つづく （headerを分割のソースを整理して次の記事に書くよ～）【簡易テーブルタグ作成ツール】[Pit-Design]Webのツール素材置き場のVer1、Ver2をよろしくね。* HOME *過ごしやすい一日でした＾＾
2006/06/06
コメント(4)
-
脱テーブル！９分割マルチカラムレイアウトに挑戦！【まずは３分割】
【手順３】上（ヘッダー）、中（メイン）、下（フッター）部分を組み立てる。えっと、「デフォルトソース」のXHTMLのところを見てbody要素の中身に注目。上中下の横３分割レイアウトのXHTMLソースコードはこんな感じ。（ソース内コメントは削除してあります。）レイアウトのための枠組みにはid要素で指定するのが常道！（id属性とclass属性の違いはこちらを参照）id属性の値は、手順２で名付けたコンテナ名を指定するの。あ！既に指定済みなんだけど。ソースちゃん＾＾；【１】【２】セットの「header」、【３】～【８】セットの「box_a」【９】の「footer」が今回設定する横３分割レイアウト該当箇所だよ。<body><div id="header">ヘッダー</div><div id="box_a">メイン</div><div id="footer">フッター</div></body> 手順１の階層構造を参照して、index.htmlに保存してね。続いて、CSSの設定に行ってみよう！やってみよう！簡単に、ページ幅いっぱいのレイアウトにするね。中央寄せにしたい！とかそいうのは後回し。日記やトップページの目次には、ヒントがあるよ！下の設定は、幅いっぱい「width:100%」の書き方。（X）HTMLでid要素に指定するときは、「#」を付けんの。頭に「div」って付いているのは、「div要素の」って意味。だから「div#header」の例で言うと「div要素のクラス名headerさんに幅100%の設定をしますよ～」って命令を書いているわけ。簡単ね＾＾div#header { width: 100%;}div#box_a { width: 100%;}div#footer { width: 100%;}手順１の階層構造を参照して、original.cssに保存してね。今朝の起床時間は５時。最近、早起きさんなんだ！ちょっと時間の使い方が変わってきた！午前中と夕方日が落ちてからが私の主な活動時間。日中はちょっと暑くてダレちゃうから勝手に集中できることや雑多事をする時間にしたの。これ、なかなか快適よ ･････つづく （次はheaderを分割！）【簡易テーブルタグ作成ツール】[Pit-Design]Webのツール素材置き場のVer1、Ver2をよろしくね。* HOME *やりたいことが明確になると早起きもできる！
2006/06/06
コメント(0)
-
脱テーブル！９分割マルチカラムレイアウトに挑戦！【コンテナ名】
続いて、手順２です。【手順２】まずは、各部分（コンテナ）のお名前を決める。９つ決めるだけでは駄目。【１】と【２】を統合するセット。【３】～【８】を統合するセット。さらに【３】～【７】を統合するセット･･･ってな感じでセットにも名前をつけてあげないといけません。早速セットとそれぞれにお名前をφ(￣∇￣o)ゞ ｶｷｶｷこの名前を使って、CSSでは「div#header {}」XHTMLでは「<div id="header">」みたい記述します。【各部分に名前をつける】【１】【２】セットheader 【７】sidebar_b【１】title 【３】top【２】navi 【４】middle【３】～【８】セットbox_a 【５】【６】セットbox_d【３】～【７】セットbox_b 【５】pin_right【８】sidebar_a 【６】pin__left【３】～【６】セットbox_c 【９】footerさっき裏庭に呼ばれました。いえ、悪いことをしたわけではありません＾＾；「ピーマンが生っとる！ピーマンが虫に食われた！」と父上様が叫ぶので。虫がよっぽど憎かったのでしょうか？ダンゴムシまでハサミで真っ二つ！残酷じゃ～ね～か？ ･････つづく【簡易テーブルタグ作成ツール】[Pit-Design]Webのツール素材置き場のVer1、Ver2をよろしくね。* HOME *嬉しいことがありましたＶ(○⌒∇⌒○) ﾙﾝﾙﾝ
2006/06/05
コメント(0)
-
脱テーブル！９分割マルチカラムレイアウトに挑戦！【デフォルトソースコード】
只今よりマルチカラムレイアウト実践！９分割のレイアウトを頭の中で考えて、適当に作ったら失敗したので（笑）ちゃんと考えて作ってみたいと思いまする。これ（↓）下地レイアウト。考え方としては、これ参照 ⇒ ９分割レイアウトを頭で考えるときのイメージ図【手順１】ＸＨＴＭＬのデフォルトソースコードと 外部スタイルシートを設定する。Web標準に準拠した正しいサイトを作るために必要不可欠なデフォルトソースコード。これ、いっつも迷います。何回疑問に思ったことか･･･私が良いと思った基本のデフォルトソースをここにメモしておきます＾＾青い文字（<!-- -->部分）はコメント文なので削除してよいです。赤い文字は環境に合わせて変更して記述します。細かい説明は、省略します。【デフォルトソースコード】---------- 階層構造---------- ├index.html ├sitemap.html ├css ├set.css ├cmn.css ├original.css---------- XHTML（index.html）----------<?xml version="1.0" encoding="Shift_JIS"?><!--xml宣言があるとWinIE6の実装不備の問題にブチ当たる。CSSハックなどの方法で対処すべし！--><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja"><head><meta name="ROBOTS" content="ALL" /><title>XHTML1.1+CSSのデフォルトソース</title><meta name="description" content="説明文を記述。Yahoo!はこのまま登録されることが多い。" /><meta name="keywords" content="半角カンマ区切りでキーワードを記述。同義語、同類語、頻繁に使われるキーワードが好ましい。" /><link rel="contents" href="./sitemap.html" title="サイトマップ" /><link rel="start" href="./index.html" title="トップページ" /><link rel="stylesheet" type="text/css" media="all" href="./css/set.css" /></head><body><!-- Header ++++++++++++++++++++++++++ --><div id="header">ヘッダー</div><!-- Main ++++++++++++++++++++++++++++ --><div id="box_a">メイン</div><!-- Footer ++++++++++++++++++++++++++ --><div id="footer">フッター</div></body></html>---------- CSS(./css/set.css)----------@import "cmn.css";@import "original.css";⇒ソースコードはこっちにもあり！ ･････つづく【簡易テーブルタグ作成ツール】[Pit-Design]Webのツール素材置き場のVer1、Ver2をよろしくね。* HOME *マルチカラム、きちっとメモしようと思うと難しいね。手順２へ進む･･･
2006/06/05
コメント(0)
-
Let's Web 標準！マウスイベントとキーイベントはセットで記述する
お仕事でJavascriptを使ったサンプルを作りました。話をするのに、モノがあったほうがわかりやすいからね＾＾ ⇒日付算出テスト試作品 http://pit-design.hp.infoseek.co.jp/tools/date.htmlHTML4.01Strictで組んでいます。試作だから、コードにはあまり気を遣わないで書いたんだけどちょっと気になってAnother HTML-lint gatewayで構文チェック。うひょー！イベントハンドラの指定のところで怒られた（フォームのコントロールのところでも警告を受けたけど試作ってご了承ください<(_ _)>）（CSSとJavascriptは本来、外部ファイルにすべきところですが、１ページで収めなくてはならなかったので組み込みにしています） onClick属性と合わせてonKeyPress属性も使いなさい！なるほどね～。マウスイベントとキーイベントはセットで使いなさいってことね。Tab操作でイエイエイエッってするわ。そういえば＾＾；【組み込みイベントを書くときの注意】 マウスイベントとキーイベントはセットで記述すること。onClick + onKeyPressonMouseDown + onKeyDownonMouseUp + onKeyUp記述例<input name="button" type="button" onClick="event()" onKeyPress="event()" value="実行">※ XHTMLだと、要素も属性もすべて小文字で書くべきなんだけどHTML4.01ではOKなのよん＾＾YOSHIKIが話題ですか？１０年近く潜っていたように思いますが？VIOLET UKが世界中で注目を浴びているようです。ふむふむとアクセスしてみました。http://www.yoshiki.net/彼、いくつですか？老けないんですか？彼の世界は芸術ですか？話題の音源はMYSPACE MUSIC -VIOLET UK- で聴けます。うん。なんか、こう、世界に引きずり込まれそうななんとも、不思議な印象でございまする。ちなみにX-JAPANの曲ではSay Anythingが好きです。今までで一番好きなナンバーですぅ～ ･････つづく【簡易テーブルタグ作成ツール】[Pit-Design]Webのツール素材置き場のVer1、Ver2をよろしくね。* HOME *Say Anythinが好きになったきっかけは同級生がアホくらい上手に歌っていたのを聴いたから～
2006/06/04
コメント(0)
-
Let's Web標準！脱テーブル！９分割マルチカラムレイアウトに挑戦！
「Web標準の教科書」を読み終えたので、試しにマルチカラムのレイアウトを。枠を区切るのは、まずまずできるようになったけどピッチリと作りこむのは、まだまだ。（↓）試作品のスクリーンショット感想･･･上下余白（margin/padding）の制御はイケルけれど左右余白の設定は、ボーダーやその他の余白との絡みで難しい･･･スクリーンショットはFirefoxとOperaだけしかOKになっていないのね～だ・か・ら！じっくりと考えてみるために、ワタシ宛に解説＾＾マルチカラムの下地レイアウト（こういうの何て言うんだろ？）はこんな感じ。ガチャコン！ガチャコン！と動いているけど頭の中ではこんなこと考えているってイメージを掴もうと思ってGIFアニメ。「STEP-1-」～「STEP-7-」までの順番で考えるのね。CSSに書く順番もこれで行っています。全部で９つのエリアに分かれている、マルチカラムレイアウトに挑戦！ひとつずつ、課題を潰していこうと思いまする。 ･････つづく【簡易テーブルタグ作成ツール】[Pit-Design]Webのツール素材置き場のVer1、Ver2をよろしくね。* HOME *Seesaaブログが随分高機能になっている！秘密で再開しちゃいました(*￣ ￣)bん？再開したこと書いたっけ？
2006/06/03
コメント(5)
-
CSSプロパティの継承と要素の入れ子
「CSSの基本とセレクタの種類」で触れた子セレクタの適用範囲の謎。解ーけーたー【CSSを適用するときの注意】のことがわかってなかった。それが理由のひとつ。あと、透けて見える･･･とか、そういうものがあるんだな～【CSSを適用するときの注意】HTMLにおける注意点インライン要素の中にブロック要素は含められない。CSSを設定するときの注意点親レベルで設定されたプロパティは子孫レベルに継承される。（一部を除く）ワタシを悩ませ続けた子セレクタの適用範囲の謎。ここに明らかになった！あの日の日記で「文字の色が赤になっていた」のは継承されていたのね。なるほどぉ～【子セレクタの適用範囲】「子要素」は「孫要素」の入れ子になっている。colorプロパティは値を「継承する」プロパティなので「子要素」「孫要素」ともに、文字色は「#FF0000」。text-decorationは値を「継承しない」プロパティなので「孫要素」にはunderlineが無効になるように思う。しかし、入れ子になっているので上位のspan要素で適用されたunderlineの上に乗っかっていると考えるとunderlineが透けて見えることになるのでunderlineが有効になっているように表示される。下のソースで出来上がるイメージは上図の感じね。子要素で終点までのアンダーラインが引かれるんだね＾＾；--------- CSS---------div.report>span{ color:#FF0000; text-decoration: underline;}--------- HTML---------<div class="report"><span>子要素<span>孫要素</span></span></div>ダ・ヴィンチ・コード（上）読み終えました。えろぉ～時間がかかりました（笑）面白いね。色んなことが知れる楽しさってのもある。次を読み進めるのが楽しみでござりまする。 ･････つづく【簡易テーブルタグ作成ツール】[Pit-Design]Webのツール素材置き場のVer1、Ver2をよろしくね。* HOME *子セレクタ、継承、わかった～☆スッキリ☆
2006/06/02
コメント(0)
-
楽天広場で「サイトマップ」「検索窓」「パンくずリスト」を作る
「サイトマップ」「検索窓」「パンくずリスト」。わからないキーワードはありますか？「富士通ウェブ・アクセシビリティ指針」を読むと出てくる言葉。Web標準を考える上でこのページはとっても役に立つと思いまする。画像付きで、わかりやすい！ユーザに向けて提供している指針なのでしょうね。社内でも共有できる決め事っかな。昨日の『意外と使える「ペイント」+「ワードパッド」』の小技ちゃんを使って私のバイブル「Web標準の教科書」に補足したの。どうも最近、Web標準！Web標準！と耳にすると思ったらJISで規格化されたんね。知らんかったJIS検索ってのも始めて使ったよ～高齢者・障害者等配慮設計指針－情報通信における機器，ソフトウェア及びサービス－第３部：ウェブコンテンツ[JISX8341-3]URL：http://www.jisc.go.jp/app/pager?id=28875--追記--スミマセン。URLではアクセスできないようです。検索窓に「X8341-3」と入れて検索してください<(_ _)>おっと、本題ズレた<(_ _)>上にあげた「サイトマップ」「検索窓」「パンくずリスト」。これ、楽天広場でも実現できまする。まず、サイトマップ。フリーページだけなら、サイドバーに表示しちゃえばOKだよね。でも、計画的にフリーページを作らないと表示させたくないページ（準備中だったり、試作だったり）まで表示されちゃう。んならば、フリーページに「サイトマップ」ってページを作ればよろしぃ。未完成ではありますが、サンプル程度に作ってみました。これっくらいのサイトマップなら、タグで一生懸命作らなくても高機能エディタだけで十分に作れますよん＾＾ ⇒サイトマップのサンプルページ【楽天広場のフリーページにサイトマップを作る！】 高機能エディタの機能を有効活用しましょうね。投稿欄に以下の手順で入力して作ってみましょ。「サイトマップ」と入力して「Enter」キーを押す。「←トップページへ戻る」と入力して「Enter」キーを押す。「水平線」（上段、右から４つ目のボタン）を押す。「プロフィール」と入力して「Enter」キーを押す。以下、「日記」や「リンク」などお好みで＾＾「水平線」を押す。フリーページで作ったページのタイトルを入力して「Enter」キーを押す。表示させたい分だけ、同じコトを繰り返す。「水平線」を押す。入力した「サイトマップ」を選択（反転）して、「-フォーマット-」の「見出し（大１）」なりお好みで選択。入力した「トップページへ戻る」を選択して、「URL」を押す。あなたのトップページのURL（アドレス）を入力。入力した「プロフィール」から「（サンプルで言うと）楽天アフィリエイターさんへ10の質問」を選択して、「リスト」（上段、右から６つ目）を押す。フリーページの分も「10.」と同じようにする各ページに「URL」を設定してできあがり「URL」の設定はわかりますね？「9.」を参考に＾＾新しくサイトマップ用のフリーページを作って、高機能エディタで作ったソース（エディタに切り替えるとソースがある）をコピーして貼り付ければ立派なサイトマップの完成続いて、検索窓。これは、簡単！楽天広場にその機能が付いてます＾＾「キーワードサーチ」ってヤツね。検索してもらうまでもないわ･･･って思ったら付けなくてもいいと思いますけど･･･ジャンルに特化したブログや情報が豊富なサイトだったら欲しいトコロね。GoogleさんやYahoo!さんには検索窓を設置するためのツールがあるの。残念ながら、広場にはつけられない･･･けど＾＾； ⇒Google検索窓 ⇒Yahoo!検索窓最後にパンくずリスト。これ、聞きなれないかな。サイト内の現在地がわかるモノですよん。たとえば「トップページ > Web標準 > テンプレート」みたいな感じね。リンクも設定してあげると、なお、よろしい。フリーページを作るときには、付けてあげたらやさしいホームページに一歩近づくよね。「サイトマップ」「検索窓」「パンくずリスト」はやさしいホームページにするための機能たちってことでござりまする。...(◎◎ﾍ) ﾎｫﾎｫ... ･････つづく【簡易テーブルタグ作成ツール】[Pit-Design]Webのツール素材置き場のVer1、Ver2をよろしくね。* HOME *今日は天気がイマイチですな
2006/06/02
コメント(3)
-
送料込み800円未満で購入可
【１】お試し品 真空パック 無洗米 新潟県産こしひかり（コシヒカリ）★DNA鑑定済★送料込 300g×1袋価格323円 (税込) 送料込【２】◆お試し米３００ｇ（２合）パック価格400円 (税込) 送料込◆お試し米３００ｇ(２合)パック２袋価格 700円 (税込) 送料込【３】★☆お試し規格☆★長そうめん お試し3人前 《《送料込みこみ550円！》》【４】リピーター続出！ 味が自慢の乾麺の送料込みのお得なセットです。楽しくおいしく食べ比べ♪山形ラーメン食べ比べ777（そば屋の中華 醤油味、鳥潮海鮮味、紅花ラーメン） 初夏の価格 740円 (税込 777 円) 送料込【５】山形そば食べ比べ777初夏の価格740円 (税込 777 円) 送料込【６】エッ！【送料無料】！激安！最高級焼のり・１ランク上の味付け海苔ヨルメ韓国のりお試しセット特別お試し価格 780円 (税込819円) 送料込【７】ダンナ(奥様)にナイショで食べたい方！一人暮らしの方にもオススメ！送料無料・ワンコイン(500円)でお届けします赤城牛カレー1個お試しセット(中辛限定)ジャスト特価 500円 (税込) 送料込【８】豚まん・餃子・焼売お一人様一回限り！ワンコインお試しセット！【冷凍商品】お試しセット特別価格500円 (税込) 送料込
2006/06/01
コメント(0)
-
意外と使える「ペイント」+「ワードパッド」
私が最近愛用しているWindowsXP付属の定番ソフト。「ペイント」と「ワードパッド」。この子たちが、なかなか使えるんよあんまり活躍していないと思われるこのソフトたち。きっと、きっとなんだけど文字打ちしたい人って、Word使ってるんじゃないかな？と思うの。もっと簡易なものでいいなら、メモ帳とか。この中間に位置するともいえるのが「ワードパッド」さま＾＾私の使用用途はインターネットで調べ物をしているときのメモ帳。しかーも！文字だけではないのが素晴らしい知ってた？画像も貼り付けらるのよんPrintScreen（[Fn]+[Prt Scr]）で、今の画面を撮る。･･･[Alt]キーも一緒に押すと、アクティブウィンドウだけのPrintScreenが撮れる。「ペイント」を起動して、貼り付ける。「選択」ツールで欲しいところだけ選択してコピー（[Ctrl]+[C]）する。「ワードパッド」を起動して、貼り付ける！ついでにメモやコメントも書き添えたりして、GoooooodWordを起動するより、ソフト自体サクサク動くし、快適Excelの表も入れられるし（少し重そう＾＾；）箇条書き（リスト）も作れるという優れものでござりまするそうそう。ペイントちゃんはGIFやJPEG形式でも保存ができるからこれまたさらに重宝します＾＾さらに、そうそう。パソコン周りでケーブルとかコードとかウヨウヨしていない？お魚さん（右写真）に助けてもらおうかな＾＾ ･････つづく【簡易テーブルタグ作成ツール】[Pit-Design]Webのツール素材置き場のVer1、Ver2をよろしくね。 * HOME *EXILEのASIA。追憶したり、なんとなくオーバラップしてる。
2006/06/01
コメント(0)
-
CSSの基本とセレクタの種類
ほにゃららセレクタってのが、沢山出てきてワケがわらかなくなってきたサイバーガーデンの「Web::Blogoscope > Web標準」をお勉強中。Web標準の教科書の著者さんのブログで、番外編って感じ。ここで、子孫セレクタについて考える必要が出てきたのね。なんだっけ？って感じで･･･ちょっと、ここいらで整理してみたいと思いまする。【CSSの基本の書式とセレクタの種類】 セレクタ｛プロパティ:値｝ タイプセレクタ body{background-color: white;} 要素名に対してスタイルを設定する。 例はbody要素に対して背景「white」を指定している。クラスセレクタ .important{color: red;} 書式は「要素名.クラス名」。要素名はなくてもいい。 要素名とクラス名をドット「.」で区切る。 クラス属性でクラス名を指定して使う。 （例：<div class="important">） 複数の要素にスタイルを適用できる。何回使ってもOK！IDセレクタ div#contents 書式は「要素名#ID名」。 id属性でID名を指定して使う。（<div id="contents">） ひとつのページ内で一度しか使えない。 ページレイアウトをするときに使うことが多い。子孫セレクタ div.report span{color:red;} 親要素に含まれる全ての子孫要素を対象にスタイルを適用する。 クラス名「report」とp要素の間はスペースひとつを記述。 スペース区切りとなる。 「div.report span{color:red;}」を適用した例を以下に記す。 【例】------------------------------- <div class="report"> <span>子要素 <span>孫要素</span> </span> </div> ------------------------------------ 例では子要素も孫要素も赤色になる。子セレクタ div.report>span{color:red;} 孫要素を含まない、親要素の直接の子要素だけに スタイルが適用される。「>」区切りで指定する。 CSS２でサポートした。 現在、IEは全てのバージョンでサポートしていない。 【例】------------------------------- <div class="report"> <span>子要素 <span>孫要素</span> </span> </div> ------------------------------------ ･･･というけれど、FirefoxでもOperaでも孫まで影響が･･･ span要素（インライン要素）を p要素（ブロックレベル要素）にしてみても 文字は赤色で･･･CSS2じゃないのか･･･(-"-;) ※他にも「ユニバーサルセレクタ」「属性セレクタ」がある。最近早起きが定番です。日中は暑いので、朝のうちに色々としようと思って。暑くてダレそうなお昼間は、ぼへぇ～とすることも可。寒くなるまで、この生活が続くことでしょう。 ･････つづく【簡易テーブルタグ作成ツール】[Pit-Design]Webのツール素材置き場のVer1、Ver2をよろしくね。* HOME *バスケットボールの絵文字は、項目のポイントに使えますね＾＾
2006/06/01
コメント(2)
全42件 (42件中 1-42件目)
1
