TRANS - * { magin: 0;}だけでは物足りない！zoom: 1;を使おうよ！
IE6からIE7が今後本格的にマーケットシェアを取って行くことを考えると、IE7の仕様やバグを考えた上でのマークアップが欠かせないとは思います。でも、僕らはまだIE7がどんなものかが分からない。そのため、とりあえず* { zoom: 1;}を指定しておくことが安全策なのかもしれません。 IE7のZoom機能で、見事にこける。 先日、うちの本体のサイトを更新し終わった際に、スタッフから「あれ、しゃらくのサイトずれてるよ」と指摘されました。更新箇所が多く、CSSも多少いじくったので、どこか消してしまったのかもしれません。そこで、自分のブラウザで確認するも、どうも問題が再現できない。そのスタッフのブラウザを見ると、こんな感じになっていました。 僕のFirefoxで見てみても問題ないし、そのスタッフが使っているIE7でも問題なし。「うーん」と悩んでみるものの、意外と答えは簡単なところにありました。
Stylishで快適にユーザースタイルシートを書くための覚書 | 暴満館 ～The House of full Violence～
偏執的な書き方はともかく、Stylishを使って記述から投稿までを解説したようなサイトは見たことがないので、こちらも覚書として自分の手法を紹介する。 なお、ここから先は偏執的ではない。 Stylish専用プロファイルの作成 Firefoxに導入する拡張を絞り、広告ブロック等も行わないようにすることでwebページへの影響を最小限に抑える。これにより素のwebページを弄ることができるようになるので、ユーザースタイルシートを導入した際の他ユーザーとの差異を小さくすることができる。 別プロファイルを起動できるようにする。 複数の Firefox を同時起動するを参考に、 C:\Firefox\firefox.exe -no-remote -P "Stylish" このような感じでショートカットを作成。初回はプロファイル編集ダイアログが表れるので新規プロファイルを作成する。間違っても通常使うプロファ
ごく簡単なHTMLの説明
HTMLは本来簡単で便利なものです。「30分間HTML入門」で基本は十分。まずシンプルに自分の情報を表現してみてください。 You can write a document as simple as you like. In many ways, the simpler the better. -- Tim Berners-Lee 簡単なHTMLの説明 少し詳しいHTMLの説明 XHTMLから次世代ウェブへ 電子テキストで情報発信 簡単なHTMLの説明 だんだん説明の量が増えてきたので、コンパクトな入門ページを用意しました。 基本がきちんと分かる30分間(X)HTML入門 HTMLを使った人間・コンピュータ双方にわかりやすい表現 （スライドのHTML版） 何のためのHTML？ HTMLは画面をレイアウトするためではなく、文書を環境に依存せずに共有できるように記述するための約束です。そこを正
印刷時専用のスタイルシートを作る - ［ホームページ作成］All About
印刷されることを考慮したページにするには？ 凝ったデザインは、画面上で閲覧するには良くても、印刷には向いていないことがあります。 デザイン目的の画像が多かったり、背景色が多くてインクがもったいなかったり…。 印刷されることも考えつつ、画面上で見栄えの良いデザインを考えるというのは、なかなか大変です。 そこで、画面表示用とは別に、印刷専用のスタイルを用意してみましょう。 そうすることで、印刷用にシンプルなデザインを適用させることができます。 出力メディアタイプ別にスタイルを用意 スタイルシートでは、出力先に応じたスタイルを記述できる仕組みが用意されています。 例えば、以下のソースは、画面表示用スタイルと印刷用スタイルを別々に記述した例です。 /* 画面表示用 */ @media screen { strong { color: red; background
JavaScriptを使わずにページのCSSを切り替える:phpspot開発日誌
ページのデザインを利用者好みにカスタマイズできるように、javascript を使い、CSSを切り替えることでデザイン変更できるサイトがありますが、 JavaScriptオフでも同様のことを実装したい場合のサンプル。 JavaScriptを使わずに、PHP+クッキーを使ってページのCSSを切り替えてみましょう。 PHPの知識がなくても、次のサンプルを使えば簡単に誰でもCSSを切り替えることが出来ます。 次のサンプルは、main.css , blue.css , red.css , pink.css というCSSを切り替えたい場合のサンプルです。 (1) まずは、レイアウトを保存するクッキー設定用のPHPスクリプト( index.phpとして保存 ) <?php $valids = array( "main", "blue", "red", "pink" ); $layout = (isse
スタイルシート(css)学習辞典
ブラウザ対応順に並べたスタイルシート(css)学習辞典。ブラウザ対応で苦しんでいる人のために作られた辞典。 スタイルシートが分からなくて、初めての方は「スタイルシートの基礎知識」 一括でダウンロードしたい方は、次の圧縮版をどうぞ。LZH形式で圧縮しています。＞＞css42.lzh。LZH形式だと困る方は、代わりの形式（zip形式とtar.gz形式）を用意しています。（css42.zipあるいはcss42.tgz） 重要なお知らせ アドレス（URL）が変更しました。旧アドレスは来年の2004年1月末に削除される予定ですので、大変お手数ですが、リンクをされている方は修正をお願いします。 2003年9月1日から辞典のアドレスが変わります。「http://dhr.tipod.co.jp/....」が、新しく「http://dhr.at.infoseek.co.jp/....」に変更します。なお、旧
フッタを常に下部に配置 - lucky bag
コンテンツの内容が少なくても、常に下部にフッタを配置させるための方法。ちなみに Safari とマック IE では動作しないっぽい。 footerサンプル 実際にサンプルを見てみれば分かりますが、ウィンドウを下方に広げても、フッタは常に下部に張り付いたままな筈です。また、ウィンドウを上部に縮めていってもコンテンツ部分の所でピタッと止まり、それ以上は移動しません。 html と body への指定 サンプルのソースを大雑把に分けると下記のような構造になっています。 <div id="container"> <div id="contents"> <div id="header">ヘッダ</div> 内容 </div> <div id="footer">フッタ</div> </div> まず、html と body の高さを 100% と指定しておきます。 container への指定 次に、
要素を常に画面の中央に配置 - lucky bag
これまた使い道があるのか微妙なんだけど、要素を常に画面の垂直、水平の中央に固定して配置させてみる。(X)HTML は下記のものを使用。 <div id="container"> <img src="q.jpg" alt="Q-car" width="120" height="160" /> </div> 適用する CSS は下記の通り。ポイントは、要素の幅と高さそれぞれの半分の値をネガティブマージンで指定すること。 #container { position:absolute; width:120px; height:160px; left: 50%; top: 50%; margin-left: -60px; margin-top: -80px; } んでもって、実際のサンプル。ウィンドウ幅を縮めたり広げたりしても、画像が常に中央に固定されているはず。 centering.html あ、
訪問済みリンクを一工夫する - lucky bag
リンクの色によって、訪問済みなのか否かの判別を出来るようにするってのは、ユーザビリティ的には必要なことだとは思う。そう言った意味では、拙サイトなんかは全くもって許し難い設計な訳だけど、まぁそれは置いておく。んでもって、ただ色を変えるだけではなく、画像を使ってもうちっと視覚的に分かりやすくするのもありなんじゃないのかなぁって思ってみた。そして、サンプルを作ってみた。 visited_link_sample.html サンプル内のリンクが既に訪問済みであれば画像がチェックマークに変わるはず。CSS は下記のような感じで、a 要素に対してそれぞれ a:link、a:hover、a:visited で一つの背景画像の位置を変えることで見せ方を変えている。 li a { padding-left: 25px; line-height:180%; background:URL(mark.png) no
オンライン小説書きのTips。｜ルビ付き小説。IEで行の高さを整え、さらに他ブラウザにも対応させる
ファンタジーやSF系小説を書いていたり、漢字のややこしい登場キャラが作中に出現しているとしばしば漢字にルビを振りたくなることがあります。htmlではrubyタグというタグがあるんでありがたく利用するんですが、こいつを使った小説(ノベル)はその行だけ高さがズレる……。かといっていちいちカッコで振り仮名（ルビ）をつけるわけにもいかない場合があります。 そんなわけでルビを使いまくった小説（→自宅サンプル：別窓）について、より多くの方に美しく見てもらおうといろいろ頑張ってみました。先人の素晴らしい技術の寄せ集めですが、組み合わせ方によってはこれからルビ付き小説を書く方の助けになるかもしれませんので、この辺で少しやり方をまとめておこうと思います。 基本。IE用にルビをふり、なおかつ未対応ブラウザでは括弧表示にする加工 JavaScriptによるCSS振り分け Firefox3・Opera9・Safa
ルビ表示はユーザスタイルシートで! - 徒書
なんだか最近になってMozillaでルビ表示3の記事(個別ページ)がブックマークされているなと思っていたのですが、404 Blog Not Found:css - ルビもCSSでで紹介されていたからのようでした。 それにしてもその紹介記事のブックマーク数が200以上ってすごいな。やはりウェブでは作った人よりも紹介した人の方が注目される、ということなのでしょうか。それはいいとしても、トラックバックで「プログラマーの小飼弾氏のアイデアと技術には……」と書かれているのを見てしまうと釈然としないものを感じてもいいでしょうか。(←誤った疑問文) それはそれとして、404 Blog Not Foundではルビ表示用のスタイル定義をサイト用のCSSに組み込んでいますが、これはあまりよくありません。あのスタイル定義は(2001年当時のMozilla用に作った、)あくまで擬似的な表示を行うスタイルです。製作
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Restyle the web with Stylish
suzusaki - Stylish themes & skins
知っておくといいかもしれないCSS、8つの小技 | IDEA*IDEA
IDEA * IDEA
[CSS]オンラインでマルチカラムレイアウトが簡単に作成できる -YAML Builder