body要素のid属性またはclass属性をJavaScriptのディスパッチャーに使う - あと味
最近、実案件で実験していたのですが、仕様が固まってきたのでメモしておきます。 JavaScriptを特定のページで実行したいというニーズがあるけれど、head要素内に書くとか、body要素内に書くとか、そのページ限定でscript要素を使って読み込むとかいろんな方法があります。 ただ、コードが散らばると管理が面倒なので、一つのファイルにまとめたい派です。まとめれば、HTTPリクエストが減るし、キャッシュもされるし、何かと都合が良かったりします。 ひとつにまとめると、「そのページで実行するスクリプト」を一つのファイルから切り分けないといけなくなるので、ディスパッチャーが必要です。 @kyo_ago さんの「そこそこ規模が大きくても何とかなるjavascriptの設計（URL dispatcherの薦め） | tech.kayac.com - KAYAC engineers' blog」という
Rubyによる構造化CSSライブラリ·Less MOONGIFT
CSSのメンテナンス性の悪さは言うに及ばないだろう。どうとでも書けてしまう手軽さはあるが、ファイルが分かれていたり、ネストしている場所としていない場所があったりするともう管理ができなくなる。ちょっとした変更がどこに影響するかも分からず、もはや触るのが怖くなる。 Lessの記述例 そんな訳でCSSは慣れれば慣れるほど使い方が難しい代物だ。そこでLessを使って分かりやすく管理してみよう。 今回紹介するオープンソース・ソフトウェアはLess、プログラミング的に記述するCSSライブラリだ。 Lessはコマンドラインのツールで、lesscというコマンドを利用する（lessは別コマンドで既に存在するので）。そして専用ファイルの.lessを変換し、.cssファイルを生成する。デザイナの方はCSSファイルを直接触らないようにする必要がある。 変換例 利用できる機能としては変数、階層構造、Mixin、計算
SassでCSSの弱点を克服しよう （1/2）－ ＠IT
maedana SonicGarden SUG（SKIP User Group）／日本Hamlの会 2009/5/22 Railsを使ったWebアプリケーション開発で、プログラマやデザイナを悩ませるものの1つがスタイルシートの記述だろう。Sassを使って、“クールで構造化された”スタイルシートを記述してみよう（編集部） Sassとは、Syntactically Awesome StyleSheetsの頭文字を取ったものです。あえて日本語に訳すと、「かっこいい構文のスタイルシート」といった感じでしょうか。 もう少しシンプルに表現すると「クールなCSS（Cascading Style Sheets）」でもいいかもしれません。Sassはスタイルシートを簡潔に表現するためのメタ言語であり、同時にSassからCSSを生成するための便利なライブラリやコマンドラインツールを提供します。 Sassを使うと
DoCoMo 端末で Style 属性が使えるようにする。Wicket編 - 宇宙行きたい
教えてもらいました！！ http://wassr.jp/user/halt/statuses/fxq6wfs1Kj http://twitter.com/kosugi/status/1016128792 http://twitter.com/tokibito/status/1016118759 このページを参考にしますた。 http://ke-tai.org/blog/2008/04/03/docomocss/ Wicket の Content-Type を変更する。 Wicket は デフォルトでは 「Content-Type: text/html; charset=UTF-8」 なので Page クラスの setHeaders を Override で解決しますた。 import org.apache.wicket.markup.html.WebPage; import org.apa
へぼへぼCTO日記 - さて、そろそろ反撃してもいいですか？(携帯サイトでCSSを3キャリア共通にする)
DoCoMoはCSSの外部参照に対応してくれていない。 via モバイル勉強会が開催されました！ んなわけで、作ってみました。 Catalyst::Plugin::CSS::Docomo package Catalyst::Plugin::CSS::Docomo; use strict; use CSS::Tiny; use CSS::Tiny::Style; use HTML::TreeBuilder::Select; use NEXT; our $VERSION = '0.01'; sub finalize { my $c = shift; unless ( $c->response->body and not ref $c->response->body ) { return $c->NEXT::finalize; } unless ( $c->response->conten
TokuLog 改め だまってコードを書けよハゲ - ドコモでも CSS を外部参照を使える HTML::DoCoMoCSS をリリース
Blog Search when-present<#else>when-missing. (These only cover the last step of the expression; to cover the whole expression, use parenthesis: (myOptionalVar.foo)!myDefault, (myOptionalVar.foo)?? ---- ---- FTL stack trace ("~" means nesting-related): - Failed at: ${entry.path} [in template "__entry.ftlh" at line 3, column 25] - Reached through: #include "__entry.ftlh" [in template "entry.ftlh" at
DoCoMoのCSSとXHTMLまとめ | 村式開墾日記
DoCoMoのCSS、XHTMLにはクセがあります。注意すべき点をまとめてみました。 これに関してはいろいろなサイトで論じられていますが、既出のネタや仕様書の内容も含めなるべく広範囲に渡って情報を集めました。 他のキャリアについてはまた書くと思います。 特に気をつけるべき点を先にまとめると、こんな感じです。 ・CSSはインラインでしか記述できない。 ・XHTMLが必須でかつ適切なContent-Typeヘッダを吐く必要がある。 ・istyle属性は使えない。 ・MARQUEEタグは使えない。 ・object要素によるFlashの埋め込みはiモード対応XHTML1.1から。 ・TABLEタグはiモード対応XHTML2.0以降でないと使えない。 ・GPS用の属性lcsはiモード対応XHTML2.1以降でないと使えない。 (DoCoMoに限った話ではない内容も含まれています) CSSの名称、記述
ke-tai.org > Blog Archive > ドコモ端末でCSSを表示するには
ドコモ端末でCSSを利用するには Tweet 2008/4/3 木曜日 matsui Posted in DoCoMo | 9 Comments » ドコモ端末でCSSを表示しようとして、悩まれる方が多いようなのでご紹介しようと思います。 ドコモのiモード端末では、FOMA以降の機種でXHTML対応となりCSSが使えます。 ※厳密にいうと、ごく初期のFOMA21xxシリーズでは使えません。詳しくは下記一覧表からご確認ください。 → iモード対応機種 対応コンテンツ・機能一覧 [nttdocomo.co.jp] ※PDFです ですが、PCと同じように普通に書くだけでは、CSSは認識されません。 下記の3点を守る必要があります。 iモード用のXML宣言、DOCTYPEを付ける CSSは外部ファイルにしない、ヘッダ部にも書かない 拡張子を「.xhtml」にする ※別の方法もあり まず1についてで
DoCoMo向けにCSS指定をインラインに埋め込むPHPライブラリ「toInlineCSSDoCoMo」作りました
こんにちは。Windowsの最大の発明はゴミ箱の標準装備だと思っている亀本です。 追記：Mac信者の某氏にゴミ箱はWindowsの発明じゃないと突っ込まれてしまいました。すみません<(｡_｡)> 昨日はグリーさんのオープンソース勉強会に参加してきました。 今回の講師はDeNAの川崎さんで、わりとモバイル屋さんな自分としてはぜひともチェックしておきたいなと思って参加してきました。 勉強会・懇親会ともなかなか面白い話が聞けたり、変な人がいっぱいしたりしてとても面白かったです。 モバイルをやっているといつも面倒なのは、テンプレートの扱いです。 そのあたりのまとめは以前このブログでうちの高橋さんが超まとめてくれた記事があるので、そちらをご参照ください。 とくにDoCoMoのCSS(i-CSS)は開発者泣かせですね。インラインのみに対応とか、開発しにくくて涙ちょちょぎれそうです。 さてさてそんなDo
ブラウザだけでCSSレイアウトに対応したページをさくさく作ることができる『Drawter』 | 100SHIKI
CSSとHTMLの知識は必須だが、慣れている人には超絶便利そうなツールのご紹介。 Drawterはブラウザ上でDOM要素を配置、さまざまなカスタマイズを施したあとにコードを生成してくれるツールだ。 つまるところ、CSSレイアウトに対応したサイト製作ツールといってもいいだろう。 要素ごとにさまざまな属性を直感的に追加していける点が素晴らしい。インターフェースもシンプルで職人ぽいので個人的に好みである。日本語も入力可能だ。 当然ながら作り終えたあとは「Generate Code」コマンドでコードを生成、そのまま使うことができる。 似たようなツールはすでにいくつかあるが、Drawterの完成度はかなり高いのではないだろうか。是非試してみてもらいたい。
CSSの擬似クラス：IE6/IE7でも使う方法あります - builder by ZDNet Japan
年間5,000件の問い合わせに対応 疑問を解消したいユーザーも答える情シスも みんな幸せになるヘルプデスクの最適解 大事なのは”仕事の段取り” 幅広い業務を任されているからこそできる ひとり情シス流の業務改善術 Kubernetes活用の最適解とは？ 今、注目のコンテナを活用した柔軟なIT基盤 運用、管理の課題を解決しメリットを最大化 ハイブリッドクラウド時代の救世主 企業ITを素早く進化させるためのAVS サービス開始から1年で大幅に機能がアップ 電話営業・インサイドセールの革新 AIによる自動文字起こし・会話分析が 音声コミュニケーションの可能性を拓く 新OSのWin11はどう進化したか ビジネス上の役割、開発の要因と Win11が目指した5つのポイントを紹介 データ活用は次のステージへ トラディショナルからモダンへ進化するBI 未来への挑戦の成功はデータとともにある AWSとAzur
display: table-cell を使ったマルチカラムレイアウト - IT戦記
Acid2 Test で IE8 が display: table-cell をきちんとレンダリングするということが分かったので。 IE8 が普及する（笑）のを 5 年くらい先取りして display: table-cell によるマルチカラムレイアウトを書いてみました。 リンクは以下です。 http://amachang.art-code.org/tablecell/ 今のところ Opera 9+、Safari 2+、 Firefox 2+ で正常にレンダリングされることを確認しました。 ポイント ソースを見て分かるように HTML も CSS もめちゃめちゃシンプルです。 ポイントは display: table-cell の要素が兄弟要素の高さに併せて間延びするところでしょう。 これで、何カラムだろうとお手のものです。
プログラム可能なCSS、Dynamic CSS (CSS.js)登場 | ネット | マイコミジャーナル
Marat A Denenberg氏は11月29日(米国時間)、Dynamic CSS (CSS.js)の最新版であるDynamic CSS 1.0を公開した。Dynamic CSSはJavaScriptで開発されたプログラム可能なCSSユーティリティ。mootools 1.2を使って開発されたユーティリティで、実行するにはElementとClassを含めたmootools 1.2が必要。JavaScript中にプログラマブルなCSSを表記できるというものだ。長さなどのサイズ指定に固定値ではなく計算値や変数、関数を使った計算式を記述できる。 Webブラウザ互換性確保やWebブラウザに特化したプロパティの指定などをおこなう場合、PHPやServletなどのサーバサイド技術を使って対象のWebブラウザに適したCSSファイルを生成するといった処理をすることが多い。Dynamic CSSはその処理
CSS TIPS
CSS TIPSについて web標準が騒がれだしてからかなりの時間が流れました。 既にspecer.gifなどを使ったテーブルレイアウトなどのレガシーな手法は過去の遺物となり、(X)HTML+CSSで作成されたサイトが主流となりつつあります。 当サイトは『レイアウトを行う際にどうしてもうまくいかない。』に回答出来る、そんなサイトになりたいと思っています。 HTML+CSSで作成する10の理由 構造とデザインの分離ができる プログラミングの作業が簡単になる SEO効果が高い アクセシビリティが高い メンテナンス性が高い サーバー容量、転送速度の確保が安易になる ユーザーが自らの見やすいデザインに変更できる ページ表示の高速化 XMLなどの新しい技術との親和性が高い はやってるから もっと詳しく見る HTML+CSSを学ぶ為には？ 当サイトではCSSでレイアウトする為のテクニックを中心に紹介し
Emacs css-mode でインデントが気に入らない - 元祖 サトシのブログ
css-mode は非常に便利なのだが、閉じカッコ}の位置が気に入らなかった。設定を変えれば良いだろうと思っていたが、普段はあまり CSS を編集しないので、ほったらかしにしていた。 しかし、今日はどうしても我慢できなくなって google で検索した。で、見つけた。 (setq cssm-indent-function #'cssm-c-style-indenter) 上記の情報は、A CSS editing mode for Emacs というサイトで知る事が出来た。 Emacs の css-mode は便利で、M-tab キーで CSS の属性を入力補完してくれる。 C-c C-u で、url() が自動的に挿入されるのはちょっとした嬉しい機能。
MOONGIFT: » 不要なCSSの洗い出し「CSS Redundancy Checker」:オープンソースを毎日紹介
CSSははじめこそきちんと定義しながら進めるのだが、修正が重なったり、日々の運用の中で徐々に肥大化していく。HTMLと同じで多少間違っていたり、不要な情報が紛れ込んでいてもそれなりに表示されるので気にならないのだ。 だが不要な情報が紛れ込んでいると、ちょっとした修正が全く無関係と思われる場所に影響を及ぼしたり、管理しきれなくなってくる。そこで使ってみたいのがこのソフトウェアだ。 今回紹介するオープンソース・ソフトウェアはCSS Redundancy Checker、不要なCSSチェッカーだ。 CSS Redundancy CheckerはRubyで作られている、CUIベースで動作するアプリケーションだ。また、gemでhpricotをインストールする必要がある。そのため、若干敷居が高いかも知れないが、便利なアプリケーションだと思うのでぜひトライしてみて欲しい。 使い方は簡単で、CSSファイル
スタイルシートをめぐる冒険: CSS実験室: clearfixの決定版を作る ―モダンブラウザ編―
floatに起因するレイアウトくずれの多くは、floatをしかるべき場所でクリアすることによって解決する。このことを発見して以来、もっぱら空ボックスにclearを指定するという方法（<div style="clear: both"></div>）を多用してきたが、HTMLにある種の不純物が混じることに居心地の悪さはずっと感じていた（「floatを繰り返すとレイアウトがくずれる」参照）。この気持ち悪さを解消してくれるのが、clearfixというテクニックだ。 基本的な発想は上記の空ボックスによるクリアと同じだが、それをHTMLには一切手を加えず、スタイルシートだけで実現しているところに大きな特徴がある。しかし、ひとくちにclearfixといっても様々なバリエーションがあり、その記述のしかたは微妙に異なる。 例えば、clearfixの提唱者ではないかと類推されるPosition Is Ever
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
[CSS]半透明のパネルを使ったドロップダウン型ナビゲーションのスタイルシート
http://www2.airnet.ne.jp/sardine/docs/NOTE-SAC-20000728.ja.html
SitePoint CSS Reference
