Yuna's Tedious Talk

日々思ったことをつらつらと書いてます。


CSS リストを横並べにする際に起きる隙間。

仕事です。
最近仕事しかしてない気がします。
昨日一昨日と会社にお泊まりです。
ひー。

というわけで(どういうわけで?)忘れないように覚え書き。
前調べたはずなのにいっつも忘れちゃうからさー。

■CSSでリストを横並べにした時の隙間をうめる方法。■
リスト形式
<ul>
<li>テキスト</li>
<li>テキスト</li>
<li>テキスト</li>
</ul>

とすると、たいていは

  • テキスト

  • テキスト

  • テキスト


となるわけですが(↑の場合、このブログのスタイルシートで矢印の画像が文頭に出てると思います、通常は・(中丸)です)、リストを駆使してよくパンくずを作ったりグローバルメニューを作ったりするわけですね。それってたいてい横並びだったりするわけなので、
  display:inline;
を使って横並びにするのですが、今回それを使っていたらどうも画像に隙間があいている。なぜだろう?うーん。

と調べてみると、

<ul>
<li>テキスト</li>
<li>テキスト</li>
<li>テキスト</li>
</ul>

のように、LI要素毎に改行していると、半角1文字分空いてしまうという。
仕様ですかそうですか。ちなみにIEだとあかないです。MSマジック(本来は空くのが仕様なのだからやっぱバグ)ですかね…。

というわけで、解決策としては、改行を入れずにソースを書くタイプにする↓か、

<ul>
<li>テキスト</li><!--
--><li>テキスト</li><!--
--><li>テキスト</li><!--
--></ul>


もしくは下記の記述でごり押し。

ul{
padding-left:0.5em;
}

ul li{
margin-left:-0.5em;
display:inline;
}


改行入れずにコメント記述で対処するとなるとちょっと見た目がよろしくないですな…。かといって文字をインデントで処理するのもいいんだか悪いんだか。でもスマートな方法とるなら後者だよねぇ。

こんな基本もわかってないなんて!なんて言われてしまいそうですが…前調べてもうカンペキーなんて思ってたことでもこうやってメモっておかないとまた忘れてしまって調べなおしたりするはめに。

今やってるリニューアル作業は、多分年明け公開かなぁ。できたらミクシあたりで報告するかもです。頑張るぞ−。
comments (2) | trackbacks (0) | edit

posted by 由奈



セレクトメニュー(プルダウン形式)の罠。

またまたIEでの困ったちゃん現象です。
最近仕事中でもこういった困ったちゃん現象に悩まされております。
ウガー。[:イヤン:]

今日ぶち当たった問題は、私が担当していた仕事ではないんだけど、とあるサイトの制作で、検索画面を作っていた時の話です。

その検索フォームはデザイン上、検索項目が一列になっていて、日時、場所、などを検索してその検索結果を次の画面に渡すというもの。日時・場所などはプルダウンにしてユーザーに選ばせるスタイルだったのですが、この場所がクセモノでして、選択肢にある項目名がたまにチョー長かったりするわけです。そうなるとデフォルトだとプルダウンの横幅がイチバン長い項目に合わせてひろがってしまうので、スタイルシートでプルダウンの幅を指定することになるわけですが…。



IEだと、スタイルシートで幅指定をした際、下にびにょ〜んとのびるプルダウン選択肢の幅までもがそのプルダウン幅に合わせてちょんぎれてしまうため、長い文字列が切れてしまうんですね。
▼参考画面
IEだとプルダウンの幅とリスト幅がそろってしまう。
08022801.jpg

見て頂くとわかるんですが、FirefoxやOperaなどで見ると、ちゃんと閉じた状態のプルダウン幅のみがスタイルシートの指定にそって反映されており、下にのびる選択肢の幅は、イチバン長い項目に合わせて広がっています。イチバン理想的な状態。とてもわかりやすい。
んがしかし、IEだとどうにもこうにも、何を選択したらいいのかわからない状態になってしまう。

んな、デザイン上とかいって項目一列にするからそうなるんじゃない?
デザインは関係なくして、項目を二列以上にしてプルダウンの幅とか
指定しなきゃいいじゃ〜ん♪


って意見はごもっともでございますが…。w
クライアントの希望とか色々考慮するとね、そうも行かない場合があったりと…、制作メンバーのほうでは試行錯誤して、一生懸命ガンバルわけなのであります。なんとかして今のこの問題を解決せねば!と。

でもね〜、どうやってもIEの仕様(らしい)を変えられるはずもなく…。
仕方ないので色々と試した方法はボツになり、選択項目のフォントサイズを思いっきりちっこくして対応することで完了となりました。うぅぅむ。

ちなみにボツになった方法はこちら。

1:プルダウンの幅は指定したまま、選択した際に幅が広がる方法。
これは簡単なスクリプトの記述を追加するだけで再現することができます。
<select name="test" style="width:150px;" onfocus="this.style.width=''" onblur="this.style.width='150px'">
<option value="テスト項目1">テスト項目1</option>
<option value="テスト項目2">テスト項目2</option>
<option value="テスト項目3テキストテキストテキストテキスト">テスト項目3テキストテキストテキストテキスト</option>
</select>

プルダウンをクリックすると、イチバン長い項目に合わせて横幅がびろ〜んと広がります。んで選択したあと適当な場所(選択肢以外の画面上)をクリックすると、デフォルトの状態(短い横幅)に戻ります。
IEだけでなく、Opera、Firefoxなどでも同じ動きになります。(後者ブラウザは別にこの対応する必要無いと思うんですけどね…)
でもこの方法は普段あまり見かけないような動きをするので、ユーザーにとってはビックリする?というかなんか動き気持ち悪いね…みたいなかんじになったのでボツであります…。あと、何項目か検索項目があるので、びろーんと横に広がると他の項目が横にずれるのでデザインも一瞬崩れてしまうという難点も。タダコレに関しては、position=absoluteの指定をしておけば他の項目が横にずれるというコトは無くなるわけですが…右隣の項目が下に隠れるのでどっちにしてもダメっぽ。

