グラデーションの中央がグレーに濁ってしまう仕組みをくわしく解説、美しいグラデーションをCSSで実装する方法
グラデーションを作成した時に、中央がグレーに濁ってしまうこと（グレーデッドゾーン）があります。なぜこの現象が起こるのか、どうすれば回避できるのか、鮮やかで美しいグラデーションをCSSで実装する方法を紹介します。 Make Beautiful Gradients in CSS by Josh W Comeau 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに CSSグラデーションが算出される仕組み おすすめのカラーモード これらの知識を活用する 美しいグラデーションを生成できるツール 終わりに はじめに さっそくですが、CSSで実装したイエローからブルーの線形グラデーションをご覧ください。
定義リスト[dl]のdt/ddを横並びにする方法 | たねっぱ！
定義リスト dl のdt/ddタグを横並びにする方法を紹介します！ floatをつかってキレイに整えましょう！ こんばんちわ、やのっぱです。(´・ω・｀) 今回は定義リスト[dl]の中身(dtとdd)を横に並べる方法やってみるよ。 その前に定義リストってなん？？？美味しいの？ ッと思ってたら、どこからともなく天の声が！！←天から聞こえとるがな 「説明しよう！定義リストとは定義（dt）する用語を説明（dd）するリストである！」 つまりは用語があって、それを説明する文がセットになってるときに使うリストってことです。 もっと噛み砕くと[これ]はこういう[意味]やで～ってことです。 やのっぱ（ここdt）毎日せこせことマークアップすることに快感を覚え、しかし打つのは面倒いので如何にして楽にマークアップするかと言うことに情熱を注ぐ汎用人型まーくあっぷえんじにゃぁ（ここdd） こんな感じで使ったりします
![定義リスト[dl]のdt/ddを横並びにする方法 | たねっぱ！](https://cdn-ak-scissors.b.st-hatena.com/image/square/4e3d0e670c454b9af93366310784f905b0ebd3c7/height=288;version=1;width=512/https%3A%2F%2Ftaneppa.net%2Fwp-content%2Fuploads%2F2013%2F01%2Fcss2.jpg)
拡張はセキュリティリスクなので、なるべく入れない方が良い (#3146931) | Webブラウザアドオン「Styish」、ユーザーデータの収集を始めて騒動に | スラド
「入れているアドオンの数が多いほど、ブラウザを使いこなしている上級者である」と考えている人もいるようですが、アドオンを入れれば入れるだけセキュリティリスクが高まったり重くなったり不安定になったりするので、ブラウザの標準機能でできることは標準機能でやった方が良いでしょう。 Firefox の場合、昔のバージョンでは標準であったような気がする chrome ディレクトリや userContent.css ファイルが無くなっていますが、自分で作ることで Firefox 最新版 (50.1.0) でも、拡張無しでユーザーCSSが適用可能です。 プロファイルディレクトリ "%AppData%\Mozilla\Firefox\Profiles\【ランダムな英数字】.default" を開く"chrome" というディレクトリを作成する"userContent.css" というファイルを作成する例えば、
みんな大好きリキッドレイアウト～固定幅＋リキッドレイアウトに挑戦～ « SetucoCMSプロジェクト
はい、こんにちは。リーダーのskyguildこと三上です。 SetucoCMS合宿@2011のLT大会でリキッドレイアウトの話をしました。今回はそのスライド内で語り切れないデモの部分を中心に解説してみます。 リキッドレイアウトのLTスライド うまく表示されない方は下記のリンクからご覧ください。 みんな大好きリキッドレイアウト（別窓で開きます） 要約 リキッドレイアウトとは、可変レイアウトの一種で、ブラウザ幅に対して％で幅を指定する。 リキッドレイアウトなら閲覧環境に合わせて最適なレイアウトに可変できる！ とはいえ、「ナビゲーションの幅が可変すると使いづらい」とか一部は固定幅にしたい。そんな時の固定幅+リキッドレイアウト。 参考にしたサイト：「サイトの横幅」再論：950px時代のウェブデザイン 実装方法 というわけで、普通のリキッドレイアウトと、固定幅+リキッドレイアウトの実装方法について解
ブラウザのスクロールバーをデザインする「perfect-scrollbar」 - ┗┐＜(՞ਊ՞)＞┌┛
ブラウザのスクロールバーはダサいです．まだ右端のスクロールバーなら許せるところはあるのですが，ページ内コンテンツでoverflowなどで出現するスクロールバーには怒りを覚えます． デフォルトのデザインがあまりにも嫌なので色々探していて，jScrollPaneやらを見てたのですが，あとで動的にdivを追加した時，スクロール範囲が自動で大きくならず，スクロールできなかったり，なんか動きモッサリしている気がして使う気になりませんでした． そこでもっとスマートに書けるライブラリは無いのか？と思って探して見つけたのが「perfect-scrollbar」です． http://noraesae.github.com/perfect-scrollbar/#Demo デモページに飛びます．あずにゃんの画像が設置されていて，画像サイズ（正確には背景画像が設定されているdiv）の大きさに合わせてスクロールバー
CSSセレクタ20個のおさらい
CSSセレクタって意外と分かっていなかったりするので勉強ついでにまとめてみました。比較的実用的かなと思うものを20個紹介していきます。いい復習になればと思います。 CSSセレクタはスタイルを適用する対象を指定するものです。普段何気なく使っているclassやidなどもセレクタの１つです。 属性や要素といった堅苦しい用語が出てきますので図で簡単に説明します。 私のように基礎から勉強していないと、要素や属性と聞いてもピンときませんが、知ってみるとなんてことはないですね。 また、IEが対応しきれていないCSS3のセレクタもありますが、IE6～8でもCSS3セレクタが利用できるツールの決定版「Selectivizr」 で紹介したようにCSS3セレクタはie対策も容易なのでぜひお試しください。 SelectivizrはCSSを外部ファイルで指定した方がいいのですが、今回のサンプルはCSSを外部ファイル
iOS5のMobile Safariから使えるようになったHTML5・CSSを試してみました【後編】 - くらげだらけ
前編ではiOS5のMobile Safariから使えるようになったHTMLやCSSの要素などについて試してみた、半分だけ紹介・解説しました。まだ前編を読んでいないという方は先に前編を読んでおくことをおすすめします。 →iOS5のMobile Safariから使えるようになったHTML5・CSSを試してみました【前編】 ざっと今回試してみたプロパティやテクニックをもう一度振り返っておくと以下のような感じです。 position:fixedを使ったタブUI overflow:scrollを1本指ですいすいスクロールさせる Web Symbols typeface CSS Only Transition Effects 新しいInput typeとネイティブっぽいselect UI Inline SVGとSVG icons 前編では最初の３つを紹介・解説したので、後編では残りの３つを紹介したいと
Mozilla Re-Mix: Firefoxのインターフェースを自分仕様にカスタマイズするためのuserChrome.cssコードリスト（とりあえず10個）
Firefoxのインターフェースなどをカスタマイズすることができる「userChrome.css」の編集については今までいくつか記事にしましたが、それらはほんの一部の例にすぎません。 userChrome.cssで編集できる項目はまだまだありますので、少しずつまとめまがら紹介していきたいと思います。 とりあえず最初の10個をまとめてみました。 初めての方はuserChrome.cssを編集するための準備をしておきましょう。 基本的にデフォルトインストールした場合、userChrome.cssというファイルは以下の場所に存在します。 ●Windows XPの場合 C:\Documents and Settings\ユーザー名\Application Data\Mozilla\Firefox\Profiles\******（8文字のランダム英数字）.default\chrome/ ●Windo
CSSは分かるけど jQuery は苦手 … という人が jQuery に親しんでくれるといいなーと思って書きました
Webデザインをしていると、HTML と CSS だけではできない表現ってありますよね。そんな時によく使うのが jQuery。今回は jQuery っていまいちよく分からない ... っていう人が、jQuery に少しでも親しんでもらえたらいいなーと思って、知ってる事をまとめてみました。なので jQuery 初心者さん向けの記事です。 とっても当たり前なんですけど、Web サイトは基本的に HTML で書かれていて、デザインは CSS で装飾されていますよね。最近では CSS3 の登場で、簡単なアニメーションも CSS で作れるようになりました。でもクライアントワークでは、まだまだ CSS3 を使える部分が限られているし、Webデザインに少し動きなどをつけたい時などは、まだまだ jQuery を活用する事も多いです。 私は Javascript が苦手で、jQuery もどちらかというと苦
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CSSレイアウトを学ぶ
http://ideahacker.net/2013/07/26/5962/