読者です 読者をやめる 読者になる 読者になる
無料で使えるシステムトレードフレームワーク「Jiji」 をリリースしました!

・OANDA Trade APIを利用した、オープンソースのシステムトレードフレームワークです。
・自分だけの取引アルゴリズムで、誰でも、いますぐ、かんたんに、自動取引を開始できます。

今さらながら、今日初めて知ったクラスセレクタの記法・・・

CSS

div.foo.var { .... } SASSの拡張シンタックスかと思ったら、普通にCSSの仕様にあった・・・。マジか。CSS3 Selectors - 6.4. Class selectors The following rule matches any P element whose class attribute has been assigned a list of whitespace-sep…

今日知ったハック

CSS

「* + html ...」というセレクタがふんだんに使われていて、なんだこれ?と思ったらハックでした。→スター + ハックIEにだけ適用したいCSSを定義する時に使うらしい。以下はIEでのみ文字が赤で表示されるサンプルです。 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> </meta></head></html>

text-shadow で文字に影を落とすサンプル

CSS

text-shadowで文字に影を落とすサンプルです。 FireFox3.5以降とsafariでのみ実装されている機能とのこと。IEでは動作しないのでご注意 パラメータは「x座標、y座標、ぼかし具合、色」または、「色、x座標、y座標、ぼかし具合」の順で指定します。 /* * 影を…

今日の思いつき

CSS

coliss - スタイルシートの記述をより読みやすくする5つのルールより。CSSでインデントかー。その発想はなかったなー。 #nav{ width:650px; } #nav ul li{ float:left; } #nav ul li a{ display:block; } んー、ブレースとの絡みもあって↑はチョイ微妙な気は…

「vertical-align:middle」+「float」がうまいこと動作しない。

CSS

「vertical-align:middle」で縦方向中央ぞろえにした要素にfloatを設定すると、整列が解除されてしまう。んー、要素を左右に配置するならfloatだよなー、何とかならんかな、ということで、divを使って何とかしてみた。戦略は以下。 右にしたい要素をdivで囲…

:focus疑似クラス

CSS

:focus疑似クラスで、コントロールにフォーカスがある場合のスタイルを指定可能です。 「:visited」などの仲間で、同じようにセレクタで使えます。 注:残念ながらIE6以下では未対応のため使えません。 どうしてもという場合は、ずっと工事中 - IEで:focus擬…

ネガティブマージンで、固定幅のマルチカラムをレイアウトを実現する

CSS

coliss - ネガティブマージンの理解を深め、活用するテクニック集より。ネガティブマージンを使うことで、 画面サイズに合わせて伸縮するカラムと、 固定幅のカラム から構成されるマルチカラムレイアウトを実現できるらしい。ということでサンプルを作って…

画像の下に妙なスペースができるのを何とかする。

CSS

画像をdiv要素で囲ったりすると、画像下に妙なスペースができることがあります。→例。 こういうときは、div要素に対して以下の設定を追加することで回避できます。(IE7,FireFox3で確認) font-size: 0px; line-height: 0px;サンプルはこちら

:first-letter と :first-line

CSS

「:first-letter」 で段落の最初の一文字に適用されるCSS 「:first-line」で段落の最初の一行に適用されるCSS をそれぞれ指定できます。 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> </html>

ダブルマージンフロートバグに遭遇

CSS

なんか、IE6だと余白が広い気がするなーと思ったらバグでした。 「ダブルマージンフロートバグ」と呼ばれるものらしい。名前がつくくらいなので有名なバグなんだろうなー。 詳細はCSS Radar - IE ダブルマージンフロートバグをFixが詳しいです。 対策 「disp…

table要素のcellspacing="0"をCSSで

CSS

「border-collapse: collapse;」で同様の効果が得られます。 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> </head></html>

IE7で子要素セレクタが効くようになってる!

CSS

IE7だと子要素セレクタが使えるんですねー。(→マイコミジャーナル - 正式版完全対応! Internet Explorer 7 CSS攻略法) <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <style> div { margin: 10px; } /** div.parent 配下のすべての…</meta></head></html>

Topic Pathのサンプル

CSS

Topic Path(パンくずリスト)のサンプルです。最近はul,liを使うのが流行りみたいですよ。 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> </head></html>

div要素を画像枠で囲む

CSS

任意のサイズのdiv要素を画像枠で囲みたい。具体的には、ということでいくつか方法を検討してみました。 方法1 - 3分割した画像+div 3つに分割した枠画像とdiv要素を使う方法。 ○HTML/CSSがシンプル。 ×横幅が固定される。横幅のパターンがいくつかある場合…

IE6ではcolor:inheritが使えない

CSS

<span class="x"><a href="#">テスト </a></span> みたいな感じのa要素があって、 リンクの色を指定の色にして、 マウスオーバー時にのみアンダーラインを引く ようにしようと思い、次のようなCSSを書いていたのだけれど、IE6だと期待通りの動作とならない。(FireFox2だと正しく動作する)。 span.x {…

画像とテキストを横方向中央に揃える

CSS

ブロック要素内の画像とテキストを横方向中央揃えにするには、「vertical-align」を使います。(にしし ふぁくとりー さんの 「行内の画像を、文字の(上下方向での)中心に合わせて配置する」を参考にさせていただきました。) 最も高さのあるインライン要素…

CSS Grid

CSS Gridを使うと、単純な横方向分割レイアウトが簡単に実現できます。 実行準備 次のCSSをインポートします。 <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.3.0/build/grids/grids-min.css"> レイアウト 基本的な使い方は次の通りです。 親要素のdivに「yui-g*」を設定。 分割の方式はここで設定するクラスで決まります。 利用可能な値</link>…

IE6でa:hoverに設定したスタイルが適用されない。

CSS

href属性が付いていないと適用されません。 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> </head></html>

要素を透過表示する。

CSS

filterとopacity属性を設定すると、IEやFirefoxで要素を透過表示できます。 IEやFirefoxの両方に対応する場合、filterとopacity属性を両方指定する必要があります。 属性のパラメータで透過度を指定します。 要素の幅を指定しないとIEで透過が行われません。…

子要素をfloatにするとブロックが潰れる

CSS

ブロック要素の子要素をすべてfloatにすると、潰れます。floatにすると子要素の高さが0になる、とのこと。floatでなくても良い要素をfloat:noneにすることで回避できます。サンプル:

ブロック要素を真ん中に配置

CSS

Web標準普及プロジェクト - ブロックレベル要素をセンタリングする方法 左右のマージンをautoにするのが正しいやり方。 IEではバグのため上の方法が効かない。親要素でtext-align:centerを使う。 IEとFireFoxの両方に対応するには、両方指定する。 サンプル: …