携帯電話向けのCSS - 携帯電話向けコンテンツの書き方
フィーチャフォンで使う事の出来るカスケーディングスタイルシート(CSS)のセレクタ及びプロパティを解説します。 フィーチャフォンでのCSSのセレクタ・プロパティは、参考資料・オープンウェーヴ社が定めているCSSのプロパティに移転しました。 また、 フィーチャフォン用の CSS を書くに当たって CSS 非対応機種との兼ね合い も別文書・携帯電話向けの CSS を書くに当たってに移転しました。 CSS に関して基本的な事柄については、CSS 入門(HTML & CSS 入門)をご覧下さい。 また、各プロパティなどの詳細は CSS(カスケーディングスタイルシート)及び CSS リファレンスをご覧下さい。 フィーチャフォンでの CSS について。 WAP 2.0 での CSS。 EZ ウェブ及びソフトバンクのフィーチャフォンは、WAP 2.0 に準拠しているため、CSS を使う事が出来ます。 但
CSSの最適化とファイルサイズ削減をしてくれる無料ネットサービスいろいろ
ページの制作において必須とも言えるCSSですが、そのCSSファイルを最適化することによってページの読み込みを早くしてみたり、トラフィックの多いサイトであれば転送料の節約にも貢献できるらしい。 というわけで、現時点で存在するCSS最適化ネットサービスをいろいろと探して列挙してみました。最適化といってもサービスによって方法はいろいろなので、この中から自分の目指す方向の最適化サイトが見つかるかも。 CSSの最適化とファイルサイズ削減をしてくれる無料ネットサービスのリストは以下の通り。 Clean CSS - A Resource for Web Designers - Optmize and Format your CSS http://www.cleancss.com/ コメントを残したり、並べ替えたり、圧縮したり、最適化レベルやオプション指定によってかなりカスタマイズできるCSSファイルの容
hxxk.jp - CSS を書く前に読んでもらいたいこと
記事データ 投稿者 望月真琴 投稿日時 2006-04-09T19:40+09:00 タグ CSS IRC Team-One オフ会 仕様 実践 Web Standards Design 春に会いましょう 概要 CSS の初心者なあなたもエキスパートなあなたも、とりあえずここは押さえとけ、という記事を紹介。 リプライ 7 件のリプライがあります。 CSS を書く前にブラウザ毎のクセをリセット CSS を書くことに慣れている人はよくご存知でしょうけど、 IE や Firefox や Opera や Safari などの UA はデフォルトスタイルシートと呼ばれるスタイルシートを持っており、それを適用せねば、あるいはそうであるかのように動作せねばならないと仕様で定められています。 User agent: Conforming user agents must apply a default s
CSS:ボックスのおはなし
この資料についての説明と謝罪 この資料は公開時より24時間内において他サイトの内容を無断で使用しておりました。 これに関して、kzは以下のエントリにおいて説明及び謝罪をしております。 社内勉強会の資料についての説明及び謝罪
ウノウラボ Unoh Labs: 「サーバサイドCSS」という選択
miyakeです。突然ですが、CSSって書くの面倒ですよね。何らかのプログラミング言語を知っている人間から見ると、CSSというのは言語としてはかなり貧弱です。 もちろんCSSはプログラミング言語では無いので、それを貧弱だと言われてもCSSもいい迷惑かも知れません。でも、 div#content { ～ } div#content div.entry { ～ } div#content div.entry p { ～ } div#content div.entry ul { ～ } こういう大したことをしていないのに、コードがどんどん長くなっていくのを見ると、もう少し何とかならないものかと思ってしまいます。 コピペするにしても、 コピー元にカーソルを移動 範囲選択してコピー コピー先にカーソルを移動 ペースト という操作が必要になります。数が増えてくるとコピペのミスも発生しかねませんし、id
Yahoo!が提供するレイアウト用CSSライブラリ:phpspot開発日誌
Yahoo! UI Library: Grids CSS Grids CSS is a suite of seven web page templates and the ability to nest grids of one to four columns within the content area of those templates. Yahoo!が提供するYahoo! UI Library。 Javascriptだけのライブラリ、だと思っていたら最近になってCSSライブラリも含まれるようになりました。 このCSSライブラリを使うことで、ページの複雑なグリッドレイアウトが比較的容易に作れます。 更に、このライブラリで作ったページは大体のブラウザに対応しているというので動作確認の手間も省けそうです。 基本のHTMLを書いておけば、classの変更で簡単にレイアウト変更が可能な形に
ボックスを上下左右画面中央に
ウィンドウを小さくした時に左上が見えなくなってしまうことに関する対処を追記しました。 何か、こういう立場のお仕事してる人とか、初心者のススメでFirefoxを使え！とかまずはFirefoxで確認すべしとか聞きますが、ボクはIE派です。 Firefoxに乗り換えようと頑張った時期もあったんすが、どーも合わない感じだったんすよね。 重さとかスクロールの仕方とかが、、、 だから確認もIEが先だったりします。 まーコレはボクのスタンスなんで、どーでもいいんすが。 ちなみにこのサイトのアクセス解析を見てると、IEとFirefoxの比がおおよそ、5:4っていう普通のサイトじゃありえない結果が出ます。こんなブログ書いてると当然っちゃ当然かもしれませんが（笑 さて本題にでも。 Tipsでも充実させたいと思ったので、特に目新しい内容ではございませんが、div要素とかのボックスを左右の中央、そして上下も中央に
フリーで使えるXHTML＆CSSデザインのテンプレート配布サイト「TemplateWorld」:phpspot開発日誌
TemplateWorld - FREE Website Templates (Valid XHTML And CSS) These templates are licensed under Creative Commons Attribution 2.5 License. This means that you are free to modify the design to suit your tastes in any way you like, but you must include the provided link back to Template World. フリーで使えるXHTML＆CSSデザインのテンプレート配布サイト「TemplateWorld」。 フリーとは思えないハイクオリティなテンプレートが配布されています。 ライセンスはクリエイティブコモンズで、配布元である
我的春秋: パンくずリストのマークアップ
ちょっと前に パンくずリスト（Topic Path）を作成する際に使えそうなサンプル8種（CSS HappyLife）というエントリーが盛況でしたが、今日はパンくずナビゲーションの論理構造面を補強する意味も込めて、(X)HTML マークアップの例を、サイト構造やサイトの目的に応じて、いくつか挙げてみました。CSS の話まで入れると長くなるので、今回は（も？）(X)HTML マークアップに話を絞ります。CSS については、特にセレクタまわりが結構 変わってしまいますが、ひとまず、HirasaWa さんのエントリーなどを参照してください。（気が向いたら、別エントリーを立てますけど、実際に書くかどうかは未定。） 階層型構造（tree structure） ［2006-02-11 追記］ 石川一靖さんより、「セマンティクスを重視するならa要素にrel/rev属性を加えてリンクの関係性を明示するのが
パンくずリスト（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
blockquoteでの引用を美しく表示するCSSサンプル:phpspot開発日誌
Natalie Downe Blog Archive Inline image quotes I have been meaning to write about this technique for some time now. The aim is a block quote looking something like this, with speech marks at the front and termination of the text but without the nastiness of inline images. blockquoteでの引用を美しく表示するCSS。 次のようなシンプルなblockquoteのHTMLがあったとします。 <blockquote cite="Brian Littrell"><p>Shoot for the moon. Even if
yohei-y:weblog: Javascript HTML のデザインパターン
僕もご多分に漏れず Javascript で遊んだり調べたりしています。 いろいろなクールなサイトの生 Javascript を見て勉強しているのですが、 まず面白いなと思ったのがロールオーバーの実現方法です(JavaScript や HTML をわかってる人には当たり前の内容だと思うので、ツマラナイ話だと思いますが)。 WaSP の左上の画像のロールオーバーは <img id="logo" src="/img/logo.gif" height="100" width="103" alt="Web Standards Project logo" /> 生 HTML はこんなかんじで onmouseover/onmouseout 属性を記述せず、 JavaScript で function initRollOvers() { var logo; if (document.getElement
CSS＆JavaScriptカレンダーライブラリ集:phpspot開発日誌
DHTML Site - 10 Free CSS and Javascript Calendars Calendars may be used on webpages for various reasons, such as allowing users to easily pick a date in a form, or just to provide monthly information. CSS＆JavaScriptカレンダーライブラリ集。 いろんなCSSとJavaScriptで実装されたサンプルライブラリが紹介されています。 Monket Calendar Quick Calendar Using AJAX and PHP Integrating Google Calendar into your Site JS Calendar The DHTML / JavaScript
パンくずリストがベストとは限らない | WWW WATCH
最近ウチの会社の中の人も書いていました、Web サイトのナビゲーションとしてよく使われる 「パンくずリスト」 （Topic Path なんて言い方もしますね） ... 最近ウチの会社の中の人も書いていました、Web サイトのナビゲーションとしてよく使われる 「パンくずリスト」 （Topic Path なんて言い方もしますね） ですが、マークアップの仕方はどういう方法がいいとか、そもそもパンくずリストって必要なの？ なんて話まで、最近よく目にする気がします。 個人的にパンくずリストはサイト ID （ロゴなどですね） に対するトップページへのリンク設定同様の慣習みたいな感覚で、すべての人とは言わないまでも一定の認知はされていると考えていますので、サイト構築の際は基本的に要件に含めるようにしています。 で、今回はパンくずリストが必要か？ とか、パンくずリストのマークアップはどのような方法が妥当か
GNOME 2.16.2リリース MOONGIFT
特集「オープンソース×10年」 予算ゼロからのIT環境整備2014/01/30 特別寄稿：センチメンタル・ジャーニー ~OSSはまだ16だから~2014/01/30 EC-CUBE – オープンソース・Eコマースの雄の進化を見る！2014/01/30 Zabbix Japanに聞いたオープンソース×ビジネスを成功させるための3つの基本2014/01/30 MOONGIFTの運営で大事にしている3つのこと2014/01/30 2007〜8年の大きな変動まとめ！2014/01/30 なぜプレミアム？そこから得られた経験教えます2014/01/30 2006〜09年、各年の人気オープンソース・ソフトウェアベスト52014/01/30 狙われやすいサイトはどんなサイト？オープンソース×セキュリティについてペンタセキュリティシステムズに聞く2014/01/30 aegifが考える企業でOSSを開発す
論理構造を文脈に読み換えながら class 名を考える - 我的春秋
POSH encapsulates the best practices of using semantic HTML to author web pages. Semantic HTML is the subset of HTML 4.01 (or XHTML 1.0) elements and attributes that are semantic rather than presentational. posh - Microformatsより 基本的にはより論理構造を意識した class名をつけることが、今日のお話の目的なんですが、semantic-class-names のリンク先にない新味は、論理構造を文脈に読み換えながら class 名を考えるという点。（ただし、普段から意識的に文書全体の構造に照らして class名をつけている方には、それほど新味はないかも。） 例によって
CSSと一枚の画像だけで透明感のある角丸パーツをつくる方法 | S i M P L E * S i M P L E
※ 下記の記事に誤りがありました。謝罪＆修正記事はこちらへ。 あいかわらず流行っている角丸系パーツですが、新しいテクニックが紹介されていたのでエントリー。 » Even More Rounded Corners With CSS – Schillmania.com 一つの透過処理されたPNG画像とCSSだけで下のようなパーツを作れてしまいます。 PNG画像を縮小したりしているみたいですね。もちょっと複雑なデモページはこちら。スクリプトのダウンロードもできます。 » Even More Rounded Corners (Fluid, Alpha-transparent, Single Image Approach) Using CSS 透過処理もされていてなかなかきれいですが、一長一短があるアプローチなので用途に合わせてお使いください。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
デフォルトスタイルの差異を無くすCSS
CSSとJavaScriptでチェックボックスなどをグラフィカルにする「formStyle」
decaf, decaf.