タグ

studyとCSSに関するAmaiSaetaのブックマーク (9)

  • Learn HTML5, CSS3, Javascript - video style tutorials

    Learn HTML5, CSS3, Javascript and more... Video style walkthroughs showing cool stuff being created from scratch

    AmaiSaeta
    AmaiSaeta 2012/09/21
    via: 学習に最適! 他人が書いたコードをリアルタイムで見られる「TheCodePlayer」 : ライフハッカー[日本版] http://www.lifehacker.jp/2012/09/120919thecodeplayer.html
  • vertical-alignの使い方【css tips】[to-R]

    vertical-alignの使い方【css tips】 vertical-alignは正しく理解していないと使いにくいプロパティである。 特にtableレイアウトからcssレイアウトに移行する際に混乱が発生しがちだ。 テーブルレイアウトでよく使う以下のようなコードがある。 <table width="200" height="200" bgcolor="#39FF6B"> <tr> <td valign="middle" align="center">中央に表示したい文字</td> <tr> </table> サンプル このコードをcssレイアウトに変更する際に HTMLを <div> <p>中央に表示したい文字</p> </div> CSSを div{ width:200px; height:200px; background:#39FF6B; text-align:center; v

    vertical-alignの使い方【css tips】[to-R]
    AmaiSaeta
    AmaiSaeta 2010/05/18
    vertical-alignはdisplay:table-cellな要素に適用される。
  • Javascript cssRules - とみぞーノート

    1. 概要 Javascriptからスタイルシート内のルールを変更する処理のまとめ。スタイルシートそのものを変更したい場合は「Javascript 動的なCSSの適用」を参照。 2. スタイルシート関連のオブジェクト Javascriptからスタイルシートのルールを操る際に関係するオブジェクトを図1にまとめる。FireFoxとIEで若干扱いが異なるので注意が必要。 2.1 stylesheet オブジェクト まずドキュメント内のスタイルシートを扱うstylesheetオブジェクトがある。stylesheetオブジェクトはドキュメントが読み込んでいるCSSファイルや<style>タグで指定したCSS毎に存在する。 ドキュメント内のstylesheetオブジェクトは全てdocument.styleSheetsに格納されており、document.styleSheets[0]のようにして参照できる

  • CSS セレクタに関するおさらい | WWW WATCH

    CSS を扱う上でセレクタの存在はとっても重要です。特に CSS3 Selectors ではかなり複雑な条件分岐ができるようになっていますので、スマートな (X... CSS を扱う上でセレクタの存在はとっても重要です。特に CSS3 Selectors ではかなり複雑な条件分岐ができるようになっていますので、スマートな (X)HTMLCSS コーディングを行う上で、セレクタを理解しているとそうでないのでは生産性に差が出ます。 CSS3 は現在 Working Draft の段階ですので、まだ正式な勧告はなされていませんが、多くのモダンブラウザにおいてそのほとんどが先行実装されていることから、現状でも利用価値が高いといえます。 ということで、ここでは自分へのメモの意味も込めて、CSS3 で定義されているものも含めた各 CSS セレクタについてリファレンスしてみようと思います。 今回の解説

    CSS セレクタに関するおさらい | WWW WATCH
  • css-eblog.com - このウェブサイトは販売用です! - css eblog リソースおよび情報

    This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it constitute or imply its association, endorsement or recommendation.

    AmaiSaeta
    AmaiSaeta 2010/01/17
    CSS3のセレクタについても。
  • CSSの実装状況で変わるボックスのデザイン方法

    Web制作において、対応しなくてはいけないブラウザの中には、未だしぶとくIE6が残っています。IE6が2001年に登場したことを考えると、もう8年もその時代の「縛り」を(健気に)守りながら作っていることになるんですね。 いま良く使われているCSSのテクニックも、ほとんどはこの「縛り」の範囲内で有効な手法なわけですから、突然2001年にタイムスリップしてサイトを作る事になったとしても、今も昔も変わらない1つの古文書に従えばいいので、きっと活躍できます。 しかしたまらん、流石に疲れた。 ボックスひとつができること CSSでは、文書を構成する各要素は、ボックスという矩形領域に置きかえられ、それらの持つプロパティを操作して装飾します。つまり、ボックスはページデザインを構成する最小単位と言えるわけですね。 そこで今回は、最小単位となる1つのボックスに対して、どのような装飾手法が有効かという点を、CS

    AmaiSaeta
    AmaiSaeta 2009/09/14
    アニメーションは初めて知った。ううむ。いいなぁ。
  • クリックジャッキングってこうですか? わかりません

    ↑ この透過されているiframeは、ブラウザの最前面に配置されています ※はてなにログインしていると、どのようにボタンが被っているのかわかりやすくなります

    AmaiSaeta
    AmaiSaeta 2009/03/05
    http://internet.watch.impress.co.jp/cda/news/2009/03/03/22653.html 読んで全然イミフだったけど、ここのお陰でわかった。成る程ー。こんな事出来るんだな……奥が深い。 | …………で、つるぺたは何処だい?(こら
  • Firefox拡張機能(extension)の作り方 — ありえるえりあ

    Firefox拡張機能(extension)の作り方 Firefox拡張機能(extension)の作り方を説明します。 Firefox 拡張機能とは Firefox add-onの一種です。 add-onは次のように分類できます。 plugin ...実体はexeやdll。C++で作成。素人にはお勧めしません 検索バー ...実体はXMLの設定ファイルのみ。見れば分かるので説明はしません スペルチェッカ ...日語には無縁なので未調査(たぶんファイルを作るだけ) 拡張機能 ...実体はXML、JavaScriptCSS。必要なら、C++で書くXPCOM。これから説明します テーマ ...拡張機能のサブセット。CSSのみの場合をテーマと呼びます

    AmaiSaeta
    AmaiSaeta 2007/07/20
    Fxの拡張を作りたくなったときにでも。
  • CSS解説 -カスケード (The cascade)-

    あるHTML文書に適用されるスタイルシートには、 「HTML文書作成者」・・・HTML文書に直接記述したり、別ファイルとして用意してLINK要素で連携させたりする。 「ユーザ(利用者)」・・・使用するブラウザ等で指定できる場合がある。 「UA(ブラウザ等)」・・・CSSに適合するUAでは、どのスタイルシートよりも先にデフォルトスタイルシートが適用される。(或いはそうであるかの様に動作する。) という3通りの出所があります。これら3つのスタイルシート間で宣言が衝突したり、或いは一つのスタイルシートの中であっても宣言が衝突する事があります。そういった場合に、最終的にどの指定が適用されるのか、その優先順位を決めるのがこの「カスケード処理」です。 この「カスケード処理」では、以下で説明する、 出所による優先順位 詳細度による優先順位 位置による優先順位 の順に処理されます。 その1.出所による優先

    AmaiSaeta
    AmaiSaeta 2007/05/09
    CSSの優先度について
  • 1