かつてはJavaScriptを利用していたものの、今ではCSSのみで実装できる10の小技
2015年3月18日 CSS 2011年に「少しのコードで実装可能な20のjQuery小技集」という記事で数々の便利な制作技を紹介したのですが、時は流れ、今ではCSSのみで表現できるものが多くなってきました。という事で今回はその記事内で紹介した技を中心に、かつてはJavaScriptを利用していたものの、今ではCSSのみで実装できる小技を紹介します。 ↑私が10年以上利用している会計ソフト！ 目次 Div全体をクリックできるようにする テーブルの偶数・奇数の行の色を変える フォームにテキストを入れておき、フォーカスで消す（文字色も変更） ラジオボタンとチェックボックスを装飾する スライドパネル アコーディオン ツールチップ 言語によってスタイルを変更 横並びのdivの高さ揃える ボックスを上下左右中央に配置する それでは実際にどんな事ができるのか見てみましょう！サンプルも作ったのでコードと
ウィンドウサイズを変えるとコンテンツが再配置される可変グリッドレイアウトに関する情報まとめ
ウィンドウサイズを変えると コンテンツ（記事等）が再配置される 可変グリッドレイアウトに関する サンプルサイトやWPテーマ、 ライブラリなどの情報のまとめです。 詳しい方には参考にならないっぽいです。 いろいろ意見は分かれそうですが、知っておいて損は無いかなぁと思いますのでメモ。 可変グリッドレイアウトサイト可変グリッドレイアウトを使用したサイトの例。 D&DEPARTMENT PROJECT ECサイト。綺麗にまとまってます。MT使用。 D&DEPARTMENT PROJECT daily vitamins 暇つぶしが出来るサイト？どういう趣旨か分かりませんが、可変グリッド。WPです。 daily vitamins 小林聡美.jp 小林聡美さんのサイト。凄く見やすいです。MT使用。 小林聡美.jp Marunouchi.com 丸の内の情報サイト。ハイクオリティです。写真をダイナミックに
Firebug の使い方：(X)HTML と CSS の確認・修正方法のまとめ
Firefox アドオンの「Firefbug」はご存知の方も多いと思いますが、Firefbug を使って表示しているページの(X)HTMLマークアップや CSS を確認・修正する方法のまとめを紹介します。 特に３項に記した、(X)HTMLとCSSを一発で確認する方法はおすすめです。 動作は Firefox 3.5 + Firebug 1.4.0b7 で確認しています。 １．基本：(X)HTML マークアップと CSS を表示する 確認したいページを表示した状態で、メニューバーの「表示」→「Firebug」を選択します。または F12 を押下します。 これでページ下半分に Firebug のウィンドウが表示され、左側に(X)HTMLマークアップ、右側にそのページで使われている左側のウィンドウで選択状態になっている要素の CSS が表示されます。この手順で Firebug の画面を開くと、bo
古いブラウザでもCSS3セレクタを使ってWebページをデザインできるようにしてみた - latest log
uuCSSBoost.js は uuAltCSS.js に名前が変更になりましたが、一部の説明が記事を書いた当時の古い名前のままになっています。最新版では、uuCSSBoost.revalidate() は廃止され uuAltCSS() を呼び出すように変更になっています。 コードの解説を追記しました。 「最新の規格を実装したブラウザが登場しても、IE6 のせいで諦めるしかないのか」 「CSS3セレクタを古いブラウザでも使いたい!」 といった現場の声にお応えして、ほぼ全てのブラウザで CSS3 セレクタを利用したページデザインが可能になるJavaScript ライブラリを作ってみました。 特徴 軽いよ いろんなブラウザで動くよ(Firefox2+, Opera9.2x+, Safari3+, IE6+, Google Chrome1+) 95%〜98%ぐらいのシェアをカバーできるんじゃない
YappoLogs: クロスブラウザ対応やってみて思った事
クロスブラウザ対応やってみて思った事 HTMLやらCSSやらJavaScriptやら色々弄った感想 - Firefox, Safari, Google Chrome なんかは割と手がかからない - Opera も上の3つ抑えてればだいたいok - なんかSafari4のJavaScriptの挙動が3と微妙にちがう - IEは死ね、IE7からだいぶ互換性的な物がよくなってるけどIEは死ね。 -- IE6のサポートを切り捨てる時代はまだか? - IE8は確かにJavaScriptが速くなってるがGoogle Chromeは劣るしSafariとか本当速い、Firefox3.0は結構遅い - z-indexの事を考えてないで作ってると、いざとなったら本当にびっくりする - pngの透過画像をあわせるのは案外しんどい -- DXImageTransform.Microsoft.AlphaImageL
HTMLで雑誌のような美しい段組みレイアウトを軽く実現できるjQueryプラグイン:phpspot開発日誌
HOKYPOKY. | MULTICOL. jQuery Plugin MULTICOL. はHTMLで雑誌のような美しい段組みレイアウトを実現するだけのシンプルなjQueryプラグインです。もちろん、日本製のプラグインなので日本語もきれいに段組みにします。HTMLで雑誌のような美しい段組みレイアウトを軽く実現できるjQueryプラグインの紹介。 次のようにコードを書くと、複数のブロックを簡単に4カラムにすることが可能です。 $("#sample1").multicol({colNum:4, colMargin: 10}); マージンを指定できるところも良いですね。 関連エントリ 複雑なブロックレイアウトもシンプルかつ簡単に実装可能な「malo」 複雑なCSSレイアウトもサクッと実装できるCSSフレームワーク「emastic」 CSSレイアウトのチート集「CSS Layout Cheats
HTMLにCSSとJavaScriptを含めない方がいい理由 | エンタープライズ | マイコミジャーナル
Robert's talk - Web development and Internet trends Webサイトを構築するにあたってHTMLとCSS、JavaScriptの3者を完全にファイル分離するべきだという方法論が紹介されるケースが増えている。最近話題に上がったトピックに絞っても次のトピックが類似した内容を紹介している。紹介している内容や対象、視点に違いはあるが、どれもHTML、CSS、JavaScriptは分離してインラインで記述しない方がいいと説明している。 Unobtrusive DOM Scripting 累進的拡張 Obtrusive JavaScript Checker HTMLを綺麗に保つ12の原則 Obtrusive JavaScript Checkerの開発者でもあるRobert Nyman氏が自身のブログにおいてWhy inline CSS and JavaS
JavaScriptによるCSSの操作 | 暴満館 ～The House of full Violence～
またFirefoxは短縮形で取得しようとすると、設定していないプロパティにデフォルト値が入った状態で返ってくるので注意する。 getStyleValue( "div.hoge", "background" ) //Mozilla : rgb(17, 34, 51) none repeat scroll 0% 0% ルールを削除する {#deleteRule} function deleteRule( index, sheetindex ) { if( sheetindex == undefined ) sheetindex = 0; document.styleSheets[ sheetindex ].deleteRule( index ); } 全てのルールにはインデックスが振られており、それを指定することでルールから消すことができる。 ただ、同じセレクタで上書きするのとほとんど変わらな
IE の innerHTML や appendChild で要素が挿入された瞬間を取得する方法 - IT戦記
要素が挿入された瞬間を取得する 今までは出来ないと思っていたのですが、今日いろいろ試していて出来る方法が分かりました。 ですので、ちょっと紹介したいと思います。今のところアイデアなので、実用性は？です。 方法 HTML に以下の style 要素を挿入することで実現することができます。 <style type="text/css"> * { display: expression(function() { if (!this.__mark) { this.__mark = true; alert('inserted node: ' + this.tagName); } return ''; }.apply(this)); } </style> 実際に例を見てみましょう http://amachang.art-code.org/ieexpression/000.html <!DOCTYPE
CSS擬似クラスを使うべき理由 | エンタープライズ | マイコミジャーナル
A List Apart - For People Who Make Websites HTMLとCSSは規格通りに使うとすれば縦横無尽にさまざまな記述ができる。しかし規格上サポートされているからといって、馬鹿正直にそうした機能を使うのは避けたい。シンプルな記述であとから読んでも理解しやすい、他人が読んでも理解しやすいHTMLやCSSを書けるようになることが理想だ。しかし誰しも最初は素人だ。エキスパートがまとめたドキュメントを参考にして、そうしたテクニックであり勘どころを学んでしまいたい。 フロントエンドデベロッパであるAlex Bischoff氏は5日(米国時間)、A List ApartにおいてKeeping Your Elements' Kids in Line with Offspringという名のもと、CSSやHTMLの記述方法について細かい技巧をまとめて発表した。同ドキュメント
インターネットチャンネル向けのウェブページを作りたいのですが…。 : Ｑ＆Ａ - Ｗｉｉ
インターネットチャンネルのユーザーエージェントは、次のとおりです。 （お客様がダウンロードされた時期により異なります。） ●日本 Opera/9.10 (Nintendo Wii; U; ; 1621; ja) ●英語 Opera/9.10 (Nintendo Wii; U; ; 1621; en) ●ドイツ語 Opera/9.10 (Nintendo Wii; U; ; 1621; de) ●スペイン語 Opera/9.10 (Nintendo Wii; U; ; 1621; es-ES) ●フランス語 Opera/9.10 (Nintendo Wii; U; ; 1621; fr) ●イタリア語 Opera/9.10 (Nintendo Wii; U; ; 1621; it) ●オランダ語 Opera/9.10 (Nintendo Wii; U; ; 162
IE版のFirebug IE Developer Toolbar[to-R]
IE版のFirebug IE Developer Toolbar みなさんはInternet Explorer Developer Toolbarというのを知っているでしょうか？ マイクロソフトが現在ベータ版として提供しているツールで、簡単に説明すればIE版のFirebugです。 IEで使えるFireBugとして聞くとFireBug Liteを思い浮かべがちですがFireBug Liteのようにソースにjavascriptを埋め込むことなく実行することが可能です。 ちなみにFirebugとはjavascritpやCSSのデバッグなどを行えるFirefoxのアドオン(拡張機能)になります。 すごく便利ですので、使ったことがない方はFirebugの方からお使いください。 話は戻りますが、Internet Explorer Developer Toolbarのインストール方法について解説したいと
![IE版のFirebug IE Developer Toolbar[to-R]](https://cdn-ak-scissors.b.st-hatena.com/image/square/a9717624309e36a795026e1b70982163687ccca2/height=288;version=1;width=512/https%3A%2F%2Fblog.webcreativepark.net%2Ficon_200x200.png)
Behaviour : Using CSS selectors to apply Javascript behaviours
Behaviour.js is deprecated Behaviour.js was my library for doing unobtrusive javascript using a combination of a CSS Selector library and some simple javascript. This functionality has now been adopted and improved upon by all the major javascript libraries. I personally use Jquery, which through the .live() method, let's you do all of the functionality of Behaviour.js, but including automatically
CSS JSON
Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g. fonts, colors, spacing) to Web documents. JSON (JavaScript Object Notation) is a lightweight data-interchange format. CSS may easily be expressed in JSON notation (CSS JSON). CSS JSON is a powerful and flexible approach allowing for inheritance and logical constructs within CSS. CSS JSON Structure { "selector-1":{ "property-
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
TechCrunch
Yahoo! UI Library
visited link を調べる - CSS + JavaScript によるドリコム式行動ターゲティング広告の実験ページ : ぼくはまちちゃん！
lllcolor.com
CSSとJavaScriptで飾りつけする吹き出し風デザイン*ホームページを作る人のネタ帳
WEB制作者のための32個のブックマークまとめ（part2）*ホームページを作る人のネタ帳
