CSSに関するmasakanouのブックマーク (178)

  • 作ろうiモード:iモードブラウザ2.0対応i-CSS2について | サービス・機能 | NTTドコモ

    i-CSS2はiモードブラウザ2.0以降で利用できるスタイルシートで、CSS2、WCSSに準拠しています。 i-CSS2を使用するには次の3つの方法で記述します。 link要素により外部ファイルを読み込む。外部ファイルは1ページあたりの読み込みサイズに含まれ、最大ファイルサイズは500KBです。 例: <link rel=”stylesheet” href=”aaa.css”> style要素に記述する。 例: <style type=”text/css”>body {color:red;}</style> 各要素のstyle属性に記述する。 例: <body style=“color:red;”> 属性名、値、疑似クラスは、半角大文字・半角小文字の区別をしません。ただし、-wap-input-format属性の値についてのみ半角大文字・小文字の区別を行います。 スタイル適用の優先順位につ

  • IE8が対応したCSS 2.1の機能:印刷とコンテンツの追加に関する機能 - builder by ZDNet Japan

    IE8はCSS 2.1の機能に一通り対応した。そこで今回からはIE8が新規に対応したCSS 2.1のプロパティや値についてまとめていく。まずは、古いIEでは未対応だった印刷関連の機能と、コンテンツの追加に関する機能について確認していきたい。 なお、新しく対応した機能を利用するにはIE8のStandardsモード(標準準拠モード)で表示する必要がある。Standardsモードや互換表示ボタンについては第2回の記事「IE8のレンダリングモードと互換表示」を参照してほしい。 印刷関連の機能 印刷関連の機能では、古いIEはpage-break-afterとpage-break-beforeプロパティに部分的に対応していた。IE8ではこれらのプロパティを完全にサポートするとともに、@pageルールやpage-break-insideプロパティなど、印刷関連の残りの機能にも対応している。 @pageル

    IE8が対応したCSS 2.1の機能:印刷とコンテンツの追加に関する機能 - builder by ZDNet Japan
  • プログラマが1ヶ月でWebデザイナーに転身する方法 - やねうらおブログ(移転しました)

    サイトを構築していると、プログラマはWebデザイナーと共同作業をしなければならない。 しかし高度なRIAを実現しようとすると思っているようにWebデザイナーに素材を作成してもらうだけでもとても骨の折れる作業だ。 そこで、一層、「すべてのプログラマはWebデザイナーになればいいんじゃね?」と思った。 今回は、私の実体験に基づき、「プログラマが1ヶ月でWebデザイナーに転身する方法」というのを考えてみた。 ■ HTML,CSSを覚えよう まず、HTMLCSS。いくら私でもW3C( http://www.w3.org/ )のすべてに目を通せとは言わない。 ブラウザ間で挙動が違うのでそれぞれのタグがどのブラウザで使えるのか一覧がまず欲しい。手軽なのは詳解HTML & CSS & JavaScript辞典。このハンドブックは見やすいのでお勧め。また、よく使うタグに関してはすべて覚えよう。覚えている

    プログラマが1ヶ月でWebデザイナーに転身する方法 - やねうらおブログ(移転しました)
    masakanou
    masakanou 2009/03/18
    「詳解HTML & XHTML & CSS辞典」のほうがよいと思う。リファレンスレベルでもHTMLとCSSの記述の厚みが違う。
  • Webタイポグラフィまとめ - Archiva

    Make a note of it: Web tech, montaineering, and so on. Note: この記事は、3年以上前に書かれています。Webの進化は速い!情報の正確性は自己責任で判断してください。 フォント指定や行間、約物といった、文字周りのノウハウです。デザインというより技術的なまとめ。SWFObjectとかsIFRといったFlashネタを除けば、Webの文字は全部CSSでできるんだから... コーダこそタイポグラフィを意識すべし。看板みて書体言い当てるとか変態的な域まで達せずとも、原則だけ覚えとけばプロトタイプが様になるんだし。 オールドスタイル数字 アンパサンド(“&”) スモールキャップ ハイフンとダーシ 各種スペース 合字 約物 約物はぶら下げる :beforeと:after 見出しのサイズ 初期フォントサイズ 行間の調整 余白の調節 各国の日付表記

    masakanou
    masakanou 2009/01/23
    読む
  • 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

    Firefox だと沖縄県警サイトが悲惨になる件について - xenoma日記
    masakanou
    masakanou 2009/01/09
    >Firefox においては、同じ CSS ファイルを 2 回指定したとき、 1 回目は import されますが、 2 回目は import されないようです。
  • 2009年のWeb標準 | gihyo.jp

    あけましておめでとうございます。株式会社ミツエーリンクスの木達です。昨年の年初、「⁠2008年のWeb標準」と題して、Webコンテンツのフロントエンド実装に用いられる標準とその周辺の動向につき、短期的な予測などをごく簡単に書かせていただきました。それに引き続き年もまた、同様の趣旨で記事を書かせていただくことになりましたので、よろしくお付き合いください。 2009年のWeb標準を考えるうえでのテーマとして、私は「アクセシビリティ」「⁠モバイル対応」「⁠マークアップ品質」の3つを挙げたいと思います。 2009年はアクセシビリティに再注目の年 9年半もの時を経て、昨年12月にWeb Content Accessibility Guidelines (⁠WCAG⁠)⁠ 2.0が勧告されました。1999年5月に勧告された前バージョンの1.0から大きく改善されたのは、第一に特定の技術に依存しない内容

    2009年のWeb標準 | gihyo.jp
    masakanou
    masakanou 2009/01/05
    >通称「WebコンテンツJIS」が2004年6月の公示以来,多方面で利用されてきました。   ←まじすか
  • Five Technologies That Will Keep Shaping the Web in 2010

    An error occurred when getting the results, please click here to try again or modify your search criteria.

    Five Technologies That Will Keep Shaping the Web in 2010
    masakanou
    masakanou 2008/12/11
    読む
  • HTML の label タグに必ずつけたい CSS

    CSS に1行加えるだけで ラベルまわりがとってもわかりやすくなる。 「そんなん当たり前」という人もいるかもしれないけど Gmail やら Twitter やらのログイン画面を見たら 実装されてなかったので一応。 label というのはフォームの部品とセットで使うやつで、 ある部品とその項目名を結びつけるやつね。 ↓このようなチェックボックスがあるとき 次回から自動的にログイン ↓こんなふうにラベルを指定しておくと <input type="checkbox" id="rememberme"> <label for="rememberme">次回から自動的にログイン</label> テキスト部分とチェックボックスが関連づけられるので テキストをクリックした時も チェックボックスにチェックが入るようになりますね。 ここをクリックでチェック入れられるよ 小さいチェックボックスにマウスカーソルを

    HTML の label タグに必ずつけたい CSS
    masakanou
    masakanou 2008/11/28
    なるほどこれはいい
  • はてなグループの終了日を2020年1月31日(金)に決定しました - はてなの告知

    はてなグループの終了日を2020年1月31日(金)に決定しました 以下のエントリの通り、今年末を目処にはてなグループを終了予定である旨をお知らせしておりました。 2019年末を目処に、はてなグループの提供を終了する予定です - はてなグループ日記 このたび、正式に終了日を決定いたしましたので、以下の通りご確認ください。 終了日: 2020年1月31日(金) エクスポート希望申請期限:2020年1月31日(金) 終了日以降は、はてなグループの閲覧および投稿は行えません。日記のエクスポートが必要な方は以下の記事にしたがって手続きをしてください。 はてなグループに投稿された日記データのエクスポートについて - はてなグループ日記 ご利用のみなさまにはご迷惑をおかけいたしますが、どうぞよろしくお願いいたします。 2020-06-25 追記 はてなグループ日記のエクスポートデータは2020年2月28

    はてなグループの終了日を2020年1月31日(金)に決定しました - はてなの告知
  • エリックが言った「I don't know.」の件について[謎] | securecat's exblog

    Web Directions Eastのワークショップに参加したコジカたん[誰]に感想などを聞きましたが、とりわけエリック(敬称略)が言った「I don't know.」の件について[謎]。 このように、マージンが設定されているBODY要素がある場合、ブラウザの枠とBODY要素の間に見えているのはHTML要素です(上図では白い部分)。この場合において、body { background-color: #FDD; } などと、BODY要素に背景色を設定すると、、、 このようになります。BODY要素の範囲を超えて、HTML要素にまで背景色が及びます。 さて、なぜHTML要素に背景色を指定していないのに、あたかもそうしたかのようになるのか? これについて、エリックは「I don't know.」と言ったそうです。「理由はわからん。なんだか知らないけどとにかくそうなる」と。 しかしそれでは納得がい

    エリックが言った「I don't know.」の件について[謎] | securecat's exblog
    masakanou
    masakanou 2008/11/11
    読む アップデートしなきゃ
  • Requirements for Japanese Text Layout 日本語組版処理の要件(日本語版)

    To make it easier to track comments, please raise separate issues or emails for each comment, and point to the section you are commenting on. 指摘を追跡しやすくするため,それぞれの指摘点について対象となるセクションを明記のうえ,個別の issue もしくはメールを送ってください. 日語 English All この文書は国際化ワーキンググループによりワーキンググループノートとして公開されています. この文書に関する議論には GitHub Issues の利用が望まれます. ワーキンググループノートとしての公開は W3C 会員による支持を意味しません.この文書は草案であり,更新やほかの文書により置き換えられる可能性が常にあります.作業版以外としての参

    Requirements for Japanese Text Layout 日本語組版処理の要件(日本語版)
  • The SitePoint Library | SitePoint Premium

    The SitePoint LibraryBrowse our comprehensive collection of courses, books, and tutorials on a wide range of development and design topics.

    The SitePoint Library | SitePoint Premium
  • For a Beautiful Web

    Web standards that have been outlined and classified have totally transformed the internet in just the last 10 years or so, creating an online experience that is more cohesive, more predictable, and a lot more robust. In 2005, when Cascading Style Sheets were updated for the third time – creating CSS3 – designers and developers around the world rejoiced at what this new web standard made possible.

    masakanou
    masakanou 2008/10/08
    読む
  • dfltweb1.onamae.com – このドメインはお名前.comで取得されています。

  • 直書きライクな、HTML+CSSコーディング。 | kimihiko Tech

    直書きライクな、HTML+CSSコーディング。 【追記】これは、ネタです。 以下の内容は、良いHTML+CSSコーディングを推奨するものではありません。 こんなに反響があると思ってなかったので追記しておきます (´-ω-`)ゴメンナサイ CSSHTMLから切り離して外部ファイルとして保管され、 その外部CSSファイルを修正すれば、HTMLファイルに触れずとも、 HTMLページの見た目を柔軟に変更できる、ということが 近年のHTMLページ制作におけるスタンダードになっています。 ですが、 私はHTML+CSSコーディングをする際に、 この外部CSSを作るのが非常に億劫でなりません。 idやclassなどのネーミングはもちろん、 どこに、どう設定を書くのか、などに非常に繊細な技術を要するからです。 かといって、styleを使って htmlに直書きするのも面倒だなと思っていました。 そこで

    masakanou
    masakanou 2008/09/18
    仕様変更が少ない場合、こういう定義のほうが便利だったりするw。標準化を徹底するコストのほうが高い。修正なんかはXHTMLからgrepして一括置換で余裕。/flex.cssはすごいな。ここまでやれば立派なバッドノウハウ
  • Webブラウザ標準適合性のわなとAcidテストの正体(1/3) ― @IT

    Webブラウザ標準適合性のわなとAcidテストの正体 株式会社ピーデー 川俣晶 2008/7/31 1つのWebページを開くだけで100項目のWebブラウザの標準適合性が検証できるAcidテスト。Acidテストの正体に踏み込む(編集部) AcidテストとWebブラウザの互換性 前回(Webブラウザ非互換性の温床となったのは何か)は、Webブラウザの歴史と大まかな仕組みを説明しました。そして、Webブラウザ間の非互換性が、ダイナミックHTMLという技術の普及を阻害したが、Webブラウザの種類の減少と非互換性の格差縮小によってダイナミックHTMLは息を吹き返し、Google MapsをはじめとするAjaxブームが起きたことを説明しました。 しかし、Ajaxブームの影響か、Webブラウザの種類は再び増える傾向にあり、しかも非互換性は再度拡大傾向の気配も見られます。仮に、この傾向が続くとすれば、サ

  • Flex/AIRウィジェットのデザインをCSSでカッコよく(1/4)- @IT

    注意! 前回の「いまさら聞けないAdobe AIR「超」入門」では、ベータ3版を扱っていましたが、記事に沿ってアプリケーションをコーディングしていくうえでは問題ありません。しかし、AIRの設定ファイル「SimpleTimer-app.xml」のバージョンが古いので、実行時にエラーが出ます。 すでに作成しているAIRウィジェットをFlex Builder 3上で動かす場合は、SimpleTimer.mxmlの内容を別のファイルなどにコピーしておいて、いったんSimpleTimer.mxmlを削除します。そして、再度Flex Builder 3上でSimpleTimer.mxmlを作成して退避しておいた内容を作成した新しいSimpleTimer.mxmlにペーストします。AIRの設定ファイルは再度自動作成されて最新のものとなります。

    Flex/AIRウィジェットのデザインをCSSでカッコよく(1/4)- @IT
    masakanou
    masakanou 2008/02/28
    試す
  • 941::blog : CSS Niteでお話した時の動画を公開 - livedoor Blog(ブログ)

    CSS Nite in Ginza, Vol.22の動画ですが、まだ公式サイトに あがってないようですが CSS Niteでお話してきましたと いう エントリで書かせていただいた編動画を取り急ぎアップしたので 興味のある方はどうぞご覧ください。 livedoorディレクターBlogでは月曜にエントリアップ予定ですので その時にでも改めて何か書こうとおもいます。 CSS Nite in Ginza, Vol.22 前編(櫛井) 1/3 CSS Nite in Ginza, Vol.22 前編(櫛井) 2/3 CSS Nite in Ginza, Vol.22 前編(櫛井) 3/3 CSS Nite in Ginza, Vol.22 後編(佐々木) 1/3 CSS Nite in Ginza, Vol.22 後編(佐々木) 2/3 CSS Nite in Ginza,

    masakanou
    masakanou 2008/02/27
    観る
  • CSSのOverflowを応用して画像を綺麗にリサイズ表示するサンプル:phpspot開発日誌

    Create Resizing Thumbnails Using Overflow Property | Css Globe This tutorial is aimed at controlling the size of the thumbnails appearing on your page. CSSのOverflowを応用して画像を綺麗にリサイズ表示するサンプル。 次のように、CSSで画像を固定サイズにトリミング表示できます。 更にマウスオーバーで画像を元サイズに。 実装について見ていきましょう マークアップが次のようにあったとします <p class="thumb"><a href="http://cssglobe.com/"><img src="image.jpg" /></a></p> そして、次のCSSを適用。 p.thumb{ float:left; margin:.5

  • サービス終了のお知らせ

    サービス終了のお知らせ いつもYahoo! JAPANのサービスをご利用いただき誠にありがとうございます。 お客様がアクセスされたサービスは日までにサービスを終了いたしました。 今後ともYahoo! JAPANのサービスをご愛顧くださいますよう、よろしくお願いいたします。