すげー便利！ドメイン別にスタイルシート（CSS）を当てる方法。
ドメイン別にスタイルシートを当てる方法。 iframe[src*="youtube.com"]{ width: 500px; height: auto; } iframe[src*="nicovideo.jp"]{ width: 320px; height: auto; } 例えば、YouTubeの外部プレイヤー（iframe）の横幅は500にしたいけど、ニコニコ動画の外部プレイヤーは320にしたいときは、上のように書くと上手く動作します。 a[href*="wayohoo.com"]{ color: red; } a[href*="goryugo.com"]{ color: blue; } ちなみに、aタグをドメイン別に指定する場合はこのようになります。(wayohoo.comは青色、goryugo.comは赤色とする場合) タグ名[属性名*="URL"]{ /* CSSの中身 */ }
「Compass」、基礎から応用まで！ | 株式会社LIG
こんにちは、デザイナーの王です。 今回の記事ではCompass使いになるための必要最小限の知識から応用まで、体系的にひと通り紹介していきます。 全くの初心者でも問題ありません！ はじめに結論を言うと、CompassでCSSを書くと 早い！ 見やすい！ メンテしやすい！ コード量がぐっと減る！ 一度使い出したら最後、もう元には戻れない！ 一体どこまで便利なのかずらずら書くよりも、百聞は一見にしかず！ 簡単なプロジェクトを通して、各特徴について紹介した短いデモ動画を用意したので、まずはこちらを見てください！ Compassとは？ Compassを語る前に、まずは「Sass」を知っておく必要があります。なぜなら、CompassはSassを元に開発したフレームワークだからです。 Sassとは では「Sass」とは何かと言うと、正式名称は「Syntactically Awesome Style Sh
HTML5で組んでるならこの魔法のjsも入れておけっていう話
現在、A!@attripさん発で話題になっている「たった2行でIE5.5～IE8をモダンブラウザの挙動にする魔法のJS」という記事。 Webデザイン界隈では当たり前のものですが、実はもうひとつ追加しておくといいかもしれないjsがあったりします。 Photo:html5 By michael pollak IE8以前のブラウザはどうにもこうにも開発者泣かせなわけですが、ie9.jsとcss3-mediaqueries.jsを突っ込むことで、モダンブラウザと同じ挙動にすることができちゃいます。 もう少し具体的に書くと、ie9.jsを組み込むことで、 position:fixed;に対応 max-width、max-heightに対応 属性セレクタ、擬似クラスに対応 margin:0 auto;でのセンタリングに対応 透過PNGに対応 opacityに対応 といったことが可能になります。要はCS
JavaScriptなしで地域ごとに色が変わる日本地図を作る
HTML、CSS、画像だけで、マウスオーバーした地域ごとに色が変わる日本地図を作る方法です。 文字だけではちょっと意味がわかりにくいかもしれませんので、とりあえず↓の日本地図の上にマウスカーソルを載せてみてください。クリックするとページ遷移しますが、このデモでは Not Found になりますのでご注意ください。 デモページを別のタブで開く このデモをダウンロード（ZIP） 2009年に仕事で「日本地図をクリックすると地域ごとに違うページに飛ぶ」ページを作らなければならなかった時に、当時 JavaScript も書けないし Flash は PC に入っていなかったので、HTML と CSS だけで作ってみました。 このデモはDOCTYPE宣言が HTML5 になっていますが、当時 HTML 4.01 で、IE6 でもきちんと動くように作りました。 ですので、特殊なタグやプロパティは使わず
今すぐ使いたくなる！個性的でわくわくする動きのスライダー12選（Javascript・CSS3） | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、サリーです。 最近は無料のスライダーでも良質のものがたくさん溢れていて、どれを使っていいか悩みすぎてしまう。。ということがよくありまして。 「これだ！」という決め手があればなあ。ということで、今回は他との違いを見せつける個性的なスライダーばかりを集めてみました。 今すぐ使いたくなるような、わくわくする動きでいっぱいです。デモページと共に紹介していきます。 【最新スライダーはこちら！】 ☞ 高機能なJavaScriptの人気スライダープラグイン4つを実際に使ってレビューしてみた Slit Slider Revised http://tympanus.net/codrops/2012/10/24/slit-slider-revised/ DEMO： http://tympanus.net/Tutorials/FullscreenSlitSlider/ 絵が真ん中から横にバカッと、時
CSS ボタンのグラデーションとボーダーをグレースケールの RGBA で
CSS でボタンを作るとき、背景のグラデーションとボーダーをグレースケールの RGBA にしたものをもとにすると、背景色やフォントを変えるだけでバリエーションが作れるので便利です。 button { background-image: linear-gradient(rgba(255, 255, 255, 0.1), rgba(0, 0, 0, 0.1)); background-origin: border-box; border: 1px solid rgba(0, 0, 0, 0.1); border-radius: 0.25em; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1), inset 0 1px rgba(255, 255, 255, 0.1); cursor: pointer; display: inline-block; line-he
カラーツール「0to255」で色を決めてメニューを作ってみる
このブログで何回か紹介している0to255というオンラインツールですが、かなり便利だと思うので使い方を説明してみます。 色に関する知識が乏しい私ですが、0to255を使うとまとまった感じの配色になるので重宝しています。今回は0to255を使ってメニューを作る際の色選びをしてみます。 0to255の使い方 まず、0to255の使い方についてですが、下の画像のように「PICK A COLOR」をクリックしてカラーコードを入力します。 今回は「#ff7400」を指定してみます。 すると、指定した色より明るい色と暗い色がグラデーションになってたくさん表示されます。近い色がたくさん表示されますので、これらをうまく使うとまとまった感じのメニューが作れます。 メニューの配色を決める ということで、以下のような配色でメニューを作ってみます。 メニュー背景のグラデーションと境界線の1pxラインに使う色を選ん
Chrome Developer Toolsのテーマを開発者好みに切り替える裏ワザ - Chrome Life
Chromeをメインで使っている開発者の方は、Developer Toolsを開く機会も多いと思います。 一昔前はFirefoxでFirebugsを使っていた人も、Chromeのバージョンが上がったことによりDeveloper Toolsでも同等のことができるようになりました。 Chrome Developer Toolsを使えば、WebインスペクターでDOMツリーの確認やCSSの微調整、JavaScriptのソースデバッグなどができるので非常に便利です。 しかし、開発者であれば、使えば使いこなすほど自分好みのスタイルに合わせたくなるものです。 特にソースを見る時のカラーリングは、開発スピードにも影響するほどです。 できれば、Chrome Developer Toolsのスタイルも普段使っているエディタと同じスタイルに変更したいですよね。 そこで今回は、Developer Toolsのテー
WEB制作のIE対策いろいろ チートシートやHTML5/CSS3対応方法など | DECONCEPTER
かわいいあいつIEとの付き合い Internet Explorer 通称 IEはかわいいやつである。私の心を掴んで離さない。IEについて言及すれば火が燃え上がる、存在が燃えている最強の火種だ。 なぜこんなにIEはかわいいのか。テーブルタグでウェブサイトをレイアウトする時代からCSSでレイアウトする時代へ移行する際はIE5/IE5.5/IE6/Mac IE5.2でどうしたら同じレイアウトを実現できるかを苦悩させてくれた強敵（とも）だった。 昨今のHTML5バンザイWEB制作においては、最新機能を使ってWEBサイトを作る上でIEの表示や機能をどうするかという話題が常にモチキリだ。 そんな我々の心を離さないIEの対策をする上で一つ一つ表示を確認しながら作っていたら日がくれて定年を迎えてしまう。IE定年を迎えないためにある程度どういう対応が必要かよくまとまっているサイトを見ていこうと思う。 チート
CSSスプライト活用でリクエスト数を削減してスマホでも高速通信（Retina Displayにも対応） | DevelopersIO
CSSスプライトの利用について スマートフォンの普及に伴って、ネットへのアクセスは自宅のPCでのアクセスから出先の無線通信環境下でのアクセスへと移行している傾向が少なからずあるかと思います。 ウェブサイト等を快適に閲覧するための条件の一つに、より少ないサーバーへのリクエスト数が挙げられます。 複数の画像を集約した1枚の画像にまとめるCSSスプライトを活用することでリクエスト数を減らすことができます。 キャッシュに格納されたスプライト画像はページ遷移の際の高速通信につながりますので、 各ページで汎用的に使用されるアイコンなどをCSSスプライト化するとよいでしょう。 それらをRetina Displayのような高解像度ディスプレイに対応する方法を合わせて取り上げたいと思います。 方法 1.画像を用意する 非Retina Display用とRetina Display用の画像を2枚用意します。
【Webデザイナ－・コーダー向け】すぐに使えるSCSS入門｜Mixinsを作ってみよう編 | DevelopersIO
はじめに。 基礎編、compass編、知らないと損する機能編と今回の「Mixinsを作ってみよう編」で第4回目になります。 全部読んで理解すれば、もうSCSSをがっつり使えるようになっているんじゃないでしょうか！僕もこのシリーズ記事を書きながらドキュメントを読んで色々知ることができました。 今回はプログラムを書いたことのない方にはほんの少し難しいかもしれません・・・でも、投げ出さずに使ってみてください。理解できたときには少しプログラミングが好きになると思います。 それでは、第4回目「Mixinsを作ってみよう編」いってみよー。 SCSS（Sass） Mixinsとは SCSS（Sass） Mixinsとは簡単に言うとSCSS全体で再使用することができ、多種多様なスタイルを生成できる機能です。 引数を使い生成するスタイルを制御することもできます。 Mixinsの基本 Mixinsを使うには2
An analogue clock using only CSS
Having read the blurb around Safari’s CSS transitions I opted to familiarize myself with a quick project — the aim of which was to create a functional, CSS only, analogue clock. Result Experiment: CSS Analogue Clock Experiment works in Safari 4 Beta and Google Chrome. A working clock that optionally resorts to JavaScript to grab the current time (can be achieved by other means). 12 Feb 2012: Exper
フォントサイズpx,em,%,pt
Matahari88 | Link Alternatif Resmi Untuk Login Dan Daftar Situs Matahari 88 Online games are currently still a very fun object to fill our free time when we are bored at home. However, did you know that there is an online game site that is very viral and has become a mainstay for online game lovers in Indonesia? The game site is Matahari88. Matahari88 is a trusted online gaming site in Indonesia t
コーディング速度を3倍早くするSass（Scss）のフレームワーク”Compass”が本当に便利 ｜https://wp.yat-net.com/name
2012年 10月 31日 コーディング速度を3倍早くするSass（Scss）のフレームワーク”Compass”が本当に便利 カテゴリ： Sass タグ：CodingSassScssコーディング効率化 \ CSSのメタ言語Sass（Scss）。これ使うと凄く便利でコーディングスピードが上がるんですが、これをより便利に使えるようにしたフレームワークのCompassがもの凄く便利なので記事にしました。赤い彗星みたいなタイトルになってますが、使いこなせばかなり早くなります。 1.Compassとは 2.インストール 3.初期設定 4.Sass（Scss）ファイルをCSSファイルに 5.実際に作る 6.参考文献 compassとは オープンソースのCSSオーサリングフレームワークです。Sassがベースになっており、mixinで予めベンダープレフィックスが定義されていたりと、Sassをより便利に使え
レスポンシブWebデザインでテーブルを使う時の小技
tableやtr、tdなどのテーブル関連のタグのdsiplayプロパティを変更することでデザインを変更します。 tableタグのdisplayの値はデフォルトではtable、tdやthタグはtable-cellといった具合ですが、この値をblockやlist-itemなど他の値に変えます。 @media only screen and (max-width:420px){ tbody tr{ display: block; margin-bottom: 1.5em; } tbody th, tbody td{ display: list-item; border: none; } ..... } Chrome、Safari、Firefox対応。 IEではTableのdisplayを変更しても表示は変わらないようなので非対応です。 条件分岐コメントを使ってIEにはメディアクエリを読ませないよ
Sass+compass 使い方 | code up
リファレンス CSS3 Layout Typography Box Shadow ブロック要素(block element)に対してinset(内側)あるいはdrop(ドロップ; 外側)の影をつけることができる。 デモ(このサイト) | デモ(compass内) 設定可能なデフォルト値 (Configurable Variables) $default-box-shadow-color: #333333影の色 $default-box-shadow-h-offset: 0水平方向の位置(px)。プラスで右方向 $default-box-shadow-v-offset: 0垂直方向の位置(px)。プラスで下方向 $default-box-shadow-blur: 5px影のぼやけ・にじみ具合の半径サイズ。マイナスは不可 $default-box-shadow-spread: 0影の輪郭を広げ
Configuration Reference | Compass Documentation
The compass configuration file is a ruby file, which means that we can do some clever things if we want to. But don’t let it frighten you; it’s really quite easy to set up your project. Basic format Most configuration properties are a simple assignment to a configuration property. For example: css_dir = "stylesheets" Most configuration properties have a value that is a “basic” type. There are thre
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Ceaser - CSS Easing Animation Tool - Matthew Lein
bashalog.biz
5509.me