http://o-ands.net/css_hover_howto/
CSSで半透明、opacityとrgbaの違い - ぼくはまちちゃん！
こんにちはこんにちは！！ 今日はちょっとCSSのメモです！ 半透明について！ opacityを使った透過 #testOpacity { -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=40)"; /* IE */ filter: alpha(opacity=40); /* IE */ -moz-opacity:0.4; /* Firefox(old) */ -khtml-opacity: 0.4; /* Safari(old) */ opacity: 0.4; } Opacity test! opacityは子要素まで全て透過する。 RGBaを使った透過 #testRgba { background: rgba(0, 0, 0, 0.4); /* RGBを10進数(0〜255)で指定、不透明度を0〜1.0で指定 */
CSS とブロック要素の配置について
はじめに XHTML 文書のレイアウトではしばしば，左側にメニュー一覧，右側に本文を書くようなスタイルもあります（２段組と呼ばれることがありますが，２段組とは正しくは新聞記事のように段落を２段に分けることです）．このようなレイアウトを実現するには，HTML の古いバージョンではフレーム機能を使ったりテーブルを利用したりしていました． しかし，文書管理，データベース化をはじめ携帯端末などを考慮すると，フレーム機能に依存しない文書の作成が求められます．また，テーブルを使ったレイアウトもテーブル本来の使い方をしていないので，文書管理としての不都合も生じます．それゆえ，こうしたレイアウトの実現も CSS に委ねるわけですが，これが意外と簡単ではありません．環境によっては全く意図しないレイアウトになったりもします．さらには，CSS をどのように定義したら所望の配置が得られるかを紹介しているページすら
403 Forbidden
＼閉鎖予定のサイトも売れるかも？／ アクセスがないサイトもコンテンツ価値で売れる場合も… ドメインの有効期限を更新してサイト売却にトライしてみましょう
CSSのレイアウト方法について floatを使った配置 相対配置と絶対配置
CSSでレイアウトをする場合の基本的な方法を2つ紹介しておきます。あくまでも基本的なことだけなので、実際に色々とテンプレート等で試してみるといいでしょう。 CSSでは最も一般的に用いられるレイアウトの手法として、floatプロパティを使った回り込みを利用したものがあります。 floatプロパティは対象のものを右とか左に寄せる時に使いますが、その時同時に後につづくものを横に回り込ませて並べることが出来ます。 その性質を利用して、横方向にコンテンツを並べるわけです。 縦方向は順番に作っていけばいいだけなので、特にすることはありません。 横の並べ方と縦の並べができれば基本的にどのレイアウトもその応用で作ることができるのです。 例として簡単な2カラムレイアウトを作ってみます。 よく見かけるタイプの2カラムレイアウトです。 まずHTMLに構造的に正しいマークアップをします。この場合全てブロック要素の
<dl>要素を表みたいに表示するには - CSS小技集
CSS の小技として、<dl>要素(定義リスト)を表のように見せる書き方を解説します。 当サイトでも更新案内など、デフォルトのスタイルシートでそのような表示になるようにした定義リストが幾つもあります。 CSS が対応していないか対応が不充分な環境, 携帯端末など非PC環境, 及びユーザスタイルをご利用の場合には表のように表示されない場合があります。 はじめに。 定義リスト(<dl>要素)をわざわざ表形式で表示させなければならない必然性は確かに無いかも知れません。 先ず、定義リストを表(テーブル)と較べた場合の利点を見てみましょう。 定義リストは記述が容易である 表(テーブル・<table>要素)の場合には <table>要素 <thead>要素, <tfoot>要素または<tbody>要素(必須ではない) <tr>要素 <th>要素または<td>要素 と言うように、要素を三重ないし四重にし
CSSの基本ブロック要素とインライン要素の説明
タグには大きく分けて初期状態でブロック要素とインライン要素のものがあります。違いは、ブロックには範囲があり、それに対してインラインは名前の通り直線的というか文の一部分、という感じです。 ブロックは範囲なので高さなどがありますがインラインにはありません、直線的です。ですからページ全体のレイアウトをしていく場合は、基本的にブロック要素のタグに色々スタイルを付けて並べていくことになります。 タグに直接スタイルが指定できるのはとても大きな利点です。いままではまずテーブルで枠を作る必要がありました。しかしCSSでは例えばh1タグという見出しそのものを枠付きにすることもできます。h1はブロック要素なので、枠や、線のスタイルを指定出来るからです。 CSSデザインの場合、HTML内で使うタグの種類はあまり多くありません。次の一覧のものでほぼ間に合います。デザインそのもののタグがないことに注目。 つまり情報
inline要素とblock要素
CSSとは、同名のHTML開始タグと終了タグで囲われた部分を要素とみなし、その要素に対するレンダリング（表示方法）を指示するものです。 <div>タイトル<span>作成講座</span></div> この例では、<div> の要素は「タイトル<span>作成講座</span>」であり、<span>の要素は「作成講座」です。このような構造が無数に入れ子状になったものがHTML、このHTMLの表示方法を指示するものがCSSとなります。*1 このような要素には大きく分けて２つの種類があります。 inline要素とblock要素 インライン要素とは文章の一部を太字に修飾するといった、ある文章中での装飾などに使われる要素です。代表選手は<span>タグになります。 ブロック要素とは<p>タグで囲まれた段落や記事のかたまり、adiaryで言えば１つの記事、１つのサイドバー要素などはすべてブロック要素
Stylishでブラウザ表示の一部を変えて自分好みにしたい！
ブラウザ表示の一部を自分好みに変更する▼ 「最安値チェッカー 1.4」の表示エリアを分かりやすく赤枠で囲ってあります 「最安値チェッカー 1.4」を使用すると Amazon などで個別商品ページを表示すると 価格.com の最安値を表示するようになりますが、個人的には同系色で見づらいと感じていました。 Firefoxアドオンの「Stylish」を使ってブラウザ表示を変更するにはスタイルシートで記述する必要があるので、変更したい箇所の "HTMLタグ、class名、ID名" を知る必要があります。 HTMLタグ、class名、ID名 を調べる "HTMLタグ、class名、ID名" を調べるには変更したい表示エリア辺りでコンテキストメニュー(右クリック)を開き、"要素を調査" をクリックして Firefox 10 から導入されたインスペクタを使用します。 「アドオンの互換性を改善した Fir
Stylish １つのスタイルに複数のドメインを適用する - 銀盤浴
カンマ（ , ）で区切って、続けて記述すればよい。 ２つのドメインに適用 @-moz-document domain("google.co.jp"), domain("google.com") { １つのドメイン と 別ドメインの特定ページに適用 @-moz-document domain("ja.wikipedia.org"), url("http://en.wikipedia.org/wiki/Main_Page") { １つのドメイン と 別ドメインの特定ディレクトリに適用 @-moz-document domain("anond.hatelabo.jp"), url-prefix("http://d.hatena.ne.jp/なんたら/") { なんかダブルクォーテーション( " )は、あってもなくてもいいのかな？ 関連記事 Stylish でドメイン以下のディレクトリ毎にスタイル
CSSは分かるけど jQuery は苦手 … という人が jQuery に親しんでくれるといいなーと思って書きました
Webデザインをしていると、HTML と CSS だけではできない表現ってありますよね。そんな時によく使うのが jQuery。今回は jQuery っていまいちよく分からない ... っていう人が、jQuery に少しでも親しんでもらえたらいいなーと思って、知ってる事をまとめてみました。なので jQuery 初心者さん向けの記事です。 とっても当たり前なんですけど、Web サイトは基本的に HTML で書かれていて、デザインは CSS で装飾されていますよね。最近では CSS3 の登場で、簡単なアニメーションも CSS で作れるようになりました。でもクライアントワークでは、まだまだ CSS3 を使える部分が限られているし、Webデザインに少し動きなどをつけたい時などは、まだまだ jQuery を活用する事も多いです。 私は Javascript が苦手で、jQuery もどちらかというと苦
Webkitでstyle要素をdisabled=trueにしてもスタイルシートを無効にできない - rikubaのブログ
SafariやGoogle Chromeで、style要素をdisabled=trueにしても、そのstyle要素のスタイルシートを無効にできない。 document.getElementsByTagName('style').item(0).disabled = true; 一方link要素で読み込んだ外部スタイルシートは、そのlink要素をdisabled=trueにすることで無効にできた。 解決策が分かるまで、はてなダイアリーで好きなテーマ(デザイン)を適用するブックマークレットはWebkit対応はおあずけ。使えないこともないけれど、ダイアリーによってはぐちゃぐちゃになる。 document.styleSheetsからなら無効化できた。 document.styleSheets.item(2).disabled = true; でもこれだと文書順でしかスタイルシートを特定できない。
JavaScript for CSS(3)
JavaScript for CSS (3) class属性値やid属性値を変更することも可能です。 <LINK rel="stylesheet" type="text/css" href="style1.css"> <LINK rel="stylesheet" type="text/css" href="style2.css"> <STYLE type="text/css"> <!-- .class1 { text-decoration: underline; background-color: #fee; color: red; } .class2 { text-decoration: line-through; background-color: #eef; color: blue; } #id1 { background: #FDF5E6 url(img/bac01c.gif)
font-sizeのパーセント表記一覧 - Webtech Walker
font-sizeはpxやptなどで指定するとIEで拡大、縮小ができないので、パーセントなどで指定することが多いと思います。しかし、パーセントで指定すると、ブラウザごとに大きさが違ったりします。そこで、基本サイズが12px～16pxのときに10px～26px相当を表示するパーセントの数値を計算して、各ブラウザで確認したものをまとめました。 注意点 これは僕が自分で確認できる環境でのみ動作確認を行っています。動作確認したブラウザは以下になります。 Windows IE6 IE7 Firefox2.0.0.14 Opera9.27 safari3.1 Netscape7.01 Mac Firefox2.0.0.14 Opera9.27 Safari3.1.1 Safari2.0.4 IE5.2 計算式は以下のとおりです。小数点以下は四捨五入するとブラウザ間で差異でるようなので、切り上げることで
もうfont-familyで悩まないための2行 « CSS « Snippet-Editor.com
body, textarea { font-family: "メイリオ", "ＭＳ Ｐゴシック", sans-serif; } input, select { font-family: Arial, "ＭＳ Ｐゴシック", sans-serif; } この2行のスタイルシートで、Windowsではメイリオフォント（なければMS Pゴシック）、Macではヒラギノ角ゴシック（Firefoxのみ例外時あり）で表示することができます。 実際に適応すると、 Windows 7、またはVistaではメイリオで表示され Windows XPではMS Pゴシックに Windows XPで、且つメイリオを自分でインストールした人はメイリオに Mac OS Xではヒラギノ角ゴに（Firefox以外のMac用ブラウザでは日本語で書かれたフォント指定が無効になるため） と、なります。なお例外として、 MacにMS
opacity プロパティ(不透過度) - CSS リファレンス
平成23年 6月 7日現在の定義です。 プロパティの定義 不透過度。 定義のある水準 第三水準 (CSS 3) 以降、色モジュールで。 WAP 2.0 での定義 無し。 対象メディア 視覚系メディア。 対象要素 全要素。 上位要素からの値の継承 無し。 第三水準 色モジュールでのプロパティ値 以下のいずれか： inherit 上位から継承。 0以上 1以下の実数 0は完全透過 1は完全不透過 デフォルト値 1 (完全不透過) パーセンテージ 適用不可。 計算結果 0.0～1,0 の範囲に丸められたアルファ値 opacity プロパティとは。 opacity プロパティは、要素の不透過度です。 対象となるのは、要素の全てで、 前景色(文字の色) 背景 ともに適用されます。 opacity プロパティは、平成23年 6月 7日に勧告される前から、多くのグラフィカルなウェブブラウザが実装しており
Googleのヘッダが黒くなってた - (TooLab.)Lab. 研究日誌
[追記 2011 Jul. 02nd 15:40ごろ] 当エントリの続編みたいな感じで、Googleの検索結果のサイドメニュー(ツールパネル)を出来る限り前の感じに戻すというのを書きました。 [追記終] 目障りでウザい というわけで出来るだけ元々な感じに近づけるためのCSSを用意してみた。 Gmailにテーマ適用してなければ、ヘッダは変わってないみたいなので参考にしました。 Sleipnir 2.9.7正式版(+IE9)のStyleEditorでのみ試してますけど、多分他のブラウザでも問題ないでしょう。 ただし、細かい部分まではやってないです。*1 あと、"li a:active"のところ効いてないですねぇ。ま、いっか。 li a:hover, li a:active { background-color: #eef2fa; } div#gbx3 { background-color: #
border-style－スタイルシートリファレンス
none ボーダーは表示されず、太さも0になります。表のセルなどのボーダーが重なり合う場合は他の値が優先されます。これが初期値です。 hidden ボーダーは表示されず、太さも0になります。表のセルなどのボーダーが重なり合う場合はhiddenの値が優先されます。 solid 1本線で表示されます。 double 2本線で表示されます。 groove 立体的に窪んだ線で表示されます。 ridge 立体的に隆起した線で表示されます。 inset 上と左のボーダーが暗く、下と右のボーダーが明るく表示され、ボーダーで囲まれた領域全体が立体的に窪んだように表示されます。上下左右の一部だけに指定しても立体感は出ません。 outset 上と左のボーダーが明るく、下と右のボーダーが暗く表示され、ボーダーで囲まれた領域全体が立体的に隆起したように表示されます。上下左右の一部だけに指定しても立体感は出ません。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://less-ja.studiomohawk.com/
フォントサイズ指定手法 ◁ NOTE