タグ

CSSに関するlloydのブックマーク (9)

  • Webデザインとグラフィックの総合情報サイト - MdN Interactive - Webデザイン超基本のお作法50選

    Webデザインには、どんなにビギナーだったとしても、プロのWebデザイナーを名乗る人がやってしまうと恥ずかしい“マナー”ともいえる制作上のルールがあります。「知らなかった」、「教わっていない」では通用しません。なぜなら、アナタはプロなのですから。 そんな超基の“Webデザインのお作法”を50個選定し、サイト設計、テキストデザイン、画像と色彩、レイアウト、その他の5つのテーマ別に解説していきます。この特集を通して、“Webデザインのお作法”をしっかり習得、あるいは復習して、カンペキに身に付けてください。

    Webデザインとグラフィックの総合情報サイト - MdN Interactive - Webデザイン超基本のお作法50選
  • 新規でサイトを作る際に僕がいつも使ってるCSSのセットを公開するよ::::::STOPN' LISTEN::::::to the silence:::::::

    esprit

    新規でサイトを作る際に僕がいつも使ってるCSSのセットを公開するよ::::::STOPN' LISTEN::::::to the silence:::::::
    lloyd
    lloyd 2007/02/13
  • CSSはHTMLだけのものじゃない (kuruman.org > Kuruman Memo)

    CSSHTMLだけのものじゃない妥当でないCSSハックはやめようという趣旨の記事を読んだのだけれど、一つ気になるところがあったので書いておく。普段だったらdel.icio.us辺りに誰も読まないコメントを書いて流すんだけど、はてブでもまだつっこまれていないようなので、記事にしておく。 結論を述べるとスターハックはCSS文法上全く問題がないハックであり、単にUAのバグをつついただけのハックである。この記事の筆者が言うような議論の必要などない。 下記にtypoを修正しつつ記事を引用する。 次に考えたいのは、書式として合っているかどうかです。* html .hoge {~}といったスターハックなどと呼ばれるハックは、「*(全ての要素)の子孫要素であるhtmlの子孫要素のクラスhogeの要素に対して~」という意味になります。しかし、html要素はルート要素なので、あらゆる要素の子要素となりえませ

    lloyd
    lloyd 2007/02/09
  • Firefoxのスクロールバーの有無でセンタリング位置がズレる件を解消

    中央配置のデザインで、ページ移動の際にコンテンツの量によってスクロールバーが出たり出なかったりするFirefoxさん。 あのズレ、気になる人っていますよね? すぐ分かるように簡単なサンプルを用意しました。 http://css-happylife.com/template/11/ あ、当たり前だけど、Firefoxで見て下さいね。 コレを解消する為に以下のスタイルを適用させればズレがなくなります。 html { overflow-y:scroll; } 簡単っすね。 で、コレOperaじゃ解決出来ないのが難点。 overflow:scrollでズレないようには出来るけど、下が出ちゃうのはいけてない。 height:100%とかでもバーが出っぱなしにはなるけど、びみょーに出てはいけないバーまで出てしまう。 んーこの辺まで解決したかった... Track Back [1] スクロールバーを表示

    Firefoxのスクロールバーの有無でセンタリング位置がズレる件を解消
    lloyd
    lloyd 2007/02/09
  • そろそろCSSハックの良し悪しについて考えてみる(書式編) | Blog hamashun.com

    関連リンク そろそろCSSハックの良し悪しについて考えてみる(書式編) そろそろCSSハックの良し悪しについて考えてみる(管理編) おまけ付き Re:CSS の用途をわざわざ (X)HTML に限ることはない スターハックに端を発するアレコレ スターハックに端を発するアレコレ まとめ編 フルCSSでサイトを制作する際に、まだまだ避けては通れないのがCSSハックです。 巷には色んなハックが溢れていますが、今回は良いハックと悪いハックを『書式』をキーにして考えてみたいと思います。 なお、ハックはあくまで最終手段であり、使わないにこした事は無いという事を、事前に書いておきたいと思います。 また、一部CSSハックと呼ぶには語弊があるテクニックもありますが、ブラウザ実装の差異に対する技術、といった意味合いで、この記事ではハックで統一しています。 バリデータに通るか否か まず最低条件として、バリデータ

    lloyd
    lloyd 2007/02/07
  • 我的春秋: パンくずリストのマークアップ

    ちょっと前に パンくずリスト(Topic Path)を作成する際に使えそうなサンプル8種(CSS HappyLife)というエントリーが盛況でしたが、今日はパンくずナビゲーションの論理構造面を補強する意味も込めて、(X)HTML マークアップの例を、サイト構造やサイトの目的に応じて、いくつか挙げてみました。CSS の話まで入れると長くなるので、今回は(も?)(X)HTML マークアップに話を絞ります。CSS については、特にセレクタまわりが結構 変わってしまいますが、ひとまず、HirasaWa さんのエントリーなどを参照してください。(気が向いたら、別エントリーを立てますけど、実際に書くかどうかは未定。) 階層型構造(tree structure) [2006-02-11 追記] 石川一靖さんより、「セマンティクスを重視するならa要素にrel/rev属性を加えてリンクの関係性を明示するのが

    我的春秋: パンくずリストのマークアップ
  • ユーザスタイルシートによるカスタマイズ(2) - Stylish - えむもじら

    この記事は、Software Design 2007年1月号に掲載された拙著「Firefox 2 カスタマイズガイド」の一部を加筆修正したものです。 ユーザスタイルシートを用いてウェブページや Firefox 体の見栄えを変更することができます。 もくじ ユーザスタイルシートを管理する Stylish ユーザスタイルを管理 ユーザスタイルを作成 ユーザスタイルをインストールする その他の情報 about:config と user.js による Firefox のカスタマイズ(別ページ) ユーザスタイルシートによるカスタマイズ(1)(別ページ) Stylishでユーザスタイルを管理 Stylish という拡張機能を用いるとユーザスタイルを簡単に管理できるようになります。 Stylish をインストールすると、このような管理画面から、ユーザスタイルに名前をつけて個別にオン/オフの切り替え、

  • ユーザスタイルシートによるカスタマイズ(1) - えむもじら

    この記事は、Software Design 2007年1月号に掲載された拙著「Firefox 2 カスタマイズガイド」の一部を加筆修正したものです。 ユーザスタイルシート(userContents.css と userChrome.css)を用いてウェブページや Firefox 体の見た目を変更することができます。 また、Stylish という拡張機能を用いると、ユーザスタイルに名前をつけて個別にオン/オフの切り替え、編集など、ユーザスタイルを簡単に管理できるようになります。 もくじ Firefox 2 入門 総合目次 ユーザスタイルシートとは Firefox の見た目を変更する メニューの削除とフォント設定 ストップ/リロードボタンを統合 サイドバーを右に配置する アクティブなタブを目立たせる ウェブページの見た目を変更する めざわりなウェブページの表示を無効に Gmail の文を等

  • CSS のコメントの書き方コレアレ

    CSSHTMLと同じように、ソース中にコメントを挿入することができます。 /*と*/で囲った文字列がコメントになりますが、入れ子にすることはできません。また、他のプログラムにあるような「#」や「//」といった単一行コメントはありません。 適切なコメントを挿入することで、複数人での作業するときや、時間がたってから編集するときなどにコードの見通しが良くなります。ブラウザ間の差異を埋めるための宣言やハックなんかも、適用させるブラウザ名や理由などをきちんとコメントで書いておきたいですね。 僕は、スタイルをグループに分けて記述するときなど、コメントを目立たせるために次のように記述しています。 /* ------------------------------ Header ------------------------------ */ div#header { } . . /* -------

    lloyd
    lloyd 2006/12/03
    CSSのコメント表記法。
  • 1