2:プルダウン選択項目にtitle属性を追加して、カーソルを合わせると表示されるようにする。
<select name="test" style="width:150px;">
<option value="テスト項目1" title="テスト項目1">テスト項目1</option>
<option value="テスト項目2" title="テスト項目2">テスト項目2</option>
<option value="テスト項目3テキストテキストテキストテキスト" title="テスト項目3テキストテキストテキストテキスト">テスト項目3テキストテキストテキストテキスト</option>
</select>

これは単に画像とかリンクなどにも普通に使うALTやTITLE属性そのままです。なので対処法ってかんじにはなってないところがちょっとネ…。

そんな感じなので、IEにあわせてると結局どれもこれもいまいちな状態になってしまい、ぐだぐだ状態に。諦めろ!としか言いようがないこの仕様。しょんぼりっす…。
comments (2) | trackbacks (0) | edit

posted by 由奈



IE7での英文・和文フォント指定で・・・。

先日から、WinXPにてIE7の半強制(?)インストールが開始されたようですネ。
私はLunascapeやSleipnirといった、IE「ベース」のブラウザを使うことはあるのですが、基本的にFirefoxやOperaやSafariなど、IEベース以外のブラウザのほうが使い勝手がよかったりするので、そのダイアログはまだ見ておりません。半強制といっても、インストールしないという選択肢もある模様。IE6のほうがなんとなく好きですね、7よりも。

先日、IEで閲覧していたところ、とある現象が起こりました。これはもうぐちゃぐちゃで、私にはちんぷんかんぷんな状態なのですが、IE7では必ず、IE6でもたまにおきる感じの現象です。



ウェブページをCSSにて、フォント(書式)を指定することがあります。
font-family:"MS Pゴシック";
といった感じで、自分がこの書式で閲覧者に見てほしいという指定をします。
ちなみに私のウェブページ(Magnolia-Gateのほう)ではこのような記述に。
font-family: Tahoma,verdana,"MS UI Gothic","MS Pゴシック","Hiragino Kaku Gothic Pro W3","ヒラギノ角ゴ Pro W3","Osaka";
基本的にverdanaが好きなんですが、今回はTahomaにしていたわけです。これはブログのほうでも使っているスタイルです。文字コードはEUC-JP。XHTMLバージョンは1.0StrictTransitionalに変更しました。

うちのブログのサイドナビの部分は文字サイズを小さくして見せているため、サイズを10pxにしています。しかしIE6で見るときちんと10pxになっているのに、IE7で見た時に12pxになっていたので「おかしいな」と思い始めたのがきっかけでした。よくよく見ると、英数字はきちんと10pxになっているんです。日本語だけが12pxのまま(うちのサイト全体、12pxを基本フォントサイズにしています)。なぜだろう?IE7のバグ?なんて思ってたんですが…。(何でもかんでもバグのセイにするなって?w)

結局色々調べてみてもIEの仕様っぽくて、解決策がなさそうでした。現象としては↓のような感じになります。
文字コードがUTF-8以外(Shift_JISやEUC-JPなど)の場合
font-sample01.jpg

文字コードがUTF-8以外(Shift_JISやEUC-JPなど)の場合
font-sample02.jpg

フォントファミリーを指定する際に英文フォントを先に指定するとそのような現象が起こっちゃうみたいです。
英文フォント例:Verdana,Tahoma,Arialなど。
和文フォント例:MS Pゴシック、ヒラギノ角ゴ Pro W3など。
よく、英文フォントを先に指定すると、和文フォントの書体が指定してあっても反映されないと言ったことはあったのですが、二番目以降に指定されたフォントの大きさまで反映されないという現象は初めてだったのでちとびっくり状態です。Verdanaとかの英文字・数字が一つめに指定されていると、その文字(要は英数字のみ)はしっかり10pxになりますが、日本語の部分が12pxになってしまう。

そりゃもういろんな方法を試してみました。でも色んなケースで色んな現象が出ておりますです。

[:m060:]最初に指定する英文フォントがVerdanaだと日本語も10pxになる。
[:m060:]文字コードがUTF-8だとTahomaなどでも日本語が10pxになる。
[:m060:]でも、Arial、Helveticaなどを指定すると上記条件では日本語は12pxのまま。
[:m060:]IE6とIE7で表示にばらつきがある(IE6でなんともなくてもIE7で変とか)
[:m060:]font-size:11pxだとどっちにしても和文フォントサイズは12px?

ちなみにFirefoxとかOpera、Safariはお利口さんです。ちゃんと文字サイズも反映されていますし、和文フォントで最初に指定したものがきちんと反映されています(上記の場合はMS UI Gothicとか)。

結局の所、文字コード変えるとOKだったり、それでもだめな英文フォントがあったりと、まったくもってどのように解決したらよいのかはわかりません。
Tahomaを使いたくて、和文フォントは「MS UI Gothic」を使いたい、そして小さい文字も使いたい。そんな時はあれですね。[:m158:]とか[:m157:]で見てね♪ってことなんでしょうね…。もう閲覧者のことよりも自己満足の世界になってきてしまっている感じもします。きっとVistaのIE7とかでもXPとはちがうんだろうなぁなんて思いつつ。

とりあえずこのブログはTahomaではなくVerdanaで指定しなおして対応しました。
どなたかお詳しい方いたら是非対処法教えて頂きたいデス。><
comments (0) | trackbacks (0) | edit

posted by 由奈