タグ

2011年5月19日のブックマーク (3件)

  • ブラウザ幅を超えた部分を隠す手法として body { overflow-x:hidden; } はあまり使わない方がいい気がする件

    ブラウザ幅を超えた部分を隠す手法として body { overflow-x:hidden; } はあまり使わない方がいい気がする件 公開日: 2011年5月8日 タグ: css, memo ツイッターでも書いたのですが、preの背景をブラウザの幅いっぱいに拡大する というエントリ読んでて「ほうほう :before/after 疑似要素を使う手もあるか…」と感心しつつトラックパッドでスクロールさせたら、突然コンテンツが消えてしまって深夜に「うぎゃー!」とかなっておったのです(注: これ書いてる今は直ってます) まあ pre に限らず、基的に幅固定で中央寄せだけど、内側にある特定のブロック要素の背景はブラウザ幅いっぱいに広げたいという場合、広げたいブロック要素に大きめ(10000pxとか)のパディングを付けて左右に広げ、それと同じだけのネガティブマージンを付ける事で背景部分を外側にはみ出させ

    ブラウザ幅を超えた部分を隠す手法として body { overflow-x:hidden; } はあまり使わない方がいい気がする件
    B-SAKATU
    B-SAKATU 2011/05/19
  • 楽しいCSSこと「Sass」の3.1が異様な進化:Rails Hub情報局:エンジニアライフ

    HamlとSassのバージョン3.1が4月24日にリリースされました。元々両者は同じプロジェクトだったのですが、今回のリリースから別々のgemとなり、インストールも別にできるようになりました。 Hamlはインデントを使ってシンプルにHTMLを生成できるテンプレートエンジン。SassはHamlとセットで誕生した、インデントを使ってCSSをシンプルに書ける独自のスタイル指定言語です。CSSを書くのが苦痛じゃなくて、楽しくなるという触れ込みです。 Hamlのほうは、今回はSassの分離が大きなトピックである以外は変化はありません。変化が大きいのは「Brainy Betty」と名付けられたSass 3.1.0のほうです(brainyって脳みそが詰まっていて頭が良いという意味ですね。変な名前を付ける人たちです……。Sass自体も、生意気な女という意味で使われる「sassy girl」にかけているんだ

    楽しいCSSこと「Sass」の3.1が異様な進化:Rails Hub情報局:エンジニアライフ
    B-SAKATU
    B-SAKATU 2011/05/19
  • pre要素で折り返しをするためのCSS

    pre要素でソースコードを折り返すためのCSSです。最近は色々なSyntax Highlighterが登場しているので必要ないかもしれませんが、URLなどの横に長い文字列をpre要素で表示したいときに有効かもしれません。 1.CSS 以下のCSSでpre要素の文字が折り返せます。「white-space: pre-wrap」または「word-wrap: break-word」に未対応のブラウザはoverflowプロパティでスクロールします。 pre { white-space: pre-wrap; word-wrap: break-word; overflow: auto; } 以下は、過去の記事でよくみかけた設定です。 pre { white-space: -moz-pre-wrap; white-space: -pre-wrap; white-space: -o-pre-wrap; w

    pre要素で折り返しをするためのCSS