CSS スタイルシートの最近のブログ記事

Firefox 3正式版リリースがされました。早々ダウンロードしてCSS関係を見てみました。下記のURLにリスト関係のサンプルページがありますが、すべて正しくマークが表示されました

http://web.okanos.com/sample/list-style-type.htm

O rdered List <ol> マークの型katakana-iroha

  1. 数字
  2. 時計数字小文字
  3. 時計数字大文字
  4. アルファベット小文字
  5. アrファベット大文字
<ol style="list-style-type: katakana-iroha;">

    <li>数字</li>
    <li>時計数字小文字</li>
    <li>時計数字大文字</li>
    <li>アルファベット小文字</li>
    <li>アrファベット大文字</li>
</ol>

大阪にてCSS Niteを開催

04月
12
土曜日
2008
| コメント(0) | トラックバック(0)

CSS Nite in Osakaが開催されます。

  • 日時:2008年6月7日(土)17時スタートの予定
  • 会場:アップルストア心斎橋
  • 主催:CSS Nite実行委員会
  • 決定したセッション概要

    ◇デザインとWebシステムとの付き合い方
     /古荘貴司(株式会社日本情報化農業研究所)
    ◇入門以前!デジタル一眼 ~ケータイ・コンデジからのステップアップ~
     /岡田陽一
    ◇Web業界における未経験人材をどのように育てていくか
     /冨田千紘

     

    css プロパティ

    01月
    07
    月曜日
    2008
    | コメント(0) | トラックバック(0)

    背景の重ね合わせ

    12月
    22
    土曜日
    2007
    | コメント(0) | トラックバック(0)

    マンネリなので新年に向けてデザインを少しいじってます。

    とはいっても全体のレイアウトは変えずに、背景画像を重ね合わせてみました。

    一番下の背景には、コンテンツの両サイドにグラデーションのエッジが表示されるように、センター表示です。

    コンテンツより少し長めの背景画像で両サイドをグラデーション処理したものです。

    次にヘッダーです

    ヘッダーには、グラデーションのパイプ状の背景をタイルで貼り付け

    その中にヘッダーコンテンツの領域を取りその領域の背景に神戸の写真をランダム表示しています。

     

    バナー画像をランダムに変える

    11月
    08
    木曜日
    2007
    | コメント(0) | トラックバック(0)

    ランダム画像に関しては、JavaScriptによる方法はたくさん紹介されています。その場合、ランダム表示する画像のファイル名を連番にするなど制約があったりします。

    そこで探してみました。

    rotate.php を使う方法です。

    参考ページはhttp://chocobit.com/2007/03/19.php

    バナー画像などはDIVなどの背景画像にbackgroundで指定されるので、CSSファイルでその指定を、

     

    background: url(rotate.php) no-repeat;

    などのように指定すればOK

    ファイル名は何でもOKですが拡張子は、rotate.php のソースを見れば以下のようになっています。

     $extList['gif'] = 'image/gif';
    $extList['jpg'] = 'image/jpeg';
    $extList['jpeg'] = 'image/jpeg';
    $extList['png'] = 'image/png'

     

    疑似クラスの記述順・リンク

    10月
    07
    日曜日
    2007
    | コメント(0) | トラックバック(0)

    リンクに関する疑似クラスでは記述する順番が重要とのことで記載の変更をしました。

    たとえば「hover 」が「visited」よりも先に記述されると「visited」スタイルに上書きされてしまいます。
    そのため、リンク先から戻って来たときには「hover」に書いたスタイルは無効になってしまいます。

    正しい順序だそうです。

    a:link
    a:visited
    a:active
    a:hover

     

    レイアウト左寄せ、右寄せの解除

    10月
    07
    日曜日
    2007
    | コメント(0) | トラックバック(0)

    CSS で大きなボックスの中に横並びにボックスをレイアウトする場合、「float: left」「float:right」を使います。この「float」を閉じておかないと、正しくレイアウトされない原因にもなります。

    left right の指定ブロックの後にclear:both(左右のfloatを解除)を追加するとfloat指定の影響を解除されます。

    ブログのレイアウトのようにサイドバーを右寄せ・左寄せする場合フウターの表示が崩れたりします

    最近ではメインブロックを段組するケースも増え、DIVブロックを横に並べる場合に右寄せ・左寄せの解除が重要になりますね

     

    四方にラインを指定した100pxのボックスでそのままで周囲にたとえ1pxのラインでも左右合わせて102pxになります。

    見た目160pxで四方30pxの「padding」と1pxの枠線のボックスのサイズは...といったボックスごとにサイズを割り出すという大変ややこしい事になり、レイアウトが崩れる原因にもなります。

    これを回避するには、基本の大きさを指定したボックスの中に「inner」ボックスを作り、そこに余白やラインを指定します。この場合「inner」ボックスには大きさの指定を行いません。

    セレクター・パターンマッチ

    09月
    29
    土曜日
    2007
    | コメント(0) | トラックバック(0)
    CSS では,セレクタと呼ばれるパターンマッチの規則を用いて,ツリー構造内の要素に適用されるスタイル規則を決定する仕組みになっています。 このセレクタの章を読まれる前に,まず構造と規則を目を通すことをお奨めします。

    okanowebの静的ドキュメントはすべて左サイドバーの2カラムで作成していますがMovableTypeで作成しているトップページと主要コンテンツのトップおよび投稿記事について3カラムレイアウトに変更しました。

    理由はサイドバーのメニューの増加でページの長さが長くなりすぎたので短くしたかったというのもです。

    それと、Snap Shots を復活させました。

    煩わしいとの批判もありますが、こんなツールもあるよというアピールです。