タグ

Webとhtmlに関するkoroharoのブックマーク (8)

  • line-height の値には単位なしが良いとされる理由

    CSS で行ボックスの高さを指定する line-height 値に、em(length) や %(percentage) などの単位を付けて指定しているサイトを意外と見かける。それは間違いではないし、例えばナビゲーションとかでブロック要素の垂直センターに配置するために意図的に指定しているんであれば良いんだけれど、そうでないなら line-height 値には単位なし (number) で指定した方が良いのにとか思ったりする。その理由は Eric's Archived Thoughts: Unitless line-heights でも分かりやすく説明されているんだけど、ちと劣化コピーしてみる。 単位ありと単位なしの違い 手っ取り早く説明するために、サンプルを作ってみた。p 要素があって、その中にインライン要素の em で一部分を強調している。分かりやすいようにそれぞれの font-size

  • CSSで中央配置(センターリング)する方法 | CSS Lecture

    This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it constitute or imply its association, endorsement or recommendation.

    koroharo
    koroharo 2011/06/06
    margin: 0 auto;
  • ヤフーがyimg.jpを使う本当のワケ - 最速配信研究会(@yamaz)

    ヤフーの画像はなぜyimg.jpドメインなのか? サイト高速化の手法とヤフーの失敗例 でヤフーがなぜドメインを変えて画像サーバを運用しているかが書かれている.「静的なコンテンツに対してクッキーフリードメインを使うことによって速度向上を狙う」というのが理由とあって,これはこれでもちろん正しいのだけれど,これはどちらかというと副次的な理由で当の理由は違う. クッキーフリードメインを使うことで悪意あるFlashコンテンツなどから自社ドメインのクッキーを守るためというのが当の理由で,これはあちこちで使われているテクニックだ.Flashコンテンツは外部の業者さんに作ってもらったり,広告の入稿素材として入ってくるので,信頼できないデータとして取り扱う必要があり,万一まずいデータがアップされることがあっても大丈夫にしておく必要がある. 最近ユーザからの任意のコンテンツを受けつけて同一ドメインで配信し

    ヤフーがyimg.jpを使う本当のワケ - 最速配信研究会(@yamaz)
  • #04 ブラウザのバッドノウハウ <form>編 | gihyo.jp

    ソフトウェアなどを使いこなすために、ストレスを感じながらもしぶしぶ覚えなければならないようなノウハウ、「⁠バッドノウハウ」がテーマの連載、第4回の今回はブラウザのBKを、<form>タグに関連するものに絞って取り上げたいと思います。 URLの+と%20の関係 HTMLの<form>タグを使うと、ブラウザからサーバにデータを送ることができます。<form>にmethod="GET"という属性が指定されている場合、ブラウザは、以下のように、キーと値のペアをURLの末尾に付加してサーバにリクエストを送ります。 http://example.com/webdb.cgi?key1=value1&key2=value2 これらのペアを「クエリ」と呼びます。このときキー、あるいは値に=などの予約記号が含まれている場合、%3Dのように%+16進数でエンコードします[1]⁠。 ところが、これには例外があり

    #04 ブラウザのバッドノウハウ &amp;lt;form&amp;gt;編 | gihyo.jp
    koroharo
    koroharo 2010/02/16
    まさにBK! _charset_ なんて知らなかった。
  • スタイリッシュなフォームを作るときに見るべきエントリまとめ

    Form Design フォームデザイン さてさて、最近のwebの入力フォームは当に凝ってるところが多くて、ただただ関心するばかり。 そんなわけで今回は、焦点を『フォーム』に限定し、スタイル抜群なフォームUIを勉強してみたい。 流れ的には インスピレーションデザイン集CSSによるフォームの変更方法JavaScriptによるフォームデザインという感じでお送りいたします。 インスピレーション まずは、スタイリッシュなフォーム。 これらは、webデザイン全体がフォームデザインとなっているまとめです。 まさにバインダー。 webの入力フォームを街頭アンケート用紙のように仕上げたデザイン。かっこいい。 くしゃくしゃっとしたような紙の一部にフォームが設置されている。 こちらもメモに名前を書くかのごとく。 深海に光がさす感じのイメージ。 シンプルイズベストなレイアウト設計がなされている。 1,2,3,

    スタイリッシュなフォームを作るときに見るべきエントリまとめ
  • pForm - Free HTML Form Builder - Create Web Form Template Online

    Create HTML Form in Seconds. Choose a color to start:

  • Welie.com - Patterns in Interaction Design

    A Pattern Library for Interaction Design This site contains a lot of best practices in Interaction Design. Over the years I have collected examples and insight on their applicability that I share with you here on this. So there is really no 'original' design to be found here, sorry. It has all been done before... See it as a reference or basic 'toolkit' you can use when design user experiences. It

    koroharo
    koroharo 2007/10/09
    A Pattern Library for Interaction Design
  • Yahoo! UI Library Grids CSSを使ってページレイアウト - WEBデザイン BLOG

    このブログは、MT(Movable Type[ムーバルタイプ] 3.31-ja)を導入して制作されています。デフォルト(初期設定)のレイアウトだとイマイチに思ったのでカスタムメイドでのレイアウトで制作してあります。ベースは、Yahoo! UI Libraryが公開されましたのでそちらのGrids CSSを使ってページレイアウトしています。 このYahoo! UI Library Grids CSSは、かなり使えるものだと思います。多くのユーザーを相手にアクセシビリティーを考えて設計されたCSSレイアウトなのでCSS(スタイルシート)を覚えようと思っている方にも参考にするととてもいい情報です。今回は、自分なりにこのYahoo! UI Library Grids CSSを解る範囲で説明・紹介いたします。 かなり使えるCSSソースなので、是非DLしてお使いになることをオススメします。ソースのDL

    koroharo
    koroharo 2007/01/13
    Yahoo! UI Library Grids CSS
  • 1