<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0">
   <channel>
      <title>WEBデザインを勉強中 - デザイナーを目指して -</title>
      <link>http://tomwebtom.com/web_blog/</link>
      <description>このブログは、管理人トモちゃんヌがWEBデザインについて勉強したこと等を公開しています。フリー素材も配布してます。</description>
      <language>ja</language>
      <copyright>Copyright 2007</copyright>
      <lastBuildDate>Sat, 24 Nov 2007 23:28:01 +0900</lastBuildDate>
      <generator>http://www.sixapart.com/movabletype/</generator>
      <docs>http://blogs.law.harvard.edu/tech/rss</docs> 

            <item>
         <title>約半月ぶりの更新です。</title>
         <description>約半月ぶりの更新となります。更新が滞っており大変申し訳ございませんでした。

体調が悪いとまでは、いきませんが重だるい日が続いており、仕事から帰ってからも仕事に必要な知識をつけるのに手一杯でした。

しかし約半月の間、ブログを見にきてくだっさていた方には大変、失礼をいたしました。
</description>
         <link>http://tomwebtom.com/web_blog/2007/11/post_49.html</link>
         <guid>http://tomwebtom.com/web_blog/2007/11/post_49.html</guid>
                  <category domain="http://www.sixapart.com/ns/types#category">001006-日常</category>
        
        
         <pubDate>Sat, 24 Nov 2007 23:28:01 +0900</pubDate>
      </item>
            <item>
         <title>秋も深くなりましたね♪</title>
         <description>秋も深まって、これから紅葉がいい時期になりますね。紅葉が綺麗に見れるのは、近畿では、京都とかなんでしょうね♪

最近、男爵イモを大量にいただいたので、美味しい、じゃがバターを作りたいと思い、作ってみるのですが中々、納得いくものができませんね。

でも、ジャガイモ好きなんですよね～</description>
         <link>http://tomwebtom.com/web_blog/2007/11/post_48.html</link>
         <guid>http://tomwebtom.com/web_blog/2007/11/post_48.html</guid>
                  <category domain="http://www.sixapart.com/ns/types#category">001006-日常</category>
        
        
         <pubDate>Tue, 06 Nov 2007 22:37:22 +0900</pubDate>
      </item>
            <item>
         <title>一週間ぶりの更新です。</title>
         <description><![CDATA[<img src="http://tomwebtom.com/web_blog/img/icon/ashamed0004.gif" class="mt_icon" width="19" height="18" alt="焦り" />お久しぶりです。トモちゃんヌです。

めっきり寒くなりましたね～。僕は、季節の変わり目はちょっと体調が良くないので、ここ最近は、会社から帰ってきたら、会社の調べ物をするのが、精一杯で更新が滞ってしまいました。御免なさいです。

今日から、更新を再開しますので、よろしくお願いします。
]]></description>
         <link>http://tomwebtom.com/web_blog/2007/11/post_47.html</link>
         <guid>http://tomwebtom.com/web_blog/2007/11/post_47.html</guid>
                  <category domain="http://www.sixapart.com/ns/types#category">001006-日常</category>
        
        
         <pubDate>Mon, 05 Nov 2007 22:43:42 +0900</pubDate>
      </item>
            <item>
         <title>バイオハザード</title>
         <description><![CDATA[<div align="center">
<img alt="b_img_02.jpg" src="http://tomwebtom.com/web_blog/img/b_img_02.jpg" width="395" height="558" />
</div><br />

珍しく連続で記事投稿♪

今日は、関西では、日曜洋画劇場でバイオハザードを放映します。上のイラストは、何年か前にファンイラストとして描いたものです。以前は、Photoshopでよく絵を描いていたのです。ちょっとパソコンのデータを整理していたらでてきたので、バイオが放送されるし、ちょうど良いからアップしちゃえ、ってな感じでアップしました。

バイオは、ゲームのほうは、1しかやったことないのですが当時は、怖かったですね。初プレイのときは、水の中にいる鮫が無敵とは、しらず何度丸呑みされたことか…

まぁ、こんな記事をかいてますが、映画は観ません。明日は九時から、さんまと長澤まさみが出演している<b>ハタチの恋人を観ますので（爆）</b>

]]></description>
         <link>http://tomwebtom.com/web_blog/2007/10/post_46.html</link>
         <guid>http://tomwebtom.com/web_blog/2007/10/post_46.html</guid>
                  <category domain="http://www.sixapart.com/ns/types#category">001006-日常</category>
        
        
         <pubDate>Sun, 28 Oct 2007 00:58:28 +0900</pubDate>
      </item>
            <item>
         <title>ページランクが、つきました。</title>
         <description><![CDATA[<div align="center">
<img alt="b_img_01.jpg" src="http://tomwebtom.com/web_blog/img/b_img_01.jpg" width="200" height="200" />
</div><br />

脳内メーカーで悪100%と診断されたトモちゃんヌです！正直<b>ショックです！！</b>

さて、当ブログを公開して、もうそろそろ3ヶ月になりますが、今日（昨日かな？）googleのページランクがつきました。ついたランクは、1です。でも、1でもついてよかったです。中々ランクつかなかったので、このままつかないのでは？と、思っておりました。
]]></description>
         <link>http://tomwebtom.com/web_blog/2007/10/post_45.html</link>
         <guid>http://tomwebtom.com/web_blog/2007/10/post_45.html</guid>
                  <category domain="http://www.sixapart.com/ns/types#category">001002-WEBデザイン</category>
        
        
         <pubDate>Sat, 27 Oct 2007 22:11:34 +0900</pubDate>
      </item>
            <item>
         <title>マウスｷﾀ━(ﾟ∀ﾟ)━!</title>
         <description>待ち望んだマウスが届きました！いやー快適、快適。でも、7,000円は、やっぱり高いですわ。無線ということを除けば、多機能というわけでもないですからねぇ。

