フロートする要素には幅を宣言しておく必要があります
Posted by @Style : 
12:58
| 
コメント (0)
| 
トラックバック (0)
CSS Validation Service![[外部へのリンク]](http://atstyle.biz/webimg/link.gif){kind=small}
のチェックが少し厳しくなっていた。
In (x)HTML+CSS, floated elements need to have a width declared. Only elements with an intrinsic width (html, img, input, textarea, select, or object) are not affected
たとえばMovable Typeのデフォルトテンプレートでは、画像を左右に配置する際のmt-image-leftやmt-image-rightなどのクラスにfloatが使われている。以下のような対応を行う。
デフォルト
.mt-image-left {
float: left;
margin: 0 20px 20px 0;
}追加
img.mt-image-left {
margin: 0 20px 20px 0;
float: left;
}また、幅が確定できないものにはwidth:auto;でOK！
SageのCSS
Posted by @Style : 00:27
| コメント (0)
| トラックバック (0)
RSSリーダーを使わずFirefoxの拡張機能であるSage 1.3.10を利用してフィードを読んでいる。OPML のインポート・エクスポートも可能なので重宝するのだが、長文の場合に段組では読みにくい。
以前からスタイルシートをカスタマイズして文字を大きくしていたのだが、今日は中途半端に時間が余ったので、ちょこっといじってみた。今日のカスタマイズはblockquoteとpre
読みやすい！
参考になるリソース
行儀の良いコメントフォーム
Posted by @Style : 02:58
| コメント (0)
| トラックバック (0)
MovableTypeのコメントフォーム周りをちょこっとカスタマイズ。
stylesheet.tmplを編集することによってlabel要素とinput要素を行儀良く横並びにしてみる。
individual_entry_archive.tmplのlabel要素とinput要素の関係は以下の様になっている。
<p>
<label for="comment-author"><MT_TRANS phrase="Name">:</label>
<input id="comment-author" name="author" size="30" />
</p>デフォルトのスタイルシートではlabel要素をブロックに変更してある。ソースに改行は入っていないが、上下に表示されているのでstylesheet.tmplの以下の部分を削除する
.comments-open label { display: block; }label {
margin-bottom: 0.5em;
width: 10em;
float: left;
clear: both;
white-space: nowrap;
}デフォルトテンプレートでの表示
fieldsetを追加するとなお良し
CSS Validator
Posted by @Style : 01:37
| コメント (0)
| トラックバック (0)
CSS Validatorが新しくなっていた！
CSS Validatorとは「W3C CSS 検査サービスについて」より
W3C CSS 検査サービスは、W3Cによって作られたフリーソフトウェアで、ウェブデザイナーやウェブ開発者が CSS (Cascading Style Sheets; カスケーディング・スタイルシート) をチェックするのに使うことができます。このサービスは、ウェブ上のフリーサービスを通じて使ったり、ダウンロードして Java プログラムとして実行したりウェブサーバー上で Java サーブレットとして使ったりできます。
クライアント様のサイト構築中に「CSS Validatorの表示が変だな？」と思っていたんですが、先程、リニューアルが完了したみたいです。
リニューアルでチェックが甘くなっているようです。
昨年の秋に変更があった際、文字色と背景色を共に指定してない場合には警告が出るようになりましたが、今回のリニューアルでは元に戻されています。
transparentや背景色を上手に使えばよいのかもしれませんが、アクセシビリティを考えると警告してくれたほうが良かったのかもしれません…
Internet Explorer 7
Posted by @Style : 00:42
| コメント (0)
| トラックバック (0)
CSS実装徹底検証! そこが知りたいInternet Explorer 7
かなり詳細までInternet Explorer 7に於けるCSS実装を検証している記事だ。
使用するサンプルソースはXHTML1.0 Strictで記述し、基本的にStandard(標準準拠)モードで表示する。IE7 beta2においても、Quirks(下位互換)モードで表示すると古いバージョンと同じ表示になってしまうため、注意が必要だ。また、特に断りのない限り、「Internet Explorer」は「IE」、「Internet Explorer 6」は「IE6」、「Internet Explorer 7 beta2」は「IE7 beta2」と略している。
やはりInternet Explorer 7でもapplication/xhtml+xmlをサポートしないのだろうか。
いつになったら正式にXHTML 1.1を利用できるのか？CSS以前の問題では…
スタイルシート スキルアップ・デザインブック
Posted by @Style : 23:25
| コメント (0)
| トラックバック (0)
なぜ、私の手元にあるかというと・・・
（Web標準に興味がある方には、おおよその見当が付くと思いますが、）今日、ある企業の社長とお会いした。
私のサイトもご覧になっていたようで、恥ずかしい限りですが、Web2.0のことから経営やマネジメント・Blogの書き方まで、普段はとても聞けないだろうと思われるような貴重なお話。
いつも拝見しているBlogで想像していた通りの、とても気さくで、気取らない方でした。
ありがとうございました。
デザインだけでなく機能の向上にも役立つCSS
Posted by @Style : 17:07
| コメント (0)
| トラックバック (0)
もうける.net Vol.1（毎日コミニュケーションズ）に、アットスタイルが制作した【真宗 紫雲山 正覚寺】を「CSSを使用したサイト」として紹介記事が掲載されました。
11月、雑誌社より掲載の依頼があり、副住職様より掲載の許可をいただきました。
デザインだけでなく機能の向上にも役立つCSS
福岡県大牟田市にあるお寺「正覚寺」のサイトでは、CSSで細かく文字間のバランスを指定し、見やすさ、読みやすさを考慮して作成されています。ブラウザで文字の大きさを指定してもレイアウトが崩れませんので、是非試してみてください。
デザイン性の向上、管理のしやすさに加え、CSSを使用するメリットとしてもうひとつ、アクセシビリティというものがあります。アクセシビリティとは、「Webサイトの利用のしやすさ」という意味に加え、「障害を持つ人にとっての、Webサイトの利用しやすさ」という意味も含まれます。HTMLからデザインのためのコードを省くことができるため、目の見えない方が使用する音声読み上げブラウザの認識率の向上にも、CSSが役に立つことを覚えておきましょう。
CSSハック
Posted by @Style : 10:34
| コメント (1)
| トラックバック (1)
IEBlogより：お使いのCSSハックを一掃してください | Web標準Blog
IEBlog
IE開発チームを手助けすることに興味があろうとなかろうと、次のことを考えてみてください。ソースコードのレビューは、悪いCSSハックの代わりに良いCSSハックを使うことのできる箇所を見極めるうえで、役立つかもしれません。以下の場合においても、レビュー（そしていくつかのドキュメントも？）は、あなたを助けるかもしれません。
久しぶりにcss-discussを見に行ってみると・・・
This hack is DEPRECATED and should not be used due to the imminent release of IE 7. See [the official IE blog
このハッキングを推奨しない、IE7の差し迫っているリリースのため使用するべきではありません。 詳細のための公式のIEブロッグを見てください。
ページ幅を固定していた頃のスタイルシートはMovableTypeのbase-weblog.cssにも使用されているStarHtmlHack等色々なCSSハックを使用していましたが、現在のリキッドレイアウトでは、CSSハックは不要となり削除しました。 XHTMLコードもdivの多用を避け、シンプルに！
display:noneと検索エンジンスパム
Posted by @Style : 12:34
| コメント (0)
| トラックバック (0)
display:noneは検索エンジンスパムであるという俗説があります。また、スタイルシートにdisplay:noneを記述したためにインデックスから削除されたという事実もあまり聞きません。
Yahooで当サイトのCSSを検索してみると結果に現れました。
ちなみにGoogleではインデックスされていないようです。
しかし、インデックスされてるから削除の対象になるというものでもなさそうです。
当サイトもGUIとナビゲーションを両立させるためにdisplay:noneを多用しているので、今後のYahooの動向には十分注意する必要がありそうです。
まずはFirefox
Posted by @Style : 22:04
| コメント (0)
| トラックバック (0)
CSSの勉強にCSS Creatoをよく見に行く。
そのサイドバーに本日のブラウザ統計が表示されている。
Firefoxが好調とはいえ、IEの倍近く。
IEが90%以上のシェアを誇っているのに、この数字があらわすものは･･･
CSSでテンプレートを作る場合には、まずFirefoxで確認し、IEでちゃんと表示できるように修正。一時期のネットスケープとは逆転した状態です。
バグだらけのIEは使い物になりません。
スポンサード リンク
