投稿日:

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

Webサイト作成 トラブル
css

リスト

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

    前回リストのCSS　ブラウザ間の違いにて、ブラウザ間の違いの大きな点は、リストのマーカーを設定するために、paddingを指定しているのか、marginを指定しているかが大きな違いだということを書きました。

    では、前回の続きでIEでも同じような見た目を実現すべく、marginを0にしてみます。

     <style type="text/css">
 <!--
 .test1 { 
 	padding: 0px; 
 	margin: 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>

    IE6 のスクリーンショットです。
    list_ss6.png

    Firefoxのスクリーンショットです。こちらは横が変わりありませんが、上下のマージンがなくなったため、多少見た目に変動があります。
    list_ss7.png

    IE6のスクリーンショットを見て、一番上のマーカーの黒丸がなくなったのに気付いたでしょうか？
    marginを0にすると、マーカーまでなくなってしまうのです！

    こうなった状態で、たとえば”list-style-position”というスタイルをinsideにすることで、マーカーの表示はできます。
    このlist-style-positionプロパティは本来、マーカーをリストの内側に表示するのか、外側に表示するのかを指定するプロパティです。

     <style type="text/css">
 <!--
 .test1 {
 	padding: 0px;
 	margin: 0px;
 	list-style-position:inside;
 }
 -->
 </style>
  --以下は前述と同じなので省略--

    すると、IE6のスクリーンショットではこうなります。
    list_ss8.png

    マーカーは表示されたけれども、ネストされている（リストが入れ子になっている）部分を見てみてください。
    内容が長いと折り返されてますが、リストのマーカーが内側に入ってしまっています。
    縦にリストを表示したいという目的がある場合、これはあまり望まない表示ではないでしょうか？

    結局は、padding-left とmargin-leftを適切に設定するのが早いと思います。

     <style type="text/css">
 <!--
 .test1 {
 	padding-left: 10px;
 	margin-left: 10px;
 }
 -->
 </style>

    IE6のスクリーンショット
    list_ss9.png
    Firefoxのスクリーンショット
    list_ss9ff.png

    さて、今この時点で、横幅は何ピクセルでしょうか？
    答えは、87ピクセルになっています。

    それは、一番上のリストはpadding とmarginが10ピクセルにしましたが、ネストされた子供のリスト（例では・ナルト連弾　と書いてある箇所）は、まだmargin、paddingが40ピクセルになっているからです。
    どこから計算したmargin、paddingかというと、親のリストの始点からです。

    親のリストのマージンやパディング＋40ピクセル+コンテンツ、のため、中身が膨らんでしまっているのです。

    例：Firebugで見た子供の

      のレイアウト
      list_ss10.png
      list_ss11.png

      親のテーブルセル

      が70ピクセルに設定されているので、本当は70ピクセルにおさまってほしいところです。

      単純に、次のように

        自体にマージンとパディングを設定してみましょう。

         <style type="text/css">
 <!--
 ul {
 	padding-left: 10px;
 	margin-left: 10px;
 }
 -->
 </style>

        Firefoxのスクリーンショット　IE6でもほぼ変わらない

        list_ss12.png

        横幅が、70ピクセルになりました。

        続きは、リストにとってまたやっかいな問題、マーカーを画像にする点を取り上げます。
        リストのマーカーの画像　位置調整

投稿日:

リストの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などのアプリケーションは利用できますが、利用できないアプリもありますので、注意してください。