CSSに関するmanatsu83のブックマーク (5)

  • 要素の重なりについて本気出して考えてみた(z-indexとか何とかとか) – No.1026

    あなたはhtml/cssにおける要素の重なり方を知っていますか? z-indexを指定しなければ先に書いたほうが下層で後に書けば上層に来る? というわけで、実は割りと複雑な要素の重なりについて書きます。そこまで意識しなくとも支障がでることは滅多にないと思いますが、知っておいて損はないはずです。 ちなみに、昨今CSS3なるものが流行していますが、この記事はW3CのCSS2.1勧告(と付録)を元に書いています。 基的な内容であり、目新しいことは特になにもありません。 スタックコンテキストとスタックレベル 用語と概念から。 ある意味、ここが一番よくわかりませんが、ここがわからないと何もわかりません。 スタックコンテキスト(スタッキング・コンテキスト) 簡単に言えばauto以外のz-indexと位置(static以外のposition)を指定した要素によって生成される階層構造を形成する固まりです

  • カスタマイズで覚えておきたいCSSのposition

    カスタマイズ初心者の方は、この記事を読む前に下記の記事を読まれることをオススメします。 カスタマイズする時に理解しておきたいdiv要素 Google Chrome Developer Toolsで要素を確認 Google Chrome Developer ToolsでCSSを確認 それでは題のカスタマイズで覚えておきたいCSSのpositionを説明していきます。 理解するのが難しいposition: relativeとposition: absolute カスタマイズをする際にposition: relativeとposition: absolute上手く使ってカスタマイズする事があるんですが、理解するまでが難しいです。 CSSを使ったテクニックの中では高度な事を行っているので、基をじっくり理解して覚えていきましょう。 positionを使った配置方法の指定 positionには4つ

    カスタマイズで覚えておきたいCSSのposition
    manatsu83
    manatsu83 2014/08/18
    あとでじっくり読ませていただきます。」
  • | こくみこのダメブロで…ざす!

    0ask-st4さん *Mon Style*jumpedlevelfuelさん あたしが復縁できたマニュアルunique-life14さん 「今のあなたに似合う」を探す。シンプルでかっこいいママファッションaehuninさん 不妊治療専門 東京都日野市 鍼灸院rivitoさん 気でダイエットを成功させたい方へ

    | こくみこのダメブロで…ざす!
    manatsu83
    manatsu83 2014/08/16
    z-index のマイナスは0より上という罠。
  • もう、class名やid名で悩まないんだからっ!!|CSS HappyLife

    class名やid名って付ける時悩みませんか? 今でもボクは結構悩むんですが、そんな悩みを解決する為に、人さまのソース覗きまくってよくあるclass名とid名を拾ってきました。 これで、チョットだけ作業効率アップ!? 2010年6月10日追記: この記事自体、2007年 1月15日に書かれてるんでかなり古いです。 あくまでも参考程度に留めてもらうのが良いかと思います。 今だったら、html5の要素を参考にしたりして付けるのが、今後の事を考えると良いのかなーと思います。 また、善し悪しの判断はせずに公開しているものですが、位置に関するのは仕様変更に弱くなるのでオススメはしません。 全体に使えそうな感じ wrap wrapper top-wrapper wrapperAll frame mframe all-frame container page pagetop all allContent

    もう、class名やid名で悩まないんだからっ!!|CSS HappyLife
    manatsu83
    manatsu83 2014/07/02
    クラス名に悩んだらこれを見る。
  • 【HTML+CSS】ウインドウ幅に合わせて画像サイズを変化させる方法 [ホームページ作成] All About

    レスポンシブWebデザインとは、画面サイズなどの閲覧環境に応じてWebページのレイアウトや装飾が自動調整される作り方のことです。記事「レスポンシブWebデザインの簡単な作り方」でも解説しました。特に、画像サイズを画面幅に自動で合わせる方法は、Webサイトのスマートフォン対応目的でも需要が高いでしょう。 例えば、下図のWebページをご覧下さい。ページ上部に見える大きなバナー画像の表示サイズは、ブラウザのウインドウサイズをある程度小さくすると、描画領域の横幅に合わせて自動的に縮小されるデザインになっています。 今回はこのような、画面サイズ(ブラウザのウインドウの横幅サイズ)に合わせて、縦横比率を維持したまま画像の表示サイズを変化させる方法をご紹介いたします。レスポンシブWebデザインを採用したページではもちろん、そうでない場合でも、画面サイズに合わせて画像サイズを自動で拡大縮小させたい様々な場

    【HTML+CSS】ウインドウ幅に合わせて画像サイズを変化させる方法 [ホームページ作成] All About
    manatsu83
    manatsu83 2013/08/14
    img の横幅をウィンドウサイズに合わせる
  • 1