クロスブラウザのためのHTML/CSSのテクニック集 | コリス
anthonyshortのエントリーから、クロスブラウザのためのHTMLとCSSのテクニックの紹介です。 How to get Cross Browser Compatibility Every Time 簡単な意訳なので、詳細やキャプチャは上記エントリーを参考ください。 サマリー doctypeはstrictを使用し、正しいHTML/CSSを使用してください。 スタイルをリセットするスタイルシートを使用してください。 Firefoxでのレンダリングのために、テキストのスタイルシートに「-moz-opacity:0.99」を指定してください。 Safari用には「text-shadow:#000 0 0 0」を使用してください。 画像のリサイズをCSS/HTMLで行わないでください。 全てのブラウザでフォントのレンダリングを確認してください。 「Lucida」は使用しないでください。 テキ
WEB制作（html,css(スタイルシート) )｜プログラムメモ
htmlページのボタンはマウスでクリックすることを前提に作られることが多いが、 実はショートカット（アクセスキー）というものを指定することが出来る。 ■ 指定の方法例 <a href="save.html" accesskey="s" >文書の保存</a> ■ これが実際のブラウザではどういう操作になるかというと ・Windows IE 「alt」+「s」 でフォーカスを移動させた後に「Enter」で実行 ・Windows Firefox2「shift」+「alt」+「s」 で実行 ・Windows Opera 「shift」+「esc」 で一覧表示させた後に「s」で実行 ・Windows Safari3 キーボードショートカットがないらしい(?) ・Mac Safari 「control」+「s」 で実行 ・Mac Firefox 「control」+「s」 で実行 ・Mac Opera
alt属性はいかに決定されるべきか | Takazudo Clipping*
画像を閲覧できないユーザーでも内容を把握できるようにalt属性をつけましょうとは言うが、実際にはどのようにつけたらよいのかが実はかなりわからない。さらに納品前になんじゃこのalt！と突っ込まれる・・・。色々話し合ったりググったりした末にでた自分結論はこんなの。 前提 画像OFFのユーザー・音声ブラウザのユーザーが、画像の代わりにそのaltテキストが表示されても、ページ内容が分かる。但し、100%の情報を伝える必要があるわけでもない。そこに何の画像があるのかが伝わり、ページ内容を把握できる。 画像の中に文字がある場合
miniturbo::Blog class=redとかclass=hiddenとか
<p>この部分は<span class="red">期末試験の範囲</span>だよ！</p> .red { color: red; } とか。 .alignright { text-align: right; } とか、 .left { float: left; } とか、 .hidden { display: none; visibility: hidden; } とか、 .clearfix:after { display: block; visibility: hidden; clear: both; height: 0; content: "."; } とか。 視覚効果のために文章構造を変えるのはよろしくない さんざん言われていることだけれども、未だに上記のようなことが書かれているエントリがあがっていたりして、少し悲しく思うのでした。いくらサイトデザインの面で楽になる、サイトのメン
hxxk.jp - 同一ビジュアルデザインに対するコーディングコンテストが誕生 !?
記事データ 投稿者 望月真琴 投稿日時 2007-03-15T23:10+09:00 タグ CSS HTML XHTML デザイン デジパ 仕様 企画 概要 同じビジュアルデザインを再現する HTML/XHTML+CSS のコーディングを競うというアイデアが提案されています。これまでも、同じ HTML/XHTML に対してそれぞれ CSS を作成するという形式はありましたが、 HTML/XHTML のコーディングから行うというのは珍しいのではないでしょうか。 リプライ 2 件のリプライがあります。 CSS のみのコーディングを競うものは既にいくつかあるけれど 定期巡回先の CSS HappyLife にて、コーディング大会みたいなのやりたいなぁ～｜CSS HappyLife というアイデアが提案されていました。 まだ本当にアイデアの段階のようですが、同じ HTML/XHTML に対する C
コーディング大会みたいなのやりたいなぁ～
コレから書く事は、本決まりになったら「お知らせ」カテゴリにて告知いたします。 大会なんて書いてますが、ネーミングセンスが無かったので取り急ぎで付けただけです。 やりたい事は、デザイナーさんに2、3ページのデザインを作成してもらい、ソレをコーダーな方、コーダー志望な方、コーディング出来るぜ！な方、コーディングスキルも向上したい！って方、デジパに入りたい！(笑)って方なんかがコーディングすると言うもの。 まぁ、ようするに1つのデザインを皆が其々の思いで組むっちゅー感じですわ。 こういった事に興味引かれる人居るかな… 一応、興味引かれるような感じの企画にしたいと思ってますが、今は脳内妄想オンリー。 この発端は、昔個人趣味サイトを使って行ったのですが、1つのテーマに沿ってキャラを描いてもらい、ソレを1枚絵として完成させるというモノ。 下記のイラストは、男性キャラを好きに描いて集めた感じ。 その時に
MTで実践 - CSSのモジュール化による管理方法と遊び方 - 3ping.org
1年ほど前からMAQUEというMovable Typeのテンプレートを配布しているのですが、利用者も増えて色々とフィードバックをもらい続けていたので、それを活かして新しいものを作りました。βテストも終わって細部を修正して正式リリースしたのでMTユーザーやMTに興味ある方はみてください。そして、それで実践したCSSファイルのモジュール化による管理方法とカスタマイズ方法について解説します。MTユーザーでない方もローカルで確認できるパッケージがあるのでよかったらいじくってみてくださいね。 Movable Type テンプレート mt.vicuna Movable Typeのデフォルトソースを1から書き直し、シンプルで軽量、XHTML1.0 Strict DTD準拠です。基本的には1つのテンプレートソースに対して好みのスキンをあてこむ形で色々なデザインのウェブログが作れるようになっています。ごちゃ
hail2u.net - Weblog - pre要素へのスタイル指定
idea * ideaでエントリになっていたので、言及されていることだしうちのサイトのことだけちょっと書こうかなとか考えてみたら結構色々あって、エントリのネタになりそうだったのでまとめてみた。どっかにもちょろっと書いたけど。 実際にスタイル指定を書く前に抑えておくべき知識として以下のようなものが挙げられると思う。 ほとんどのブラウザでpreは等幅フォントで表示される ほとんどのブラウザでpreのwhite-spaceはpreになっている フォント・ファミリを指定する場合は最後にGeneric font familiesが必要になる overflow: scroll;では縦横どちらにあふれた場合でも縦スクロール・バーと横スクロール・バーが両方とも出る overflow: auto;ではあふれた方向にのみスクロール・バーが出る Internet Explorerではoverflow: auto
pre 要素のスタイル定義とマークアップ - 2xup
2006-09-07T00:56:49+09:00 なにやら pre 要素に CSS でどういったスタイル定義をしているのか、また、pre 要素をどのようにマークアップしているのか、様々な意見がでている模様。 ブログにコードを貼り付ける方法で悩むの巻(i d e a * i d e a - Lifehacks by 100SHIKI.COM) pre要素へのスタイル指定(hail2u.net - Weblog) Re: i d e a * i d e a - ブログにコードを貼り付ける方法で悩むの巻(hxxk.jp) 情報共有と新たな発見を期待して、どのようにスタイル定義・マークアップしているのか公開することに。まずは注意しているポイントを挙げてみます。 Macintosh 版 Internet Explorer では、div 要素以外に値が visible (初期値) 以外の overf
覚えておくとちょっと便利なHTML要素(1) - sup，em | オトコのキモチ
こちらのブログには認証がかかっています。 ユーザー名 パスワード Powered by Seesaa
GIGAZINE - 使えるCSSコードいっぱい「Dynamic Drive CSS Library」
CSSを使ったタブ型の各種メニューとか、CSSによる画像のポップアップとか、ドロップシャドウやページカールの作り方などのコードが実際の例と一緒に置いてあります。実例を見てから選ぶことができるので、希望通りのものが手に入りやすいです。 Dynamic Drive CSS Library- Practical CSS codes and examples http://www.dynamicdrive.com/style/ RSSもあるので新しいコードが追加されればすぐにわかります http://www.dynamicdrive.com/style/csslibrary/rss/ コードの種類としては以下のような感じでカテゴリ分けされています。 横型のメニュー http://www.dynamicdrive.com/style/csslibrary/category/C1/ 縦型のメニュー h
角丸ライブラリ - tikeda::Diary:
最近角丸を作る機会が多かったので、今後の為に色々整理してたんですが、公開しておきます。使えそうだったらいじって使ってください。中身の文書を書き換えれば上下左右と可変するように柔軟になっています。また、一部PSDも同封してます。 0501curve.zip 中身はこんな感じ。 ベーシックなタイプ 01：小さ目な角丸 02：大き目な角丸 03：斜線の角丸（背景画像をループ） 04：ストライプの角丸（背景画像をループ） 05：木模様の角丸（背景画像をループ） 06：リボンのついた角丸（背景画像を固定） 4つ角をの内側を透過GIFにしてるので、大枠の背景を変えれば発想次第で色々と使えると思います。HTMLとCSSは大体こんなんです。divが多いのがちょっと嫌な感じですが。はてな内ではspanでやってたりもします。 HTML <div class="curve-01"> <div class="cu
XHTML+CSS講座-おすすめ書籍-
基本的にはHTMLもXHTMLも、機能は殆ど変わりません。HTMLにXMLが持っている柔軟性と拡張性を取り入れたものと定義づけられます。しかしxmlに準じているため、記述においてHTMLでは許されたことが、XHTMLでは許されないという事が起こります。 それでは具体的な違いを、見ていきましょう。HTMLとの違いは以下のものが挙げられます。 宣言DTDの箇所はHTMLと同じく、Strict,Transitional,Framesetの三種類を指定できます。 例： <?xml version="1.0" encoding="Shift_JIS"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" ?? "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html x
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
NEXTindex - [Web Site 作成支援, Java 入門]
http://www.eris.ais.ne.jp/~hiro/css/ref
Web制作 W3G
認証がかかっています
IDEA * IDEA
認証がかかっています
HTML・CSS 簡単リファレンス