cssに関するgarbagetownのブックマーク (30)

  • フロントエンドの開発を加速するCodeKit :: 5509

    また紹介エントリーか。。。Sass布教活動の一貫です。どうも。 SassとかLESSって使ってますか?書くのがとても億劫なCSS(個人の感想です)を快適に書くことが出来るようになる上に、始めた頃の楽しさが戻ります(個人の感想です)。詳しいことは以下のエントリかたがたを見てもらうとして。Sassの記事が多いのは僕がSass使ってるからです。Sass推しです。 CSSとフレームワークとメタ言語 Sass、そしてSassy CSS (SCSS) Sass を今すぐ実務で使おうよ! Sassを覚えよう LESS初心者向けのナニカ というか LESS & Sass Advent Calendar 2011() をみてください。 浸透しにくい理由は色々ある気がしますが・・・ コンパイルがめんどい そのとおりです。慣れですけどね。とっつきにくい感をこいつが出してるのはその通りでしょう。 黒い画面がちょっ

    garbagetown
    garbagetown 2012/02/21
    mac os x lion用のideっぽいツールでlessやsassやcoffeescriptが書けるらしい。ベータ版は無料なので一応落としておこう
  • Twitter Bootstrapのさまざまなテーマをダウンロードできる『Bootswatch』 | 100SHIKI

    個人的にいじっていて便利そうだったのでご紹介。 Bootswatchは、Twitter社が提供するTwitter Bootstrapのさまざまなテーマをダウンロードできるサイトだ。 Twitter Bootstrapといえば簡単に今風デザインのサイトを作れるCSSフレームワークだが、それで作ると「あー、黒いトップバーだし、Twitter Bootstrapね」的になってしまうのが難点だった。 最新版ではテーマをカスタマイズできるツールもついているが、配色などを考えるのが面倒な人もいるだろう。そういう方はBootswatchを利用してみてほしい。 それにしてもどんどんウェブ作りが簡単になっていきますな・・・。

    Twitter Bootstrapのさまざまなテーマをダウンロードできる『Bootswatch』 | 100SHIKI
    garbagetown
    garbagetown 2012/02/19
    すばらしい。どんどん便利になっていく
  • Sassで行こう!

    Translation of: Getting Started with Sass - A List Apart CSSの持つその簡明さは欠かせない特徴の一つで、それは最も歓迎されている点でした。CSSによるスタイルシートは、セレクターといくつかの適用したいスタイル情報を含むルールを羅列したものに過ぎません。しかし、WebサイトやWebアプリケーションが巨大に、そして複雑になり、様々なデバイスや画面サイズに対応せざるを得なくなった現在、この簡明さという特徴―fontタグやテーブル・レイアウトの淘汰に大いに役にたったもの―が大きな足かせになっています。 簡単な計算機能や変数を追加するなどといったCSSの修正案が過去に提示されましたが、どれもブラウザー・ベンダーには採用されませんでした。仮にこういった新しく素晴らしい拡張されたCSSがあるブラウザーに実装されたとしても、それが実用に耐える程度に

    garbagetown
    garbagetown 2011/12/01
    sass入門の翻訳
  • 諸君、私はIEが嫌いだ

    諸君、私はIEが嫌いだ 諸君、私はIEが嫌いだ 諸君、私はIEが大嫌いだ デフォルトで入っているのが嫌いだ アンインストールできないのが嫌いだ シェルに組み込まれているのが嫌いだ Windows Updateで使わなければならないのが嫌いだ バグが多いのが嫌いだ セキュリティホールが多いのが嫌いだ 95で 98で Meで 2000で XPで Vistaで MacOSで Unixで 世の中に存在するありとあらゆるIEが大嫌いだ 綿密に入り組んだHTMLCSSが IEによりいい加減に解釈されるのが嫌いだ CSSファイルのセレクタ毎に並べた属性と値がページ保存でバラバラにされたときなど心が沈む OSと密接に関連しているのが嫌いだ 悲鳴を上げてIEに読み込ませたWebサイトが OSごとクラッシュさせたときなど 胸がすくような気持ちだった 悪徳な業者により放たれたJavaScriptが私のシステム

    諸君、私はIEが嫌いだ
    garbagetown
    garbagetown 2011/11/21
    あるだろうと思って探したらやっぱりあった
  • CSSバグリスト

    2020.05.23 Sat【保存版】ラッキーニッキーで3年遊んでわかった全て! Uncategorized 2020.05.23 Sat【保存版】ラッキーニッキーのライブカジノでおすすめを厳選! Uncategorized 2020.05.23 Sat【必見】ラッキーニッキーのボーナス情報を網羅!登録時や入金でお得! Uncategorized 2020.05.23 Sat【完全版】ラッキーニッキーのスロットおすすめランキング Uncategorized 2020.05.23 Satラッキーニッキーのサポート情報!エラー発生時はどうする? Uncategorized 2020.05.23 Sat【必見】ラッキーニッキーのVIP制度!ハイローラー向け Uncategorized 2020.05.23 Sat【保存版】ラッキーニッキーの入金・出金や限度額を解説! Uncategorized

    CSSバグリスト
    garbagetown
    garbagetown 2011/11/16
    本当はこんなサイト見たくなかった
  • IE6のバグのまとめ - Webtech Walker

    XHTML+CSSでコーディングするときにブラウザのバグを知っているか知らないかでは大きく違いますよね。とりわけ他のブラウザよりバグが多いIE6さんのバグをまとめてみることにしました。そろそろIE7の自動配布が始まるころなので忘れないうちにということで。 とは言ったもののIE6のバグを改めて見てみると多い・・・多すぎるよ!逆にこれだけのブラウザがあるからこそコーダーという職種がある気さえしてきます。 今回は『CSSバグ辞典スレッド』の要約のWinIE CSSバグリストからIE6のバグを抜き出して自分でわかりやすいように種類わけしてみました。これで全てではないですがこれだけ知ってればかなりのケースで対応できると思います。 2012/07/31 追記: リンク先がなくなったのでリンクを外して一覧だけ残しときます。 ちなみにこの種類分けも厳密ではないのであしからず。 ボックスモデル maring

    IE6のバグのまとめ - Webtech Walker
    garbagetown
    garbagetown 2011/11/16
    こんなにあるのか。ゲロ吐きそう
  • CSSでレイアウトするなら絶対覚えておきたい配置のルール:フロートや絶対配置、z-index とかいろいろ

    最近改めて CSS の基、要素の配置、レイアウトについて学習しました。過去に CSS でのレイアウトなどの記事を書いた事があるんですけど、改めて勉強してみたら、いろいろ間違えて解釈していたなー ... っていうか、基が分かってなかったんだなーと反省 ...。今回は CSS の基中の基、視覚整形モデルについてまとめてみました。 Webデザインをする上で、必須とも言えるのが CSS …。このブログ – Webデザインレシピでも、過去に CSS について書いた記事がいくつかあります。最近 … でもないけど、以下のふたつは CSS でのレイアウトについて、いろいろと書いた記事でした。 CSSでレイアウトするなら絶対覚えておきたいブロックレベル要素のクセとかいろいろ – 2011年 6月17日 CSS:初心者の頃にハマったスタイルシートのあれこれ … IE7多め -2011年 4月21日 で

    garbagetown
    garbagetown 2011/11/08
    floatとclearをなんとなく使っているひと(おれ)必見
  • Thank you Steve Jobs

    <div id="stevejobs"> <div class="canvas"> <div class="icon"> <div class="st1"></div> <div class="st2"></div> <div class="st3"></div> <div class="st4"></div> <div class="st5"></div> <div class="st6"></div> <div class="st7"></div> <div class="st8"></div> <div class="st9"></div> <div class="st10"></div> <div class="st11"></div> <div class="st12"></div> <div class="st13"></div> <div class="st14"></div

    garbagetown
    garbagetown 2011/10/28
    cssだけで描いたスティーブ・ジョブズ
  • 2011年、スマフォ・デスクトップ用のクロスブラウザ確認ツールのまとめ

    デスクトップ用の各ブラウザをはじめ、スマートフォン、ワイドスクリーンなど、さまざまユーザー環境を想定して確認できるツールを紹介します。 各ツールで表示しているのは、Media Queriesを使用している「CSS-Tricks」です。

    garbagetown
    garbagetown 2011/10/26
    browserstackが便利そう
  • jQuery の位置・サイズ関連メソッドまとめ - Cyokodog :: Diary

    ばらけてきたのでこちらにまとめます。 索引 位置の設定 css(name,value) 位置の取得 css(name) offset() position() scrollTop() / scrollLeft() event.pageY / event.pageX サイズの設定 css(name,value) / height(value) / width(value) サイズの取得 css(name) / height() / width() attr(clientHeight / offsetHeight / scrollHeight) outerHeight() / innerHeight() コンテナ要素の取得 offsetParent() 解説 位置の設定 css(name,value) 対象要素を指定した位置に配置できます。単位を省略した場合はピクセル単位となります。 $('#

    jQuery の位置・サイズ関連メソッドまとめ - Cyokodog :: Diary
    garbagetown
    garbagetown 2011/10/21
    よくまとまっている。それでも死ぬほどむずかしい
  • スタイルシート関連の便利なオンラインツールのまとめ

    スタイルシートの制作、確認などに役立つ、便利なオンラインツールを紹介します。 [ad#ad-2] ジェネレーター:ベーシック系 ジェネレーター:ボタン、画像使わない系 制作補助、診断、確認 リファレンス、対応ブラウザなど ジェネレーター:ベーシック系

  • 保存版!CSS3セレクタの説明書

    CSSセレクタについての基礎知識 このブログで何回も説明していますが、念のために説明します。 CSSセレクタはスタイルを適用する対象を指定するものです。普段何気なく使っているclassやidなどもセレクタの1つです。 セレクタ表の説明には属性や要素といった堅苦しい用語が出てきますので図で簡単に説明します。 私のように基礎から勉強していないと、要素や属性と聞いてもピンときませんが、知ってみるとなんてことはないですね。 あと親子関係や兄弟関係などもあまり聞きなれないかもしれません。下の階層にある要素との関係が親子関係で、同じ階層にある要素同士の関係が兄弟関係です。 あと、CSS3と聞いて「どうせIE8以下はダメだし使えない」と思う方もいるかもしれませんが、セレクタに関しては簡単に対応できます。 IE6~8でもCSS3セレクタが利用できるツールの決定版「Selectivizr」をご参考に。 それ

    保存版!CSS3セレクタの説明書
    garbagetown
    garbagetown 2011/10/18
    よいまとめ
  • CSS拡張メタ言語「SCSS(Sass)」と「LESS」の比較 - (DxD)∞

    CSSを拡張するためのメタ言語として、代表的なものに「SCSS(Sass)」と「LESS」があります。今回、導入を検討するにあたり、両者を比較しました。 結果的には、「SCSS(Sass)」を導入することにしましたが、特に「SCSS(Sass)」を選択する決め手となった点に重点を置きつつ、両者の違いをまとめまてみました。 はじめに Webサイト、Webアプリケーションが大規模になるにつれて、CSSの設計・管理にもリソースを割かれるようになります。CSSのモジュール化、コンポーネント化による再利用性を考えたとき、現状のCSSを取り巻く状況は十分とは言えません。 一つの選択肢としてあがるのが「Blueprint」や「960 Glid System」等のCSSフレームワークの利用ですが、その再利用性と構造・表現の分離度はトレードオフです。 そこで、CSSの利点を活かしつつ、再利用性を高めるために

    garbagetown
    garbagetown 2011/09/20
    sassとlessの比較。sassのほうが良さそうかな
  • Leaverou | Latest Social Media Marketing Trends

    Sign up with your email address to be the first to know about new products, VIP offers, blog features & more. [spacer]

    garbagetown
    garbagetown 2011/09/20
    よくわからんけどすごい。あとでソース読む
  • 基礎から理解するためのCSS3に関するサイトのまとめ|Webpark

    CSS3はIEが対応できていないこともあって、今まであまり紹介してませんでしたが、使いこなせると面白そうなのでまとめてみました。 CSS3リファレンス 有名なサイトですね。CSS3に限らず、HTMLJavaScriptなど膨大な情報量です。 CSS-EBLOG 各ブラウザで先行実装しているCSSプロパティがまとめられています。 CSS3 Files 【2010.4.25 追加】海外サイトですが非常に見やすいです。各ブラウザの対応状況の載っていて重宝します。 次にブラウザごとの対応状況を確認するサイトを紹介。 HTML5 & CSS3 READINESS HTML5とCSS3のブラウザごとの適応状況を視覚的に見ることができます。2008年からの年別でも見ることができます。 HTML5 & CSS3 Support こちらもブラウザごとの対応状況がまとめられています。CSS3はプロパティ、セ

    基礎から理解するためのCSS3に関するサイトのまとめ|Webpark
  • IE6〜8でCSS3セレクタ利用「Selectivizr」

    CSS3セレクタを使う上で問題となるのはやはりIEです。HTML5 & CSS3 Supportで確認すると、IE6~8はほとんど対応できていないことが分かります。 そんなIEでもCSS3セレクタを使えるようにするのがSelectivizr.jsです。詳しく紹介されているサイトがあまりなかったのでご紹介。 Selectivizrの設置方法 ここで提供されているselectivizr.jsとJavaScriptライブラリを外部ファイルで読み込むだけで、CSS3セレクタがIE6~8でも利用可能となります。コードも外部ファイルを読み込むだけですのでとてもシンプルです。 <script type="text/javascript" src="[JSライブラリ]"></script> <!--[if (gte IE 6)&(lte IE 8)]> <script type="text/javascr

    IE6〜8でCSS3セレクタ利用「Selectivizr」
    garbagetown
    garbagetown 2011/09/15
    どうしてもサポートしなきゃいけなくなったら試す
  • 「nth-child」と「nth-of-type」の使い方と違い

    CSS3セレクタの中でも特に使い勝手がいいと個人的に思う「nth-child」と「nth-of-type」の使い方を紹介します。似ているようで若干違いますので正しく理解しましょう。 基的な使い方 まず、「nth-child」と「nth-of-type」の基的な使い方を説明します。 nth-childの説明 一般的に「E:nth-child(n)」という風に表されていて、親要素のn番目の子要素であるE要素ということになります。 具体的には以下のように使います。

    「nth-child」と「nth-of-type」の使い方と違い
    garbagetown
    garbagetown 2011/09/15
    便利。テーブル行の塗り分けとか罫線のダブり防止とか
  • CSS3、HTML5、jQuery、デザインなどウェブ制作のテクニックが動画で学べるサイト

    CSS3、HTML5、jQuery、ウェブデザインなど、ウェブ制作のテクニックが動画で学べるサイトを紹介します。 Learn Web Design! HTML 5 & CSS3 Video Tutorials & Training Resource [ad#ad-2] 動画は有料会員向けのコンテンツですが、無料でも数多くの動画を見ることができます。無料で見るときに、登録などは必要ありません。 動画はすべて英語で、英語が苦手な人でもコードや成果物を見るだけでも勉強になると思います。下記にいくつか紹介します。

    garbagetown
    garbagetown 2011/06/30
    英語で観るcss3, html5, jquery, webデザインの無料チュートリアル動画
  • [CSS]シンプルで使いやすいGitHub風のボタンを簡単に実装できるスタイルシート

    GitHubスタイルのシンプルで使いやすいボタンをclassの指定だけで簡単に実装できるスタイルシートを紹介します。 CSS3 GitHub Buttons [ad#ad-2] 下記は各ポイントを意訳したものです。 デモページはボタンの文言を日語にし、シンプルしたものをアップしました。 デモページ(当方日語化) 普通のボタン 注意を促すボタン 大きいボタン グループ化したボタン グループ化したものをまとめたボタン アイコンを伴ったボタン 対応ブラウザ ライセンス 普通のボタン 普通のボタンは、a要素、button要素、input要素などあらゆる要素で作ることができます。 ボタンを作るためには、「class="button"」を加えるだけです。 デモページ(当方日語化) <a href="#" class="button">Post comment</a> <input class="

    garbagetown
    garbagetown 2011/06/24
    使い勝手良さそう
  • こんなに高品質なのに無料で利用できるCSSベースのテンプレートのまとめ

    企業用サイト用をはじめ、コマース用、ポートフォリオ用、ブログ用などの高品質ながら無料で利用できるCSSベースのテンプレートを紹介します。 テンプレートは1ページだけのものから、配下ページなど複数のページが揃っているものもあります。 ※テンプレートは全て無料で利用が可能ですが、ライセンスを必ず確認してください。

    garbagetown
    garbagetown 2011/06/08
    生活が落ち着いたらじっくり眺めてどれを使うか決めたい