title属性をつけてスタイルシートを読み込む場合の注意点
title属性をつけてスタイルシートを読み込む場合の注意点 link要素にtitle属性を付けてスタイルシートを読み込ませるとこれは優先スタイルシートと呼ばれるスタイルシートになります。 この件について問題があるサイトが報告されていますので、この辺の仕様と注意点について紹介しておきましょう。 固定スタイルシート(persistent style sheet) 固定スタイルシートとは文字通り、固定的に読ませるスタイルシートの指定方法です。 これによって指定されているスタイルは、以下で説明する優先スタイルシートや、代替スタイルシートと同時に適用されます。 固定スタイルシートはtitle属性を付けずにlink要素を記述します。 <link rel="stylesheet" href="foobar.css" type="text/css"> 優先スタイルシート(preferred style s
Webタイポグラフィまとめ - Archiva
Make a note of it: Web tech, montaineering, and so on. Note: この記事は、3年以上前に書かれています。Webの進化は速い！情報の正確性は自己責任で判断してください。 フォント指定や行間、約物といった、文字周りのノウハウです。デザインというより技術的なまとめ。SWFObjectとかsIFRといったFlashネタを除けば、Webの文字は全部CSSでできるんだから... コーダこそタイポグラフィを意識すべし。看板みて書体言い当てるとか変態的な域まで達せずとも、原則だけ覚えとけばプロトタイプが様になるんだし。 オールドスタイル数字 アンパサンド（“＆”） スモールキャップ ハイフンとダーシ 各種スペース 合字 約物 約物はぶら下げる :beforeと:after 見出しのサイズ 初期フォントサイズ 行間の調整 余白の調節 各国の日付表記
CSS「display: table」と「display: table-cell」で出来ること｜アイビーネットblog
IE8は「display: table-cell」に対応 「display: table-cell」とは、テーブルの構造を表現することができるCSSプロパティです。先日公開されたベータ版(IE8 Beta1)で確認しましたが、IE8からは「display: table-cell」に対応しているようです。 そこで、今回はこの「display: table-cell」を使うことで、どんなことが出来るのかを見ていきたいと思います。 「float」と「display: table-cell」でのカラムレイアウトを比較 左右のカラムが固定で、中央のカラムが可変というような3カラムのレイアウトを表現したい場合、CSSでは通常「float」を使います。カラムレイアウトは「display: table-cell」でも表現できますので、この2つの方法を比較してみたいと思います。 「float」を使った従来の
セレクタ - CSS2 リファレンス
作者ホームページサービス（hp.vector）は終了いたしました。 長らくのご利用、ありがとうございます。 ご不明な点があれば、お問い合わせページをご覧の上、お問い合わせください。 ※15秒後にトップページに戻ります。 (c) Vector HOLDINGS Inc.All Rights Reserved.
自分が使っている Firefox 3 の Add-on 30種を紹介する - インフラメンコ
自分が使っている Firefox 3 の Add-on 30種を紹介する 自分が使っている Firefox 3 の Add-on 30種を紹介する Jul252008 Author: ゴリ丸 Categories: IT関連, その他 Tags: add-on, firefox Bookmarks: 人が登録 Next Page: Plurkについてアレコレと Prev Page: デスクトップを3Dにすると、すごく楽しいことになった もうすでに様々なブログなどでFirefox 3 の Add-on は紹介されているわけですが、あえて今、私が使っているAdd-onを紹介してみたいと思います。 使ってるAdd-onの数は、まあ普通だと思います。が、誰かの新しい発見になればいいかなぁと思っている程度の記事です。 またFirefoxのAdd-onは本当に数多くあるため、みんなで情報共有したいとい
Firefox だと沖縄県警サイトが悲惨になる件について - xenoma日記
Firefox で沖縄県警のサイトを見てみましょう。たぶん悲惨なことになっていると思います。縮小キャプチャを以下にあげておきます。 ▲左：Firefox3 右：IE7 (沖縄県警のサイトTOPのキャプチャ（部分・縮小）) IE など他のブラウザだとキレイに見えるのに、なぜ Fx では悲惨なことになるのでしょうか？ 原因の推測 スタイルシートの指定の仕方が原因かと思います。ソースを見てみます。 <link rel="stylesheet" href="css/import.css" type="text/css" media="print" /> <link rel="stylesheet" href="css/import.css" type="text/css" media="screen" /> このように同じファイル（import.css）を2度指定しています。指定されている imp
IE6で閲覧すると。
hamashunさんがTwitterで、 IE6を使って閲覧すると右上に『アナログ』って出るようにしようぜ。 って言ってたので、CSS HappyLifeでやってみた。 ボクが出来る2008年最後の大仕事でした。えぇ。 使いたい方は是非是非。 ちなみに、ボクが使った画像はコレです。自分のモニタで出るやつを参考にしました。 ご自由にお使いください。 IE6だけに表示させるにはどんなやり方でもいいっすけど、手っ取り早いのだったらハック使ってやるのがいいかと。 .analog { display: none; } * html .analog { display: block; position: absolute; top: 10px; right: 30px; } こんな感じで。 であ。 16日のお昼頃追記 ウチのアクセス解析を久々に確認してみたら、全体の50％くらいがFirefoxで40％
[使える CSS テクニック]CSSを使った見栄えの良い表組み（table） | バシャログ。
第 6 回目は「CSSを使った見栄えの良い表組み（table）」です。 Web サイトのレイアウトがすべて table でコントロールされていた時代がありましたが、今そんなことをしたら嘲笑を買う時代です。 本来の「複数のデータを表示･比較の際にわかりやすいよう見せる表組み」のためのテーブルを、CSSを使って見栄えよくしてみましょう。 1. CSS のみで見栄えよくしてみる 線と塗りだけで表現する、一番シンプルなテーブルを作ってみます。 [HTML] <table id="table-01"> <tr> <th>本体名称</th> <th>スタンド名</th> <th>スピード</th> <th>持続力</th> <th>精密動作性</th> <th>成長性</th> </tr> <tr> <td>空条 承太郎</td> <td>スター・プラチナ</td> <td>A</td> <td>A<
![[使える CSS テクニック]CSSを使った見栄えの良い表組み（table） | バシャログ。](https://cdn-ak-scissors.b.st-hatena.com/image/square/1f4390ea5b2b558adfd9c349b9a080aae407daff/height=288;version=1;width=512/https%3A%2F%2Fbashalog.c-brains.jp%2Fshared%2Fpublic%2Fimg%2Fcommon%2Ficon_ogp02.png)
CSS 3における新しいレイアウト手法：ボックスレイアウト - builder by ZDNet Japan
ウェブページのレイアウトでは、ヘッダーやサイドバー、コンテンツなどをどのように配置するかがポイントとなる。現在、配置のコントロールにはfloatやpositionプロパティを利用するのが一般的だが、CSS 3の「Advanced Layout Module」という草案では、新しいレイアウト手法が提案されている。 このレイアウト手法は「行と列のレイアウト」や「ボックスレイアウト」と呼ばれ、FirefoxとSafari、Google Chromeが対応している。 ボックスレイアウトの機能を利用すれば、これまでのfloatやpositionプロパティでは困難だった「段の高さを揃えた段組み」なども簡単に作成できるようになる。 そこで今回は、floatプロパティとボックスレイアウトを利用した段組みを比較していく。また、CSS 3で段組みのレイアウトを実現する「Multi Column」との違いも確認
ブラウザの設定を初期化させるCSSとチェックツール
CSS入門の3回目は、Webブラウザにあらかじめ設定されているスタイルの初期化とボックスモデル、CSSの状態を確認するツールとしてFirebugを分かりやすく説明します。 初心者の方は少し難しい部分もあるかもしれませんが、第1回「ちょっとサイトをステキにするCSSの基本」、第2回「良いデザインを行うためのCSSの下地を作ろう」の連載を読んでいただければ幸いです。 Webブラウザの初期スタイルをなくす CSSを使ったデザインを行ううえで最初に行わなければならないのが、Webブラウザの初期スタイルをなくすことです。 前回の記事でh1タグについて解説しましたが、そのとき実際Webブラウザには大きいサイズの文字が表示されたと思います。 ●スタイルを初期化せずにWebブラウザに表示した結果 皆さんもご存じのとおりサイズの大きい文字が表示されましたね。 これがまさに各Webブラウザが持っているh1タグ
画像の下に謎の隙間ができるのを防ぐ方法 [ホームページ作成] All About
上記のHTMLは、ブロックレベル要素の中に、画像を1つ入れているだけです。このような記述は頻繁に使われるでしょう。 このとき、文字サイズ(font-size)がとても小さかったり、行の高さ(line-height)が低かったり、表示に使われているフォントの種類によっては、あまり隙間が気にならない場合もあります。しかし、右図のように画像の下に隙間が見える場合もあります。 画像の下に空く謎の隙間がハッキリ見える記述・装飾例 以下のようにHTMLとCSSを記述すると、謎の隙間がハッキリ見えるでしょう。 <p> <img src="sea.jpg" alt="海"> quick doggy jump </p> 上記のHTMLでは、画像の隣に小文字のアルファベットを掲載しています。さらにCSSで、 p { font-size: 200%; line-height: 1.4; font-family:
![画像の下に謎の隙間ができるのを防ぐ方法 [ホームページ作成] All About](https://cdn-ak-scissors.b.st-hatena.com/image/square/07356548dced5830ac122644793311a373810346/height=288;version=1;width=512/https%3A%2F%2Fimgcp.aacdn.jp%2Fimg-a%2F1200%2F900%2Faa%2Fgm%2Farticle%2F2%2F3%2F8%2F8%2F9%2Ftopimg_original.png)
Tag Cloudのスタイル - 3ping.org
タグクラウドの必要性についての是非はここでは置いておいて、このアイテムのデザインって色々考えさせられますね。 Vicuna CMSでも真面目に対応しようと重いケツを上げましたので、とりあえずサンプルとなるCSSスタイルを色々と書いてみました。 表示例とCSSファイルを置いておきましたので、気に入った表示があったらどうぞ使って下さい。 2007.10/21 追記・編集 Tag Cloud 10,11,12で.level5のフォントサイズが.level4と同じになってたのを修正 応用編としてTag Cloud 13を追加 単純に該当する記事が多いタグが他より目立てばいいだけなので、大抵のスタイルは大小の区別で表示しているけど、それだけじゃちょっと味気ない気もするので サイズ 色 明暗 彩度 色彩 形 というところでタグの強弱をより強調してみました。 HTMLは以下のような要素とクラス名で作って
Basic HTML data types (ja)
上記の通り、色指定の値「#800080」と「Purple」とは、どちらも紫色を表す。 6.5.1 色を用いる際の注意 カラー化によって、文書はより多くの情報を表すようになり、また読みやすくもなるだろう。しかし、カラー化については以下の指針を考慮に入れられたい。 HTMLの要素や属性によって色指定を行うことは 推奨しない。その代わりにスタイルシートを用いるよう勧める。 色盲の人を困らせるような配色には様々なパターンがあり、どの組み合わせにおいても慎むこと。 背景画像や背景色の指定を行う場合は、テキスト類への色指定も行うこと。 BODY要素や FONT要素、そして表のbgcolorによる色指定は、環境が違うと見え方も異なる。 (例えば、ワークステーション、マック、ウインドウズの違いや、液晶表示とCRT表示の違い。)従って、ある特定機種での見栄えに完全に依存するべきではない。 ただし将来的には、
第13回 Webページで読みやすいテキストとは：ITpro
今回のポイント 1行あたりの文字数の目安 1段落の文字数の目安 段落に含む文字数 行間調整の考え方 字間調整を使ったロゴ風味見出し 日本語というのはもともと縦書き文化です。文字も筆で縦書きしていくときに書きやすいように作られています。現在PC画面上で見るフォントは，活字印刷物のフォントとは違い，横書きで読みやすいようにもともとの字体から若干形を変えられています。それでも起源である縦書きの形を完全に壊すことができないので，やはり横書きでは読みづらいようになっています。 日本人が苦痛を感じることなく読める横書き1行あたりの字数は20字＋α程度だと言われています。意識して雑誌などを見るとたいていが!)25文字から28文字程度です。用紙，つまり本のサイズがA4を超えるような大判になると，1ページを左右2段組に分けて25～28字程度に調整されています。 一方，縦書きの場合には識別許容量はグンと増加し
書字方向 - ばけらの CSSリファレンス
content プロパティは、以下のような値をとります。 <文字列> …… 文字列を指定します。指定された文字列がそのまま内容となります。 <URI> …… 外部リソースの URI を指定します。たとえば、画像を要素の内容としたい際に画像の URI を指定することが出来ます。ユーザエージェントがそのリソースを扱えない場合は、単純に無視されます。代替テキストのようなものは指定できませんので、利用の際には注意してください。 <カウンタ> …… 「1,2,3……」「い,ろ,は……」などの連番を内容とします。詳しくは<カウンタ>の項を参照してください。 attr(X) …… 当該要素の X属性の値を内容とします。たとえば、attr(title)とすると、title属性で指定されている値が要素の内容となります。残念ながら CSS2 では、他の要素の属性値を参照することは出来ません。 open-quo
栄光ゼミナール；塾選びガイド
栄光ゼミナールとほかの塾との授業料、サービスなどさまざまなポイントについて比較しています。栄光ゼミナールの授業料、サービスなど充実させたコンテンツで作成していますが、やはり一番栄光ゼミナールを知るには、資料請求が一番です。 栄光ゼミナール資料内容 日程と授業料についてのご案内 栄光ゼミナールの夏期講習のご案内 個別指導のご案内。 「今子供たちは・」資料集栄光ブックレット とっておきなＤＶＤ（届くまでお楽しみ） 栄光ゼミナールでは、はじめての方には無料の夏期講習会になります。テキストの教材費は自己負担になりますが、それでも1教科につきたったの2100円。 栄光ゼミナールは特に中学生を対象に向けて圧倒的人気のサービスです。もちろん、それに付随するしっかりとしたサービスがあります。大手の学習塾には、有名講師が授業を100人程度で聞くタイプと少人数制（6人から20人程度）できめ細やかな授業
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
userchrome.css - Mozilla Firefox まとめサイト
XHTML/CSS リファレンス [WEB ARCHIVES RETURN AGAIN]
http://www.favorite-labo.org/archives/467.html
CSSによる段組（マルチカラム）レイアウト講座