テーブルに自動で行数を表示する
Result tableに行数を表示します。疑似要素にcss-countersで加えています。 前後に任意のテキストも挿入できます。 cssbody {/*カウンターリセット*/ counter-reset: row-counter; } tr { position: relative; } tr:before {/*行の頭に疑似要素を追加してカウント*/ position: relative; padding: 10px; display: block; bottom: 0; counter-increment: row-counter; content: "第"counter(row-counter)"行目"; }html<table> <tr> <td>foo</td> <td>bar</td> <td>hoge</td> </tr> <tr> <td>foo</td> <td>ba
CSS3で創るボタンコレクション「10 Awesome CSS Button Libraries & Collections」
TOP > WebDesign > CSS3で創るボタンコレクション「10 Awesome CSS Button Libraries & Collections」 Web上においてボタンは欠かせないもの。何か物を購入する際や、メールを送る際には必ずクリックするものだからこそ、分かりやすく、デザイン性の高いものにしていきたい。そういったシーンでも活躍してくれるボタンコレクション「10 Awesome CSS Button Libraries & Collections」をご紹介していきたいと思います。 Bttn.css – Demo コーディング上でデザインの可変が可能なCSSで作成されたボタンをまとめたものになります。下記にいくつかピックアップしてありますので、ご覧下さい。 詳しくは以下 Buttons 20種類以上のボタンスタイルが収録されています。クリエイティブを感じさせるデザ
新人コーダーに知っておいて欲しい命名規則の考え方[画像・ID・class名]｜クロノドライブ
新人コーダーが迷いやすいと言われている、ファイル名、id・class名の付け方。 この記事では、それぞれの命名規則やコツについてまとめたいと思います。 少しでも皆様の参考となれば幸いです。 共通事項 ファイル名、id・class名を付ける際の注意点 まず始めに、ファイル名、id・class名を付ける際の注意点から確認していきます。 難しいことはありません。 下記に注意して名前を付けるようにましょう。 １．半角英数字のみを使用する。 「日本語」、「全角英数字・記号」、「半角カタカナ」は使用することが出来ません。 ２．記号は「-」（ハイフン）、「_」（アンダースコア）のみ使用する。 「\」（エンマーク）、「/」（スラッシュ）、「:」（コロン）、「*」（アスタリスク）、「?」（クエスチョン）、「”」（ダブルクォーテーション）、「<」（左アングルかっこ）、「>」（右アングルかっこ）、「|」（パイプ
![新人コーダーに知っておいて欲しい命名規則の考え方[画像・ID・class名]｜クロノドライブ](https://cdn-ak-scissors.b.st-hatena.com/image/square/c81495bec5cb3ed860ace323c97fffb85ea3e62c/height=288;version=1;width=512/http%3A%2F%2Fhtml-coding.co.jp%2Fogp_img.jpg)
2/2 CSS3の新単位「rem」で文字サイズを分かりやすく指定 [ホームページ作成] All About
CSS3の新単位「rem」で文字サイズを分かりやすく指定(2ページ目)単位emや%を使って相対的に文字サイズを指定すると、複数のボックスを経由した先などでの表示サイズが把握しにくいことがあります。CSS3の新単位「rem」を使えば、常にルート要素の文字サイズが基準になるため、文字サイズを分かりやすく指定できます。 CSS3で新しく追加された単位「rem」は、ルート要素の文字サイズを基準にして、文字サイズを指定できる単位です。 「ルート要素」とは、ソースの最も上位(基底)の要素のことで、HTMLでは「html要素」が該当します。右図のようにp要素を基準に考えると、div要素が「親要素」で、html要素が「ルート要素」です。 ※ルート要素は、「body要素」ではありませんので注意して下さい。 この単位「rem」の記述方法は、従来からある単位「em」と同じです。基準となる要素が異なるだけです。
![2/2 CSS3の新単位「rem」で文字サイズを分かりやすく指定 [ホームページ作成] All About](https://cdn-ak-scissors.b.st-hatena.com/image/square/f8988ff6da9cb1d0380d85c12d32efa6ad3c1b97/height=288;version=1;width=512/https%3A%2F%2Fimgcp.aacdn.jp%2Fimg-a%2F1200%2F900%2Faa%2Fgm%2Farticle%2F4%2F0%2F2%2F5%2F4%2F8%2Ftopimg_original.png)
flexible ボックスメモ - hogehoge @teramako
Firefox 18.0a(Nightly) で CSS Flexible Box Layout Module が実装されつつある。 その辺りは、FirefoxのFlexbox実装、進行中 - fragmentary 辺りを参照ってことで。 まぁともかく、about:config の値 layout.css.flexbox.enabled を true にすれば、少し試すことができる。 んで、Using CSS flexible boxes - CSS | MDN を読みつつ勉強。そのメモをば。 flex containerdisplay: flex; な要素。その子要素がflex itemとなり、フレキシブルなレイアウトを実現する。 レイアウトには主軸(main axis)となる方向がある。上図では横方向(row)のレイアウトになっている。この方向を決めるのが、flex-directio
CSS3でのposition:relative
CSS3でのposition:relative 昨日「スマホサイトでtd/th要素へのposition:relativeはダメ！」と書いたところ仕様書を読め的な圧力がいろんな所からかかってきました。こわいですね。 position:relativeが仕様としてどうなっているかは@Takazudoが5年ほど前に解説しているのでそちらを参考にしてください。 table系にはposition:relativeが効かない | Takazudo Clipping* ただ、これはCSS2.1の仕様なんですね。最新のCSS3ではWD段階ではありますが、次のようになっています。 table-caption and table-cell offset relative to its normal position within the table. If a table cell spans multipl
[CSS]背景に切り込みをいれて、パネルの四隅を留めるCSS3の美しいエフェクト -CSS3 tucked corners
デモページ 実装 Step 1: HTML パネルは4つのコーナーのエフェクトを疑似要素で作成するため、2つのdiv要素で実装します。 <div class="tucked-corners-top"> <div class="tucked-corners-bottom"> <!-- コンテンツ --> </div> </div> Step 2: CSS 「[class*='tucked-corners-']」以下が、4つのコーナーのスタイルです。 .tucked-corners-top { position: relative; width: 500px; min-height: 200px; margin: 100px auto; padding: 20px; background-color: #fff; /* Fallback */ background: linear-gradie
iOS6でtransitionアニメーションが少し遅れて開始する問題
iOS6でtransitionアニメーションが少し遅れて開始する問題 よくあるスワイプギャラリーを作成しているとiOS6でアニメーションが少し遅れて開始する問題にぶつかりました。 どういった感じかというとスワイプ終了時に以下のようにしてtransitionを利用して規定位置までアニメーションさせようとすると一拍あいてから動き出す。iOS5だとちゃんと動作します。 $("#carouselInner") .css("-webkit-transition","-webkit-transform 600ms ease") .css("-webkit-transform","translate3d("+x+"px,0,0)"); 色々調べていると以下のページに行き当たりました。 iOS6 html hardware acceleration changes and how to fix them
【CSS 中級講座】CSS3の各種ベンダープレフィックスは未だ必要か調べてみた
さてさて第３弾となる【CSS 中級講座】ですが、今回は個人的にメンドくさくて仕方ない「ベンダープレフィックス」について。 ちょくちょくみかける”-moz-”やら”-webkit-”ってヤツです。 これは、草案段階のCSS3プロパティなどに対して、各ブラウザ側で実験的に実装するために用意されたモノ。 実験的な状態から恒常的な実装となった場合、該当ブラウザのベンダープレフィックスは必要なくなりますが、それがいつ不要となったのか、なかなか調べる機会もありません。 っちゅーコトで、2012年9月12日現在、主要なCSS3プロパティのベンダープレフィックスが未だ必要なのかどうか、最新情報をいくつか調べてみましたよ！ CSS3の各種ベンダープレフィックス調査 CSS3プロパティは数あれど、今回調べたのは結構主要なトコだと思われる下記６つ。 調査対象のCSS3プロパティ text-shadow box-
HTML5やCSS3のブラウザ対応を調査する「Modernizr 2.6」が登場
Modernizr is a JavaScript library that detects HTML5 and CSS3 features in the user’s browser. Modernizr開発チームは19日(米国時間)、Modernizrの最新版「Modernizr 2.6」を公開した。Modernizrは、次世代のWebテクノロジであるHTML5やCSS3の機能が利用できるかどうかを調査できる、軽量なJavaScriptライブラリ。Modernizrを利用することで、動作中のブラウザがHTML5やCSS3の機能に対応しているかを簡単に確認することができる。 ModernizrはTwitterやGoogle、Microsoftなど大手ネットワークベンダーで使用されているHTML5/CSS3調査ツール。Web開発者はサイトをきれいに表示させるためにユーザのブラウザ情報を取得
CSS3備忘録：疑似クラスを使ってtableの最後の縦列をborderで囲む方法
何かの表を作るとき、最後の列に合計の数値を表示することがあると思いますが、 その最後の列を強調するために太めのborderで囲んで欲しいという要望を受けた霙（@xxmiz0rexx）です。 表の向きを横にすればtrで簡単に指定できるのでしょうが、そうもいかない場合があるのですｗ 地道なだけの、ただのCSSの設定ですが、次からコピペしたいので記事にしちゃいます。 html <table> <tr> <th>商品名</th> <th>金額</th> <th>数量</th> <th>Total</th> </tr> <tr><td>石仮面</td><td>500</td><td>2</td><td>1000</td></tr> <tr><td>マンモーニ</td><td>105</td><td>1</td><td>105</td></tr> <tr><td>ニーソ</td><td>30,000<
Google HTML/CSS Style Guide の推奨ガイドラインまとめ | バシャログ。
すっかり夏っぽくなり、ビアガーデンに毎日通いたいと常々感じる今日この頃、Latin です。 巷で流行っていると噂の Google HTML/CSS Style Guide についてまとめて下さっている REFLECT DESIGN さんのブログより、代表的なものをいくつか抜粋してみました。 全般的なスタイルルール 一般的な書式ルール 全般的なメタルール HTMLのスタイルルール HTMLの書式ルール CSSスタイルルール CSS書式ルール 全般的なスタイルルール プロトコルの記述 <!-- NG --> <script src="http://www.google.com/js/gweb/analytics/autotrack.js"></script> <!-- OK --> <script src="//www.google.com/js/gweb/analytics/autotrac
CSSアニメーションの基礎
今さらながらCSS Animationsの使い方が分かってきたので、プロパティなどを簡単にまとめておきたいと思います。 これを書くにあたって、以下の2つを参考にしました。 CSS Animations Editor’s Draft 25 July 2011CSS animations - MDN上のはdev.w3.orgにある、2011年7月25日版のエディターズドラフトです。 ちなみにwww.w3.orgにある仕様は「CSS Animations Module Level 3」です。これを書いている現在、こっちは2009年3月20日版が最新となっています。 基本的に2011年7月25日版のエディターズドラフトをベースに説明したいと思います。なので、現在のブラウザの実装とは異なることもあります。 2つ目のは『Mozilla Developer Network』のドキュメントです。日本語版も
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Fontello - icon fonts generator
CSS3でここまで出来るの？！真似してみたいと思える物からそうじゃない物まで様々なCSS3チュートリアル達！ | バンクーバーのうぇぶ屋
sakurachiro.com
html5-memo.com
Google Bootstrap has moved!
CSSのブラウザ対応状況が一発で分かる「BrowserSupport」:phpspot開発日誌
CSS3を使ったスライドショー – creamu