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 由奈



ノビヨファンサイトを一部リニューアル。

ずいぶんとご無沙汰してます。
前回エントリー「マルチ8」からぱったり更新止まってしまいまして…。
ネタはあるけどタイミングを逃してしまうとなかなか更新できなくなってしまうわけでして。いや〜。なので、マルチ8の記事から今日までの間のエントリーは気が向いたらひょっこり追加されるかもしれません。はい。

んでもって今日はというと。

植松伸夫さんファンサイト一部リニューアル〜の巻
リニューアルTOP

リニューアルTOP

このたび一部リニューアル・サイト更新をしました。実に1年ぶりくらいに?
実は去年末からデザインのリニューアルを考え、すぐそのデザインのコーディングは終わっていたのだけれども、なにぶん時間がかかったのが下階層ページの細かい修正と、データ移行。もう全然おわんない。w
しかも今後のことを考え、MT構築に変えたもんだからそれもまた時間がかかり。
はたまたプライベートでは1月に会社を移り、今でも続いてるのだけど、平日は今の会社、平日帰宅後+土日は前の会社の仕事をしている、仕事人間と化している状態(これもまたリニューアル作業が長引いた原因でもあるような…)。なんだかナチュラルハイな状態が続いている中の今回の一部公開。
一部というのは、結局ディスコグラフィーとかが終わんなかったから[:泣き:]
なのでディスコグラフィーは表向き昔のデザインで、インデックスしか見れない状態。詳細ページのほうも早く作っちゃいたいもんです。

しかし今回のリニューアル、バックグラウンドで少しずつ作り込んできた別nameのHTMLファイルを、公開に合わせて一気に全部renameして再構築したんですが…。XREAのサーバーに負荷がかかったのかわかりませんが、きっとリソース制限食らったと思います。公開後かなり重たかったっす…。
最近ブログサイトが増えてきて、CRONを使って定期的に再構築をしてるとかんとか?で、負荷がかかるサイトが多いのでその都度リソース制限をかけるようになったとか。困ったもんだぬ〜。私も今回のリニュで負荷かけたほうかもしれないから反省。でもファイル数は少ないんだけどな…しくしく。

そんなこんなで一応骨組み完成って感じなのであとは仕上げをちまちま頑張る次第であります。ゲロゲロリ。[:ケロロ1:]
comments (0) | trackbacks (0) | edit

posted by 由奈



いまさら感タップリで…。

赤とオレンジで。

2008-03-01-01.jpg

HPとブログのほうにfaviconをつけてみました。
色んなマーク作ってみてあーでもない、こーでもない、って合計10点ほど
ボツになってようやく確定したデザインです。
ボツの数は多いけど別段デザインが良くなったわけでは…。[:白目:]

色んなサイトみてると素敵なfaviconが多くてすっごいなーなんて思うこともしばしば。
日々是勉強でアリマス。

そういえば今日ひなまつりだからと、母親がちらし寿司を買ってきました。
私はひなまつりはひなあられのイメージしかナイです…。(結局お菓子カヨ)
comments (0) | trackbacks (0) | edit

posted by 由奈