« 2009年2月 | トップページ | 2009年4月 »

2009年3月10日 (火)

横並びリンクをボーダーで区切る

リストタグを使ったメニューでは横並びにするためにおきまりのCSSの設定がある。

先日、こんな設定を知ったのでメモ。

こんなメニューリストがある。

<div id="menu">
<ul>
<li>ああ</li>
<li>いい</li>
<li>うう</li>
<li>ええ</li>
<li>おお</li>
</ul>
</div>

それをこのようにスタイルシートで指定する。

div#menu {
   overflow:hidden;
   _height:1.5em; /* for IE6 */
}

ul {margin-left:-6px;}
li {padding:0 5px;display:inline;border-left:1px solid #666;}

  • ああ
  • いい
  • うう
  • ええ
  • おお

なかなか洒落てる。

Li要素にpaddingを指定して、左側にのみボーダーを指定する。
そうしておいて、paddingが5pxでボーダーが1pxだから、ul全体の左マージンを6pxマイナス指定する。(これをネガティブマージンと呼ぶ)
しかし、全体はoverflow:hiddenを指定しているから、一番左側のボーダーだけはみ出して非表示になる。

よく考えたモンだ。感心したのでメモ。
これからはこれ使おうかな。

clearfix

よく忘れるのでおなじみのCSSハックをメモ。

画像をfloatさせてその横にテキストを置こうとすると背景が途中でとぎれることがある。

そんなときに便利なのが「clearfix」というハック手法。

.clearfix:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}

.clearfix {display: inline-block; }

/* Hides from IE-mac \*/
* html .clearfix {height: 1% }
.clearfix { display:block;}
/* End hide from IE-mac */

実際には

<div class="clearfix">

<p><img src="***" "alt=""></p>
おいしいパスタはいかが?

</div>

というように使用する。

2009年3月 8日 (日)

 日展に行く

第40回の日展に行った。
毎年必ず行くことにしている。デザインの参考になる。

今年もたくさんの作品を見た。
賞をもらった作品もあるし、そうでないものもある。
依頼出品もある。

私は作品の良し悪しなどわからない。
しかし、わからなくても良いと思っている。

絵画は感性。作者の脳を通してみた世界。

どれひとつとして私と同じ感性はないだろう。
ただ、よく似たものはある。

それよりも、私とまったく違う感性に出会いたい。
毎年そう思って眺める。

今年も良い作品に会えた。

特選とか内閣総理大臣賞とかまったく関係ない。

私が好きかそうでないか。それだけ。

心地よく感動し、心地よく眺められる。
なにかしら心に残る作品。

それは...。(ブログには書かない。人によって違うから。)

次の私の作品の参考にしよう。

« 2009年2月 | トップページ | 2009年4月 »