「sass」の検索結果 - CSS HappyLife
需要が有るのか無いのかも分からず、半分以上は勢いで書いてたSassを覚えようシリーズですが、少しでも利用する人が増えるきっかけになれば幸いです。 カテゴリ一覧から全部見れますけど、一応【Sassを覚えよう！】の全記事一覧です。 【Sassを覚えよう！Vol.1】はじめに 【Sassを覚えよう！Vol.2】何がすごいの？プログラムが出来なくても使える？効率がホントに上がるの？ 【Sassを覚えよう！Vol.3】一番カンタンな環境構築（Scout編） 【Sassを覚えよう！Vol.4】Sassの基本的な記述方法 【Sassを覚えよう！Vol.5】環境構築（黒い画面編） 【Sassを覚えよう！Vol.6】黒い画面での実際の運用に関して 【Sassを覚えよう！Vol.6.5】バッチファイルを使ってカンタンに黒い画面でSassを利用する 【Sassを覚えよう！Vol.7】ファイルを分割して管理を楽に
疑似要素のカラー指定をインラインで行いたい場合のテクニック | コリス
ウェブページを作る際、運用などでさまざまな制約が生じることがあります。 ここでは、擬似要素を使ったスピーチバブルのカラーの指定をインラインで行いたい場合のテクニックを紹介します。 Speech Bubble Arrows that Inherit Parent Color [ad#ad-2] 下記は各ポイントを意訳したものです。 画像を使用しないで、吹き出し状のエレメント（スピーチバブル）を作る時、小さい三角を疑似要素で作るとします。 下記のような感じです。 もし、このピンク色の指定をCSSファイルにセットしないで実装する必要がある場合、どのようにしたらよいでしょうか？ スピーチバブルのdiv要素にインラインで、背景をピンクに指定してみます。 HTML <div class="speech-bubble" style="background: pink;"> I like bananas,
clearfix のアレンジ版作ってみました - understandard
Firefox 3.6 が clearfix の影響で margin-bottom が margin-top にもかかるという話を聞いて、普段使ってた clearfix で試してみたところ、同様の現象が出たので、対応版を作ってみました。 追記（2012年2月7日）: 公開当初のコードでは問題があったので、最後に追記しました。 ネタ元の記事は以下。 firefoxでmargin-bottomがmargin-top | 乱雑モックアップ この記事で紹介されていた clearfix は以下ようなもの。 僕はこの指定から height:0; を抜いたものを使っていました。 .clearfix:after{ content: ''; display: block; clear: both; height: 0; } .clearfix{ /zoom: 1; } この記事の公開時点（2012年2月1日
CSSのelement()関数
せめてWebKitに実装されてからとか思ってたけど、CSS Image Values and Replaced Content Module Level 3がLast Callになったのでいい機会ということにしてelement()関数についてエントリを書く。element()関数は任意のIDを引数に取ることができ、その要素を画像として参照できるというなかなかの荒業な関数。具体的には画像のサムネイルを簡単に作成できるとかそういうものをイメージするとわかりやすいと思う。 Demo: Filmstrip View いわゆる「フィルムストリップ」のようなものを作るデモだけど、element()はまだFirefox 4以降でしかサポートされていないので、ChromeやSafariなどでは意図した通りに動かない。Firefoxなら下に並んだサムネイルをクリックすると大きな画像が表示される。切り替えやア
CSS Transformsについてのメモ
既に色々なデモページが作られていたり、実用されていたりするCSS Transformsですが、ちゃんと理解したかったので調べてみました。 まだそんなに自信はありませんが、以前よりは理解できた気がします。 というわけなので、自分が分かる範囲で説明してみたいと思います。 CSS Transformsは2Dと3Dとで別になっていますが、将来的には SVG Transforms と合わせて一つの仕様になるそうです。 今はまだ別々なので、それぞれにリンクをしておきます。括弧内は現時点での最新の日付です。 WD: CSS 2D Transforms（2011/12/15）ED: CSS Transforms（2011/11/28）WD: CSS 3D Transforms Module Level 3（2009/03/20）ED: CSS 3D Transforms（2011/03/21）新しくなった
CSS3で線（border）をグラデーションさせるテクニック
Illustrator とかでよくやる「塗りとパスのオフセットを使って実現する線のグラデーション」を、CSS3で実験してみました。 ↓とりあえず、border を使った場合と、線をグラデーションさせた場合の作例です。CSS だけで作っています。モダンブラウザで見てください。 微妙な違いかもしれませんが、線にグラデーションを適用した方、よりリアルで繊細な印象になります。 作り方 border は使いません。替わりに、ネストしたボックスを作り、親ボックスをグラデーションさせることで、線がグラデーションしているように見せます。 HTML 内側に span を入れ込んで「重ねた塗り」を実現します。 <a href="#" class="button"><span>ボタン</span></a> 外側のボックス (a) の padding が線幅になります。内側のボックス (span) は、白で塗りつ
Web屋のためのHow to Vim (チラ裏) - Archiva
Make a note of it: Web tech, montaineering, and so on. Note: この記事は、3年以上前に書かれています。Webの進化は速い！情報の正確性は自己責任で判断してください。 Vim Advent Calendar 2011 43日目の記事です。というかもう2012年ですね！ あけましておめでとうございます。この度は前回の続き。本当は翌日にでも書くつもりだったけど伸ばしに伸びたWeb屋のためのVim特集をお送りします。初めに言っときますが、3部作です。つまりこの記事は2/3。どうしてこうなった。 Web屋のための Vim-Starter-kit Demo: Vim Starter-Kit from sigwyg on Vimeo. はい、けっきょく作ってしまったんですよ。初心者導入キット。黒い画面恐怖症の方々のためにGit依存しないように作
自分の行動ログを振り返ってみた。
こんにちは。Chieです。 最近、よく耳にする会話。 「自分の行動ログって、溜めるのはいいけど、振り返ることある？」 自分はどうかといえば、、、 写真は撮りっぱなし。 チェックインのログは溜めっぱなし。 それなのに、いつも電池の残量を気にしながら、「記録」をし続ける。 そこでせっかくなので、膨大で断片的な「自分の行動の記録」を振り返る方法について、思いつくものをいくつか試してみました。 ■foursquareのチェックイン履歴を地図で見る 習慣となっている、foursquareでのチェックイン。 自分の行動範囲をひとめで地図に表示してくれるのが、チェックイン履歴のKMLでのフィードです。 PC版のfoursquareにログインし、履歴の「すべてを見る」を選択。 ページの一番下にオレンジ色のフィードボタンがあるので、そちらを押します。 次の「feeds.foursquare」のページで、チェ
マナゴロク
Tacayce_Tellalie @tellalie97 引きずり、ね。で、明智光秀がなんだって？RT @managon: 海江田さんの耐え忍ぶ姿が、明智光秀と重なる。信長を引きづり落とすか！ 2011-08-04 09:10:09
MozillaZine.jp フォーラム • トピック - FireFox8に更新後ファビコンが表示されなくなってしまいました。
OSはXPです。 FireFox7から8に更新後，一部のページのファビコンが表示されなくなってしまいました。 ブックマークもメニューバーもどちらも表示されません。 （点線の四角が表示されているだけです） ヤフーやこちらのフォーラムなどではファビコンは表示されていますが，証券会社のサイトなど，一般的なページでも表示されないものが複数あります。 「ファビコン」などで過去ログ検索しましたが当てはまるものを見つけられなかったので質問させていただきました。どうぞよろしくお願いいたします。
desert.vim — 名無しのvim使い
summary : colorname : desert url : description : vim7にデフォルトでインストールされている フルサイズイメージを見るためにクリック — サイズ: 78.9 kB
CSS3を極めたいなら知っておきたい三角形を作る3つの方法
CSS3を使い始めていくと、ぶつかる壁に「三角形みたいに尖った角」をどう表現するかというのがあります。三角形って思ったより難しいです。 まぁ無理しないで、イメージで作ればいいんですけど、ちょっとした装飾だったりすると、ちょこっとCSSで作れると楽な時もあります。 そこで、CSS3で「三角形みたいに鋭角を作る方法」を３つ紹介します。ここで紹介する方法には、メリットとデメリットがありますので、使い分けれるようになるといいと思います。 1. グラデーションを使う こちらの記事でも紹介しましたが、背景を background-size と background-position で4分割して、斜めのグラデーションを使うことで角を落とすことができます。 コード 4分割して、4つのグラデーションでそれぞれを塗ります。この方法では、塗りを使っているので、カスタマイズ性が高いですが、グラデーションを使って
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
