タグ

cssに関するversion510のブックマーク (107)

  • HugeDomains.com

    Captcha security check sohaya.com is for sale Please prove you're not a robot View Price Processing

    HugeDomains.com
    version510
    version510 2011/02/09
    Safariの独自拡張CSSプロパティについて
  • HTML5で進化したフォーム機能 ここが違う!サンプルで見るHTML5(5)

    はじめに この連載では、今日のウェブ業界の流行語となっている「HTML5」をとりあげ、全6回に分けて、これまでの技術とどのような違いがあるのか、具体的にサンプルのコードを示しながら解説していきます。 過去の連載も読む 第1回:HTML5が注目を浴びる理由とは? 第2回:HTML4から変化したHTML5のマークアップ 第3回:HTML5で再定義された要素と属性 第4回:HTML5で実現できるマルチメディア系機能 新たに導入されたフォームコントロール これまでウェブにおける入力フォームコントロールは、非常に限られたものしかありませんでした。皆さんがよくご存じのテキスト(パスワード)入力フィールド、ラジオボタン、チェックボックス、セレクトメニュー、テキストエリア、ファイル選択です。お問い合わせフォームであれば、ほとんどのシーンで十分といえるでしょうが、ウェブアプリケーションにおいては、不足してい

    version510
    version510 2010/12/27
    HTML5のフォームについて、対応ブラウザ、挙動のスクリーンショットを載せて丁寧に解説
  • Google Font Directory

    The Google Font Directory lets you browse all the fonts available via the Google Font API. All fonts in the directory are available for use on your website under an open source license and served by Google servers. View font details to get the code needed to embed the font on your web site. Please also visit our quick start guide and FAQ page. For more help and suggestions, use our moderator page

    version510
    version510 2010/05/20
    Googleが提供するWebFontの一覧
  • 13 か 15

    先日、Twitter で @smashongmag (Smashing Magazine のアカウント) からこんな問いかけがありました: What font-size do you usually use for your body copy? (If em, convert to px): 11px, 12px, 13px? Let us know! #smfont 「(Web ページの) 文のフォントサイズっていつも何ピクセルにしてる?」というわけですね。この問いに対するぼくの答えは決まっていて、それは「13px か 15px」です。なぜ 12px でも 14px でもなく、13px と 15px なのか。その理由は、Windows語環境の「事実上の標準」と言えるフォント、MS Pゴシック (MS PGothic) にあります。 Fig 2: MS Pゴシック 12px Fi

    13 か 15
    version510
    version510 2010/05/05
    本文をMS P ゴシックで表示する際に13pxか15pxで指定すると、うまい具合に"アキ"ができて見やすくなる
  • ie7-js - A JavaScript library to make MSIE behave like a standards-compliant browser. - Google Project Hosting

    Code Archive Skip to content Google About Google Privacy Terms

    version510
    version510 2010/03/17
    IE6, 5をIE7のようにレンダリングさせるためのJavaScript。CSSセレクタ、透過pngなど。IE8の挙動にするIE8.jsも
  • IE8 の気になるバグ3つ – Unformed Building

    例によって自分用のまとめ。ずっと気になっているものだけ。 細かいところとかは色々あるんだろうけど、今のところはそんなに気にならないので放置。 発生するのは IE8 の標準モードのときのもの。 文字の大きさが勝手に変わる……というかピクピク動く これってIE8のバグなんじゃね・・・?文字の大きさが勝手に変化するよ?|ぼくんちのTV 別館 こちらのエントリによると IE8を使用。ブラウザのフォントにMS ゴシック、MS Pゴシック、MS 明朝、MS P明朝を指定している。 (メイリオでは発生しない。) 動く文字は、10.5px~11px。 javascriptが結構多用されている。 これってIE8のバグなんじゃね・・・?文字の大きさが勝手に変化するよ?|ぼくんちのTV 別館 WordPress の管理画面や、GoogleAdSense でよく発生するのでかなり気になる。 あまりにもウザイ

    version510
    version510 2010/03/12
    IE8のバグとその解決法を紹介
  • Zen-Codingで楽々コーディング! + コツ1つ

    話題のHTMLCSSコーディングあしすとツールのzen-codingを触ってみました。すごい楽ちんこ! zen-codingって何?使い方は?という人は以下のページを見てくださいね。 Zen-Codingでできるあんなことこんなこと 知らない人は損してる?コーディングが3倍速くなるZen-Codingを導入してみた ある程度HTML/CSSのコーディングに慣れた人なら、ビジュアルデザインを含んだ文書があれば、それをもとに脳内でHTML構造に置き換えられますよね。デザインから興す人は、Photoshopを触りながら、同時に頭の中でHTMLを組み立ててる人も多いんじゃないでしょうか。 たいていの文書は、小さなパターンと大きなパターンの繰り返しだし、コンテンツに関しての試行錯誤はあっても、HTMLの記述で試行錯誤するってことは無いんですよね。(CSSのブラウザの実装の関係とかこの際忘れよう)

    version510
    version510 2010/03/08
    Zen-Codingの紹介とTips
  • デブサミ2010 HTML5ライトニング・トーク « HTML5.JP ブログ

    2010年2月19日(金)に開催されたデブサミ2010の「次世代Web標準 HTML5 最新動向」というセッションの中で、ライトニング・トークを行いました。 このライトニング・トークで、『HTML5 Show Case』と題して、HTML5 のテクノロジーを使った作品を通して、簡単に、そのテクノロジーの使いどころを紹介しました。 お越し頂いたみなさまには、お忙しい中、そして、デブサミでも最後となるセッションでお疲れのところ、私のトークをご静聴いただき、ありがとうございました。短い時間でしたが、HTML5 が目指しているウェブの世界を、少しでも実感いただけたら幸甚です。 遅くなりましたが、デブサミ2010での私のプレゼン資料を公開します。当日、お越し頂いたみなさま、そして、参加していない方でも、HTML5 にご興味のある方のご参考になれば幸いです。 HTML5 Show Case – Dev

    version510
    version510 2010/02/22
    HTML5の技術を使って作られたサイトをわかりやすく紹介したスライド
  • cssの@charsetルールとchrome, safari - フリーフォーム フリークアウト

    移転しました http://please-sleep.cou929.nu/20090903.html

    cssの@charsetルールとchrome, safari - フリーフォーム フリークアウト
    version510
    version510 2010/02/11
    「外部cssファイルの先頭以外で@charsetが指定されていると、そのcssファイルの最初の指定がchromeとsafariでは無視され」る。めちゃくちゃはまった・・・
  • CSS Differences in Internet Explorer 6, 7 and 8 — Smashing Magazine

    One of the most bizarre statistical facts in relation to browser use has to be the virtual widespread numbers that currently exist in the use of Internet Explorer versions 6, 7 and 8. As of this writing, Internet Explorer holds about a 65% market share combined across all their currently used browsers. In the web development community, this number is much lower, showing about a 40% share. The inte

    version510
    version510 2010/01/09
    IE6-8におけるCSSの解釈の違いを詳細に説明。いざというときに
  • css-lecture.com

    version510
    version510 2010/01/09
    コーディングの際に便利なTips集。画像やテキストの回り込み解除、段組など
  • A Beautiful Apple-style Slideshow Gallery With CSS & jQuery

    Introduction When speaking about design, there is one company that is impossible to go without. Apple values design - being a new product, a fancy catalog or their website - there is always something to admire. This week, we are making an Apple-like slideshow gallery, similar to the one they use on their website to showcase their products. It will be entirely front-end based, no PHP or databases r

    A Beautiful Apple-style Slideshow Gallery With CSS & jQuery
    version510
    version510 2009/12/24
    キービジュアルが横にスライドするギャラリーをjQueryで実装
  • border-image を利用したボックスデザイン

    border-image を利用したボックスデザイン border-image プロパティは装飾の幅を広げてくれそう。使うにあたっていろいろ調べたので、サンプルなどを用意して整理しておくことにした。 まずは現在の草案(2009年10月15日版)を読んで、関連プロパティや、設定できる値など、仕様の概要を簡単に整理したものを箇条書きにしてみる。 要素の border-style?プロパティと background-image プロパティの代りに使う画像を設定する。画像は四辺それぞれには必要なくて、ひとつだけ用意すればよい (border-image-source) 画像の四辺それぞれから内側にスライスする位置を設定、画像は四つの辺、四つの角、中央の9つに分ける。中央は背景画像のように使われる (border-image-slice) 四つの辺の高さを設定する (border-image-wid

    border-image を利用したボックスデザイン
    version510
    version510 2009/11/24
    border-imageの使い方。iPhoneのタイトル部分のボタンをborder-imageで可変にお手軽実装
  • 【CSS】ページ送りナビゲーションには display:inline-block が超便利 | バシャログ。

    こんばんは、ishidaです。 CSS2.1 で定義されている displayプロパティの値、inline-blockの使いどころを探してみたところ、ページ送りにかなり使えそうです。 まずは以下のサンプルをご覧下さい。Yahoo 検索結果のページ送りデザインをまねています。 ページ送りのサンプル 1 2 3 4 5 6 7 8 9 10 次へ> XHTML のサンプルは以下です。とてもシンプルです。 <ul class="pager"> <li><strong>1</strong></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> <li><a href="#">4</a></li> <li><a href="#">5</a></li> <li><a href="#">6</a></li> <li><a href="#">

    【CSS】ページ送りナビゲーションには display:inline-block が超便利 | バシャログ。
    version510
    version510 2009/10/27
    inline-blockでページャーをスタイリングすると便利
  • IE 6, IE 7 の inline-block 考察 | ヨモツネット

    blog移行しました。新しいblogで更新を続けています。 XMLェ… text ja 2012-07-08 http://www.yomotsu.net/wp/?p=603 XMLェ… 日々の出来事2012年7月8日日曜日 ブログ作りなおそうかなーと思って、この Webサイト をみなおしてたら、Web ページのメタ情報としてダブリンコア (RDF) を混在させていたことを思い出した。バリデーターにかければ、グラフも取り出せて みたいな感じになる。でも結局あまり意味なかったです多分。いまは OGP とかありますしね。 Web ページは XHTML にしてたけど、ブログのコメントで参照先のない数値参照とか混ぜられると XML パースエラーになるし、XML だから他の語彙混在できるけど、RDF くらいしか混ぜてなかったし、XHTML 意味なかったです多分。いまは HTMLSVG 混在でき

    version510
    version510 2009/10/27
    IE6,7をinline-block対応にするためには
  • CSS 3のセレクタ解説::root、:not、:empty、:target - builder by ZDNet Japan

    :rootはルート要素にスタイルシートを適用するためのセレクタだ。ルート要素とは最上位階層に位置する要素のことで、HTML文書では全体をマークアップしているがルート要素となる。 テキスト 文です。文です。文です。文です。文です。文です。文です。文です。文です。文です。文です。文です。文です。文です。文です。文です。文です。文です。文です。文です。文です。 ※ と に注目 これに対して、:rootで次のようにスタイルシートを指定すると、コンテンツ全体が黄色い罫線で囲んで表示される。さらにここでは、でマークアップしたbody要素を黄緑色の罫線で囲むように指定しており、body要素はルート要素の内側に表示されることがわかる。

    CSS 3のセレクタ解説::root、:not、:empty、:target - builder by ZDNet Japan
    version510
    version510 2009/10/22
    CSS3の新しいセレクタの解説。:emptyは実用的、:notや:targetはおもしろいことできそう
  • CSS セレクタに関するおさらい | WWW WATCH

    CSS を扱う上でセレクタの存在はとっても重要です。特に CSS3 Selectors ではかなり複雑な条件分岐ができるようになっていますので、スマートな (X... CSS を扱う上でセレクタの存在はとっても重要です。特に CSS3 Selectors ではかなり複雑な条件分岐ができるようになっていますので、スマートな (X)HTMLCSS コーディングを行う上で、セレクタを理解しているとそうでないのでは生産性に差が出ます。 CSS3 は現在 Working Draft の段階ですので、まだ正式な勧告はなされていませんが、多くのモダンブラウザにおいてそのほとんどが先行実装されていることから、現状でも利用価値が高いといえます。 ということで、ここでは自分へのメモの意味も込めて、CSS3 で定義されているものも含めた各 CSS セレクタについてリファレンスしてみようと思います。 今回の解説

    CSS セレクタに関するおさらい | WWW WATCH
    version510
    version510 2009/10/22
    CSS3のセレクタのまとめと簡単なサンプル
  • 安全な@font-faceの書き方(抄訳)

    Internet Explorerではかなり昔からあった埋め込みフォント(@font-faceによるフォントの参照)の機能は、Safari 3とFirefox 3.5で有効になったことから急速に話題になることが増えた。ようやく時代がMicrosoftに追いついてきた感じですね。その書き方は大筋では一緒なのだが、細かな仕様の違い、というかIEがEmbedded OpenTypeしかサポートしていないことから工夫が必要になる。その工夫をBulletproof、つまり将来にわたって安全であろうという観点で短くまとめたBulletproof @font-face syntaxというすごく参考になったエントリがあったので訳しておく。語調などは超訳なので、原文とニュアンスが変わっているかもしれない。 安全な@font-faceの書き方 以下は訳注と私見。 条件付コメント 面倒くさいというのはわからなく

    安全な@font-faceの書き方(抄訳)
    version510
    version510 2009/10/18
    Bulletproofな@font-faceの書き方。IE対策
  • これはもう使用しない方がいいウェブデザインのトレンド

    昔流行ったけど、これはもう使用しない方がいいものや人気がすたれているウェブデザインのトレンドをWeb Design Ledgerから紹介します。 Most Used and Abused Web Design Trends of All Time 以下、その意訳です。 過激な表現も一部あるので、留意ください。 はじめに 鏡面反射 アクア フラリッシュ コーヒーカップ 地球 コミックフォント ストックフォト ペーパー ポラロイド 特大のRSSアイコン 音の自動再生 カウンター マーキー ブラックの背景 スプラッシュページ スキップの無いイントロ ブラックの背景 はじめに トレンドは、ウェブデザインにおける良くないキーワードではありません。実際に、下記のリストのものはその時々でウェブデザイナーを鼓舞させました。これらのアイデアは影響が非常に大きくかったので、大量のクローンが作りだされました。

    version510
    version510 2009/10/13
    流行が終わったとされるWebデザインの紹介
  • Font Awesome Font Free by Dave Gandy » Font Squirrel

    SIL Open Font License v1.10 This license can also be found at this permalink: https://www.fontsquirrel.com/license/font-awesome This Font Software is licensed under the SIL Open Font License, Version 1.1. This license is copied below, and is also available with a FAQ at: http://scripts.sil.org/OFL —————————————————————————————- SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007 —————————————————

    version510
    version510 2009/09/06
    @font-faceで利用できるフォントの一覧。デモやダウンロードも可能