ところで家では、長らく無線マウスを使っているのですが、会社では、有線マウスを使っています。これが、また肩が凝るんですよね。</description>
         <link>http://tomwebtom.com/web_blog/2007/10/post_44.html</link>
         <guid>http://tomwebtom.com/web_blog/2007/10/post_44.html</guid>
                  <category domain="http://www.sixapart.com/ns/types#category">001002-WEBデザイン</category>
        
        
         <pubDate>Fri, 26 Oct 2007 23:40:05 +0900</pubDate>
      </item>
            <item>
         <title>DOCTYPE宣言</title>
         <description>今、仕事で悩んでいることがあります。今、DOCTYPE宣言が入っていないサイトがあって、それにDOCTYPE宣言を入れるか入れないかを考えているのです。

DOCTYPE宣言を入れることは、SEO的にも良いことには、間違いないのですが、DOCTYPE宣言を入れる=SEOに良いわけではなく、DOCTYPE宣言を入れて、それに従った適切なマークアップをする=SEOに良いになるわけです。

</description>
         <link>http://tomwebtom.com/web_blog/2007/10/doctype.html</link>
         <guid>http://tomwebtom.com/web_blog/2007/10/doctype.html</guid>
                  <category domain="http://www.sixapart.com/ns/types#category">001002-WEBデザイン</category>
        
        
         <pubDate>Wed, 24 Oct 2007 23:17:34 +0900</pubDate>
      </item>
            <item>
         <title>アクセスアップの基本は、サイトの登録から</title>
         <description><![CDATA[サイトのアクセスアップの基本は、サイトの登録からだと思います。ぶっちゃけ登録しなければ、SEOに取り組んでも中々、効果がでないと思います。

僕は、<a href="http://tomwebtom.com/book_site/affiliate_book/affiliate_book_01.html">この本</a>でサイトの登録の仕方を知ったのですが、この本に書かれていることを実践してからアクセスが、上昇しました。このことから、サイトの登録の大切さを学びました。

そこで今回は、三大検索エンジンに登録（推奨）できるページを紹介していこうと思います。ただし、ここでのサイトの登録で、すぐに検索に反映されるときもあれば時間が、かかる場合もあります。どちらにせよ、すぐに効果がでるわけではないので、のんびり待ちましょう♪
]]></description>
         <link>http://tomwebtom.com/web_blog/2007/10/post_43.html</link>
         <guid>http://tomwebtom.com/web_blog/2007/10/post_43.html</guid>
                  <category domain="http://www.sixapart.com/ns/types#category">001002-WEBデザイン</category>
        
        
         <pubDate>Tue, 23 Oct 2007 22:54:25 +0900</pubDate>
      </item>
            <item>
         <title>マウスが早く届いて欲しい</title>
         <description><![CDATA[マウスが、いうことを聞きまっせん。<img src="http://tomwebtom.com/web_blog/img/icon/sad0119.gif" class="mt_icon" width="18" height="18" alt="しょんぼり" />マジで困ってます。

しかし、WACOMからは、商品発送のメールが、今日はきてませんでした。マジで早くきてくれ。何もできん。ブログ更新するのが、精一杯です。

ところで、MSNという検索エンジンがありますよね。このブログも、MSNに検索してもらえるように登録したのですが、今日SE0の無料解析ツールで調べたところ、インデックス数が<b>500件</b>も超えてました。これ自慢じゃなくて、なんで、こんな数になるの？と不思議に思っています。

インデックス数とは検索エンジンが、世界中のWEBページを記録（および整理）する行為をいい、その記録されたページの数をインデックス数と呼びます。記録されなければ、検索結果には表示されないため、いかにサイトの全てのページを検索エンジンにインデックスさせるかがSEO対策を施す上で重要なポイントとなるのですが、このブログサイト、どー数えても500ページも無いはずです。

ですので、なんで500件も超えてるんだ？と首をかしげています。<img src="http://tomwebtom.com/web_blog/img/icon/ashamed0004.gif" class="mt_icon" width="19" height="18" alt="焦り" />

ちなみに、無料解析ツールは、こちらを使用してます。

<a href="http://www.seotools.jp/">SEO TOOLS β(SEOツールズ)</a>

興味のある方は、このブログサイトを、解析ツールで見てください。MSNのインデックス数が500件を超えてるはずです。
]]></description>
         <link>http://tomwebtom.com/web_blog/2007/10/post_42.html</link>
         <guid>http://tomwebtom.com/web_blog/2007/10/post_42.html</guid>
                  <category domain="http://www.sixapart.com/ns/types#category">001006-日常</category>
        
        
         <pubDate>Mon, 22 Oct 2007 23:01:25 +0900</pubDate>
      </item>
            <item>
         <title>マウスが、ぶっ壊れました。</title>
         <description><![CDATA[家で使っているパソコンのマウスが壊れました。クリックしても、クリックできなかったり、シングルクリックがダブルクリックになったりと、左クリックの調子が良くありません。

使っているマウスは、WACOMのペンタブレットを買ったときに付属されている2Dマウスなのですが、2年間コレを使用しているのと、有線マウスを置くスペースが無い（USBに空きが無い）ので、この2Dマウスを修理するか買いなおすしかありません。

しかし、この2Dマウス、買いなおすとなると結構高くネットで取り寄せで7,000円もします。年末は車の保険代を払ったりと何かと入用なので、予定外の出費は避けたいところです。しかし、自力で修理しようにも、この2Dマウスは分解できないように設計されているので、自力でなおすことができないのです。

<img src="http://tomwebtom.com/web_blog/img/icon/sad0119.gif" class="mt_icon" width="18" height="18" alt="しょんぼり" />う～…仕方ないですが、買いなおすことにします。有線マウスを置くスペースも無いし、買いなおしたほうが、早そうなのですからね。

でも、クリックができなくなるのも困りもんですね。この週末にも、やりたいことがあったのにクリックがうまくできないだけで、全然はかどりません。早く新しいマウス届いてほしいです。
]]></description>
         <link>http://tomwebtom.com/web_blog/2007/10/post_41.html</link>
         <guid>http://tomwebtom.com/web_blog/2007/10/post_41.html</guid>
                  <category domain="http://www.sixapart.com/ns/types#category">001006-日常</category>
        
        
         <pubDate>Sun, 21 Oct 2007 21:38:49 +0900</pubDate>
      </item>
            <item>
         <title>ベタ打ちでのコーディング</title>
         <description><![CDATA[なんか急に寒くなってきましたね。地元だけなんでしょうか？季節の変わり目ですね。<img src="http://tomwebtom.com/web_blog/img/icon/happy0164.gif" class="mt_icon" width="19" height="19" alt="にっこり" />

季節の変わり目は、体調が崩しやすいので、皆さんも風邪とかには、気をつけてくださいね。僕は、すでに体調を崩しています。<img src="http://tomwebtom.com/web_blog/img/icon/ashamed0004.gif" class="mt_icon" width="19" height="18" alt="焦り" />

体調を崩していても仕事は休めないので、会社には行ってました。最近はコーディングの仕事をしていたのですが、楽天ショップやYahoo!ショップのセールページにも対応できるコーディングをしなければならなかったのでテーブルレイアウトでコーディングです。、しかもいっさいCSSは無しなので、HTMLのみのベタ打ちで仕事をしなければならなかったのですが、結構ひさしぶりだったので、できるのか心配でした。でも意外と忘れてないもので、できるもんですね。

積み重ねたものは何かしら、覚えてるもんです。
]]></description>
         <link>http://tomwebtom.com/web_blog/2007/10/post_40.html</link>
         <guid>http://tomwebtom.com/web_blog/2007/10/post_40.html</guid>
                  <category domain="http://www.sixapart.com/ns/types#category">001002-WEBデザイン</category>
        
        
         <pubDate>Sat, 20 Oct 2007 23:43:48 +0900</pubDate>
      </item>
            <item>
         <title>寒くなってきましたね。</title>
         <description><![CDATA[すっかり寒くなってきましたね。<img src="http://tomwebtom.com/web_blog/img/icon/happy0164.gif" class="mt_icon" width="19" height="19" alt="にっこり" />

いつも朝の6時半には電車に乗って会社に向かうのですが、寝ていると、途中の駅で、寒くて目が覚めました。冬になると朝の寝ダメができなくて朝が眠いです。

朝はえ～とか思われるかもしれませんが、早めに出て行っているのです。会社には1時間前に出社するようにしています。1時間、会社で自分の好きなように時間をもてれば、会社の流れや傾向を、ゆっくり調べられるからです。

こういうのって大事だと思ってます。自分がお世話になっている会社、人によっては、俺が会社を支えてるという人もいると思いますが、会社の流れや傾向を知っておかなければ、自分が何をすれば良いのかというのが見えてこないと思います。

何をすれば、良いのかわかっている人のほうが会社で自分のポジションを築きやすいですからね。今の会社で必要とされる人間になるために努力しています。
]]></description>
         <link>http://tomwebtom.com/web_blog/2007/10/post_39.html</link>
         <guid>http://tomwebtom.com/web_blog/2007/10/post_39.html</guid>
                  <category domain="http://www.sixapart.com/ns/types#category">001006-日常</category>
        
        
         <pubDate>Wed, 17 Oct 2007 22:23:37 +0900</pubDate>
      </item>
            <item>
         <title><![CDATA[&lt;ul&gt;タグの横並びメニューのカスタマイズ3]]></title>
         <description><![CDATA[<ul style="list-style:none; color:#333; border:0; margin:0; height:39px;">
<li style="display:block; float:left; padding:0; margin:0 3px;"><a href="http://tomwebtom.com/web_blog/">メニュー1</a></li>
<li style="display:block; float:left; padding:0; margin:0 3px;">|</li>
<li style="display:block; float:left; padding:0; margin:0 3px;"><a href="http://tomwebtom.com/web_blog/">メニュー2</a></li>
<li style="display:block; float:left; padding:0; margin:0 3px;">|</li>
<li style="display:block; float:left; padding:0; margin:0 3px;"><a href="http://tomwebtom.com/web_blog/">メニュー3</a></li>
</ul>

上のようなメニューをよく、フッターメニューとかで見かけることはありませんか？これ見た目もよく、手軽に作成できて便利ですよね。

でも、ユーザビリティの面で見ると、このやり方は、問題があります。音声ブラウザで、上のメニューを読んでもらうと、「メニュー1、棒、メニュー2、棒、メニュー3」と｜を棒と読むのです。これでは、音声ブラウザを利用しているユーザーには、不便です。

このことからメニューとメニューの間に｜を使用することは、できません。でもCSSを利用すれば、この問題も解決できます。

<ul id="sample-04">
<li><a href="http://tomwebtom.com/web_blog/">メニュー1</a></li>
<li class="s4-dot-line"><a href="http://tomwebtom.com/web_blog/">メニュー2</a></li>
<li class="s4-dot-line"><a href="http://tomwebtom.com/web_blog/">メニュー3</a></li>
</ul><br />

上のメニューは一例ですが、最初のメニューと、あまり変わりはないと思います。もちろんドットの仕切りではなく、｜の様にもできます。

これは、背景画像を使っています。背景画像ならalt要素もないので、音声ブラウザに余計な情報を読まれる心配がありません。

1×1pxの黒の画像を用意してCSSのbackgroundプロパティでY軸にリピートさせれば、このように見せることができます。

詳しい記述は、以下を参考にしてみてください。この、やり方は、僕の独自のやり方です。もっと良い記述があるかも知れません。いろいろ試してみてください。
]]></description>
         <link>http://tomwebtom.com/web_blog/2007/10/ul3.html</link>
         <guid>http://tomwebtom.com/web_blog/2007/10/ul3.html</guid>
                  <category domain="http://www.sixapart.com/ns/types#category">001002-WEBデザイン</category>
        
        
         <pubDate>Tue, 16 Oct 2007 23:03:43 +0900</pubDate>
      </item>
            <item>
         <title>風邪ひきますた</title>
         <description><![CDATA[<img src="http://tomwebtom.com/web_blog/img/icon/sad0119.gif" class="mt_icon" width="18" height="18" alt="しょんぼり" />…風邪引きました…

マジで、しんどいです。でも会社は休めないので、頑張っていってきました。しんどかたよ。

WEBデザインの仕事をしていると、パソコンをずっと見てないといけないので、のぼせてくるんですよね。<img src="http://tomwebtom.com/web_blog/img/icon/ashamed0004.gif" class="mt_icon" width="19" height="18" alt="焦り" />

&lt;ul&gt;タグをつかったメニューの作成方法の続きをしたかったのですが、今日は、サンプルを作る元気がないので、次回にさせていただきます。ユーザビリティに、とても良いメニューの作成方法を公開しようと思います。
]]></description>
         <link>http://tomwebtom.com/web_blog/2007/10/post_38.html</link>
         <guid>http://tomwebtom.com/web_blog/2007/10/post_38.html</guid>
                  <category domain="http://www.sixapart.com/ns/types#category">001002-WEBデザイン</category>
        
        
         <pubDate>Mon, 15 Oct 2007 20:51:03 +0900</pubDate>
      </item>
            <item>
         <title><![CDATA[&lt;ul&gt;タグの横並びメニューのカスタマイズ2]]></title>
         <description><![CDATA[&lt;ul&gt;タグを使用した横並びメニューを作成方法を、紹介していますが今回も更にカスタマイズしていこうと思います。

前回のサンプルに、罫線をいれて、フォントのカラーを白に背景色を青に変更して、更にメニューっぽくしてみました。オンマウスされると、フォントカラーが黒、背景色が黄色になるように設定してます。

<ul id="sample-02" class="clearfix">
<li class="bolder-left1"><a href="http://tomwebtom.com/web_blog/">メニュー1</a></li>
<li><a href="http://tomwebtom.com/web_blog/">メニュー2</a></li>
<li><a href="http://tomwebtom.com/web_blog/">メニュー3</a></li>
</ul><br />

&lt;li&gt;タグに1pxずつの罫線をひく指定をするのですが、単純にborder指定をすると罫線が重複してしまうところがあるので、少しだけ工夫が必要です。

まず&lt;li&gt;タグに上、右、下の3箇所にbrderを指定します。するとメニューの一番、左以外は、罫線がひかれます。そして、メニューの一番左に当たる&lt;li&gt;タグにclass指定をして、border-leftに罫線を指定します。CSSの記述は、以下のような感じです。

ul#sample-02 li {
margin: 0;
padding: 0;
float: left;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-top-color: #333;
border-right-color: #333;
border-bottom-color: #333;
}
ul#sample-02 li.bolder-left {
border-left-width: 1px;
border-left-style: solid;
border-left-color: #333;
}

これで、重複することもなく罫線がひかれるので、よりメニューらしく見えます。

少し記述を変えれば、下のように縦型のメニューにも使えます。

<ul id="sample-03">
<li class="bolder-top1"><a href="http://tomwebtom.com/web_blog/">メニュー1</a></li>
<li><a href="http://tomwebtom.com/web_blog/">メニュー2</a></li>
<li><a href="http://tomwebtom.com/web_blog/">メニュー3</a></li>
</ul><br />

これらの記述は、以下のようにします。]]></description>
         <link>http://tomwebtom.com/web_blog/2007/10/ul2.html</link>
         <guid>http://tomwebtom.com/web_blog/2007/10/ul2.html</guid>
                  <category domain="http://www.sixapart.com/ns/types#category">001002-WEBデザイン</category>
        
        
         <pubDate>Sun, 14 Oct 2007 13:07:33 +0900</pubDate>
      </item>
      
   </channel>
</rss>
