CSS一覧

HTML5 に未対応の IE9 未満でも JS なしで マークアップする方法

HTML5 と IE

HTML5 logo with American Sign Language
オレンジ色の──にくいアンチクショウ

ウェブ・デザインの世界では、そろそろ HTML5 への移行が進みつつあります。まだ主流にはならないけれど、完全に無視するのは もったいない。

HTML5 を学ぶには、下のページが最適です:

さて、HTML5 の世界へ入門するにあたって、最初の難関は IE への対応でしょう。IE8 以下(IE9 未満)は HTML5 の新しい要素を認識できないため、そのままでは CSS で装飾できません。装飾系男子には困った問題だ。(ドヤァ

下で紹介するシンプルな JavaScript を利用することで、オールド・タイプな IE でも HTML5 の新しいタグを CSS でデザインできます。こちらは一般的な解決方法ですが、JavaScript を切られていると効果がない

そこで今回の目玉として、HTML5 用のタグでマークアップして、なおかつ JS を使わずに IE8 以下でも CSS でスタイリングする方法(※後述)を説明します。

2011-12-17T15:04:37+09:00 追記

中途半端な知識で小生意気なコメントを残したら、あの小飼弾さんに取り上げられました! 頭がフットーしちゃいそうなほど うれしい!

404 Blog Not Found:備忘録 – 本blogをHTML5にするためにやったこと

ただ、 100 文字以内という制限があるはてなブックマークでは、完全に意図を伝えられません。上の記事と関連しているため、今回の記事を加筆・修正しました。

続きを読む


「浅漬け」と「ぬかみそ」、そして default.css

新顔・浅漬け CSS

「浅漬け CSS」という、「通」な人がニヤリと笑う CSS が提案されています。

浅漬けCSS | Blog hamashun.com

「浅漬け CSS」って何?

浅漬けCSSの定義

必要な要素へのmarginとpaddingのリセット程度を記述した、シンプルなCSSファイルやソースコードを浅漬けCSSと呼びます。

サイトによって記述する内容が変わる事もあります。

浅漬けCSS | Blog hamashun.com

ということで、ブラウザによって表示が まちまちになる各要素を、あっさり目にスタイルをリセットする CSS ですね。

一昔前だと、こういったコードが多く見られました。

* {
margin: 0;
padding: 0;
}

というか、今も使われていますが、たしかデメリットが あったような──。フォームとかボタンに悪影響がある、だったかな? 情報ソースが見つからないので、みなさんへの宿題に しておきましょう(何様?)。

続きを読む


『CSS Naked Day』 今年は 4/9 に開催(フライング)

CSS Naked Day

CSS Naked Day』を ご存じですか?

1 年に 1 回、この時期だけ CSS を無効にして、裸の <body> を さらけ出そう! という、変態たちのイベントですね(オイオイ)。

一昨年、昨年と盛り上がったのに、今年は誰もネタにしていない──。とくれば、ウチで取り上げるのに ふさわしい! ということで紹介しましたが──。

今年は 4/9 開催

──どうやら、前回までは 4/5 だったのが、今年は 4/9 になったようです。まぁ、もうハダカになる気マンマンだったので、この際、気にせず衣装(CSS)を脱ぎます。

いろいろと調整が面倒なので、トップページだけは CSS を残して、他のページを無効にしました。

続きを読む


「(X)HTML + CSS だけで Web デザイン」時代の終わり?

前回の続き

プログラマへ質問: こんなプログラム言語があったら── : 亜細亜ノ蛾の続きです。

CSS で「できること」「できないこと」

CSS という言語は、「できること」(文字装飾など)と、「できないこと」(サーバ通信 など)を覚えるまでは簡単です。

できることが わかっていれば、「やりたいこと」の答えは検索で すぐに見つかります。できないことも、あっさり諦められる。

問題なのは、「できなさそうで できること」(リンクに特定のアイコンを表示)と、「できそうで できないこと」(リンクに favicon を自動取得して表示)を覚えるのが やっかい。

さらに、「全てのブラウザで同じように表示させたい!」と禁断の、いや ごく普通の願いが、地獄への道しるべ。CSS 魔のダンジョンへ、ようこそ──。

「CM 入りまーす」

そこで──、すべての Web デザイナ・CSS ファン・ブロガ必見、現在絶賛発売中のホップ本(飲み口は柔らかいが辛口、のどごしスッキリ)を熟読するわけです。

これでアナタも、CSS と (X)HTML に関しては一人前だ!

photo

実践Web Standards Design―Web標準の基本とCSSレイアウト&Tips
市瀬 裕哉 福島 英児 望月 真琴
九天社 2007-02

Web標準XHTML+CSSデザイン クリエイターが身につけておくべき新・100の法則。 できる大事典 HTML & CSS (できる大事典) Web標準の教科書―XHTMLとCSSでつくる“正しい”Webサイト スタイルシート・デザイン XHTML + CSSで実践するWeb標準デザイン講座 Webユーザビリティ・デザイン Web制作者が身につけておくべき新・100の法則。

by G-Tools , 2008/01/10

──のだけれど、厄介なのは これから。

続きを読む


プログラマへ質問: こんなプログラム言語があったら──

プログラマへ質問

突然ですが質問です。アナタがプログラマだとして──

あなたの愛するプログラム言語に、ある日 突然、呪いをかけられました!

  • 次の物が使えなくなりました:
    • 変数
    • 配列 / リスト
    • ハッシュ / 連想配列
    • 関数 / サブルーチン
    • ポインタ / 参照
    • その他いろいろ……
  • 次の仕様変更がありました:
    • クラスは全て継承
    • 環境によって、実行結果が まちまち
      • 「標準」に準じた環境が ほぼ皆無
      • もっとも「標準」から遠い環境が世界標準
    • 何年も前から既知のバグが どっさり

──さて、アナタはそれでも、その言語を愛することが できますか?

(「CPAN」が使えなくなる、だけで充分かも・笑)

「そんな言語ねーよ w」というアナタへ──

……

……

……

つ 「CSS

(長くなったので、明日に続きます……。ここからが面白いよ! たぶん)


はてな がヌルヌルしている(CSS の話)

はてなヌルヌル問題

「はてな がヌルヌルしている……」

──あ、えっと、いま みなさん(誰?)が想像しているような、そっち(どっち?)の話題ではないです。

いくつかの はてなダイアリーで、

「マウス・ホイールでスクロールすると、ヌル~~~と遅くなる(Firefox の場合)」

という現象が、かなり以前から起こっています。──まぁ、はてなダイアリーで多く起こるので、わざと「ヌルヌル」と言いましたが、一時期 話題になった、「ぶよぶよスクロール問題」っぽい。

suVeneのあれ: ぶよぶよスクロール

──でも これは、IE の話だし、CSS 見直したら、の具体例が書いてないお (^ω^;)(;^ω^)

Firefox を使っていて、ヌルぶよっとする原因はなんだろう?

原因と解決策を、調べてみました。

続きを読む


jQuery を使ってサイドバーを AJAX で読み込む

jQuery でサイドバーを読み込む!

mt.Vicuna(と MT4)に移行しようと、一万年と二千年前から、日夜がんばっています。仕事中の空き時間とかに。

今回は、みんな大好き jQuery を使って、簡単に「サイドバーを AJAX で読み込む方法」を紹介します。

いくつか方法はあると思いますが、JSON で云々といった方法よりも簡単な、PHP(readfile, include, …) や SSI を使うのに近いやり方です。

jQuery を使えば、ほんの数行のスクリプトでできますよ。

サンプルページ

まずは、完成したサンプルページをご覧ください。

見た目は同じですが、後者はサイドバー部分(<div id="utilities"></div>)を AJAX で読み込んでいます。「ソースを表示」してみてください。

続きを読む


JavaScript 圧縮ネタの予告(自動でminifing + gzip 圧縮)

JavaScript 圧縮ネタ

旅の恥はかき捨て、と言いますが、ブログは書き捨てしようにもログが残ります。(別に、はてなブックマークのコメント書き捨て話をするわけではない)

書き捨てた、というつもりはなくても、いまだに心残りなのが JavaScript 圧縮ネタ。

このサイトでは考えられないくらいの、アクセス数・はてブ数をたたき出しました(ありがとう!)が──

──内容は他人様の記事のパクリだし、(英語とプログラミングが)あんまりわかってないのが丸出し。Safari などのブラウザの対応具合も、いまだに把握できてない。

この記事に対するツッコミ記事もいくつか目にして、大変勉強になり、感謝しています。しかし、恥ずかしい気持ちのほうが大きいです。もっと便利で面白い記事が書きたい!

時代は「縮小 + 圧縮」!

最近読んだ記事で良かったのが、id:dayflower さんのこの記事。

daily dayflower – JavaScript ファイルの圧縮・再訪

結論は、minifing + mod_deflate だとみんな幸せ、とのこと。

自分の借りている XREA のように mod_deflate が動かせない環境の場合、自分で gzip 圧縮するスクリプトも紹介されています(でもうまく動作しなかった)。

gzip/deflate 圧縮についての記事は多く見ましたが、minifing についてはまだまだ。ましてや、この二つを組み合わせる、というのはあまり見かけません。これからの主流になりそうですね。

──というか、じつは、minifing と gzip 圧縮を自動で行う PHP スクリプトを、四苦八苦しながら作ってます。

続きを読む


『実践 Web Standards Design』に超期待!

『実践 Web Standards Design』

Pub Standards Badges "Pub Standards Badges" by thevoicewithin

「この三人が集まったら、CSS 3.0 と XHTML 3.0、ついでに Web 3.0 くらい作れるんじゃね?(謎)」

と人々が言ったとか言わないとか(たぶん言わない)──でお馴染みの(?)お三方が、本を書かれたそうです!

詳細は以下から。(GIGAZINEメソッド)

続きを読む


「スタイルシートチェンジャー」で はてなスタイルを切り替え可能に

はてなスタイルを切り替え

まだまだ続くよはてなネタ! ──ええ、意外としつこい性格です。

亜細亜ノ蛾 のトップページから、デザインを切り替えることができるようにしました(2006-11-27T23:46:59+09:00 現在)。ガチャガチャ遊んでみてり、ソースコードをのぞいたり、どうぞ。

ちなみに、変わるのはトップページだけです……。

スタイルシートチェンジャー

今回はスタイルシートチェンジャーでMovableTypeのスキンを変更を参考にして、スタイルシートチェンジャーを導入しました。

ちょっとハマったのが、PHP スクリプトの設置位置。MT とは別のディレクトリにアップロードしたのですが、正常に動作しない。さんざん悩んで、やっと解決しました。

クッキーの有効範囲

「スタイルシートチェンジャー」はクッキーを利用して切り替えたスタイルを記憶します。その、クッキーの特性をよく判っていないのが原因でした。

クッキーの有効範囲について

クッキーは、CSS選択に指定した setstyle.php のあるディレクトリをルートとして、下位ディレクトリすべてが有効範囲になります。

スタイルシートチェンジャー

これ、知らない人は延々とハマるなぁ……。

たとえば、このブログのトップページは http://asiamoth.com/mt/ なので、この場所(かルートディレクトリ)に置かないと、正常に動作しません。

「あなた」のブログのトップページが http://example.com/ だった場合、この場所以外にスクリプトを置いても動作しない(クッキーが有効ではない)わけです。

もの凄く初歩的な知識ですが、いまのうちに知ることができてラッキィ!