タグ

2009年6月19日のブックマーク (4件)

  • CSSを使ってリストを横並びにして、2行にまたがせる方法 - OKWAVE

    CSS 横並びリストの書き方はどちらがよいでしょうか スタイルシートで横並びリストを作成するとき、li { display: inline; } を使う方法と、li { display: block; float:left; } を使う方法がありますよね。皆さんは、意識して、使い分けられていますか? どちらで表現しようか、よく迷います。どちらの方法でも同じレイアウトにできるように思ってしまっていて。。でも自分の気付いていないデメリットがあるのかな?と気になります。「こうしたい場合、こちらのレイアウトだと無理」とか、「これではこのブラウザで表示が崩れる」など、お気づきのことがあれば、教えていただけないでしょうか。 下に、自分で確認用に作ったhtmlがあるので、そのままブラウザで見ていただければと思います。お手数ですが、よろしくお願いします。 =========================

    CSSを使ってリストを横並びにして、2行にまたがせる方法 - OKWAVE
    tominaga
    tominaga 2009/06/19
    そうなのか!(できた) 知らないプロパティがけっこうあるなぁ‥‥。
  • [css] @importを使うべきでない理由

    実は以前に別の場所でも書いたのですが、今回Google Page Speedの方でも少しだけ触れられていたので、改めてまとめ。 自分でも経験があることなのですが、開発をやっているとどうしても、構造をモジュール化して複数のファイルに分割して管理したくなります。 StyleSheetにおいても同様で、プレゼンテーション層のコンポーネントにあわせてCSSを用意し、ページ構成にあわせて取り込むようなことをやりたくなるでしょう。 しかしその際、@import構文を使うのはパフォーマンスと挙動の両方に有害である可能性が高いと、「」の著者としても知られるSteve Souders氏が警鐘を鳴らしています。 使うべきでないポイント @importは、大きく分けて2つの観点で「使うべきでない」とされています。 ひとつは、パフォーマンスの問題。StyleSheetはほぼ全ての主要ブラウザでパラレルロードがサポ

  • [CSS]印刷用のスタイルシートがグッとよくなる、3つのポイント

    既存の印刷用のスタイルシートや新規に作成する場合でも有用な、印刷用のスタイルシートの3つのTipsをLine25から紹介します。 Handy Tips for Creating a Print CSS Stylesheet 印刷時のテキストをデザインする 見出しやパラグラフ、リンクなどのテキスト箇所を印刷用にデザインします。 下記の例では、見出しを中央寄せにし、斜体にしています。 また、リンクのカラーをパラグラフと同じにし、下線を削除するのもよいでしょう(リンクのスタイルについては後述)。 <textarea name="code" class="css" cols="60" rows="5"> #header h1{ text-align: center; font-size: 42pt; font-style: italic; margin: 0; } #header h2{ text

  • 竹内電気@札幌COLONY - ■□ゆるゆるいこう□■

    tominaga
    tominaga 2009/06/19
    こういうライブレポを書けるようになりたい。