CSS擬似クラスを使うべき理由 | エンタープライズ | マイコミジャーナル
A List Apart - For People Who Make Websites HTMLとCSSは規格通りに使うとすれば縦横無尽にさまざまな記述ができる。しかし規格上サポートされているからといって、馬鹿正直にそうした機能を使うのは避けたい。シンプルな記述であとから読んでも理解しやすい、他人が読んでも理解しやすいHTMLやCSSを書けるようになることが理想だ。しかし誰しも最初は素人だ。エキスパートがまとめたドキュメントを参考にして、そうしたテクニックであり勘どころを学んでしまいたい。 フロントエンドデベロッパであるAlex Bischoff氏は5日(米国時間)、A List ApartにおいてKeeping Your Elements' Kids in Line with Offspringという名のもと、CSSやHTMLの記述方法について細かい技巧をまとめて発表した。同ドキュメント
【レポート】CSS、YAML、XML、JSONのいいとこ取り? 新データフォーマット「RSD」提案 | エンタープライズ | マイコミジャーナル
ZeraWeb development labは2007年3日(米国時間)、新しいデータフォーマットとして「Really Simple Data(RSD)」を提案した。同フォーマットは現在注目されているデータフォーマットの優れた特徴をまとめたようなフォーマット。CSSからクォートなしのシンプルな表記を、YAMLから高い柔軟性を、XMLからメタデータとの親和性の高さを、JSONから文法の学習の容易性を持ってきていると主張されている。 ZeraWebのサイトにおいて提案されているサンプルを次に引用する。CSSとJSONのフォーマットを組み合わせたようなフォーマットになっているようだ。 Example 1: A person object.(ZeraWebからの引用) person { name { last: Yoder, first: Dan } title: Web Application
IEハックなんて全部捨てちまえ！ - Trans
件名の通り。といっても、英語ブログの訳文です。原文は「Trash All IE Hacks」より。間違いもあるかもしれませんが、訳文の許可をもらったので日本語訳しておきます。以下から訳文。 みんながIE6を嫌っていることをそろそろ認めようよ。僕たちのCSSのデバッグの約80％の時間がIE6のために費やされている。みんな知っていると思うけど、IE6は時代遅れだし、ひどいCSSのレンダリングエンジンを持っている。けれど、ほとんどの平均的なインターネットユーザはそのことをいまだに理解していない。だから、僕たちはそれに時間をかけないといけないし、様々なIEハックを使って、バグを埋めないといけない。そう、何かをやる時間を使ってね。 共通のIEハック 1.CSSコンディショナルコメント 特定のIEのバージョン（不適切なCSSレンダリングをする）で僕たちのサイトを動かすためには、CSSコンディショナルコ
MOONGIFT: » ついに登場！CSSフレームワーク「Blueprint」:オープンソースを毎日紹介
誰かがきっと作ってくれると思っていた。 prototype.jsのようなライブラリを利用するのは、便利な機能が多いという事もあるが、各ブラウザ間での相違を吸収してくれるという点も大きい。 その点において、CSSもまた各ブラウザ間での表示の差異が大きい。そこで試してみたいのがこれだ。 今回紹介するオープンソース・ソフトウェアはBlueprint、ブラウザ間の描画差異を吸収して簡単にマルチカラムを実現してくれるCSSライブラリだ。 Blueprintはヘッダ、コンテンツ、サイドバー、フッターのようなテンプレートをクラス指定するだけで簡単に作成できる。デフォルトのフォーマットはリセットされているので、ブラウザ間の違いが出るマージンやパディングの差異も吸収してくれている。 また、印刷時のCSSも用意されている。これを使えば印刷時やプリンタ経由でのPDF作成時に綺麗なものが仕上がるようになる。今後の
ブロックレベル要素の高さを揃えるheightLine.js[to-R]
ブロックレベル要素の高さを揃えるheightLine.js Web標準の日々のグループディスカッションで出たライブラリ案を作っていく企画、第一弾。 ブロックレベル要素の高さを揃えるjsライブラリを作ってみました。 このライブラリは新バージョンがあります。 レスポンシブWebデザインに対応した「jquery.heightLine.js」 CSSでは複数のブロックレベル要素の高さを揃えれないという問題があります。 このheightLine.jsは、複数のブロックレベル要素の高さを揃える事ができ、2カラムレイアウトや3カラムレイアウトのそれぞれのカラムの高さを揃えたり、複数のブロックレベル要素をfloatで配置する際の高さを揃えたりできる、便利なライブラリになります。 設置方法 head要素内にダウンロードしたheightLine.jsを読み込みます。 <script type="text/ja
![ブロックレベル要素の高さを揃えるheightLine.js[to-R]](https://cdn-ak-scissors.b.st-hatena.com/image/square/a9717624309e36a795026e1b70982163687ccca2/height=288;version=1;width=512/https%3A%2F%2Fblog.webcreativepark.net%2Ficon_200x200.png)
これじゃダメじゃん＞天地中央 : ひろ式めもちょう
別に「Webヒョウジュン」のようなバカの好きなことばとは関係なく、これってうまく使えないことが多い気がする。 CSSでDivを天地左右中央に配置する方法『locate div at the center vertically and horizontally』 | CREAMU http://blog.creamu.com/mt/2007/07/cssdivlocate_div_at_the_center.html ミニマルモデルで示すと、 <html> <body> <div style=" position: absolute; top: 50%; left: 50%; margin-left: -200px; margin-top: -100px; width: 400px; height: 200px; border: 1px solid black; " > aaaa </div
CSS Niteについて考えてみる - Transrain
注意： この記事は個人的な考えで書いています。 誤りや勘違い等があるかもしれません。指摘をしていただけると助かります。 CSS Niteのターゲットは何処にあるのだろうか。 最近の有料版CSS Niteの参加金額を見てみると7,000円〜18,000円と学生にはとても厳しい金額である。「企業向け」として考えると結構低額ではあるが、個人向けだとすると少々大きい。 The Days of Web Standards 2007［Web標準の日々］の参加費用が1日10,000円、2日通しで18,000円。早くに申し込んでも16,000円である。人数の見込みは1,300〜1,500人となっているらしい。 以下の計算は大きくずれています。 このエントリー投稿後に公開されていますのでそちらをご覧ください。正直変に感じる部分はあるけど。 以下の薄字になっている部分はあえて消していません。 簡単に
罫線(hr要素)の色を変える方法 - Web標準普及プロジェクト
罫線(hr要素)の色を変える方法 hr要素は非常に古くからある要素ですから、誰もが知っているものでしょう。 しかし、この罫線の表示制御は意外と困難なものです。 その原因はhr要素が正体不明のモノである、ということに起因しています。 それでは、各ブラウザのhrの実装状況を検証しながらhr要素の色を変える手法を標準仕様に添ってみていきましょう。 まずHTML4.01の仕様書には視覚系ユーザエージェントは罫線をレンダリングするとだけ書かれていますので、 ブラウザがレンダリングする罫線はそういった専用のオブジェクトである、と言えるかもしれません。 元々HTMLの仕様書には見た目に関する記述は一部の例外を除いてあまり詳しくは記述されていません。 これはHTMLが見た目を制御するためのものではなく、意味を記述するものであるという思想に基づいているためです。 というわけで、このhr要素に対してレンダリン
CSS Dock Menu
May 08, 2007 17,799 Comments Tags: Javascript If you are a big Mac fan, you will love this CSS dock menu. It is using Jquery library and Fisheye component from Interface and some of my icons. It comes with two dock position: top and bottom. This CSS dock menu is perfect to add on to my iTheme. Here I will show you how to implement it to your web page. CSS dock menu screenshot Update: I no longer s
コーディングコンテスト Vol.1 〜Coder's High〜｜CSS HappyLife
2次応募も締め切りました。 コーディングコンテスト Vol.1 ～Coder's High～を開催します！ 今回初の試みでもある（と思う）コーディングコンテスト。 用は、デザインは用意されてて、ソレを個々のスキルや考えに基づいてコーディングするというものです。 初回という事もあり、盛り上げたいな！と思っていたのですが、すんごい協力を頂けました。 ソレは、CSS Nite LP, Disk 3 と連動企画として動けたということ。 こんなWebの片隅でちまちま運営してるブログでも奇跡は起こるんですね。 さてさて、取り合えずさっさと必要データが欲しいって人の為に、目立たないDLボタンがありますので、そちらからダウンロードしてください。 このエントリーの追記で書いている詳細・必要事項は全て入れております。 （04/10：テキストデータ.txtが追加されております） 未統合psd、統合済みpsd、p
諸君 私はコーディングが好きだ - Like@Lunatic
「諸君 私はコーディングが好きだ 諸君 私はコーディングが好きだ 諸君 私はコーディングが大好きだ マークアップが好きだ サイトの設計が好きだ デザインの実装が好きだ デザインカンプにスライスを切っていくのが好きだ JPEGの圧縮率を決めるが好きだ ファイル名を考えるのが好きだ 文書構造を考えるのが好きだ バリデーションが好きだ 自分が書いたソースを眺めるのが好きだ HTML で XHTML で CSS で JavaScript で Microformats で DOMで XML で XSLT で RSS で Atom で この地上で行われる ありとあらゆるコーディング行為が大好きだ 戦列をならべたコーダーの一斉タイピングが 轟音と共に修正依頼を吹き飛ばしていくのが好きだ 空中高く放り上げられた修正依頼が 効力射でばらばらになった時など心がおどる コーダーの操
画像の使用を極力控えてかっこいいCSSデザインをやってみよう大会
この文書について この文書は、画像の使用を控え、スペース、ボーダー、配色などを駆使し、どれだけ美しいCSSのデザインが作れるか、皆で挑戦しよう!という試みです。 CSSといくつかの画像を用いてレイアウトを行っています。 まとめサイトが無い気がするよ 世間には、イケてるCSSデザインを集めた、CSSショーケース、CSSギャラリーと呼ばれるサイトがいくつか存在します。 ところが、そういったサイトの多くは、画像を沢山用いたグラフィカルでリッチなデザインのCSSデザインばかりです。私は、そんなギャラリーを見るのが趣味だったのですが、次第に飽きてきてしまいました。そして、シンプルなデザインを好むようになりました。 誤解をして欲しくないのですが、CSSのショーケースやギャラリーに掲載されているサイトのデザインはとても優れています。単に、私が求めているものとは、違ったというだけのお話です。 そこで私は、
まだまだあるクロスサイト・スクリプティング攻撃法
前回はクロスサイト・スクリプティングのぜい弱性を突く攻撃の対策としてのHTMLエンコードの有効性を述べた。ただ，HTMLエンコードだけではクロスサイト・スクリプティング攻撃を完全に防御することはできない。そこで今回は，HTMLエンコードで対処できないタイプのクロスサイト・スクリプティング攻撃の手口と，その対策について解説する。 HTMLエンコードで対処できない攻撃には，次のようなものがある。 タグ文字の入力を許容している場合（Webメール，ブログなど） CSS（カスケーディング・スタイルシート）の入力を許容している場合（ブログなど） 文字コードを明示していないケースでUTF-7文字コードによるクロスサイト・スクリプティング <SCRIPT>の内容を動的に生成している場合 AタグなどのURLを動的に生成している場合注） 以下では，HTMLタグやCSSの入力を許容している場合と，文字コードを明
[CSS]日本語と英語で異なる最適なフォントサイズの指定方法
日本語・英語のサイト制作に使用しているCSSのフォントサイズの指定で、2007年用デフォルトとしているものです。 %指定を採用している理由の１つは、font-size、line-heightとともに組み合わせにより微妙に異なり、その組み合わせの最適な値を採用するためです。 日本語サイトのフォントサイズの指定 英語サイトのフォントサイズの指定 line-heightの指定 日本語サイトのフォントサイズの指定 body{ font-size:16px; /**/ font-size:100%; /**/ } 上記を基準サイズとして、下記を指定。 標準： font-size:82%; 大きめ： font-size:94%; 小さめ： font-size:69%; 英語サイトのフォントサイズの指定 body{ font-size:13px;*font-size:small;*font:x-smal
![[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)
ウノウラボ Unoh Labs: CSSの管理と記述法のコツ
GT Nitro: Car Game Drag Raceは、典型的なカーゲームではありません。これはスピード、パワー、スキル全開のカーレースゲームです。ブレーキは忘れて、これはドラッグレース、ベイビー！古典的なクラシックから未来的なビーストまで、最もクールで速い車とカーレースできます。スティックシフトをマスターし、ニトロを賢く使って競争を打ち破る必要があります。このカーレースゲームはそのリアルな物理学と素晴らしいグラフィックスであなたの心を爆発させます。これまでプレイしたことのないようなものです。 GT Nitroは、リフレックスとタイミングを試すカーレースゲームです。正しい瞬間にギアをシフトし、ガスを思い切り踏む必要があります。また、大物たちと競いつつ、車のチューニングとアップグレードも行わなければなりません。世界中で最高のドライバーと車とカーレースに挑むことになり、ドラッグレースの王冠
C90%M10%Y40%: HTML売りの少女
連載長編大河小説「HTML売りの少女」 最終回 「HTMLは要りませんか？」 「HTML買ってください。」 冷たい北風が吹き荒れる街角で、今日も少女は道行く人々にHTMLを売り続けました。 「HTMLはいかがですか？」 「心のこもった暖かくて分かりやすいHTMLです。」 「Web標準準拠のHTMLは要りませんか？」 しかしすれ違う人々は冷たく少女を突き放すのでした。 「内製してるから要らないよ。」 「ブログサービスがあるからそれで充分。」 「SEO？もうたっぷりやってあるわ。」 疲れ切った少女は街の片隅に座り込んでしまいました。 少しでも暖かさを得ようと、 DreamweaverでHTMLを「ブラウザでプレビュー」しました。 一枚目のHTMLでは、 ページの中で暖かそうな家族がひとときの団欒を繰り広げていました。 二枚目のHTMLでは、おいしそうな料理写真が表示されてい
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Text + Image + CSS3 = Crazy Delicious
http://www.google.co.jp/images/nav_logo3.png
http://projects.danwebb.net/wiki/CodeHighlighter
http://ima.pandach.com/cgi-bin/mt/2007/04/auezweb.php
