タグ

CSSに関するyananakiのブックマーク (33)

  • http://blog.e-riverstyle.com/2009/07/4.html

    http://blog.e-riverstyle.com/2009/07/4.html
  • CSSのセレクタがちょっとあやふやな人はやってみて! 楽しみながらCSSのセレクタを学ぶ -CSS Diner

    CSSのセレクタがちょっとあやふやな人はやってみて! 楽しみながらCSSのセレクタを学ぶ -CSS Diner

  • どう考えても無茶な「CSSプログラミング」が話題に

    CSS3がいくらパワフルとはいえ、さすがにここまで凝ったものが作れるとは思いませんでした。 まずはChromeでこちらを遊んでみてください。 CSS3 OF THE DEAD - jsdo.it - share JavaScript, HTML5 and CSS まるでJSをバリバリ使ったゲーム、のように見えますが、実は「Only CSS」。上のSTOPボタンを押すとコードを確認することができます。 jsdo.itCSSプログラミングが流行中! ええ、どう考えても無茶なんです。CSSはプログラミング言語じゃないですからね。 CSSの機能を巧みに組み合わせて作成されています。 ということで、投稿作品のほんの一部を紹介したいと思います。 CSS PANIC CSSだけで作られたワニワニパニック。 このコードは海外のユーザーにも大きな反響を呼びました。

    yananaki
    yananaki 2011/06/23
    「どう考えても無茶な「CSSプログラミング」が話題に | KAYAC DESIGNER'S BLOG - カヤックの意匠部によるデザインやマークアップの話」 すごいと思うけどさ…そのうち、CSS=装飾って教え方はできなくなるのかな?
  • CSSセレクタ20個のおさらい

    CSSセレクタって意外と分かっていなかったりするので勉強ついでにまとめてみました。比較的実用的かなと思うものを20個紹介していきます。いい復習になればと思います。 CSSセレクタはスタイルを適用する対象を指定するものです。普段何気なく使っているclassやidなどもセレクタの1つです。 属性や要素といった堅苦しい用語が出てきますので図で簡単に説明します。 私のように基礎から勉強していないと、要素や属性と聞いてもピンときませんが、知ってみるとなんてことはないですね。 また、IEが対応しきれていないCSS3のセレクタもありますが、IE6~8でもCSS3セレクタが利用できるツールの決定版「Selectivizr」 で紹介したようにCSS3セレクタはie対策も容易なのでぜひお試しください。 SelectivizrはCSSを外部ファイルで指定した方がいいのですが、今回のサンプルはCSSを外部ファイル

    CSSセレクタ20個のおさらい
    yananaki
    yananaki 2011/06/16
    「意外と知らない!?CSSセレクタ20個のおさらい|Webpark」 知らないものも多いけど、そんなにセレクタ使わないでコーディングできちゃってるんだよね。無駄なデザイン/タグが無いのか、CSSがぐちゃぐちゃなのか…
  • Cascading Style Sheets Level 2 Specification (Editor's Draft)

    Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification W3C Recommendation 07 June 2011, edited in place 12 April 2016 to point to new work, edited in place 07 December 2021 to correct markup. This version: http://www.w3.org/TR/2011/REC-CSS2-20110607 Latest version: http://www.w3.org/TR/CSS2 Previous versions: http://www.w3.org/TR/2011/PR-CSS2-20110412 http://www.w3.org/TR/2008/REC-CSS2-

    yananaki
    yananaki 2011/06/09
    「Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification」 CSS2.1がW3C勧告になりました!長かった~!あまりに普通に使ってて、勧告されていないのを忘れるくらいに長かった!
  • オンラインカジノの主な特徴と魅力

    オンラインカジノは、リアルにあるカジノの世界を、ネット上でエンジョイする事が出来る、ギャンブルゲームです。 現実の上でのカジノと変わらず、インターネット上と言いましても、リアルマネーをかけることが可能となっています。 したがって、ギャンブルを満喫する事が行なえるので、とてもスリリングな世界観を満喫できます。 そして、オンラインカジノについては、賞金額もかなり高いのが持ち味だと言えます。 オーソドックスなギャンブルとして市民権を得ている、パチンコやスロットのケースでは、稼ぐことができたとしても、1日あたり数十万円ぐらいになります。 しかしながら、オンラインカジノについては、1日あたり数千万の高額当選も想定でき、具体的に1億円を的中させたプレイヤーもいます。 ひと晩で億万長者になれることが望めるギャンブルとなっています。 そして、オンラインカジノについては、好きな時間に好きな場所で満喫する事が

    yananaki
    yananaki 2011/05/13
    『Img to Css』 これ面白いけど使いどころが無い!指定した画像をhtml+cssで描画してくれるwebサービス。テーブルレイアウトを使って描画してる。1px×1pxのセル使うとかすごい力技だなぁ!
  • CSSの知識をもっと深める30+2の小技テクニック集|Webpark

    的なことやちょっと変わった意外な使い方などCSSに関する小技テクニックをたくさん紹介していきます。知っていることも多いかと思いますが、新しい発見もあるかもしれませんので復習を兼ねてぜひご覧ください。

    CSSの知識をもっと深める30+2の小技テクニック集|Webpark
    yananaki
    yananaki 2011/05/12
    『CSSの知識をもっと深める30+2の小技テクニック集|Webpark』 知られてるものが多いけど便利。個人的に便利でよく使うのが2-5の「2行目以降の文字を1文字下げる」行頭の※印を背景画像にした時も使えるよ。
  • IDEA * IDEA

    ドットインストール代表のライフハックブログ

    IDEA * IDEA
    yananaki
    yananaki 2011/02/10
    「覚えておきたい31のCSSスニペット - IDEA*IDEA ~ 百式管理人のライフハックブログ」
  • IDEA * IDEA

    ドットインストール代表のライフハックブログ

    IDEA * IDEA
    yananaki
    yananaki 2011/02/02
    「マウスオーバーするとスマイリーがくるっと回るページのソースが勉強になったよ - IDEA*IDEA ~ 百式管理人のライフハックブログ」 なるほど~!今度時間作ってやってみよ!
  • Design works|新デザインオンラインカジノ 日本語対応

    Design Works - デザインワークス姉妹ブログ・DesignDevelopのデザインをリニューアルいたしました。 Designworksの新ドメインでの運用・リニューアルのご報告はさせて頂きましたが、Designworksのリニューアルとともに、姉妹ブログとして運用しているDesignDevelopのデザインも、大幅にリニューアルいたしました!!! Design Worksは、様々な商品やインスピレーションから生まれた新しいデザインを発信し、販売促進に繋げる広告やデザインを作り出しています。大幅にリニューアルしたDesign Worksでは、オンラインカジノ 日語対応のデザインなど、オンラインの新たな分野にも活動を広げています。最新のH P新デザインとなった姉妹サイトブログのDesign Developと共に、今後もウェブデザインに関する様々な情報をお届けしていきます。 今回、

    Design works|新デザインオンラインカジノ 日本語対応
    yananaki
    yananaki 2011/01/18
  • Remove unused CSS - CSS Optimizer

    On average, about 35% of CSS code is completely unnecessary. We meticulously find and remove this unnecessary CSS code.

    Remove unused CSS - CSS Optimizer
    yananaki
    yananaki 2011/01/11
    「Remove unused CSS - CSS Optimizer」 URLを入力すると、そのサイトで使われていないCSS設定があるかどうか教えてくれるサービス。大きいサイトだと時間もかかるけど、無駄を省いたCSSも作ってくれるし便利かも。
  • 2010年総まとめ:CSSの実用的なテクニック集

    CSS3で何ができるの? という時にみておきたいサイト集 ベーシックなものから実践的なテクニックまで、サンプルやコードなど実装例が掲載されているサイトをご紹介。

  • CSSの歴史や現在が一目で分かるインフォグラフィック -CSS Infographic

    CSS歴史をはじめ、CSS1, CSS2などの特徴、CSS3のプロパティの各ブラウザの対応状況などをまとめたインフォグラフィックを紹介します。 CSS Infographic – Interesting Facts and History [ad#ad-2] CSSのインフォグラフィックは、W3CなどにあるCSSに関する情報をまとめたもので、CSSをこれから学ぶ人、CSSの見聞を深めたい人に役立つものとなっています。 下記は、掲載されているインフォグラフィックのキャプチャです。

  • [CSS]CSS3のブラウザごとの指定方法のまとめ

    Vendor-prefixed CSS Property Overview [ad#ad-2] 一覧は、四つのレンダリングエンジンごとの指定方法がまとめられています。 下記は各レンダリングエンジンとその代表的なブラウザです。 Gecko系 Firefox WebkitChrome, Safari Presto系 Opera Trident系 IE 各レンダリングエンジンの採用状況は、ウェブブラウザの一覧(Wikipedia)を参照ください。 一覧は下記のようになっており、右端には各プロパティのW3Cへのリンクも掲載されています。

  • MOONGIFT: » 必見!CSSを使って複数の画像を一つに「CSS Sprite Generator」:オープンソースを毎日紹介

    Googleの表示速度の速さの秘密に、コネクションを極力減らすということがある。それが複数の画像を一つにまとめてしまい、CSSのポジションをずらすことで表示するという手法だ。これを使うと画像のダウンロードは一回で済むのでコネクションが少なくて済む。 実際、検索結果のGoogleロゴを見ると、複数の画像が混ざった結果なのに気づくはずだ。これをやるのは非常に面倒に感じるだろう。だが、小さなアイコンなどはこういう手法をとればサイトの負荷軽減、高速化につながる。それを手軽に実現できるのがこのソフトウェアだ。 今回紹介するオープンソース・ソフトウェアはCSS Sprite Generator、CSSによる画像分割補助ソフトウェアだ。 CSS Sprite Generatorは複数の画像をZipで固めてアップロードすると、その画像を連結し、さらに表示するためのCSSを生成してくれる。これを使えばまさに

    MOONGIFT: » 必見!CSSを使って複数の画像を一つに「CSS Sprite Generator」:オープンソースを毎日紹介
    yananaki
    yananaki 2010/09/15
    『必見!CSSを使って複数の画像を一つに「CSS Sprite Generator」』 CSS Spriteで使う画像の作成も、これなら簡単にできるのかな?一度試してみたいかも。
  • ProCSSor - Advanced CSS Prettifier

    First Place For The Best Virginia Events! When it comes to events there is no where better to get your updated info. You will see a list of the current and upcoming events below. From county fair to music festivals to petting zoos, there is an amazing list of events for all ages around Virginia.' Focusing on amazing fun for the entire family! The County Fair features great events and games for all

    yananaki
    yananaki 2010/09/14
    「ProCSSor:CSSをすっきりキレイにしてくれるツール」 DWのソースフォーマットがあれば使う機会は少なそうだけど、他の作業者からもらったCSSが読みにくくて、かつ自分で整形するしかないような時には便利かも。
  • 永久保存版!?携帯コーディング、これだけ読めばすぐできる! | KAYAC

    マークアップエンジニア(以下、ME)のtacamyです!(`・ω・´) カヤックでは、デザイナーもHTMLコーディングをしてくれています。 (いつもありがとうございます!) そんなワケで、格的にHTMLコーディングはしないけど、 ちょこっとしたページなら組みますっていうデザイナー向けの、 「コレだけ読めばすぐできる」シリーズを始めました。 第一回は「携帯コーディング」についてです。 携帯はPCとは全くの別物なので、なんとなく敬遠しがちですが、 最低限の内容であれば覚えることも少ないですし、 一度覚えてしまえばスタンダードがしばらく変わらないので、覚えておいて損はないですよ! 携帯コーディングの基 基礎の基礎 文字コードはShift-JIS CSSはインラインで指定(タグに直接style属性を追加する) 画像を含むページ容量100KB以内(HTML自体の容量は9KB以内) 画像はgifか

  • 【HTMLタグの簡単検索】TAG index - ホームページ作成情報

    リファレンスについて HTML リファレンス HTML Living Standardに対応したリファレンスです。 HTMLタグ リファレンス HTML4の時代に作成したリファレンスです。古いWebページを更新する際などに参考にしてください。 CSS リファレンス CSS2の時代に作成したリファレンスです。

    【HTMLタグの簡単検索】TAG index - ホームページ作成情報
  • とっても使えるoverflowプロパティ。その使い方色々。

    光の4戦士を買ったんすが、売り文句通りレトロな感じがしていいですね。 まぁまだ2, 3時間程度しかやってないんで、これからどうなるか分かりませんが時間を見つけてやって行こうかと。 さて、以前からoverflowプロパティは使い勝手が良いというか、使う場面が多いプロパティの一つですが、考えてみると色んな事に使ってるなぁ~と思ったので自分が良く使うのをまとめてみました。 あんまoverflowプロパティを使った事が無い方は、ビックリですよ! これで、ソコの可愛いアナタもoverflowプロパティの虜になる事間違い無し!!(わかんないけど サンプルとかは以下よりどうぞ。 サンプルサイトを見る サンプルをダウンロード 基的に、全てoverflow: hidden; の指定を足す事で解決したり実現出来る感じです。 01 clearfixみたいに使う まずは以前の「clearfixを使わないでやるに

    とっても使えるoverflowプロパティ。その使い方色々。
  • bashalog.biz

    bashalog.biz 2023 著作権. 不許複製 プライバシーポリシー

    yananaki
    yananaki 2010/07/27
    なんか似たようなの前にもあったかなぁ?