re:マルチシートアプローチとかクラス名とか ネタ元:マルチシートアプローチとかクラス名とか いろいろな人の意見が出てきて面白いところですので、私の意見も書いておきたいと思います。 個人的にはスタイルシートを、分けないほうが効率が良いと思ってます。 Firebugを利用すれば編集したいCSSが、どのスタイルシートの何行目に記述されているかが3秒でわかるので1枚だと非常に楽です。 作業的には ブラウザで確認→Firebugでスタイルの確認→エディタに移動(Alt+Tab)→編集する行に移動(Ctrl+g)→編集保存→ブラウザに移動→最初に戻る。 で済むのですが複数枚で管理していると ブラウザで確認→Firebugでスタイルの確認→エディタに移動(Alt+Tab)→編集するスタイルシートに移動(Ctrｌ+Tab)→編集する行に移動(Ctrl+g)→編集保存→ブラウザに移動→最初に戻る。 という
先日TRANSさんで紹介されていたデバッグCSS、Firefxの拡張「Stylish」を使えば便利だと思うのですよ。 以前書いたFx拡張まとめでも挙げているように、Stylishはユーザースタイルシートの編集・管理をする拡張です。 デバッグ用CSS「Diagnostic Styling」とそのサンプルコード - TRANS [hatena] http://d.hatena.ne.jp/aratako0/20080119/p1 サイトのチェックをするたびにデバッグCSSを追記するのもちょっと面倒ですよね？ Stylishに登録しておいてチェックの時だけ有効にすれば、制作済みのファイルを汚すこともなくとても便利です。自分はこの方法でチェックをやっています。Web制作者なら大抵Firefoxをインストールされていると思うので、試しにやってみてはどうでしょう。（以下はWindowsでの手順で
CSSを使って開発中のHTMLのデバッグを行ってしまうという考え方の紹介とそのサンプルコードをメモしておきます。 デバッグ用CSSとは何か。 まず、サンプルのコードを示してみます。 img[alt=""] {border: 3px dotted red;} img[title=""] {outline: 3px dotted fuchsia;} img要素に続くのは属性セレクタ（属性セレクタについてはCSS セレクタに関するおさらい | WWW WATCHが詳しいので、そちらを参考に）。alt=""とtitle=""の属性と値を持つimg要素にマッチし、それぞれのスタイルを与えます。こうしておくと、HTML内に空白のalt属性やtitle属性があれば、指定されたスタイルが適用されるになり、空白であることが分かるわけです。 もう1つサンプルとして、こんなのはどうでしょうか。 a[href="
画像にalt属性を よく「画像にはalt属性をつけましょう」というフレーズを耳にするかと思いますが、これはサイトのアクセシビリティ改善における対応のうち、もっともメジャーなものであるといえます。WAIのアクセシビリティガイドラインであるWCAG1.0には「テーブルをレイアウトに使ってはいけません」というような内容の項目もありますが、これに対して「よっしゃ、テーブルを使うのをやめよう」とあっさりと決断してサックリとそのように作り変えることなど、ほとんどのサイトにおいて無茶な話でしょう。しかし「すべての画像にalt属性をつけよう」というのはアクセシビリティの対応要件に必ずといって良いほど含まれます。これなら、たとえ数千ページある規模のサイトであっても、とりあえず機械的な処理であるとか、人海戦術であるとかでも何とかなりそうだから……と思うからかもしれません。 たまにalt属性のことをaltタグと
HTML文書においてはimg要素を使ってインライン画像を表示することができますが、Lynxのようなテキストブラウザや画像表示をOFFにしている利用者のためにはalt属性によって画像の代わりとなる代替文字列を用意することができます。いえ、正しくは「用意できる」ではなく「必ず用意しなければならない」ものです。HTML4においては、altはオプションではなく「必須」の属性とされています。 WWW利用者の環境 alt属性の使い方の基本公式 伝えるべき情報 なぜalt文をうまく組み込めないのか alt="" ? img要素のtitle属性を使う WWW利用者の環境 近頃はNetscape NavigatorやInternetExplorerが全盛で、それらに合わせたページを作ることが当たり前のように思われていますが、実際は： これらのグラフィカル・ブラウザを使っているが、回線の事情や、よりスピーディ
画像を閲覧できないユーザーでも内容を把握できるようにalt属性をつけましょうとは言うが、実際にはどのようにつけたらよいのかが実はかなりわからない。さらに納品前になんじゃこのalt！と突っ込まれる・・・。色々話し合ったりググったりした末にでた自分結論はこんなの。 前提 画像OFFのユーザー・音声ブラウザのユーザーが、画像の代わりにそのaltテキストが表示されても、ページ内容が分かる。但し、100%の情報を伝える必要があるわけでもない。そこに何の画像があるのかが伝わり、ページ内容を把握できる。 画像の中に文字がある場合
LSC1月17日分の17b alt属性で、img要素について気になる記述がありました。 「alt属性は画像の代替」と考えるからおかしなことになる。 HTML は文章にタグで意味付けするものだから、既にある文章（フレーズ）をマークアップした結果が img要素になるべき。つまり、「画像はあるフレーズの代替」が正しいんじゃないかと。 これはちょっとひねって考えすぎなのではないでしょうか。 HTML仕様書を素直に読めば、img要素は埋め込み画像 (Embedded image)であり、alt属性は代替テキストなのだから、それを逆に考えるというのは無理があるように思います。 HTMLを書く上での考え方として、野嵜さんにより提唱された「はじめにテキストありき」という言葉があります。これは自然言語で書かれた文書をマークアップする上ではとても重要な考え方ではあるのですが、一方で、HTMLは自然言語で書かれ
第7回モーション、インタラクション ― 演出効果と機能性の提供 ― 齋藤順一 2008-03-14
また来たか、こういうの[謎]。 結論からすれば、ひとつのh1に全部ぶら下げる必要はないというか、そうしなさいとは何処にも定義されていないわけですから、サイト名をh1にするも良し、そのうえで、さらに自分的に文書内容の最上位見出しだろうと思うものもまたh1にするも良し、でしょう。 実際の大規模事例でいいますと、たとえば西村あさひ法律事務所のウェブサイトとか。まさしく今が僕的に旬のサイトといえます[謎]。 このサイトでは、サイト名がh1となっていて、それはいわゆるページのグリッド構造からいうとヘッダーエリア的なところまでに対する最上位見出し、続くいわゆるコンテンツエリア的なところの最上位見出しはそこでのコンテンツのメインな内容に対するものとして、再びh1が表れます。文書のタイトルっぽいのはh2になっていたりしますが、むしろtitleに入れるほうへ重きを置くなどしていたりとか。そしていわゆるフッタ
h1をサイトタイトルにする理由 2007-07-09 0 0 XHTML/CSS hn, XHTML h1要素の内容を何にするかという問題で，たくさんの方が言及しています。詳細は北村さんがまとめたリンク集から各エントリをご覧いただくことにして...。 見出し要素に関する議論 - 徒委記 h1にはサイトタイトル ぼくの場合，h1要素にはサイトタイトルを入れることが多いです。 文書の階層構造を見出しでマークアップしようとしている。 サイト全体を統一されたルールでマークアップしようとしている。 サイト全体をひとつのまとまった文書（document）ととらえている。 といったことが主な理由です。 たとえばこのブログだと，サイトタイトルをh1，エントリタイトルをh3でマークアップしています。トップページでも，アーカイヴのページでも，カテゴリのページでも，各エントリのページでも，サイトタイトルはh1，
最近デザインでつまずいたこと。 つまずいたといっても自分はコーダーなので、ページ組み終わってから、むむっ…ｱｯｰｰｰ！となったこと。 ローカルナビ まずはこれ、ローカルナビの例 ローカルナビなんかのデザインなどで、Aの場合、液晶テレビ～のリンクは、明らかに文字しかリンク範囲が反応しないように見えるが、Bの場合は、枠の中全体がリンク範囲として反応しそうに見える。こんな感じでリンク範囲を文字の周囲にまで及ぼしたいときは、Bみたいに、どこまでがリンクとして反応するのかがすぐ分かるようにした方が使いやすいし迷わない。 ブロック形式のナビ 次はこれ、ブロック形式のナビの例 先程の例を生かして、全体をリンク範囲にしよう！だから、Aみたいなものを作った。 Aだけが存在する場合、これは、ブロック内全体リンクにして間違いない。 Bが加わったとき、Aがあるなら、当社の…の説明文もリンクしなきゃおかしいか
WordPress へようこそ。こちらは最初の投稿です。編集または削除し、コンテンツ作成を始めてください。
子孫セレクタをうまく使うことで、スタイルのためだけに ID や クラスを付与することなんかを避けることが出来るわけだけど、状況によっては深い階層の要素を指定するために子孫セレクタがとんでもなく長くなる場合がある。例えば、最近見た他人が書いたコードで一番長かった子孫セレクタなんかは、こんな感じ。 #content-body div.collapsing-block.pseudo-collapsed .collapsing-btns .toggle-collapse { property: value; } 基本的に、セレクタ内には空白文字を挿入することが可能なんだけど、改行やインデントも空白文字のひとつに含まれる。そこで、長いセレクタに改行、インデントをうまく使うことで、視認性を高めることができるかもよってのが今回のアイデア。上記の長い子孫セレクタに改行・インデントを取り入れてみると、こんな
Read/Write Web で面白い記事があったので、紹介がてらコメントを少々： ■ Five Ways You Can Fall in Love With Tagging Again (Read/Write Web) 「ネット上のコンテンツにタグを付けるって、思ったほど流行ってないよねー」という書き出して始まる記事。そのまま「タギング悲観論」になると思いきや、「こんな面白い使い方もあるよ！」と5つの方法を紹介しています。早速その5つはというと： 1. 過去の振り返りとして これは Tim Bonnemann さんという方のブログエントリにインスピレーションを受けて、とのこと。このエントリには、Tim さんが2007年に自分の del.icio.us に追加した記事の中で、"dictionary"というタグが付けられたものが一覧されています。確かに分かりやすいルールでタグを整理しておけば
The grants and applications of the NIFA are all designed to help in the realization of its total company mission...
多くの人やリファレンスが HTML の img tag には height と width 属性を書きましょう、書いたほうが好ましいです、と言っている。が、敢えて積極的に書くべきではないと言いたい、と言うか言う。 何故、多くの人は img tag には height と width 属性を書いた方が良い、と言っているかと言うと、img tag が出現すると (一般的な) UA は img tag で指定された画像の大きさが不明な間、続く内容の表示する事ができず、結果文書全体の表示速度が遅くなる (逆に言えば img tag に height、width 属性を書き込むと表示が速くなる) からだそうである (ろばＱはこれ以外の論拠を聞いた事がないので以降、これを唯一の前提として論を続ける)。 閲覧者側の表示速度が向上すると言うのは (制作者側にとっても) 喜ばしい事である。もし、表示速度以外
IE5.xやIE6の互換モードがidやclass名の大文字小文字を区別しないのは、わりと知られています。 これとラクダ式id、class名を使えば、cssの振り分けができるなーとか思いつきました。 ちなみにラクダ式とは、「mainContent」や「subNavi」など2単語以上からなるid、class名を、ハイフンではなく2単語目を大文字にして可読性を上げる書き方の事です。 camelと英語で呼ぶ人もいるとか。 個人的には結構好き。 HTMLとCSSのソース /* for modern brow */ #sampleA { color: blue; } /* for IE5 6 */ #samplea { color: red; } <p id="sampleA">ほげほげ</p> これで、IE5.xとIE6互換モードでは文字が赤に、Firefoxなどでは青になります。 なお、他の人が見
ひとつのスキンは、機能・役割ごとに独立したCSSファイルが複数組み合わさって構成されています。各CSSファイルがどのような役割をもち、スキンの一部として組み込まれているかを理解することで、既存スキンの編集が簡単になります。 ここでは、Vicunaで配布しているスキンについて、 全体の構成 コアファイルの役割 記述ルール 分割方法の特徴 に分けて解説します。 全体の構成 次の図は、各ページが読み込むCSSファイルを示したものです。Vicunaで配布している純正のスキンは、すべて以下のような構成になっています。 ページに直接読み込まれる 0-import.css は、その下の5つのファイル 1-element.css 2-class.css 3-context.css 4-layout.css 5-module.css を読み込みます。スキンのデザインのほとんどは、このうち 5-module.
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
