css で高さを％指定する際のメモ：地方で活動するweb制作者の日々を綴るblog
2007年08月27日16:27 カテゴリ技術-css css で高さを％指定する際のメモ ページの高さ全体にブロック要素を取りたいときのメモ。 ブラウザ全体のサイズに高さを取りたいけれど... ブラウザサイズ ＞ コンテンツサイズ の場合に、<div style="height: 100%">とやれば、IEではページ全体に高さを取ることができます。 しかしFirefoxやSafariでは、この指定を行ってもページ全体に高さを取ることができません。 これは、パーセントで表示する場合の規定が包含ブロックの高さに対する割合を指定する。 包含ブロックの高さが明示されておらず、内容領域の高さに依存していれば、'auto'として解釈する。ということに起因しています。 ％指定の場合は、元要素のサイズからの比率 「包含ブロック」ってなんのこっちゃと思いますが、ようは各タグで囲まれた部分のことと考えてくれ
css position:fixedで縦横中央に要素を配置する - Qiita
position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); 元記事はこちら： http://stackoverflow.com/a/26962247/5209556 元記事によると、translateを使うと3Dアクセラレーションが有効になるため、divの中の文字がぼやける、そこで対策として-webkit-font-smoothingを使えと書いてある。 確かにMacのChromeでぼやける現象が発生した。 -webkit-font-smoothing: none; -webkit-font-smoothing: antialiased; -webkit-font-smoothing: subpixel-antialiased; /* Safari での Default値 */
コンテナーの幅より広がったエリアをcalcでつくる - Qiita
タイトルがなんともわかりづらいけど、キャプチャのような表現をする話。 記事の引用とかコードの表現でこういう見た目にしたいことがある。 やり方は色々あるけど、これをCSSのcalc()でやってみる。 記事全体を包括している親要素の幅が決まっていて、一部のブロック、セクションだけ左右ぶち抜きたい。 マークアップとCSSはこんな感じ。 <article class="entry"><!-- width: 44em; --> <h1 class="entry-title">セロ弾きのゴーシュ</h1> <div class="entry-body"> <p>...</p> <div class="dialogue"><!-- ぶち抜きたいところ --> <p>...</p> </div> <p>...</p> </div> </article>
flexbox レイアウトで内容がはみ出す理由: Days on the Moon
「flex box layoutで中に長いテキストなどを含む幅可変要素のレイアウト - くらげだらけ」という記事が興味深いです。過去に「長い英単語を途中で折り返したいときの CSS の指定方法」にて、word-wrap: break-word と display: inline-block などの組み合わせには注意が必要 (word-wrap の指定が効かないように見えることがある) と述べたのですが、似たようなことが display: flex にも言えるようです。 この挙動は認識していなかったので CSS Flexible Box Layout Module Level 1 (flexbox 仕様草案、2016 年 4 月 2 日時点のもの) を見てみたところ、「4.5. Implied Minimum Size of Flex Items」(flex アイテムの暗黙的な最小サイズ)
あなたはCSSプロパティ”display”をどのぐらい知っているだろうか？ | POSTD
CSSプロパティの1つである display は、CSSレイアウトに用いるプロパティの中でも極めて重要なものです。よく使われているのは、 block や inline 、 none あたりでしょう。 table や inline-block も、今ではかなり一般的になってきたと言えます。一方、 flex は新たに登場したものです。きっとユーザに気に入られるでしょう。これはレイアウト用に特別に作られたdisplayプロパティです。さらには、この先、 grid がまもなく私たちの秘密兵器となるでしょう（現在、盛んに取り組まれています）。これもまた、レイアウトに特化したプロパティです。 本記事は、当初予定していたよりもずっと長くなりました。ご希望に応じて、自由にサブセクションに飛んでお読みいただければと思います。もし、お時間を割いて全体を読んでいただけるのでしたら、大変嬉しく思います???? 目
<link rel="preload">を使ってCSSを非同期で読み込む - Qiita
<link rel="preload" as="style" href="async_style.css" onload="this.rel='stylesheet'"> と記述すると、PreloadでCSSを取得して、読み込みが終わったらstylesheetを適用させるみたいな感じになる。Preloadはレンダリングをブロックしないので、非同期にCSSを読み込みつつ、読み込み終わったら適用させるみたいなことができる。シンプルでいい。 これは Preload: What Is It Good For? の MARKUP-BASED ASYNC LOADERの箇所に書いてある話で、現在はChrome Canaryのみで対応されていて、問題なければ4月中頃にChromeで使えるようになるらしい。 Preloadについては、仕様には下記のように書いてある。 The preload keyword
モバイルWebのUIを速くする基本テクニックがわかる──Google I/O 2016 High Performance Web UI
モバイルWebのUIを速くする基本テクニックがわかる──Google I/O 2016 High Performance Web UI 川田寛（ピクシブ株式会社） こんにちは、ふろしきです！ 私はHTML5 Experts.jpで、過去2年ほどGoogle I/Oの情報を発信し、Web技術の変化についてお伝えしてきました。振り返るとGoogleは、2014年にモバイルWebの提唱と技術要素の拡大を図り、2015年からは「RAIL（モバイルWebが目指すべきパフォーマンス指標）」や「Progressive Web Apps（アプリのように振る舞うWeb）」といった、モバイルとの親和性が高いWebを作り出すための”考え方”を推し進めました。今年2016年は、さらにそれを踏み込んでいったという感じがします。 今回のI/Oで取り上げるのもそのひとつ。毎度お馴染みGoogle Developer A
z-index再入門 | 第1回 z-indexの仕組み
次のようなケースでは、冒頭のサンプルのような意図しない重なりになる可能性が高いため注意が必要です。 positionプロパティの値をrelative、absoluteにし、かつz-indexの値をauto以外の整数値にしたとき positionプロパティの値をfixed、stickyにしたとき なぜなら、上記の条件下では、スタック文脈というものが形成されるからです。次に、スタック文脈を解説します。 スタック文脈とスタックレベル スタック文脈（stacking contexts）、スタックレベル（stack level）という概念は、z-indexを扱う上でとても重要なものです。 スタック文脈 スタック文脈とは、ある条件を満たした要素によって形成される階層構造（文脈）のことです。 スタック文脈を形成する条件は前述した通りですが、例えば、position: absoluteとz-indexに整
Creating Intrinsic Ratios for Video
Did you ever want to resize a video on the fly, scaling it as you would an image? Using intrinsic ratios for video, you can. This technique allows browsers to determine video dimensions based on the width of their containing block. With intrinsic dimensions, a new width triggers a new height calculation, allowing videos to resize and giving them the ability to scale the same way images do. See exa
[CSS]Flexboxのこれが知りたかった！今まで出来なかったことがシンプルで簡単に実装できるスタイルシートのまとめ
今まで出来なかったこと、かなり複雑なコードでスクリプトを併用しないと実装できなかったことをシンプルなHTMLとCSSで実装するFlexboxのテクニックを紹介します。 Solved by Flexbox Solved by Flexbox -GitHub 各コードの対応ブラウザは、Flexboxを使用しているため下記の通りです。 Chrome 21+ Opera 12.1+ Firefox 22+ Safari 6.1+ IE 10+ コードのライセンスはMITライセンスです。 「clearfix」「overflow: hidden」から卒業 高さが分からないフッタを常に最下部に表示 高さが分からない要素を天地左右の中央に配置 レスポンシブ対応の3カラムをシンプルなコードで実装 Flexboxを使った柔軟なグリッド 入力フィールドとボタンの高さを揃えて、くっつけて配置 「clearfix」
![[CSS]Flexboxのこれが知りたかった！今まで出来なかったことがシンプルで簡単に実装できるスタイルシートのまとめ](https://cdn-ak-scissors.b.st-hatena.com/image/square/ee61fe7384f341a2c6e8f8141198967ab8c04f2f/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201601%2F2016021702.png)
CSSで計算式を可能にするcalc()ファンクション
Updated 2014.03.23 / Published 2013.10.28 CSS3にcalc()というファンクションがあるのをご存知ですか？CSSにおいて計算式を可能にしてくれる便利なcalc()ファンクションのサポート状況や使い方について紹介します。 「横幅にパーセンテージ値を用いつつ、その横幅から指定ピクセル(px)分だけ引けたら...」こんなことを思われたことがあると思います。それをCSS拡張メタ言語を使うわけでもなく、CSS単独で実現できてしまうのがcalc()ファンクションです。 参考：Mathematical Expressions: 'calc()' calc()ファンクションの実装状況 IEIE9よりサポート ChromeChrome19より25まで-webkit-のベンダー識別子付きで先攻実装 Chrome26よりサポート FirefoxFirefox4より15
Smashing Magazineのパフォーマンス改善ケースが凄まじい件 - MOL
Frontrend Advent Calendar 2014 - Qiitaの24日目。たぶん。知らんけど。 ちょっと前になるが12/13にバンクーバーで開催されたThe Style & Class Conference 2014に参加してきた。前日にSmashing Conferenceが、ウィスラーというバンクーバーから比較的近い所で開催されていて、本当はそっちに行きたかったんだけど高額なため、地元コミュニティのほうにだけ参加した。ウィスラーの方の記事は@ygoto3が書いてたっぽい。 Smashing Conferenceで登壇していたJohn Allsopp氏やVal Head氏もこのカンファレンスで登壇するということで、『なんだ、ウィスラーのついでかよー』と思い全然期待してなかったのだが、行ってみたらカンファレンス全体の構成などすごく考えられていて、とても素晴らしいカンファレンス
そろそろクリティカルCSS（Above the fold）について説明しておこうか | Yuhiisk
先日HTML5minutesという勉強会でクリティカルCSSについてLTをしてきたのだが、 あまり日本では馴染みの無い単語なのでここで説明しておこう。 クリティカルCSSとは 某RPGの大打撃を与える印象のクリティカルヒットとかそうゆうのではなくて、 CSSにおけるブラウザ表示パフォーマンスのTipsである。 クリティカルというのはクリティカルパスのことで、クリティカルパスCSSなどとも呼ばれる。 クリティカルパスとは、プロジェクトの各工程を、プロジェクト開始から終了まで「前の工程が終わらないと次の工程が始まらない」という依存関係に従って結んでいったときに、所要時間が最長となるような経路のこと。クリティカルパスに含まれる工程に遅延が発生すると、その分だけプロジェクト全体のスケジュールも遅延するため、クリティカルパスに含まれる工程は特に遅れてはならない重要な工程として重視されることになる ク
ディズニー社に学ぶ！HTML/CSSで12個のアニメーション基本原則を完全再現！ - CSS Animation
ディズニー社に学ぶ！HTML/CSSで12個のアニメーション基本原則を完全再現！ フロントエンド・デザイナーやデベロッパーは、スタイリングや配置、またデザイン性の良いサイトを作成するために CSS（Cascading Style Sheets、カスケーディング・スタイル・シート）を利用します。しばしばページに変化（英: Transition）やアニメーション（英: Animation）を加えるために CSS を利用しますが、まだまだ開発する余地がありそうです。 アニメーションは、訪問ユーザーにとってデザインをよリ理解しやすく、ためになる情報を伝える強力なツールとなるでしょう。ウェブサイト制作で活用でき、よりパワフルな使い方ができる基本原則を今回はご紹介します。 ディズニー社の現場で長年培われた、アニメーションの基本原則 12 個（英: 12 Principles of Animation）
CSS には vw, vh, vmin, vmax という単位がある | DevelopersIO
例として以下の様な HTML 構造があったとします。 <body> <!-- 画像解像度: 100 x 100 (px)--> <img src="images/thumbnail.jpg" /> </body> img { display: inline-block; margin: auto; width: 10vw; } img の幅を 10vw と指定しています。基準となるビューポートの幅を vw で表すと 100vw となります。iPhone 5S のビューポート幅をピクセルで表すと 320px な訳ですが、10vw はその 1/10 ということで32px が img の幅となります。つまり 1vw は 1% と同じ長さになります。もちろんリキッドレイアウトにも対応した動きを持っています。 Demo - viewport lengthを開く（このサンプルはChromeブラウザでの
要素の重なりについて本気出して考えてみた（z-indexとか何とかとか） – No.1026
あなたはhtml/cssにおける要素の重なり方を知っていますか？ z-indexを指定しなければ先に書いたほうが下層で後に書けば上層に来る？ というわけで、実は割りと複雑な要素の重なりについて書きます。そこまで意識しなくとも支障がでることは滅多にないと思いますが、知っておいて損はないはずです。 ちなみに、昨今CSS3なるものが流行していますが、この記事はW3CのCSS2.1勧告（と付録）を元に書いています。 基本的な内容であり、目新しいことは特になにもありません。 スタックコンテキストとスタックレベル 用語と概念から。 ある意味、ここが一番よくわかりませんが、ここがわからないと何もわかりません。 スタックコンテキスト（スタッキング・コンテキスト） 簡単に言えばauto以外のz-indexと位置（static以外のposition）を指定した要素によって生成される階層構造を形成する固まりです
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Chrome / Safari not filling 100% height of flex parent
Blog — Darkhorse Analytics | Edmonton, AB
CSS3のanimationを使って回転するグラフィックをつくる | NAKAZI LAB.（ナカジラボ）
http://ideahacker.net/2013/12/03/6983/
