Updates from 1月, 2011 Toggle Comment Threads | キーボードショートカット

  • fujison 18:28 on 2011/01/07 パーマリンク | 返信
    Tags: CSS   

    3D Text 

    CSSでテキストを3D表示する 3D Text というサイトがあったので、日本語も表示してみた。

    Chrome Windows
    CSS 3D Text Chrome WindowsXP

    Chrome Mac
    CSS 3D Text Chrome Mac

    CSSには関係無いのですが、さすがに Mac は綺麗に見えます。
    Text という部分のカーニング(文字詰め)もうまい具合にやってくれますね。

     
  • fujison 21:38 on 2007/02/03 パーマリンク  

    CSS Tips:コメントアウト 

    ふつー、CSSのコメントは

    /* */、もしくは <!– –>で囲う。(W3C:Comments)

    が、しかしだ、こんな方法で行う事もできる。

    A trick I use all the time to temporarily disable a style attribute involves simply adding an ‘x’ in front of the attribute name. It’s safer then cutting and quicker then commenting out:

    
    
    1
    2
    3
    4
    5
    6
    7
    #footer{

     border-top: 1px solid #e5e5e5;

     xborder-bottom: 1px solid #e5e5e5;

     }
    Squeaky Clean CSS

    border-bottom属性をコメントアウトするのに、先頭に’x'を付けている。なるほど、文法が間違っているわけでは無いから、こういう方法もあるのか。知らない人が見たらコメントだとも思えないのが欠点だけど、作業中のスピードアップが計れるのが良い所。

    実際に仕事で使うとしたら、リリースする時に実行するスクリプトというのを作って、自動で’x'が先頭に付いた属性を削除するべきかな。これをそのまま納品するのは避けないと。納品前にはlintで文法チェックしすべし。(Webアプリケーションではみんなどうしているんだろう、ふと疑問に思った。)

    Squeaky Clean CSSでは他のTipsもあって、CSSを見やすくするためのグループ化、インデントで見やすくする、<div>タグを閉じる方にid名をコメントで記述する等、ありがちではあるけど大事な事ばかり。インデントのスタイルに関してはそれぞれポリシーもあるだろうけど、書いた人の考えが出てくる部分でもあるので、結構他人の書き方は参考になる。

    CSSセレクタの指定が重なる時に優先されるのは?

    Squeaky Clean CSSからリンクされていた、他のページにも面白い記事があった。CSSではidやclass、タグを指定(セレクタと呼ばれる機能)して、色や大きさ等の属性を設定するのだが。指定が重なった時には何が優先されるのかを、この記事では解説してた。しかもスターウォーズに例えて!

    Join me, and together we can rule the galaxy as father and geeks!

    内容はともかく、話のたとえでスターウォーズの画像を作って掲載されているので。まずはそちらをチェック。

    一応自分のために内容を要約しておくけど。このページによればCSSのセレクタのそれぞれを、idは1、classは10、タグは100と考えて、それぞれを足した数の大きい方が優先されるのだとか。タグの指定が一番強力という事になる。

    しかしこの記事のコメントを見て行くと、どうもこれは正確な話では無いらしい。あんまり沢山書いてあってとても読んでいられなかったけど、タグ>class>idという関係があるんだな〜という程度を知っていれば、とりあえずは十分かと。

    きちんと知りたい人は、迷わずhttp://www.w3.org/へ!

     
c
新規投稿作成
j
次の投稿 / 次のコメント
k
前の投稿 / 前のコメント
r
返信
e
編集
o
コメントを表示する / 隠す
t
トップへ移動
l
go to login
h
show/hide help
esc
キャンセル