pruto.jp - よく使うCSSの話|基本編
2008.06.24 1年半ほど前の記事なので、現在は通用しない部分もあるかと思いますので最新の技術・流行り等を求めている方はご注意ください。 仕事を始めて数ヶ月が過ぎ、案件もいくつかこなしてきたりしてきた。 自分の仕事の進め方の中で毎度一瞬迷う部分がある。それはCSSを書き始めるときである。 どうしようかなーなんて迷いながらもなんだかんだで結局はいつも同じ形で出来上がるから今後どうしようかなーなんて迷わずにスパっと仕事に入れるようにするためのまとめてみよう。 はてなブックマークなんかでもよくCSS関連の記事が人気エントリーにあがってきたりして、それらを踏まえつついつか自分なりにまとめて書きたいとおもっていたから丁度良い。 色々あるからまずは基本となるところから。 仕事を始めて数ヶ月が過ぎ、案件もいくつかこなしてきたりしてきた。 自分の仕事の進め方の中で毎度一瞬迷う部分がある。それはCS
はてなのログインについて、ユーザー名とパスワードをいちいち入力せずに、「指定したURL」を入力することで自動的にログインできるようなURLは見つけることはで…
はてなのログインについて、ユーザー名とパスワードをいちいち入力せずに、「指定したURL」を入力することで自動的にログインできるようなURLは見つけることはできますでしょうか？またどのような方法で見つけたかもぜひ教えてください。もちろんログイン画面の「次回から自動的にログイン」を使用しないことが前提です。
URIエンコード（URLエンコード） | Diaspar Journal
おすすめのクレジットカードを徹底比較 クレジットカードのおすすめ コンビニでお得なおすすめクレジットカード 普段利用することの多いコンビニでお得になるクレジットカードがあります。セブンイレブンン・ローソン・ファミリーマートなどよく利用するコンビニでお得になるクレジットカードを支払いで利用すれば多くのポイント還元があります。 1年間などの長い期間で計算すると、コンビニで還元率が高いクレジットカードを利用すると大きな差が出てきます。 三井住友カード（NL） 年会費永年無料還元率0.5％～5.0％国際ブランド 特典最大8,000円相当プレゼント セブンイレブン・ローソン、マクドナルドなどでタッチ決済料で驚異の5.0％ポイント還元 セキュリティを高めカードの両面にカード番号や氏名、セキュリティーコードの無いナンバーレスクレジットカードです。カード番号等は全てアプリ上で管理します。最大の特徴は対象コ
HTML要素を抜き出す正規表現の自動生成プログラム - llameradaの日記
HTML要素を抜き出す正規表現を自動生成するプログラム html2regexp を作ったので公開します。 札幌市で賢い借金返済方法を教えます！ 使い方は簡単で、HTMLファイル中の抜き出したいHTML要素の先頭タグの末尾にh2rと書き加えるだけです。例えば次のように指定します。 <ul> <li><a href="hoge" class="h" h2r>hoge</a></li> <li><a href="huga" class="h" h2r>huga</a></li> </ul> <div> <a href="f">f</a> </div>すると、html2regexpは、2つのa要素を抜き出す次の正規表現を生成します。 (<(\w*?)\s*([^>]*?" class="h"[^>]*?)>(.*?)<\/\2>)HTMLを抜き出して利用したり、Webアプリケーションのテストなどの
404 Blog Not Found:javascript - DOMMakerで楽々DHTML
2006年09月28日02:00 カテゴリLightweight Languages javascript - DOMMakerで楽々DHTML DHTMLは便利なものだが、DOM関連の関数でHTMLを「描く」のは、あまりに面倒だ。 たかだか <a target="blank" href="http://blog.livedoor.jp/dankogai">404 Blog Not Found</a> とやるのに、 var a = document.createElement('a'); a.setAttribute('target', 'blank'); a.setAttribute('href', 'http://blog.livedoor.jp/dankogai'); a.appendChild(document.createTextNode('404 Blog Not Found'
ruby のスクレイピングツールキット scrAPI - 川o・-・）＜2nd life
http://blog.labnotes.org/category/scrapi/ ruby でスクレイピングして web の情報を取得するのには、今まで正規表現か xpath でやってたので、わりと面倒でした。で、ふと scrAPI というスクレイピングツールキットを知ったのですが、これがかなり便利そう。 このツールキットを使うと、CSS3 なセレクタを記述することで、要素を取得することができます。たとえばとあるサイトのリンクを全部取得したければ、 require 'rubygems' require 'scrapi' require 'open-uri' require 'nkf' require 'pp' $KCODE = 'u' links = Scraper.define do process "a[href]", "urls[]"=>"@href" result :urls e
にこにこ風味 :: Weblog » Blog Archive » IE6 の “Peekaboo Bug”
このバグが有名なのか、そうでないのかは知らないけども。このバグに遭遇しても対処法を検索してもなかなかヒットしなくて悩んでしまった。 挙動としては CSS の float 属性を使用していると、float に内包されたコンテンツ、または float 要素に接する一部が一部表示されなくなるというもの。表示されないと言っても、スクロールしたり、選択すると現われる。その動きが “いないいないばぁ” と似ているので ‘Peekaboo’ と呼ばれるらしい。 詳細な説明は Position Is Everything に詳しくあります。 簡単な対処法は上記のサイトや次の evolt.org にあるように、float に含まれる要素に position: relative を指定するとバグを回避できます。 しかし、これではCSSの可読性も落ちるし、複数の要素に指定してやらなければならないので、面倒なので
ヽ( ・∀・)ノくまくまー(2006-09-07) CSSでポップアップ
● CSSでポップアップ ちょっとした説明文をポップアップするには "title" 属性が便利であるが、複数行表示がブラウザに依存し、画像を含んだコンテンツには対応できない。かと言ってJSを持ち出すのも面倒だと思っていたら、CSSのみで実現できるらしい。そのまとめ。(via RailsChat) CSS .popup .tips { display : none; position : absolute; } .popup a:hover { position:relative; } .popup a:hover .tips{ display : block; top : 30px; left : 20px; white-space : nowrap; text-decoration : none; border : 1px solid black; color : black; back
ブログマーケティング勉強会議の締め切りについて - IDEA*IDEA ～ 百式管理人のライフハックブログ ～
ドットインストール代表のライフハックブログ
404 Blog Not Found:ソースを貼付ける50の方法
2006年09月06日16:15 カテゴリLightweight Languages ソースを貼付ける50の方法 いえ、50もありません。Paul Simonの歌のもじりです、はい。ちなみに6曲目。いいんです。Paul Simonだって50も紹介してないんですから。 i d e a * i d e a - ブログにコードを貼り付ける方法で悩むの巻 昨日のJavascriptの記事を書いていて思ったのですが、みなさんコードをブログに貼り付けるときってどうしているんですかね。<textarea>で囲む 身も蓋もないけど、一番実用性が高いのがこの方法かも知れません。 HTMLの精神からいくととんでもなく堕落した方法ですが、 コピペがしやすい たいていのブラウザーで、いちいちソース中のtagを実体参照化しなくてもちゃんとrenderされる という実においしい特典があります。実は一つ前のentryで
スタイルシートを書く時のガイドライン - 2xup.org
2006-07-11T19:56:28+09:00 会社ではやっているのだけれど、自分のウェブサイトでもやってみよう。と簡略記述を利用する場合の値の順序やらもまとめとく必要があるのかもしれないけれど、セットフォーマットルールやプロパティの順番だけをサクッとまとめて資料にしてみました。課題は残したもののこれだけでも相当すっきり。詳細やセットフォーマットルールに関しては、ダウンロードできるようにしている資料を参考にしていただくとして、このエントリーではプロパティの順序についてまとめることに。自分自身が実際に作業を進めていくことを考慮し、その考えに基づいて設定したモデル別の順序は以下の通り。 生成 内容, 自動番号付け及びリスト (Generated content, Automatic numbering, and Lists) 利用者インターフェイス (User Interface) ビジュ
セレクタで使用できる文字 - スタイルシートの基本 -- ごく簡単なHTMLの説明
HTMLは効率的に情報交換を行えるよう、文書の「構造」を記述することを目的にしています。そこに文字の色や形などの情報が混じってくると、せっかくの情報が不明確になってしまいます。 スタイルシートは、レイアウトを別の場所に定義しておき、それを構造に対して適用するという考え方です。いったん定義したスタイルは、複数の文書で共有できますから、全体のデザインに一貫性を持たせることができ、しかもメンテナンスがずっと容易になります。 目次： スタイルシート：文書の論理と表現を分離する カスケーディング・スタイルシート（CSS） スタイルの定義場所 クラス、idによる定義の局所化 文脈セレクタと一括設定 カスケーディングと継承 スタイルのタイプ指定 取り上げる要素： style スタイルシート：文書の論理と表現を分離する 本文とは別に表現ルールを設定するスタイルシートは、文書のメンテナンスを容易にし、また表
我的春秋: 続 JavaScript ソースが HTML から消える日
なんか、はてなブックマーク経由で、突然、昔のエントリー（JavaScript ソースが HTML から消える日）にアクセスが集中しているのに気づいて、急遽、フォローアップ エントリーをアップすることにしました。あのエントリーを書いてからまだ半年ですけど、あの時点で僕が気づいていなかったことも幾つかありましたし、何より状況が随分変化してます。 手みじかにおさらいしておくと、「JavaScript ソースが HTML から消える日」で紹介したのは、Ben Nolan 氏が開発した behaviour.js という JavaScript ライブラリです。このライブラリは、関数の実行場所を、外部 js ファイル内で CSS セレクタを使って指定することができ、これによって従来 HTML 中に埋め込んでいたイベントハンドラ部分も含め、文書構造（document structure → HTML の役
我的春秋: JavaScript ソースが HTML から消える日
［2006-06-10 付記］このエントリーは、2006-01-05 時点のもので情報が古くなってます。現時点で把握している最新情報を「続 JavaScript ソースが HTML から消える日」にアップしましたので、あわせてご参照ください。 Behaviour.js ― JavaScript ソースを (X)HTML から完全分離できるライブラリ 昨日、職場の同僚の人がたまたま見つけた JavaScript ライブラリを教えていただたんですけど、これがもうびっくり！なんと、このライブラリがあれば、イベントハンドラーも含めて JavaScript ソースが (X)HTML の body 内から、ほぼ完全に分離できてしまいます！ しかも、HTML 内で JavaScript 関数を適用する場所は、なんと JavaScript ソース内に CSS セレクタを書き込むことで指定！あまり日本では取
strike要素とdel要素と美しいHTMLと - LogJET
strike要素とdel要素と美しいHTMLと ちょっと過去の記事で、今とは異なる箇所を修正するのにHTML的には何を書いたら良いのだろうと調べたのでメモ。 ぱっと頭に思いついたのが<strike>要素だったのですが、打ち消し線を引くだけのタグで非推奨だそうな。じゃあ何使うんだよと腹立たしく思っていました。見た目の制御って事で非推奨だとして、音声的、文書的には意味が無い<span>とかで囲ってCSSに text-decoration: line-throughでも使えと言うのか？と思っていました。 で、五分ほど調べたらすぐに答えは出た。 <del>要素ってのがあるんですね。しかも、<ins>要素ってのまであった。無知というのは恐ろしいものです。 <del>その箇所が削除されたことを表す。 このような感じで表示される<ins>その箇所がHTML文書に追加されたことを表す。属性にdateti
css - ルビもCSSで : 404 Blog Not Found
2006年05月31日00:55 カテゴリTips css - ルビもCSSで これ、実はCSSでなんとかなります。 檜山正幸のキマイラ飼育記 - ルビ（ふりがな）タグの話 IE6では期待通りの表示（ふりがなの「おびただ」が「夥」の上に乗る）が得られます。FireFoxはダメでした、 以下をご覧ください。 夥 （おびただ） しい数のWebページ どうです? 当blogでは、現在以下をCSSに加えてrubyを実現しています。IEでもSafariでもFirefoxでもちゃんと見えます。 /* * based upon * http://www.akatsukinishisu.net/itazuragaki/2001_10.html#ruby_for_Mozilla_3 */ ruby { display:inline-table; text-align:center; white-space:
mixiをXHTML+CSSで組みなおす - 3ping.org
授業内で、既存サイトをXHTML+CSSで組み直す練習をするのですが、生徒が提出したのが「mixi」を書き直したもので、とてもよく出来てました。 mixiはテーブルレイアウトで組まれていて、基本は3カラムだけど、もとがテーブルなだけあって、ヘッダーのメニューが少し複雑だったり、セクションごとのビジュアル的なデザインや、細かい文字の余白のとり方が難しい。 現在のCSSは「どんな見栄えも出来てしまう」とは言えない。本当は言いたいのだけど、実際にはブラウザーのバグを回避するためにバッドノウハウを駆使したり、CSSの限界から、見栄えとは切り離すべきXHTML部分を調整しなくては再現できない見栄えがある。 けど、生徒の提出したものは、見栄えのためだけのdivも無ければ、ヴァリデーターだけを100点で通過するような機械騙しのXHTMLでもない。(一部、リストとしてマークアップできるところはある) もち
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://oss.timedia.co.jp/index.fcgi/kahua-web/show/ossz/oneline/2006-05-26