投稿日:

リストのCSS　ブラウザ間の違い

Webサイト作成 トラブル
css

リスト

  • って便利なタグですが、ブラウザ間で動きがかなり違うので、制御しようとするととたんに厄介になります。
    ここでは、IE6と、Firefox3での挙動の違いを、まとめてみました。

    次のようなHTMLがあったとします。
    どのようになっているかわかりやすくするため、背景に色をつけてあります。

     <body> 
 リストだよー。
 <table><tr>
 <td style="width:70px; background-color:#FFCC33">
 <ul class="test1">
 <li>ナルト
     <ul>
       <li>ナルト連弾</li>
       <li>ナルトキック</li>
     </ul>
 </li>
 <li>さすけ</li>
 <li>さくら</li>
 </ul>
 </td>
 </tr></table>
 </body>

    この時点で、見え方は次の通りです。
    IE6、Firefox3で共通
    list_ss1.png

    テーブルのセルを、横幅　70px（ピクセル）に設定しているにも関わらず、コンテンツがあふれているため、70px以上になっています。
    実際何ピクセルになっているかというと、107ピクセルです。

    Firebugで見るレイアウトの図
    list_ss2.png
    list_ss3.png

    こちらは何も指定していないのに、パディングが左に40ピクセルたされています。
    Firefox（Gecko系）のデフォルトの挙動です。

    このデフォルトの挙動がIE系と違うのが、不幸の始まりなのです…。

    では、左に寄せるために、paddingを0にしてみます。

     <style type="text/css">
 <!--
 .test1 {
 	padding: 0px;
 }
 -->
 </style>
 </head>
 
 <body> 
 リストだよー。
 <table><tr>
 <td style="width:70px; background-color:#FFCC33">
 <ul class="test1">
 <li>ナルト
 　　<ul>
     <li>ナルト連弾</li>
     <li>ナルトキック</li>
     </ul>
 </li>
 <li>さすけ</li>
 <li>さくら</li>
 </ul>
 </td>
 </tr></table>
 </body>
 </html>

    すると、Firefoxでは次の通りです。

    list_ss4.png

    左端の色は、ブラウザの端っこです。
    なんと、リストタイプのディスクマーカー（黒い円）がちょうど半分のところでブラウザの端っこにめり込んでいるようになっています。

    IE6ではどうでしょうか。

    list_ss5.png

    びくとも動いていません。1番最初のスクリーンショットと同じですね。[sad]

    なぜかというと、IE系では、リストのマーカー（黒い点のことです）を表示するために、margin-leftが指定されているからです。
    Firebugで見たときは、padding-leftが40px入っていましたね。

    1. IE系ではリストのマーカーを示すために、margin-leftが使われる
    2. Gecko系ではリストのマーカーを示すために、padding-leftが使われる

    と覚えておきましょう。

    さらに、リスト

    • を掘り下げていきたいと思います。

      続き：リストのCSS　ブラウザ間の違い2

投稿日:

ライバル会社をさくっと探す

Googleツール

自社のライバル会社を手っ取り早く探す方法

  1. Googleの検索画面を開きます。http://www.google.com/
  2. 検索ボックスの横にある、「検索オプション」をクリック
  3. 特殊サーチ　類似ページ 次の URL に似ているページというところに、自社のURLを入れて検索してみましょう。
  4. 普通の検索画面で、related:自社のドメインとやっても出てきます。

もともとは、類似したページを探してくれるわけですが、要は類似したサービスを取り扱っている＝ライバル会社という探し方ができるわけです。

投稿日:

ユーザー ID とパスワードが必要なサイトに簡単にアクセスする方法

Windows 便利な使い方

ユーザー ID とパスワードが必要なサイトに簡単にアクセスする方法

Internet Explorer や Netscape Navigator などのブラウザでアクセスすると、ユーザー名とパスワードの入力が必要なページがあります。
Internet Explorer 5 以降はオートコンプリートで記憶させることも可能ですが、次のように URL 中にユーザー名とパスワードを記入することで、どのブラウザでもユーザー名とパスワードの入力を省くことができるようになります。

http://<ユーザー名>:<パスワード>@<サーバー名>/

例)
http://username:password@www.aaabbbccc.com/member/index.html

このような URL のブックマークやお気に入りを作成すると、セキュリティ上問題になるケースもありますので、ご注意ください。
また、すべてのサイトでこの構文が有効になるとは限りません。

投稿日:

モニターの外にヘッドメニューバーがあり移動できない

Windows トラブル解決

デュアルモニターで利用かつリモートでログインしていたり、画面の設定を変更したりした後に、アプリケーションのヘッドメニューバーがモニターの外部になってしまい、移動したくてもできない場合があります。
そんな時は

  1. タスクバー上で右クリック
  2. 移動　をクリック　

これで、カーソルでアプリケーションの位置を動かせます。

Officeなどのアプリケーションは利用できますが、利用できないアプリもありますので、注意してください。

投稿日:

メール自動振り分け設定方法

Windows 便利な使い方

メール自動振り分け設定方法

届いたメールをある条件に沿って任意のフォルダに振り分けることが出来ます。例えば、友達から来たメールは”友達”フォルダへ、メールマガジンは”メルマガ”フォルダへ自動的に振り分けると言ったことが出来ます。

1.メニューバーの「ツール」-「メッセージ ルール」の「メール」をクリックします。「新規作成」をクリックします。

2.「ルールの条件を選択…」から条件を選択します。よく使われる条件は、特定の人から来たメールを振り分ける時に使う「送信者にユーザーが含まれている場合」と、特定の件名から来たメールを振り分けるときに使う「件名に指定した言葉が含まれる場合」です。

3.「ルールのアクションを選択…」から仕分け方法を選択します。よく使われる条件は、フォルダに振り分けるときに使う「指定したフォルダに移動する」やいらないメールを削除するときに使う「削除する」などです。

4.「ルールの説明」の下線部をクリックして設定します。「4.ルール名」に任意の名前を入力します。

例：未承諾広告を自動削除

1.「ルールの条件を選択…」の「件名に指定した言葉が含まれる場合」にチェックを入れます。
2.「ルールのアクションを選択…」の「削除する」にチェックを入れます。
3.「ルールの説明」の「指定した言葉が含まれる（下線）」をクリックします。
「未承諾広告」と入力し「追加」をクリック。「OK」をクリック。
4.「ルール名」に「未承諾広告を自動削除」と入力します。
5.「OK」をクリックします。
作成したルールを選択して「適用」をクリックすれば、仕分けが実行され、以後、受信した未承諾広告のメールは届くたびに削除されます。
FrontPage