~/.gitconfig [core] attributesfile = ~/.gitattributes ~/.gitattributes *.min.js binary *.min.css binary
最近、普段以上にChromeの開発者ツールを使うことに時間をかける機会がありました。その過程で、自分が今まで気づいていなかった機能をいくつか見つけました(少なくとも今までその機能を探す必要に迫られていなかった、とも言えるのですが。例えばブラックボックス化や非同期のスタックトレースなど)。そのため、開発者ツールでとても気に入っているいくつかの機能についてまとめてみたくなったのです。 小さな虫眼鏡ののアイコンは、特定の要素やCSSプロパティに対して、「どのCSSファイルに書かれているどのセレクタ/クラスが最終的なスタイルを決めているか」を示してくれます。例えば、どれかDOM要素に対して「要素を検証」を選び、右側の「Computed」というタブを選びます。確認したいCSSプロパティを見つけてその虫眼鏡アイコンをクリックすることで、すぐさま右側に正しいCSSファイル内のクラス/セレクタを表示してく
This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it constitute or imply its association, endorsement or recommendation.
CSS のプログラミング: LESS で効率を上げる Dino Esposito 今回は、CSS コンテンツの動的な生成に LESS フレームワークを使用する Web 開発について説明します。 Web ページのプレゼンテーションとコンテンツを完全に分離するという (ほぼ達成済みの) 約束によって、CSS が飛躍的に成長したことは間違いありません。CSS はデザイナーの担当 (のはず) ですが、ほぼすべての開発者が気にしている "関心の分離" の原理を尊重しています。そのため、CSS の使用はすぐに普及し、今では最新の Web サイトの進化に対応するのが難しいこともあるほど Web 開発に深くかかわるようになっています。 これは、グラフィックが豊富で魅力的な最新の Web サイトのスタイル設定に CSS では力不足だという意味ではなく、純粋な宣言型言語は、複雑で相互に関連するスタイルの表現に
This tutorial was originally put together by Soh Tanaka during the Spring of 2009. Unfortunately the original demo went offline along with his source codes. I checked out an older archive copy on the WayBack Machine and decided to re-built this tutorial from scratch. I am going to demonstrate how we can make a simple list-style interface that switches over to thumbnails using jQuery. The user may
ベーシックなHTMLとCSSで実装されたプロダクトページの表示をリストとグリッドに切り替えるjQueryのチュートリアルを紹介します。 Building a List/Grid View Switcher with jQuery [ad#ad-2] デモ 実装 デモ 表示の切り替えは、右上のアイコンをクリックで。 デフォルトはリスト表示で、プロダクトのサムネイル、リンク、購入ボタンがセットになっています。 デモページ:グリッド表示 実装 HTML HTMLはそれほど複雑ではありません。 まずは、右上の切替用のアイコンのHTMLです。 <span class="list-style-buttons"> <a href="#" id="gridview" class="switcher"><img src="images/grid-view.png" alt="Grid"></a> <a hr
一度書いたコードは二度と探さない!スニペットを究めて快適コーディング!【HTML, CSS, JavaScript】 ※この記事は2013年8月26日に執筆された記事です。現在は仕様が異なる可能性があります。 気がつけば繰り返し同じ単語で検索し、同じコードを書いている…なんてことはありませんか?「この部分の記述、もう一回使うことがあるかも」と思ったらぜひスニペットとして登録しておきましょう! スニペットとは繰り返し登場するコードの断片、またはそれをすぐに呼び出せるように管理するエディタの機能のことです。自分がよく使用する記述をスニペットにしておけばいちいち検索したり、昔書いたソースを探ってみたりすることなく、使いたい時に正確な記述をサッと呼び出して使うことができます。 Dreamweaver、Sublime Textなどのオーサリングツールやテキストエディタにはスニペットを自在に使うための
js で DOM をゴニョゴニョしたい時、きっと皆さんは id や class で DOM に名前を付けて、その名前を利用して js の処理を書いていると思います。 例えば<input type="button" class="update" value="更新" />のようなボタンがあったとして、 js 側で更新処理を書くときには下記のように書きます。 $('.update').on('click', function () { // update 処理 }) でもこれだと問題になるケースがあります。よくあるのが、マークアッパーとフロントエンジニアが分業していて、マークアッパーがデザインのために class 名を変えてしまい js が動かなくなるパターン。分業せずに一人で全部やってたとしても、時間が経つにつれ使っている class 名が js だけで使っているのか、css でも使っている
uuCSSBoost.js は uuAltCSS.js に名前が変更になりましたが、一部の説明が記事を書いた当時の古い名前のままになっています。最新版では、uuCSSBoost.revalidate() は廃止され uuAltCSS() を呼び出すように変更になっています。 コードの解説を追記しました。 「最新の規格を実装したブラウザが登場しても、IE6 のせいで諦めるしかないのか」 「CSS3セレクタを古いブラウザでも使いたい!」 といった現場の声にお応えして、ほぼ全てのブラウザで CSS3 セレクタを利用したページデザインが可能になるJavaScript ライブラリを作ってみました。 特徴 軽いよ いろんなブラウザで動くよ(Firefox2+, Opera9.2x+, Safari3+, IE6+, Google Chrome1+) 95%〜98%ぐらいのシェアをカバーできるんじゃない
株式会社ライブドア マークアップエンジニア 浜 俊太朗 2009/4/30 ページ表示高速化をサーバの設定だけに任せていませんか? HTMLやCSS、JavaScriptの書き方でも速くできます(編集部) 連載第1回の「Webサイトを“速く”表示させる7つの計測ポイント」では、YSlowを使って速度に関する問題を調査しました。 今回は、CSS・JavaScript・HTMLの工夫で速度を改善する下記5つの方法を紹介します。中にはYSlowの指摘に含まれないものもありますが、併せてチェックしていきましょう。 CSSはソースコードの上部に記述する JavaScriptはソースコードの下部に記述する CSSとJavaScriptを書く順番 JavaScriptを圧縮して読み込みを速くする 読み込みが遅いブログパーツには要注意 【1】CSSはソースコードの上部に記述する 連載第1回では、「CSSは
Dynamic Text Replacement Solutions | Dezinerfolio テキストを動的にアンチエイリアスがかった綺麗な画像にする仕組みが色々とあるみたいです。 FlashやPHP、CSS、JavaScriptの要素をトリッキーに混ぜ合わせているところも見所です。 P+C DTR PHP+GDで綺麗なテキストを生成し、JavaScriptでbackground-image設定して表示します。 そもそもがテキストになっているので、HTMLもクリーンです。 見え方は以下のように、綺麗なテキスト 生成されたHTMLはh5要素として、次のようになっています。 <h5 style="background-image: url(image.php?text=You%27re+Look%27n+At+It&tag=h5);">You're Look'n At It</h
Justify elements using jQuery and CSS jQueryとCSSを使ってフォームのinput要素を楽に整列させる方法が紹介されております。 何ができるか?というのは次の図を見て頂くのがはやいでしょう。 ビフォア ↓↓↓↓ アフター これを実現するために、CSSとマークアップによって実現するのが普通ですが、jQueryによってもっとスマートに出来るようですね。 具体的には、次のように、label の中で width がもっとも大きいもののサイズを得て、そのサイズにJavaScriptで調整しちゃうというものです。 $(document).ready(function() { var max = 0; $("label").each(function(){ if ($(this).width() > max) max = $(this).width(); });
WEBデザイナーという肩書きを使う場合にあったらいいかもなスキルとWEBで見れる無料教材とリソース集 2009年03月23日- WEBデザイナーという肩書きを使う場合にあったらいいかもなスキルとWEBで見れる無料教材とリソース集。 プログラマが1ヶ月でWEBデザイナーに転身する方法 というエントリを見て、プログラマの方々のWEBデザインに関する関心の高さを見て書いてみます。 WEBデザイナーといっても色々な知識が必要で、かつ、最近はフリーのテンプレートも豊富にある中、どれだけ出来ればWEBデザイナーとして成り立つのだろう?という疑問がありましたので考えてみました。プログラマの方で、WEBデザインをやってみたい。また、全くの素人だけどWEBデザイナーを仕事にされたいという方の参考になれば幸いです。 最低限の知識編 1. HTMLとレイアウト力 まず、知っている人には物凄く当たり前の事ですが、
Select Cuts Off Options In IE (Fix) IEでSelectボックスの幅を狭めつつ、内容もちゃんと見れる有用サンプル IEでSelectの幅を指定してしまうと、内容もその幅に伴い、次のように縮小されてしまいますが、中身はちゃんと見せるサンプルが公開されています 次のように、ちゃんと中身は表示できるようになります。 派手なテクニックではないですが、色々なところで使えるテクニックかもしれませんね。 関連エントリ クリーンなデザインでピュアCSSなフォームを作るサンプル 斬新なコメントフォームデザイン集 CSSでデザインされたテーブルレスでクールなフォームサンプル CSSでフォームデザインをする際のチュートリアル
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
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く