1年ぶりくらいに更新しますが、引き続きクロコスにおりまして (てかこの前の記事が去年の7月なんでその後ヤフーに買収されるなどいろいろあったりしましたが) 、まあまあ元気にやっております。 - さて本題。普段 CSS 書くときは大抵、 Twitter Bootstrap からいくつかの LESS をインポートしつつ、必要に応じてスタイルを上書きする形式をとっています。 そんな中、なんかどうしてもボタン(buttons.less でスタイルをあてているやつ)の文字色が反映されない状況に陥りまして、なんでだろうと調べて一応解決したので書いておきます。 問題の概要 今回のケースでは、デフォルトの文字色を次のように設定していました。 @import "bootstrap/buttons.less"; a, a:link { color: #666666; } a:visited { color: #
CSS3フレームワークは数多くなってきたのでその特徴をちゃんと掴んでおかないといけないですね。 GumbyはSassを使ったCSS3フレームワークです。他のフレームワークと同じようにレスポンシブ、モバイルフレンドリーになっています。その特徴を見ていきましょう。 まずデスクトップからです。 ヘッダーバー。フラットだったり、幅が固定だったりと色々な形式が想定されています。 タイポグラフィ。可読性高いです。 リストだけでも黒丸、白丸、ドット、数字など多数用意されています。さらに定義リストまで！ ボタン。サイズ、色、形が様々です。片方だけ丸い、なんて便利そうですね。 インジケーターやラベル、アラート。こういうのもよく使いますよね。 フォーム。基本的にplaceholderを使った表示になっているようです。 テーブル。角丸サポートです。 タブ。幅が設定できます。 縦のタブもあります。 ドロワー。クリ
floatを解除する手法のclearfix と 次世代のレイアウトの話 2013-06-20 / 2013-06-30 2011年にclearfixについて記事を書きましたが、Micro clearfixなどの新しい手法も出てきました。 記事を書いてから2年が経ち、色々思うところも出てきたので、改めてclearfixについて書きます。 floatを解除するには CSSでレイアウトの構築を行う際に、よくfloatプロパティが用いられます。 しかしfloatを使用すると、「親の背景が表示されない」「下の段のレイアウトが崩れる」などのトラブルが起こりやすくなります。 floatプロパティの特性 親の背景が表示されない理由は、floatプロパティを指定しているボックスが浮動化し、通常のボックスのフローから外されることが原因です。 通常フローから外されたボックスは、親のボックスの高さを認識できなくな
DigitalOcean provides cloud products for every stage of your journey. Get started with $200 in free credit! The following is a guest post by Alexander Futekov. We recently published an article by Joshua Bader in which a 3D inset look was adjusted as the page scrolled to give it a more realistic interaction. This is similar only Alexander is using an extruded look on buttons and employing a totally
CSSのみで画像を背景にベターっと表示するサンプルを作りました。 背景と言っても実際に配置するのは img要素 です。 ※IE7～8は、画像よりウインドウが狭くなった時、中央配置されません。 ※IE6はアスペクト比が崩れます。 ※Media Query と min-*** に対応すれば、IE6～8でも意図した動作になるはずです。 サンプル HTML <!-- 画像のサイズは指定しない --> <div id="bg-fill-image"> <img src="http://placekitten.com/g/1024/768"> </div> <div id="wrapper"> <!-- 通常のコンテンツはここに書く --> </div> CSS html { /* 内包する要素に関わらず高さを保持する */ height: 100%; } body { margin: 0; padd
子孫のみハイライト [ad#ad-2] CSS3 Family Treeの実装 HTML ツリーはリスト要素で、各アイテムの親子関係はリストの入れ子で実装します。 <div class="tree"> <ul> <li><a href="#">親</a> <ul> <li><a href="#">子</a> <ul> <li><a href="#">孫</a></li> </ul> </li> <li><a href="#">子</a> <ul> <li><a href="#">孫</a></li> <li><a href="#">孫</a> <ul> <li><a href="#">ひ孫</a></li> <li><a href="#">ひ孫</a></li> <li><a href="#">ひ孫</a></li> </ul> </li> <li><a href="#">孫</a></l
どうも、おつぱ（ @OZPA ）です。 ブログの見出し要素のデザインをいじくっていたらなんかGoodDesign賞にノミネートされそうな見出しスタイル…いや、正確には諸処の事情でノミネートが取り消されそうなスタイルが出来上がりました！ 革命を起こす見出しスタイル えー、出来上がった見出しは以下の3スタイルです。 画像ではなく、CSSで実装しております。 スタンダード ソフト ハード すごい… なんかよくわかんないけど…エロスタイリッシュ…！！ サンプルコード サンプルコードは以下。 スタンダード html [html] <p class="t_standard">スタンダード</p> [/html] css [css] /**** スタンダード ****/ .t_standard{ border-top:1px solid #CCC; border-right:10px solid #CC
先月あたり、CSS による画像置換テクニックの話題がにわかに盛り上がりを見せていました。その経緯について まとりさんの記事 で紹介されていますが、僕からも簡単に補足してみます。 まず、よく知られた画像置換のテクニックとしていわゆるファーク式がありました: /* Phark method */ .ir { height: 100px; width: 400px; background: url(image.png) no-repeat 0 0; text-indent: -9999px; } このテクニックは長らく利用され続けてきましたが、その代替として、パフォーマンス面でより良いとされる Scott Kellum さんのテクニック (ケラム式) が Jeffrey Zeldman さんの記事 で紹介されました: /* Kellum method */ .ir { height: 100px
今回はCSSだけでデザインするtableのアイデアを2つ紹介したいと思います。 画像を作ったテーブルも多く見ますが、画像を使わずにも、なかなかカッコいいテーブルができますので、ぜひ参考にしてみてください。ここでは、線と塗りだけで表現するシンプルなテーブルを作ってみます。 7/22に第二段として[CSSだけで作るtableデザインテクニックVer.02(おまけ付き)]を公開しましたので、コチラもぜひ見てみてください！ またテーブルはSEO的に良くないと考えている方がいましたら、tableタグはSEOに不利というデマコチラの記事もあわせて読んでみてください。 元となるHTML <table summary="会社案内表"> <tr> <th class="t_top" width="180">会社名</th> <td class="t_top">株式会社○○○</td> </tr> <tr>
最近Androidとの抗争が激化しているago（@kyo_ago）です。 jQueryはCSSセレクタを多用する特徴がありますが、jQuery内では実行ブラウザやCSSセレクタの記述によって呼び出されるブラウザAPIが変わり、それによって実行速度にも影響が出ます。 この記事では「セレクタAPIとはなにか」、「CSSセレクタの記述によって呼び出されるセレクタAPIの種類」、「高速なセレクタAPIを使用するための方法」、「高速なセレクタAPIが使われるかどうか確認する方法」などを紹介したいと思います。 （※この記事はJavaScript Advent Calendar 2011 (フレームワークコース) : ATNDの1日目の記事です） セレクタAPIとはなにか セレクタAPIとは「#hoge .huga」のようなCSSセレクタから、DOM上に存在する要素を取得するためのAPIです。 jQue
ヘッダやフッタがブラウザの横幅より広い際に、横スクロールするとヘッダとフッタが切れてしまうのを解決する方法を紹介します。 これはIE6などの旧式のブラウザだけでなく、Firefox3.6やChromeでも起きる現象です。 How to Resolve a Fluid Header/Footer Problem When the Window is Resized デモページ（不具合版） ※キャプチャはFirefox3.6（不具合の確認は横幅を小さくして） この現象が起きる条件は下記のようになります。 ヘッダとフッタのサイズは指定されていない。 →横いっぱいに広がる。 コンテンツエリアのサイズは指定されており、「margin:auto;」で中央に配置。 ブラウザのサイズはコンテンツエリアのサイズより小さい。 →ブラウザに横スクロールバーがでる。 期待される表示は、下記のようにコンテンツが中央
visibility / display の使い分け たまに間違って説明している人とか、テーブル行がウマく消えずに苦しんでる人を見かけるので、説明しようとするのだけど、いつも忘れているのでちゃんとまとめておく。 CSS属性 効果 display:none エレメントが表示エリアから消える。DOMとしては存在するが描画されない visiblity:hidden エレメントは描画されない。しかし表示エリアは「残る」。おおざっぱに言えば、背景色で塗りつぶした感じ では実例をお見せする。 日付のところに注目。3行あります。 全部が表示されている状態 visibility : hidden でエレメントを非表示にした場合 display : none でBlock要素を非ブロック要素にした場合 ま、一目瞭然だわな。 参考エントリ 要素の表示/非表示プロパティ。表示/非表示だけだとdisplayプロパ
Windows Internet Explorer 8 オンザフライでCSSを調整してブラウザの表示に反映させるツールはいくつもある。WebデザイナやWebデベロッパにとって、WebサイトやWebページを制作する段階において欠かせないツールといえる。主要ブラウザにはそれぞれデバッグツールが付属しているか、付属していなくてもFirebugのように実質的にデファクトになっているツールが提供されおり、そうしたツールを使うことが多い。 このようにCSSをチューニングするためのツールは数多く提供されているが、逆にCSSで使われていないセレクタを特定して削除するといった機能を提供するものは少ない。IEBlog : CSS Crunch: new IE Extension for developersにおいてSelectors API Level 1で規程されているdocument.querySelec
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く