タグ

cssに関するl_u_l_uのブックマーク (11)

  • Code for America Style Guide

    Using the Guide Code for America aims to improve the relationships between citizens and government. The following logos, materials, and character of the Code for America brand were created to express the following: Openness: That the organization is approachable, easy to understand, easy to get involved with, and welcoming to both scrutiny and participation. Currency + Progress: We’ve attempted to

    l_u_l_u
    l_u_l_u 2014/02/19
    参考になります
  • [CSS]わずか1KBのスタイルシートでもここまで美しいレイアウトができる -CSS1K

    以前、流行った「CSS Zen Garden」の「JS1K」版といった感じの、1KB(1024文字分)のスタイルシートだけで美しいレイアウトを数多くのデベロッパーが作り、登録できるサイトを紹介します。 CSS1K [ad#ad-2] CSS1Kのルールは、同じHTMLに1KB(1024bytes)のスタイルシートを使ってレイアウトを施す、という簡単なものです。 現在、30ちょいの作品が登録されており、1KBでもバラエティ豊かなレイアウトが揃っています。下記に、その中からいくつか紹介します。

    l_u_l_u
    l_u_l_u 2011/07/13
  • 2010年総まとめ:CSSの実用的なテクニック集

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

    l_u_l_u
    l_u_l_u 2011/01/07
  • 背景画像をブラウザの枠いっぱいに表示するテクニックの考察

    最近のトレンドの一つでもある背景画像をブラウザの枠いっぱいに表示する実装方法はたくさんあります。その中から、理にかなった最新のテクニックや、より多くのブラウザに対応させるテクニックを紹介します。 Perfect Full Page Background Image [ad#ad-2] 下記は各ポイントを意訳したものです。 各デモはページ下部のDownload Files」で、まとめてダウンロードできます。 背景画像をブラウザの枠いっぱいに表示するテクニックとは CSS3を使ったテクニック CSSだけで実装するテクニック:その1 CSSだけで実装するテクニック:その2 jQueryを使ったテクニック 背景画像をブラウザの枠いっぱいに表示するテクニックとは 前提として、下記のポイントが挙げられます。 画像でページをいっぱいにします。 空きは無いようにします。 画像のサイズは必要があれば調整しま

  • CSSでDivを天地左右中央に配置する方法『locate div at the center vertically and horizontally』 | CREAMU

    DiaryTechnology CSSでDivを天地左右中央に配置する方法『locate div at the center vertically and horizontally』 ちょっと実装したくなったので、CSSでDivを天地左右中央に配置してみました。 Web creatorsに載っていた方法ですw。 » Web creators (ウェブクリエイターズ) 2007年 03月号 ■CSSは↓。 <style type="text/css"> body { background:#ccc; margin:0; padding:0; } #wrap { position:absolute; width:500px; height:100px; left:50%; top:50%; margin-left:-250px; margin-top:-50px; background:#ff

    l_u_l_u
    l_u_l_u 2010/11/12
  • HTML5+CSS3 入門

    Webを記述する言語の標準の現状 昨年度であれば、HTMLを記述する授業では自信をもって以下の基準を推薦していました。 HTML (文書の構造を記述する言語) – XHTML 1.0 もしくは XHTML 1.1 CSS (文書の体裁・デザインを指定する言語) – CSS 2 しかしながら、ここ数年で、とくに去年あたりから状況は大きく変動しつつあります。現状の変化を理解するには、ここに至るまでの歴史的な経緯について簡単に理解する必要があります。ここまでの経緯を整理した上で、将来の展望を探りたいと思います。その上で、この授業ではどのような基準にのっとって「正しい」ということを定義するのか決めていきたいと考えます。 HTML (Webサイトの記述言語) の標準化巡る闘争の歴史 AppleInsider: なぜ AppleHTML 5 に賭けているのか: ウェブの歴史 [Page 2] よ

    HTML5+CSS3 入門
  • SOYAGIMI NOTE 事業者のための情報発信メディア

    Information to help businesses事業者に役立つ情報を総合的にお届けします こんにちは、SOYAGIMI Note を運営する株式会社SOYAGIMI 松永です。 このサイトは弊社顧客様のための情報提供、また様々な地域で活躍される事業者様のお役に立てる情報を発信するためのメディアです。 私たちも小規模な事業者ですので、比較的使える情報や経験をご紹介できると思います。 比較サイトなんか見ても、昨今事業者は軽く扱われがちですからね。 色んな情報やテクニックを持って、けっこう大変な時代を乗り越えていけたらいいなぁって。 Convenient tool use 便利なツールの使い方をご紹介 小規模で活動されていると、やはり人出が足りなくなるのが現状です。 しかしながら最近は無料で使えて、業務を効率化できるアプリも多数存在します。 そういったアプリの使い方などをまとめて、経

  • ブラウザ上で最新のCSSをインタラクティブに試せる『CSSDesk』 | 100SHIKI

    良く出来とる、と思ったのでエントリー。 CSSDeskはブラウザ上でインタラクティブにCSSを試すことができるツールだ。 似たようなツールは他にもあるが、インターフェースがシンプルで使い易いのと、会員登録などの面倒な手続きがないのが良い。 このCSSって実際どういう効果があるんだっけ?というときや、ちょっと部品の見栄えを試したいというときに便利だろう。 最近はCSSもパワーアップしてきているので、こうしたツールを使いつつ、積極的に試行錯誤していきたいですな。

    ブラウザ上で最新のCSSをインタラクティブに試せる『CSSDesk』 | 100SHIKI
  • HTML5 / CSS3のソースがダウンロードできるサンプル – creamu

    HTML5 / CSSでできることをざっくり掴みたい。 そんなときに参考になるのが、『Create An Elegant Website With HTML 5 And CSS3』。HTML5 / CSS3のソースがダウンロードできるサンプルです。 HTML5で使われる<section>や<aside>、<header>、<footer>などの各タグの解説と、CSSにおける「RGBa」、「box-shadow」、「border-radius」、「text-shadow」などのプロパティーの解説がされています。 デモは以下から。 Download Source ソースのダウンロードも提供されているので、参考に見てみてはいかがでしょうか? Touch The Future: Create An Elegant Website With HTML 5 And CSS3 あることが一つ決まった。と

  • [CSS]ブラウザのサイズに合わせてスタイルシートを変更する方法

    ブラウザのウインドウサイズに合わせて、スタイルシートを変更し、レイアウトを最適化する方法をCSS-Tricksから紹介します。 Different Stylesheets for Differently Sized Browser Windows デモではブラウザのサイズを変更すると、それに応じてレイアウトが変わります。

  • ソースが公開されているcss小技11エントリーまとめ

    cssを使った小技テクニックの エントリーが様々なブログで 公開されていますが、必要な時に 探すのが面倒なのでまとめます。 ソースコードを公開している記事に 絞ってまとめています。 CSSで実装する、ちょっと凝ったパンくずリスト cssでパンくずをデザインする方法とサンプル CSSで実装するちょっと凝ったパンくずリスト CSS(スタイルシート)でbodyに設定しておくと便利な5つのポイント ユーザービリティ(見易さ)を考慮したbodyに設定する。CSS HappyLifeさんも 記事を参考に別コードを公開。 CSS(スタイルシート)でbodyに設定しておくと便利な5つのポイント CSSだけでフレームを作るテクニック frameタグを使用しないで擬似フレームを作成。IE6対応。 CSSだけでフレームを作るテクニック テキストに影を付け印象的にする JSとcssでテキストに影を付けるテクニック

    ソースが公開されているcss小技11エントリーまとめ
  • 1