クロスブラウザのための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」は使用しないでください。 テキ
ke-tai.org > Blog Archive > ケータイでの画像回り込みについてまとめてみました
ケータイでの画像回り込みについてまとめてみました Tweet 2008/6/11 水曜日 matsui Posted in デザイン | 7 Comments » 本日、ケータイでの「画像の回り込み」に関して調査しましたので、メモを兼ねてまとめてみます。 もちろん、キャリア毎に書き分けてしまっては意味が無いので、3キャリアで共通して使える書き方を調べてみることにしました。 まず問題となったのが、auでfloatが利かないことです。 では、オーソドックスにimgタグのalign属性を使ってみてはどうかということになりますが、今度はドコモ(XHTML)で正しく表示されません。 なかなかやっかいです。 そこで、次のようなサンプルHTMLを作成し、3キャリアでテストを行ってみました。 <img src="test.gif" style="float:left;" align="left" /> あ
リストやテーブルを簡単かつ綺麗にストライプ状に色分けする方法
リストとかテーブルをストライプ状に色分けしようとするとき、 セルとか列に対して一つ一つクラスをつけて、 そしてCSSで装飾するのが一般的だと思います。 でも、クラスを一つ一つにつけていくのって面倒じゃないですか？ 今回紹介する方法を使えば、 簡単かつ綺麗に色分けすることができるので、 参考にしてみてください 面倒なやり方：一つ一つにクラスをつけていく まずはオーソドックスに、 一つ一つにクラスをつけて行く方法を紹介しておきます。 ■HTMLソース <ul> <li class="list01-odd">リスト１</li> <li class="list01-even">リスト２</li> <li class="list01-odd">リスト３</li> <li class="list01-even">リスト４</li> <li class="list01-odd">リスト５</li> </
XML宣言についてのアレコレ
CSSを覚えていく上でXML宣言と文書型宣言に関しての理解がないと、組んでいくうちにブラウザによって表示の違いが生じ、後から色々とスタイルを調整しても何が原因で表示が違うのか分からなくなってしまうといった事があると思います。 という事で、XML宣言について自分なりのアレコレを書いてみます。（間違ってるトコあったらご指摘願います） 文書型宣言に関してのアレコレは次のエントリーに。 あ、XML宣言ってのはコレ↓です。 <?xml version="1.0" encoding="utf-8"?> 文書型宣言ってのは、ウチのサイトの場合コレ↓です。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> XML宣言のアレコレ XML宣言
XHTMLでやりがちな8個の間違い | ブログが続かないわけ
最近、XHTMLのValidationに恋してます。 Validationチェックをするのに便利なのは、やっぱり本家のW3CのMarkup Validation Service。単一のページをチェックするにはこれが一番いい。 Markup Validation Service サイト全体をまとめてチェックする場合はこちらが便利(手前味噌でごめんなさい)。 Site Validator ただ、これらのサービスは詳細のエラーを見てもどこが間違いかわからないことがある。慣れないと難しい。まず、英語だと言うのも問題かもしれないが、微妙に問題点とエラーメッセージの内容がずれていることも多いからだ。プログラマであればエラーメッセージとエラー内容がずれているなんてことは慣れっこかもしれないが、これらのツールを使うのは非エンジニアであることも多い。HTMLのコーダーとかディレクターとか。 Site Val
Dynamic Web Pages from your Photoshop Designs in Seconds! | psd 2 CSS Online
Kami menggunakan cookies untuk mengoptimalkan navigasi, fitur serta konten yang lebih Relevan. Untuk detail informasi lengkap tentang cookies silahkan lihat Persetujuan Cookies kami. Dengan menggunakan situs ini, Anda menyetujui penggunaan cookies serta data pribadi kami sesuai dengan Kebijakan Privasi kami.
「Safari 3.1」の「Webインスペクタ」機能でHTML+CSS構造をチェック
「Safari 3.1」に搭載された「Webインスペクタ」という機能があります。ちゃんと見たことがなかったのですが、HTML+CSS構造をチェックできて面白いですね。 Three Powerful Safari Features That Few People Useというエントリーで紹介されていたので、改めて見てみました。 The functionality is similar to the Firebug extension for Firefox, and gives you all sorts of information that’s helpful during web development and design. Firefoxの「Firebug」機能拡張に似た機能で、ウェブ開発やデザインの助けになるような情報を提供してくれる、とあります。 開発メニューからアクセスします
レジクリ千葉院の口コミまとめ｜実際通ってる本音の口コミまとめ100
【無料カウンセリング】レジーナクリニック千葉院で予約をしてみる 【写真付き】レジーナクリニック千葉院のアクセス方法を一から説明してみた レジーナクリニック店舗までのアクセス方法について、現在写真などまとめ中です。しばらくお待ち下さいね！ 気になる！レジクリ脱毛店のインスタの口コミや評判は？ 全部チェックできてませんが、100件近くありました！サクッと確認してみましたが、悪い口コミはありませんでしたねー！ まだレジクリの脱毛店ができてから年数が経っていないらしいんですが、いろんなメディアの露出が少ないのにめっちゃ口コミが多くてびっくりしました！ この前銀座の #レジーナクリニック で医療脱毛してきたよ〜〜☺️🌈 夏は水着になったり肌露出したりするし、 この季節はやっぱり気になりますよね😖💦 光脱毛に比べて医療脱毛は効力が強いから すぐにつるつるになるよ(*´꒳`*)✨✨ 早く脱毛終わら
スペシャルベスト
免責事項：本サイトに含まれる情報は、一般的な情報提供のみを目的としています。情報はスペシャルベストによって提供され、当社は情報を最新かつ正確に保つよう努力しますが、いかなる目的においても、ウェブサイトまたはウェブサイトに含まれる情報、製品、サービス、関連グラフィックスに関する完全性、正確性、信頼性、適合性、利用可能性について、明示または黙示を問わずいかなる表明または保証も行いません。従って、これらの情報に依拠することは、あくまでもお客様ご自身の責任において行われるものとします。 当社は、当ウェブサイトのご利用に起因するいかなる損害についても責任を負いません。 本ウェブサイトから、スペシャルベストの管理下にない他のウェブサイトへリンクすることができます。当社は、それらのサイトの性質、内容および利用可能性を管理することはできません。リンクは必ずしも推奨するものではありませんし、リンク先で述べら
名前のウェブとXHTML文書のプロファイル
情報は伝わるか？ そもそも情報は伝わらない… 生命情報：生物が世界と関係することで出現する、意味のある（識別できる）パターン 観察者（主体）が世界をどのように捉えるか（関係）を表すパターン。人によってその関係＝パターンは異なるので、完全には伝えられない。 社会情報：生命情報を人間が（ことばとして）記述する 共同体（国家、コミュニティ…）での共通了解＝意味のとりあえずの固定（規範化作用） 機械情報：言葉の記号作用の「記号表現」だけを取り出したもの コンピュータ、ネットワーク上のデータとして蓄積、交換される （西垣通 『ウェブ社会をどう生きるか』） そこを何とかうまく伝えるためには 明晰な論理と文章 分かりやすい情報のかたち 互いに理解できる名前 情報の伝達と名前 機械情報を介した情報のコード化と再構築 情報が伝わるためには、まず社会情報が適切に再現される必要がある 同じ社会情報でも人によって
CSSデザインカタログ
対応ブラウザは Windows：InternetExplorer6，InternetExplorer7，Firefox2，Opera9 Mac：Firefox2，Opera9，Safari2 ですが，ブラウザによって若干表示が異なる部分もあります。 XHTML 1.0 でマークアップしてあります。 DOCTYPEスイッチによる標準モードに対応しています。InternetExplorer6 でXML宣言をし互換モードになった場合にも対応しています。 Netscape7，Mac InternetExplorer5 では期待通りに表示されないものがいくつかあります。 便宜上，分類コード（div011-hp，table010 など）を class名にしてありますが，実際にお使いの際には適切な class名に変更してください。 すでにお使いのCSSファイルに新たにCSSコードを追加した場合，既存
XHTML の「タグ」と「要素」の違いと正しい使い方
先日公開した XHTML タグ一覧表示ツールの中の説明で、「<br /> は空タグではありません」というご指摘を頂きました。勉強不足だったことを反省して、改めて XHTML の「タグ」と「要素」の違いや使い方について調べてみました。 まず、W3C で公開されている「XHTML 1.0」の仕様は下記です。 XHTML? 1.0 The Extensible HyperText Markup Language (Second Edition) XHTML? 1.0: 拡張可能ハイパーテキストマークアップ言語 上記の「4. Differences with HTML 4（HTML4との相違点）」に Well-formedness is a new concept introduced by [XML]. Essentially this means that all elements must
第20回 XHTMLの設計～状況に合った要素選び（5）～
XHTMLの制作でもっとも難しいのは「どの要素を使ってマークアップするか」という判断である。正解がひとつの場合もあれば、ふたつ以上の場合もある。人間の判断に負う部分も大きいので、あるマークアップを適切に感じる人もいれば感じない人もいる。シチュエーションごとの一般的なマークアップ例を見ていこう。 画像（img要素）を見出しとするのは悪か？ 「見出しとして埋め込むのはテキストだけであって、画像（img要素）を埋め込むのは正しくない」と勘違いしている人が意外と多い。特にテーブルレイアウトに慣れ親しんでいる人は、Webページにとって骨格である「見出し」をきちんとマークアップするという発想がなく、見た目として「見出し」のように見える画像を置いておけばそれでオーケーと判断してしまうケースが多いようだ。 構文的なことをいえば、どの文書型であっても、h1～h6要素はテキストだけでなくインライン要素を含むこ
コーディングガイドライン
構造と見た目の分離の必要性 HTML は Markup (意味付け)する Language (言語)です。例えば文脈のなかで、「ここは見出しですよ」「ここは段落ですよ」などという感じに「意味付け」を行い、文書構造を記述するための言語です。 ところが HTML は Web ページのレイアウト目的に使う仕様が多数盛り込まれ、その簡便さ、習得のしやすさと柔軟性から、本来の「意味付け」以外のレイアウトや見栄えに関する要素が多く使われていました。 それでは本来の HTML の目的に反するということで、「見た目」の部分を担当する CSS が策定されました。 建築物に置き換えるならば、きれいな骨組みの建物(HTML)に壁の色を塗ったり窓の形を変えたり(CSS)という感じでしょうか。いくらきれいな色を使っていても設計ミスの建物では使い物になりません。文書でも同じことが言えるもので、プレーンに理解しやすい文
XHTML 1.1 - Module-based XHTML
XHTML™ 1.1 - Module-based XHTML - Second Edition W3C Recommendation 23 November 2010 superseded 27 March 2018 This version: https://www.w3.org/TR/2018/SPSD-xhtml11-20180327/ Latest version: http://www.w3.org/TR/xhtml11/ Previous version: http://www.w3.org/TR/2010/REC-xhtml11-20101123 Previous recommendation: http://www.w3.org/TR/2001/REC-xhtml11-20010531 Editors: Shane McCarron, Applied Testing an
改行 - カナかな団首領の自転車置き場ダイアリー
改行がbr要素で行われてる時点で、なんか萎えました。 えーと、どんな要素で改行が行われれば、萌えていただけるのでしょうか？ もうひとつ。 ちなみに僕のブログでも、通常<br />は使わない。 なに、その「 br 要素使いません宣言」みたいなのは。 妥当なマーク付けと、br 要素を使わないことは別だと思うけれど。 というか、妥当なマーク付けを行うことと、 読みやすいなんていうユーザビリティみたいな話と、 一緒にされたらイカンと思うのですが。 そもそも br 要素は使ってはイケナイの？ なんで仕様書に載ってるの？ 仕様書に、なるべく使うなとか書いて有るの？ HTML4.01 の仕様書には書いてないみたいだけど、 XHTML1.0 では、使うの推奨されてないの？ 読点で改行とか、 一文の長さにより適宜改行するスタイルって、 好きではないけれど、 採用している人、少なくないよね。 【クオリア日記】
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
(X)HTML・CSSコーディングマニュアル
モバイルでのXHTMLとCSS
はてなアンテナ
一歩先のWeb標準 ♯1 | Webデザイナー・クリエイター�>�アイデアノート | withD