メニューのXHTML ３パターン - 3ping.org
この記事はMAQUE Movable Type テンプレートのカスタマイズTipsとして書いた記事ですが、Movable Typeに共通する内容なのでBazookaでエントリーを投稿する事にしました。 Movable Typeは、Menu部分の構成をテンプレートから自由にカスタマイズ出来るのですが、XHTMLの仕様に沿っていて、無駄なく、尚且つカスタマイズしやすい構成となると、ここで紹介するようなパターンに絞られてきます。 紹介するMovable TypeのMenu部分のソースは、 XHTML Strict DTDに準拠している 無駄な要素を作らない CSSによるデザインの柔軟性が高い CSSで、2カラム、3カラムのレイアウトが出来る という条件で構成しました。 Type1. 定義リスト DL Menu全てをdiv要素で包み、その子供に2つのdl要素があります。左のdlを#navigati
パンくずリスト（Topic Path）を作成する際に使えそうなサンプル8種｜CSS HappyLife
普通のエントリー久々な気がする今日この頃。 今回はトピックパスとかパンくずリストなんて呼ばれてる、ちょっと規模の大きいサイトでは日常茶飯事で見かけるアレのサンプル色々です。 サンプルの前に #main .entryBody #topicPath_01 とかってなってますけど、#main .entryBody はウチのサイトの都合で優先順位上げの為にやってるんで、コピったりする場合はいらない感じです。 #main .entryBody #topicPath_01 { margin:10px 0; } #main .entryBody #topicPath_01 li { display:inline; line-height:110%; list-style-type:none; } #main .entryBody #topicPath_01 li a { padding-right:10
CSSのセレクタをXPathに変換する - nazokingのブログ
Warning! 2008/5/22追記：このエントリは情報が不十分だったり間違いが含まれてたりするので、下記URLのページを参考にするようにしてください↓ http://piro.sakura.ne.jp/latest/blosxom/mozilla/xul/2007-09-13_selector-to-xpath.htm CSS3あたりをXPath1.0あたりに変換する表 CSSXPath .class//*[@class="class"]*1 .class//*[contains(concat(" ",@class," ")," class ")]*2 tag//tag #id//*[@id="id"] tag.class#id//tag[@class="class"][@id="id"] .class.class2//*[contains(concat(" ",@class," "
53 CSS-Techniques You Couldn’t Live Without | Smashing Magazine
CSS is important. And it is being used more and more often. Cascading Style Sheets offer many advantages you don’t have in table-layouts - and first of all a strict separation between layout, or design of the page, and the information, presented on the page. Thus the design of pages can be easily changed, just replacing a css-file with another one. Isn’t it great? Well, actualy, it is. Over the la
pre 要素のスタイル定義とマークアップ - 2xup
2006-09-07T00:56:49+09:00 なにやら pre 要素に CSS でどういったスタイル定義をしているのか、また、pre 要素をどのようにマークアップしているのか、様々な意見がでている模様。 ブログにコードを貼り付ける方法で悩むの巻(i d e a * i d e a - Lifehacks by 100SHIKI.COM) pre要素へのスタイル指定(hail2u.net - Weblog) Re: i d e a * i d e a - ブログにコードを貼り付ける方法で悩むの巻(hxxk.jp) 情報共有と新たな発見を期待して、どのようにスタイル定義・マークアップしているのか公開することに。まずは注意しているポイントを挙げてみます。 Macintosh 版 Internet Explorer では、div 要素以外に値が visible (初期値) 以外の overf
IT戦記 - CSS の勉強会をしました
2007 CSS Study Meeting http://artcode.g.hatena.ne.jp/keyword/2007%20CSS%20Study%20Meeting 発表をしましたので資料を置いておきます。 http://usrb.in/amachang/static/cssstudy/200701/ Firefox で動きます。IE でもぎりぎりうごきます。あ、でも、横長な表示域じゃないと崩れる可能性大です。 左右キーで操作してください。また、ソースは実行できるようになってるので、実際に実行しながら読んでいっていただけるとうれしいです。 他に事前に CSS のセレクタのバグリストとプロパティ一覧を作りました。 プロパティ一覧は element.style に辞書アタックを掛けて各種ブラウザから抽出したプロパティです。 http://usrb.in/amachang/stat
artcodeグループ - 2007 CSS Study Meeting
はてなグループの終了日を2020年1月31日(金)に決定しました 以下のエントリの通り、今年末を目処にはてなグループを終了予定である旨をお知らせしておりました。 2019年末を目処に、はてなグループの提供を終了する予定です - はてなグループ日記 このたび、正式に終了日を決定いたしましたので、以下の通りご確認ください。 終了日: 2020年1月31日(金) エクスポート希望申請期限:2020年1月31日(金) 終了日以降は、はてなグループの閲覧および投稿は行えません。日記のエクスポートが必要な方は以下の記事にしたがって手続きをしてください。 はてなグループに投稿された日記データのエクスポートについて - はてなグループ日記 ご利用のみなさまにはご迷惑をおかけいたしますが、どうぞよろしくお願いいたします。 2020-06-25 追記 はてなグループ日記のエクスポートデータは2020年2月28
intensivstation :: CSS Templates :: Templates
NEW dynamic basic CSS TEMPLATES 07 at the moment just in german avalible All templates are XHTML 1.0 and CSS2. Basic CSS TEMPLATES 2 columns fixed centered 3 columns fixed centered Freeflux Templates Special Templates for FLUX CMS Border Trick TEMPLATES 2 columns fixed centered 3 columns fixed centered CSS TEMPLATES AND SAMPLES Menu and content dynamic Menu fixed, Content dynamic Menu and c
2xupで実装されているエラスティックレイアウトを調べてみた。 - Trans
2xupさんのところで実装されているエラステックレイアウト（Elastic Layout）、もしくはエラステックデザイン、はたまたエラスティックレイアウトというのが気になってしょうがない。今年、アックゼロヨンでグランプリを受賞したみずほ証券でも、似たようなレイアウトが施されている。というわけで、またもや調べてみた。 と、調べてみたはいいものの、うまい具合に実装方法について解説されているサイトが見つからなかった。要は、widthやpadding、marginなどにem指定をして、フォントサイズを変更しても、それに応じてレイアウト幅が変更されるレイアウトのことを言うらしい。A List Apart: Articles: Elastic Designで発表されたのがどうも初めてのようだ。ちなみに、作者が作ったサンプルサイトもある。 でも、456 Berea Streetでよい感じに、自分のサイト
Lucky bag::blog: IE で min-width を指定する方法
IE は min-width に対応していないんだけど、「Stu Nicholls | The CSS Playground」でスクリプトを使わず CSS だけで擬似的に min-width を指定する方法が紹介されていたんで、ざっくりとご紹介。この方法は、Win IE のみに効く方法で、Mac IE では機能しない模様。サンプルとして下記の (X)HTML を使用してみる。 <div class="container"> <div class="box"> <div class="contents"> 内容 </div> </div> </div> これに対して、幅 90% で最小幅 400px の指定をしてみる。IE5.5 と IE6 に対応したパターンと IE5.01 と IE5.5 と IE6 に対応したパターンの２種類の方法がある。 実際に試してみたサンプル IE5.5 と IE
DT DDを横並び - 3ping.org
IE6ではDDが2個続くと数pxずれる。 DL,DT,DDを強引に表のように表示するやり方だけど、データが表ならTABLE要素を使おう。 Comments:15 アサノ 2005年8月24日 12:27 今まさに仕事でその数 px の件 （厳密には WinIE6 で 3px?）で悩み疲れてて、もの凄い無理矢理な方法で解決してます・・。どっかに晒しとこうかなあ。 wu 2005年8月24日 12:29 え・・！この数px消せるなら、強引な方法でも知りたい!! っ!! アサノ 2005年8月24日 12:33 うお。まじすか。ほんじゃ自分とこにでも晒しときます。 アサノ 2005年8月24日 13:29 とりあえずここに置いておきます。 http://www.mushline.com/junky/etc/20050824/dl_dt_dd_float.html 時間があれば後で説明ブロギし
CSS 分割管理の実践編
2006-12-13T09:47:51+09:00 数日前に行ったリニューアルでは、いくつか課題を設けました。ただただリニューアルしても張りがありませんし、ウェブデザインを行うものにとって自身のウェブサイトは自身の作品のようなものだし、好き勝手できるのも魅力なわけです。何回かの記事にわけて、リニューアルでおこなった作業をまとめていこうと思います。 前回、スタイルシートを分けて管理する方法をまとめるで CSS ファイルを分割管理するメリットや、どのように分割するか案を書いてみましたが、今回のリニューアルで実際に案を元に分割管理を実践し、結果はリストのようになりました。各ファイルの概要は案段階から変化がないので、そちら参照ください。以下のリストでは、テーマファイル以外の実際の CSS ファイルにリンクしています。 common.css component.css fonts.css scree
hxxk.jp - IE 7 正式版を含む各種ブラウザの CSS Selectors testsuite の検証結果のまとめ
記事データ 投稿者 望月真琴 投稿日時 2006-10-20T03:57+09:00 タグ CSS Firefox IE Opera まとめ 概要 IE 7 の正式版がリリースされたので、 CSS Selectors testsuite の IE 6 と IE 7 と Firefox 1.5.0.7 と Opera 9.02 での検証結果をまとめてみました。 リプライ 4 件のリプライがあります。 IE 7 の正式版が出たので CSS Selectors testsuite でチェックしてみた IE 7 の正式版がリリースされたので、かねてから便利だと思っていた、 Lucky bag::blog: 使用中のブラウザの CSS セレクタ対応状況をチェックできる CSS Selectors testsuite で紹介されていた CSS Selectors testsuite - CSS3 .
スタイルシートを分けて管理する方法をまとめる - 2xup.org
comment 2006-10-17T21:15:00+09:00 お好みの言語が英語で無い場合は、日本語でどうぞ。 In this PDF file, the order of the set format rule and property's appearing was announced. This time, the method of separately managing the CSS file used on the site is announced. Why is CSS divided? I think that most reasons are the improvements of the work efficiency. The access to the revision part becomes early They are combined and co
All CSS Properties Listed Alphabetically
CSS Property Index = Index DOT Css by Brian Wilson = Main Index | Property Index | CSS Support History | Browser History All | Fonts | Text | Colors/Backgrounds | Scrollbars | Outlines | Lists | Tables Classification | Dimensions | Positioning | Margins | Padding | Borders Dynamic Content | Generated Content | International | Printing | Aural | Extensions A/B accelerator azimuth background backgro
Lucky bag::blog: 使用中のブラウザの CSS セレクタ対応状況をチェックできる CSS Selectors testsuite
タイトル長っ！ まぁ、そのまんまなのだけれども、今使用しているブラウザが、CSSのセレクタ（CSS3も含む）にどれくらい対応しているかチェックできる CSS Selectors testsuite - CSS3 . info が便利っぽい。 Start testing... をクリックでチェックが開始され、各セレクタの結果が緑色であれば対応、赤色であれば未対応ってな寸法。ただ、ひとつのセレクタに複数のテストを行うんで、そのうちのひとつでも引っかかると failed になっちゃう。 上記画面は、IE7 RC1 でのチェック結果だけど、対応しているはずの属性セレクタで failed となる。セレクタ名の部分をクリックすると、どういったテストが行われて、結果がどうなっているのかソースを確認できるんだけど、どうやら属性が空の場合や属性の記述が不完全の場に、IE7 はうまくパースできないみたい。ちな
ウノウラボ Unoh Labs: 【Web Design】なるほどリンク集 その１
GT Nitro: Car Game Drag Raceは、典型的なカーゲームではありません。これはスピード、パワー、スキル全開のカーレースゲームです。ブレーキは忘れて、これはドラッグレース、ベイビー！古典的なクラシックから未来的なビーストまで、最もクールで速い車とカーレースできます。スティックシフトをマスターし、ニトロを賢く使って競争を打ち破る必要があります。このカーレースゲームはそのリアルな物理学と素晴らしいグラフィックスであなたの心を爆発させます。これまでプレイしたことのないようなものです。 GT Nitroは、リフレックスとタイミングを試すカーレースゲームです。正しい瞬間にギアをシフトし、ガスを思い切り踏む必要があります。また、大物たちと競いつつ、車のチューニングとアップグレードも行わなければなりません。世界中で最高のドライバーと車とカーレースに挑むことになり、ドラッグレースの王冠
HTML::Selector::XPath をリリース: blog.bulknews.net
HTML::Selector::XPath をリリース CSS Selector in Perl とか subtech - Bulknews::Subtech - CSS selector to XPath あたりで議論していた CSS 2 Selectors to XPath コンパイラなモジュールをつくって、CPAN に HTML::Selector::XPath としてリリースしました。 使い方は naoya さんが先に書いてますが、HTML から正規表現を使うことなくスクレイプするのに便利。たとえば Mixi にログインしてマイミク最新日記と、１件目のタイトル、本文を抜き出すコードが、以下のようにかけます。 #!/usr/bin/perl use strict; use warnings; use utf8; use Encode; use HTML::Selector::XPat
HTML 4.01とCSS2のHTMLヘルプ
HTML 4.01 SpecificationとCascading Style Sheets, level 2のHTML Helpを作ってみた。探せば幾つか見つけられるのだけど、キーワードがないというありがちなアレだったので。 HTMLヘルプとか二年ぶりくらいに作ろうとしたので、作り方をほとんど忘れてた。最終的にはIndexからキーワードを捏造するPerlスクリプトを作ってやったのだけど、そこまでいくのに1時間くらい格闘した気がする。HTML Help WorkshopのGUIでやるのは無理。 で、公開しようかなとか。W3C Document Licenseを読んだところ、変更を加えたり派生物的なものにするわけでなければOKっぽいので。 HTML 4.01 Specification Cascading Style Sheets, level 2 上記アーカイブはWinRAR 3.51でZ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CSS Nite公式ブログ: 『ザ・ルールズ・オブ・スタイルシート』（益子貴寛）資料公開