HTML5+CSS3 入門
Webを記述する言語の標準の現状 昨年度であれば、HTMLを記述する授業では自信をもって以下の基準を推薦していました。 HTML (文書の構造を記述する言語) – XHTML 1.0 もしくは XHTML 1.1 CSS (文書の体裁・デザインを指定する言語) – CSS 2 しかしながら、ここ数年で、とくに去年あたりから状況は大きく変動しつつあります。現状の変化を理解するには、ここに至るまでの歴史的な経緯について簡単に理解する必要があります。ここまでの経緯を整理した上で、将来の展望を探りたいと思います。その上で、この授業ではどのような基準にのっとって「正しい」ということを定義するのか決めていきたいと考えます。 HTML (Webサイトの記述言語) の標準化巡る闘争の歴史 AppleInsider: なぜ Apple は HTML 5 に賭けているのか： ウェブの歴史 [Page 2] よ
CSS3の擬似クラスをIE6-8でも使えるようにする「Selectivizr」:phpspot開発日誌
Selectivizr - CSS3 pseudo-class and attribute selectors for IE 6-8 CSS3の擬似クラスをIE6-8でも使えるようにする「Selectivizr」 便利なCSS3の擬似クラスがIEでも使えて効率的なスタイリングが可能になります。 jQuery, prototype, mootools等と同時に使うことができ、 使えるプロパティはライブラリごとに違うようで、サイト上にそれぞれ掲載されています。 完璧ではないようですが、便利なものが多く使えるということで、活用してみてもいいかもしれませんね。 関連エントリ 便利なCSS3ツール6つ＋α IE6-8でもCSS3が使えるようになる「CSS3 PIE」 ピュアCSS3で3Dアニメーション IE6-8でもCSS3に対応するライブラリまとめ
【レビュー】CSS3を自動生成するサイトCSS3.0 Maker | エンタープライズ | マイコミジャーナル
CSS3.0 Maker - CSS3.0 Generator AjaxianにおいてAuto-Generate CSS3 For Fame and Fortune!という記事が公開されている。CSS3のサンプルソースコードを出力するWebアプリケーションやWebサービスはすでにいくつもあり、マイコミジャーナルでもいくつか取り上げている。Ajaxianのさきほどの記事ではそうしたサービスの新しいもののひとつとしてCSS3.0 Makerを紹介している。CSS3.0 Makerは従来のほかの同様のサービスと比較して次のような特徴がある。 どのページも同じUIが使われている。左上が設定変更、中上がプレビュー、右上が生成されるCSSのサンプルとダウンロードリンク、中下が対応するブラウザ、右下が提案投稿フォームだ。UIに統一感があり扱いやすい。 複数のブラウザに対応しているほか、それが現在どのブラ
【レビュー】IEのテキストエリアから不要なスクロールバーを消す方法 | エンタープライズ | マイコミジャーナル
SitePoint: New Articles, Fresh Thinking for Web Developers and Designers Craig Buckler氏がSitePointにおいてHow to Remove Textarea Scrollbars in IEのタイトルのもと、あるひとつのCSSテクニックを紹介している。新規のテクニックというわけではなく、すでに長い間使われているテクニックだが、再度そのポイントに焦点を当てた記事として参考になる。特に新人のWebデベロッパやWebデザイナは目を通しておきたい記事。 特に何も指定しない場合、IEはテキストエリアの右端にスクロールバーを表示する。たとえスクロールする必要がないとして、最初から表示され選択できない状態になっている。複数行のテキストを表示、または入力されてスクロールする必要がでてくると、表示されているスクロールバ
【レポート】CSSクエリテクニックは悪害? 万能な解決方法はないという意見 | エンタープライズ | マイコミジャーナル
Ajaxian 2010年6月にはいったあたりからCSSメディアクエリを活用してiPhone 4を含むさまざまなデバイスへ対応可能なWebページを制作するためのテクニックが矢継ぎ早に紹介されるようになった。CSSメディアクエリを使った方法は今でも注目度の高いテクニックで、CSSメディアクエリを使ったさまざまなテクニックが日々紹介されている。 ピクセル濃度に依存しないWebページの制作方法 iPhone 4でもPCでも画像を綺麗に表示するCSSの使い方 iPhone 4に対応したWebサイトを作る方法 iPad向けWebアプリケーション開発テクニック 逆に、CSSメディアクエリによる切り分けはモバイルデバイスにとっては逆効果であり、やめたほうがいいと考える向きもある。6月あたりからはじまったこのあたりの流れがAjaxian ≫ CSS Media Queries: Bees Knees Or
【レポート】ピクセル濃度に依存しないWebページの制作方法 | エンタープライズ | マイコミジャーナル
Ext JS is now Sencha iPhone 4のようなディスプレイピクセル密度が高いデバイスの登場で、WebデザイナやWebデベロッパの関心は、異なるピクセル濃度のデバイスにどのように対応するかといった点に集まりつつある。基本となるテクニックのいくつかはすでにいくつかのブログで紹介されている。 iPhone 4でもPCでも画像を綺麗に表示するCSSの使い方 iPhone 4に対応したWebサイトを作る方法 iPad向けWebアプリケーション開発テクニック これまでマイコミジャーナルで紹介したテクニックは細部のテクニックが多い。そこでSenchaブログに掲載されたResolution Independent Mobile UIを紹介したい。モバイルデバイスにも対応したJavaScriptフレームワークSencha Touchで使われているテクニックの根本をまとめたもので、ピクセル
【レビュー】HTML5 search、WebKitブラウザは使用注意 | エンタープライズ | マイコミジャーナル
A Web Design Community curated by Chris Coyier. HTML5で新しく策定が進められている機能のひとつに、input要素におけるsearchタイプがある。これは検索フィールドであることを明示するための型で、今のところ通常のテキストフィールドと大きな違いはない。ただし、WebKitを採用しているブラウザ(ChromeやSafari)では扱いが異なっている。 このあたりの話がWebKit HTML5 Search Inputs - CSS-Tricksにまとめられている。WebKitではsearchが指定されたinputはほかのinputとは挙動が違い、CSSの適用などには注意が必要という内容になっている。指摘されている内容をまとめると次のとおり。 WebKitではtype=searchが指定されたinput要素は、ブラウザの右上に表示されているテキ
【レポート】動くCSS3海賊 | エンタープライズ | マイコミジャーナル
Thomas Fuchs, author of the script.aculo.us user interface JavaScript library, a member of the Prototype core team and a Ruby on Rails core alumnus. mir.aculo.usのCreating awesome CSS3 animationsにおいて、CSS3を使った素晴らしいアニメーションの例としてFreelance Treasure Mapが紹介されている。Chrome、Chromium、SafariなどのWebKitベースのブラウザでアクセスするか、iPadまたはiPhoneからアクセスすると、ページ上部に掲載されている海賊のアニメーションを確認できる。 Chrome 7でFreelance Treasure Mapを閲覧した場合 瞳は瞬き
CSSセレクタで属性だけじゃなく、スタイルもクエリーできちゃうとすごく便利(かも) - latest log
「CSSセレクタって、CSSのルールで絞り込みはできても、CSS(スタイル)で絞り込みができないんだ…」って思ったことはありませんか? 実験的なテーマになりますが、styleプロパティの値を、CSSセレクタでクエリーできるように構文を拡張してみました。 # 構文や機能に対する改善案をお待ちしています。 スタイルで絞込みを行う場合の基本的な構文は、E { prop operator value } 以下のバリエーションを用意しました。 prop の値は、計算済みの値(currentStyle または getComputedStyle())の値と比較します。 IEで、currentStyle(element).width === "auto" なケースがありますが、そのような場合でも "auto" を px単位の値に自動的に変換したうえで比較します(つまり div{width="auto"}
line-height の値には単位なしが良いとされる理由
CSS で行ボックスの高さを指定する line-height 値に、em(length) や %(percentage) などの単位を付けて指定しているサイトを意外と見かける。それは間違いではないし、例えばナビゲーションとかでブロック要素の垂直センターに配置するために意図的に指定しているんであれば良いんだけれど、そうでないなら line-height 値には単位なし (number) で指定した方が良いのにとか思ったりする。その理由は Eric's Archived Thoughts: Unitless line-heights でも分かりやすく説明されているんだけど、ちと劣化コピーしてみる。 単位ありと単位なしの違い 手っ取り早く説明するために、サンプルを作ってみた。p 要素があって、その中にインライン要素の em で一部分を強調している。分かりやすいようにそれぞれの font-size
でかいからこそ、と、何か大人の都合みたいのとか - 何かの記録
でかい企業(サイト)を採点 : Weblog : SimpleIsmを読んで思ったというか、とりあえずソースの記述方法に関してはあまり笑うとこでもないかなーと思いました(自分の個人的な感想ですが)。勝手な予想だけど、多分大人の都合かなんかだと思います。もろん技術的な都合もあると思います。 やほう Yahoo! Japan が何で CSS を HTML のなかに直接記述してるか理由は知らないですが、分割するっていうのをシーン別に考えていけば、開発段階では必要だが本番段階では不要とかいうようなこともあるらしいので、何かそんな感じの理由があるんじゃないかなー、と思います。ちょっと似てるような違うような感じだけど、「見易くするっていうのをシーン別に考えていけば、開発段階では必要だが本番段階では不要とかいうようなこともある」とも言えるかも(言えないかも)。メンテナンスとかのときは見易いほうがいいけど
いまさら聞けない“Web標準”、そしてXHTML＋CSS
いまさら聞けない“Web標準”、そしてXHTML＋CSS：いまさら聞けないリッチクライアント技術（4）（1/3 ページ） 前回の「いまさら聞けない、“Ajax”とは何なのか？」の説明の中で、Ajaxの定義の1つとして「XHTMLとCSSを使った標準規格のプレゼンテーション」というのがありました。前回の記事では、この部分をしっかり解説できなかったので、今回はこれについて解説をしましょう。 といっても、Ajaxの補足説明が今回の目的ではありません。HTML／XHTMLとCSSを使った「Web標準」について紹介します。 「Web標準」という単語はよく耳にしますが、具体的にどんなものか？ HTML／XHTMLとCSSとどのような関係があるのか？ さらに、HTML／XHTMLやCSSって何？ といった点について見てみましょう。 「Web標準？ Webを標準化することかな？」 AjaxやXML、Jav
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コードを追加した場合，既存
[CSS]ブラウザのスタイルを初期化するスタイルシートのサンプル集 | コリス
YUI、Blueprint、YAMLなどのCSSのフレームワークでも利用されているブラウザのスタイルを初期化するスタイルシートのサンプル集です。 Blueprint YAML YUI Tripoli meyerweb warpspire christianmontoya crucialwebhost 下記のスタイルシートは、記述スタイルを同様のスタイルに全て変更しています。また、コメントも削除しています。 Blueprint Blueprint Based:Reset Reloaded <textarea name="code" class="css" cols="60" rows="5"> html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym,
![[CSS]ブラウザのスタイルを初期化するスタイルシートのサンプル集 | コリス](https://cdn-ak-scissors.b.st-hatena.com/image/square/bc54860ba06deaa45382cf2bddc929515def0354/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fshared%2Flogo-2014050501-en.png)
id指定とclass指定が矛盾するとclass指定が優先される（訂正） - ずっと君のターン
みたい。少なくともFireFox2.0では #ident { font-size: 200% } #klass { font-size: 50% } <div id="ident" class="klass">hello</div> とかやってると文字は小さく表示される。 直接エレメントを指定してるんだからIDを優先しろよと思った。 [追記] 上記間違ってました。すいません。訂正します。 正しくは「id指定された要素の子要素でid指定とclass指定が矛盾するとclass指定が優先される」でした。 <html> <head> <style> #parent-id .child-class { font-size: 200% } #child-id { font-size: 50% } </style> </head> <body> <div id="parent-id"> <div id=
CSSにおけるセレクタの優先順位 - reflux flow
セレクタの優先順位を決める詳細度の計算方法。 このページの目次 はじめに セレクタの種類 優先順位の計算方法 参考文献 主な変更履歴 はじめに ここではCSS2.1の仕様を元にセレクタの優先順位を決める詳細度（specificity）の計算方法について説明します。 セレクタの種類 まずは用語の確認（参考: 5 Selectors）。 全称セレクタ すべての要素に適合するセレクタ。「*」と記述する。 IDセレクタ id属性（HTML/XHTMLの場合）に基づくセレクタ。「#ID」と記述する。 クラスセレクタ class属性に基づくセレクタ。「.クラス名」と記述する。属性セレクタを用いた「[class~=クラス名]」と意味は同じ。 属性セレクタ 属性および属性値に基づくセレクタ。「[属性名]」、「[属性名=属性値]」、「[属性名~=属性値]」、「[属性名|=属性値]」のように記述する。 疑似ク
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
worldending.jp
Hide CSS from browsers :: @import
Web制作 W3G
eclucifer blog - FC2 BLOG パスワード認証