タグ

CSSとcssに関するnipotanのブックマーク (55)

  • CSSファイルを保存すると同時にブラウザをリロード

    自動リロードで開発をアジャイルにするたったひとつの方法!や萌ディタで保存と同時にSafariをリロードするデモと似たようなものをWSH with JScriptと秀丸マクロで泥臭く実現してみようとかいう話。やろうと思えばいろんな環境で実現できそうてなもんだ。 ブラウザのリロードは魔法のメソッドSendKeyでF5を送ってやれば良し。ただ、SendKeyはアクティブなウィンドウにしか効果が無いので、 CSSファイルを保存 ブラウザをアクティブに F5をSendKey エディタをアクティブに としてやる必要がある。エディタをアクティブにするのはPIDさえ知ってればJScriptでいけるけど、調べるのはちょっと面倒。しかしながらほとんどのエディタは「既に開いているファイルを開こうとすると、既にそのファイルを開いているウィンドウ(とかタブ)を最前面にする」という動作をするので、保存したCSSファイ

    CSSファイルを保存すると同時にブラウザをリロード
  • CSS で面倒くさいのは < 13 < July < 2006 < nulog, NULL: : something : out of the headphone

    ブラウザ間のアレなんだから、あんまり CSS 書くこと自体を面倒くさいことにしないほうがいいよね、って思うんだ。 ところで自分が CSS を書くときに気をつけていることを書くよ! 必ずルールをインデントする (TAB インデント) セレクタを複数書く場合は最後以外改行する 規則のあとには必ずセミコロンを入れる (最後も) 最後のルールのあとも改行する 宣言ブロック間はホワイトラインを入れる border, border-style, border-color, border-width 以外の border 系プロパティを極力使わない font プロパティを使わない。 list-style 以外の list 系プロパティを極力使わない margin, padding 以外の margin, padding 系プロパティを極力使わない background 以外の background 系プ

    nipotan
    nipotan 2007/08/13
  • スタイルシートを書く時のガイドライン - 2xup.org

    2006-07-11T19:56:28+09:00 会社ではやっているのだけれど、自分のウェブサイトでもやってみよう。と簡略記述を利用する場合の値の順序やらもまとめとく必要があるのかもしれないけれど、セットフォーマットルールやプロパティの順番だけをサクッとまとめて資料にしてみました。課題は残したもののこれだけでも相当すっきり。詳細やセットフォーマットルールに関しては、ダウンロードできるようにしている資料を参考にしていただくとして、このエントリーではプロパティの順序についてまとめることに。自分自身が実際に作業を進めていくことを考慮し、その考えに基づいて設定したモデル別の順序は以下の通り。 生成 内容, 自動番号付け及びリスト (Generated content, Automatic numbering, and Lists) 利用者インターフェイス (User Interface) ビジュ

    nipotan
    nipotan 2007/08/13
  • 毎日考ブログ -Web屋のウェブログ- | Web標準に進路を取れ 第5回「テーブルレイアウトは罪なのか」

    テーブルレイアウトとはテーブルタグを、左のようにセルを切ってレイアウトするもの。そもそもはテーブルタグは表に使われるものであって、レイアウト目的で使うべきではないという意見はごもっともなものの、きっちり幅指定や余白指定ができてブラウザ依存しにくいことから、企業サイトはもとよりいろいろなサイトに使われておりました。いや、今でも立派に使われています。 対してCSSレイアウトは、上と同じレイアウトをHTML(XHTML)+CSSで表現するもの。こんな感じです。記述は一例として適当に書いてるんで、アテにしたり突っ込みいれたりしないでくださいね(笑)。 【HTML】 <div id="header"> <h1>毎日考ブログ(ヘッダ部分)</h1> </div> <div id="main"> <div class="menu">メニュー部分</div> <div class="contents">

  • mixiをXHTML CSSで組みなおす

    mixiをXHTML+CSSで組みなおすで取り上げた生徒の提出した課題には、記事にも書いたとおり、まだいくつか改善できる点がありました。が、色々修正+αしたようで、再提出してもらいました。 前回提出したものと比べると、XHTMLが部分的に修正され、classの数が減っている。オーイェス。機能ごとにclassを与えて共通するスタイルをまとめることで、管理も編集も楽チンにする事が出来るんだ。 Comments:4 上場 2006年6月10日 23:34 力作ですね。そんな技術があってうらやましいです。 MUSCAT 2006年11月20日 07:23 感動しました。 参考に研究したのですが、小生のは拡大で破壊されました。 どか?んん! wu 2006年11月23日 04:56 どか~ん! 僕がレイアウトを組む際は、大小に+2ほどの拡大で可読が可能になるというラインで制作しています。 XHTM

  • mixiをXHTML+CSSで組みなおす - 3ping.org

    授業内で、既存サイトをXHTML+CSSで組み直す練習をするのですが、生徒が提出したのが「mixi」を書き直したもので、とてもよく出来てました。 mixiはテーブルレイアウトで組まれていて、基は3カラムだけど、もとがテーブルなだけあって、ヘッダーのメニューが少し複雑だったり、セクションごとのビジュアル的なデザインや、細かい文字の余白のとり方が難しい。 現在のCSSは「どんな見栄えも出来てしまう」とは言えない。当は言いたいのだけど、実際にはブラウザーのバグを回避するためにバッドノウハウを駆使したり、CSSの限界から、見栄えとは切り離すべきXHTML部分を調整しなくては再現できない見栄えがある。 けど、生徒の提出したものは、見栄えのためだけのdivも無ければ、ヴァリデーターだけを100点で通過するような機械騙しのXHTMLでもない。(一部、リストとしてマークアップできるところはある) もち

  • Ajaxian » Prototype adds CSS selector function: $$(’div#page p.summary img’)

    Looking for information about Informa TechTarget products and services? The commercial homepage has moved. Visit Informa TechTarget News 01 Aug 2025 / Policy & regulation Trump urges top drugmakers to cut U.S. prescription drug costs Trump increases pressure on 17 of the world's largest drug makers to lower U.S. prescription drug prices in 60 days, ahead of proposed tariffs and pharmaceutical impo

    Ajaxian » Prototype adds CSS selector function: $$(’div#page p.summary img’)
  • 注意点,ブラウザ振り分け

    IE3はサポートしていない単位(em, ex), 単位のない実数を全てpxとして扱います。 外部ファイルを参照する場合、IE3ではBODY要素に対するbackground指定が無視されます。 相対URIはスタイルシートを基準にしなければならないのですが、NC4はHTML文書が基準です。 </TD>, </TH>, </P>等は省略可能なのですが、出来れば省略しない方が良いです。例えば、画像やテーブルにline-height指定が及ぶとブラウザによってはとんでもない表示になるので、分割するとします。以下のような場合、省略してしまうとブラウザによっては分割したのが無駄になります。 <P style="font-size: 12pt; line-height: 15pt">段落</P> <P><IMG src="x.gif" alt="画像"></P> IEはParagraph、NC4はTabl

    nipotan
    nipotan 2005/12/23
  • リンク先のファイルの種類によってマウスカーソルを変える -- 3m/746の日記 2.0 final β - 久しぶりに

    日光を浴びた。 日が昇る前に会社に行って、日が沈んでから家に帰る日がずーっと続いていたのだ。 疲れたよ。でも今日は休みだ…もう今日も終わるケド。 (12/14に書き直しました。以前の内容は念のため id:mitamu:20051214#1134571263 にとっておきました。ご迷惑をおかけしてたいへん申し訳ございません。) WebページのリンクをクリックしたらそれがPDF文書だったりWord文書だったりExcelワークシートだったりして、ファッキン*1なAdobe ReaderとかMicrosoft WordとかMicrosoft Excelとかが起動してしまった…。 なんてコトがよくあるわたしとしては、PDF文書だとかがはっきりわかればそもそもクリックせずにすむワケなのだ。 Mozilla Firefox 1.5だとマウスカーソルを変えられるので、userContent.cssにごにょ

    リンク先のファイルの種類によってマウスカーソルを変える -- 3m/746の日記 2.0 final β - 久しぶりに
  • 遂に完成 - jazzanovaのブログ

    12月5日追記:元のデザインに戻しました。 aamall.jpさんに依頼していたデザインですが、随分遅くなりましたが遂に完成です。 見て下さい、これが15,000円のデザインです!!! どーですか、このデザイン。 あ、私の方では一切いじっておりませんからね! 一応参考にして欲しいURLとして3つ渡しました。 http://www.2manydjs.org/v2/frameset.htm http://www.davisbusinessconsultants.com/ http://www.spoiltchild.com/ それと、デザイナーさんとのやりとりの際、こちらから細かく指定したり注文をするのは控えました。 デザイナーさんに自由にやって欲しいですからね! 皆さんの感想を聞かせて下さい!!! 追記 ちなみにFirefoxで見るとこんな感じです!!! ある程度修正されたので画像は削除しま

    遂に完成 - jazzanovaのブログ
    nipotan
    nipotan 2005/11/16
    がんがれ aamall.jp さん
  • #!shebang.jp : Yellow Fade Technique

    November 14, 200515:50 Yellow Fade Technique カテゴリ技術ネタ 最近、よく見かけるので prototype.js 使って実装してみる。 fat.js ってもっと便利なやつもあるけど、単純にやってる事がよく分かるように実装してみたつもり。 エフェクトをかけたい要素の id を指定して、 <script type="text/javascript"> new Fade('id'); </script> みたいな感じで使う。 var Fade = Class.create(); Fade.Colors = ['#ffff99', '#ffffaa', '#ffffbb', '#ffffcc', '#ffffdd', '#ffffee', '#ffffff',]; Fade.prototype = { initialize: function(eleme

    nipotan
    nipotan 2005/11/14
    手軽に実装出来るなぁ。相変わらず $(element) な書き方を見るとポカーンとなる orz
  • On the Road

    nipotan
    nipotan 2005/10/24
    XML を css で見映えを変え、js で制御する Mozilla Layout Engine のサンプル
  • hail2u.net - Weblog - FirefoxのuserContent.cssネタ

    Firefox 1.5 Beta 1よりURLやドメインなどでCSSルールを切り分けることが可能になりました。これによりuserContent.cssがとてもいじりやすくなった(あるサイト向けにテキトウに書いても他のサイトに誤爆しなくなった)ので、userChrome.cssと同じくガリガリいじると楽しいようなそうでもないような感じです。 _blankなリンクのカーソルを変更 a[target="_blank"] { cursor: alias !important; } cursor: crosshair !important;とかやってる人が多いことと思われますが、1.5 Beta 1から先取りサポートされたaliasにするとより直観的に把握できるようになると思います。 View Page Sourceのフォントを固定する body#viewsource * { font-family

    nipotan
    nipotan 2005/10/11
    メモメモ
  • CodeWeb: ブラウザ別CSSハック一覧表

    どうやら、CSSハックネタはウケが良いようなんで、CSSハック一覧表作ってみました。 途中で眠くて力尽きてます・・・続きはまた今度 (現在随時続きを追加しています。) 2005年10月現在使用可能CSSハック 複合技CSSハックは一つでもブラウザがバージョンアップすると使えなくなる可能性があります。 また、理論上は可能というだけなので、適用されない場合もあるかもしれません。ご了承ください。 ここまでするぐらいならブラウザ別にCSSを外部読み込みさせた方が良い気もします。 注:全部自分で確認したわけじゃありません。(Mac持ってません)使用する前にご自分の環境で必ず確認してください。

    nipotan
    nipotan 2005/10/04
    知らんのばっかだ
  • スタイルシートによる崩れない 2カラム 3カラム・レイアウト

    nipotan
    nipotan 2005/09/21
    あとで見る