Flickr が Pinterest 対策。一部写真で Pin を無効に
Pinterest が先週、コンテンツホルダーに配慮して導入した、公式ブックマークレットからの Pin を無効にする 「nopin」 コード （Pinterest 公式 Blog の該当記事） に Flickr が対応、写真のライセンスや公開設定によって、この Pin 無効コードをページに挿入するようになったようです。 Flickr disables Pinterest pins on all copyrighted images (exclusive) ： VentureBeat Pinterest の Pin 無効コードに関しては、Pinterest のヘルプにその記載がありますが、Pin されたくない写真が掲載されたページの head 要素内に、1行、meta タグを入れるだけ。 What if I don't want images from my site to be pinne
HTML5 を学ぶための情報源まとめ
ちょっと更新サボりすぎでしたが、最近 HTML5 関連の話もとっても増えてきましたので、ここらで HTML5 に関する情報を集めるときに情報源として有益なサイトをまとめてみたいと思います。やはり、英語での情報が多くなってしまうので、英語能力が残念な私なんかは結構厳しいんですが、いくつか日本語での情報源も挙げてみましたので、併せて見ておくといいと思います。 ちょっと更新サボりすぎでしたが、最近 HTML5 関連の話もとっても増えてきましたので、ここらで HTML5 に関する情報を集めるときに情報源として有益なサイトをまとめてみたいと思います。 やはり、英語での情報が多くなってしまうので、英語能力が残念な私なんかは結構厳しいんですが、いくつか日本語での情報源も挙げてみましたので、併せて見ておくといいと思います。 ちなみに、XHTML 好きな私としては、XHTML5 で次のサイトリニューアルとか
Web標準（略）新・100の法則 について
先日お伝えしたとおり、 「Web標準XHTML+CSSデザイン クリエイターが身につけておくべき新・100の法則。」 という著書が明日、7月3日に発売されますが、その内容について、簡単にですが書いておきたいと思います。 なんか、今日の時点でもうすでに書店で並んでいるのを見かけたとかいう情報もちらほら聞いておりますが、購入を検討していただいている方がいらっしゃれば、参考にしていただければ幸いです。 まず、本書籍の位置づけですが、本書のターゲットとなる方は、(X)HTML や CSS を使用したことはあり、一通りの Web ページ制作はできるものの、W3C の仕様書なんて見たことないよとか、マークアップの中身まではあまり気を使ったことがありませんというような初級者の方から、その状態から一歩前へ進みたいと考えている中級者の方になると思います。 次に内容に関してですが、本書は 「100 の法則」
colgroup / col 要素を活用してみる | WWW WATCH
table 関連の要素とか属性っていろいろあるにもかかわらず、結構使われていないなと思ったり。 上手にマークアップしておけば、アクセシビリティ的にも優れた表組み... table 関連の要素とか属性っていろいろあるにもかかわらず、結構使われていないなと思ったり。 上手にマークアップしておけば、アクセシビリティ的にも優れた表組みが再現できるだけでなく、CSS で見た目をいじるときにも、無駄に class 属性なんかをつける必要もなかったりと、いろいろ良い事あるのになということで、今回はその中から colgroup 要素と col 要素について書いてみることにします。 例えば上記サンプルのような表を作りたいと思ったとき、列方向 （縦方向） のセルに背景色を指定するためだけに class 属性を付けていったりするのは面倒だしスマートじゃない。サンプルのように列方向の各データが構造的にグループ化で
SSI で IE 6 のみ XML 宣言を省略
特に目新しいお話ではないんですが、SSI の条件式を使用して、ブラウザ別にあれこれする方法について書き留めておこうと思います。 今回は、XHTML で文書を公開... 特に目新しいお話ではないんですが、SSI の条件式を使用して、ブラウザ別にあれこれする方法について書き留めておこうと思います。 今回は、XHTML で文書を公開する時に面倒な問題である、IE6 において、XML 宣言等、DOCTYPE 宣言以外を文書先頭に書いた時に、DOCTYPE スイッチによってレンダリングモードが過去互換になってしまうバグへの対応を SSI で何とかしてみようというのを主に取り上げてみたいと思います。 Apache HTTP Server の現行バージョンでは、SSI で条件式が使用できます。なので、 <!--#if expr='"$DOCUMENT_URI" = "/foo/file.html"' -
IE7 の隣接セレクタで気が付いたこと
「画像の使用を（略）CSS大会」 に応募した自分の作品を、IE7 で見てみたんですが、なぜか隣接セレクタ （E + F） がまったく適用されていないのに気がつき... 「画像の使用を（略）CSS大会」 に応募した自分の作品を、IE7 で見てみたんですが、なぜか隣接セレクタ （E + F） がまったく適用されていないのに気がつきました。 IE7 は隣接セレクタに対応してるはずなのでおかしいな、なんか自分の書き方がおかしいのかな？なんて思って、手元にある CSS をいじったりしてみたのですがまったく効果なし。何でだろうと思って HTML 文書の方を見て、何気なくソース内のコメントを削除してみたら...... 普通に適用されてる...... orz 該当する HTML ソースは下記の通り。 <div id="navigation"> <h2>Contents</h2> ...中略... </di
CSS は正しくお使いください
立て続けに人のエントリーに乗っかってますが...... S i M P L E * S i M P L E さんで紹介されていた、「CSSだけで文字にドロップシャドウをつける方法」 （元ネタはこれ） に関してはちょっと気になったので書いておこうと思います。 実は S i M P L E * S i M P L E さんのエントリーの元ネタでは書かれているのですが、このようにテキストを 2回書いてそれを CSS によって重ねてしまう方法は、下記のような弊害があります。 CSS が OFF だと、テキストがだぶる 音声ブラウザは 2回同じテキストを読み上げることになる CSS が OFF という状況は、ブラウザでアクセスしてくる人間様相手の場合、あまり起こらない状況だと思いますが、ページをスクレイピングしていくようなユーザーエージェントは、CSS なんて基本的に読みません。例えば、Google
Re: 正しくHTMLを（中略）5つの質問
はてブの注目エントリーを眺めていたら、der Gegenwart さんで 「正しくHTMLを書こうと心がけている人に5つの質問」 っていうエントリーが上がっていたので反応してみる。激しく乗り遅れな感じもしますが。 正しくHTMLを書こうと心がけている人に5つの質問 : 雑記帳 : der Gegenwart 質問は、下記の 5つ。 HTML文書を制作する際に使用しているプログラムをお答えください。（Webプログラムも含む） 採用しているDTDとその理由をお答えください。 何故正しくHTMLを書いているのですか？ W3CとWHATWG、どちらに期待してますか？ あなたにとってHTMLとは何ですか？ 1、HTML文書を制作する際に使用しているプログラムをお答えください。（Webプログラムも含む） 秀丸さんオンリーです。特に、現在公開されている先行開発バージョン （Ver6.50β） は、単語補
tfoot に関するエントリーの補足
前のエントリー、「tfoot は tbody の前に書いた方がいいよ」では、行グループ、tfoot 要素の記述位置に関して hxxk.jp さんのエントリーに乗っからせて頂く形で書きましたが、該当エントリーのタイトルに突っ込みをいくつか頂いたので補足エントリー上げます。 突っ込みの内容としては、「書いた方がいいよ」 というタイトルの書き方だと、「書いても書かなくても自由だけど、書いたほうが吉」 と受け取る人がいて、ミスリードじゃないのということなんですが、確かにおっしゃる通りなのでその辺を補足したいと思います。 で、いきなり言い訳からなんですが、該当エントリーのタイトルを 「書いたほうがいいよ」 としたのは、 hxxk.jp さんのエントリーに対する突っ込みが主な内容だったので、hxxk.jp さんに向けて語りかける形で書いたからなんですね。なので、エントリー本文では 「仕様書には tfo
tfoot は tbody の前に書いた方がいいよ
404 Blog Not Found さんにて、「CSS - スクロール可能なテーブル w/o JavaScript」 というエントリーが上がっていて、これ見た... 404 Blog Not Found さんにて、「CSS - スクロール可能なテーブル w/o JavaScript」 というエントリーが上がっていて、これ見た時にその HTML ソースはないなぁ...... と思ったのと同時に、tbody に CSS を適用して overflow:auto とかすれば終わる話じゃないのとか思ってそれについてエントリーを書こうかなと思った瞬間、hxxk.jp さんにて 「CSS で tbody 要素を一定の高さにして、 overflow: auto でスクロール表示にする tips」 っていうエントリーが上がってるのを見て萎えた。 で、それについて書くのは諦めたんですが、hxxk.jp さん
未熟だからこそ Blog 書いてますってこと
たまに勘違いされるのですが、当サイトで (X)HTML とか、CSS に関して書いているのを理由に、その辺に関する知識は仕様書の内容なども含めて完全に習得してい... たまに勘違いされるのですが、当サイトで (X)HTML とか、CSS に関して書いているのを理由に、その辺に関する知識は仕様書の内容なども含めて完全に習得している → すごいですね。みたいな事を言われて焦るときがあるのですが、個人的にはまったく逆で、まだまだその辺の知識や見識が未熟だからこそ Blog を書いているっていう側面もあったりします。 そこで今回は、お勉強という側面からみた、Blog を書くことに関する個人的な考えをまとめておきたいと思います。 通常 「インプットの質と量」 と 「アウトプットの質と量」 は比例するものだと思いますし、Blog を書くこと、つまりアウトプットを定期的に行うには、それに数倍する量と質の
line-height に単位ありの指定は駄目？
最近、CSS の line-height プロパティに指定する値は単位なし （<number>） が良いという話が話題になっているようです。別に今に始まった話題ではないんですけども、最近この話題に触れている記事の中に、ちょっと気になる書き方をされる方がいるので書いてみます。 で、そもそもなんで line-height の値は <number> で指定しておいた方がいの？ってところですが、その理由をわかりやすくまとめている Lucky bag::blog さんの記事をまずは紹介しておきます。 line-height の値には単位なしが良いとされる理由 ： Lucky bag::blog line-height の値には、 normal inherit <length> <number> <percentage> が指定できますが、ユーザーエージェントのデフォルト値を使用する normal と
パンくずリストがベストとは限らない | WWW WATCH
最近ウチの会社の中の人も書いていました、Web サイトのナビゲーションとしてよく使われる 「パンくずリスト」 （Topic Path なんて言い方もしますね） ... 最近ウチの会社の中の人も書いていました、Web サイトのナビゲーションとしてよく使われる 「パンくずリスト」 （Topic Path なんて言い方もしますね） ですが、マークアップの仕方はどういう方法がいいとか、そもそもパンくずリストって必要なの？ なんて話まで、最近よく目にする気がします。 個人的にパンくずリストはサイト ID （ロゴなどですね） に対するトップページへのリンク設定同様の慣習みたいな感覚で、すべての人とは言わないまでも一定の認知はされていると考えていますので、サイト構築の際は基本的に要件に含めるようにしています。 で、今回はパンくずリストが必要か？ とか、パンくずリストのマークアップはどのような方法が妥当か
!important だらけの CSS にお別れを
CSS を記述するときに記述したスタイルの適用優先順位を理解していないと思ったようにスタイルが適用されなかったり、後からメンテナンスするときに効率的な作業ができ... CSS を記述するときに記述したスタイルの適用優先順位を理解していないと思ったようにスタイルが適用されなかったり、後からメンテナンスするときに効率的な作業ができなかったりと、思わぬところで無駄な時間をとられたりします。 で、結果として !important 宣言を連発、気が付いたら CSS が !important 宣言だらけになるなんてオチが待ってたりするわけですが、そうならないためにも CSS が適用される際の優先順位について簡単におさらいをしてみたいと思います。 CSS は、「Cascading Style Sheets」 という名前の通り、「Cascading」 されて （段階的に） 適用されます。よって、簡単に言っ
XHTML、CSS を学ぶ時の 6つの間違い
XHTML、CSS を学ぶ時にやりがちな間違いを私の個人的独断と偏見でつらつらと書いてみます。今から (X)HTML を学ぶのであれば、HTML よりも XHTML でしょということでタイトルや本文内では XHTML と書いていますが、ここは HTML に置き換えてもらっても同じだと思います。 1、とりあえず Dreamweaver を買ってくる 別に 「Dreamweaver」 だけに限らず、オーサリングツールさえ手に入れれば XHTML なんて簡単に習得できると思っている人は少なくない気がしますが、これは大きな誤解です。この誤解を抱えたまま 「オーサリングツールが使える = XHTML を理解している」 だと思い込んでいると後になって困ることになると思いますよ。 オーサリングツールは、コーディングスキルを補うツールではなく、コーディング作業を効率化するツールです。XHTML、CSS に
「ブックマークに追加」 ボタン
サイトリニューアルの際に、旧デザインで各エントリーページに付けていた、hatena ブックマーク、del.icio.us 等ソーシャルブックマークへの追加ボタンをはずしてそのままにしていたのですが、これを再度掲載することに。 その際、単にアイコンを並べただけでは味気ないので、ちょこっと小技を効かせてみました。 実物はエントリータイトル横のアイコンにマウスオンしてもらえればわかるかと思いますが、せっかくなのでソースとか公開。 2007年12月14日 追記 サイトリニューアルでボタンが変わったので、サンプルを下記に移動しました。 実際に動作しているサンプルはこちら さて、今回の材料は、 アイコン画像 JavaScript ファイル 3種 本ボタンの XHTML ソース 本ボタン用 CSS の追加 JavaScript ファイルはマウスオン、オフ時の動きを制御するために使用。これは 「PJ Hy
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
