flex-grow: 1な感じで作った不定の要素の高さを知る子要素を作りたい - Qiita
なやみ 下みたいなflex-grow: 1で作った子要素を、親要素と同じ高さにしたい つらい 試しに子要素を height: 100% にしてみると、まぁそりゃ子要素見ちゃうよね じゃあ親要素を100%にすればいいじゃん、としても、その親の高さを見ちゃうのでflex-grow台無し。そんなに人生甘くない ここで子要素100%にしても残当な結果 ひらめき The box’s position (and possibly size) is specified with the top, right, bottom, and left properties. These properties specify offsets with respect to the box’s containing block position: relative / absolute の関係にすれば、子absol
Firefoxだけborder-radiusがなぜか効かないcssコード - Qiita
border-radiusとは block要素の角を丸くするcssです。 指定した長さを半径として、ブロックの四隅が丸くなります。 また、十分大きな長さを指定すると、block要素を円形に切り取ることができます。 参考：https://developer.mozilla.org/ja/docs/Web/CSS/border-radius 発生した現象 以下のコードで、div要素を丸く切り取って表示しようとしました。 <style type="text/css"> div { width: 100px; height: 100px; background-color: red; border-radius: 1000000000px; } </style> <div/> このコードはMac Chrome, Mac Safari,iOS Safari, iOS Chrome, Android
総行数57,000の巨大CSS群をLessに書き換えた軌跡 - mixi engineer blog
こんにちは！フロントエンド闇祓いの Kuniwak です。 この投稿はmixiグループ Advent Calendar 2015の20日目の記事です。 今年の9月に、スマートフォン Web ブラウザ版 mixi「mixi Touch」の巨大 CSS を Less （CSS プリプロセッサー）でビルドする環境へと移行しました。 書き換えた CSS の行数は、なんと 56,725行 です。😵 ということで、今回は弊社の大規模 CSS → Less 移行事例についてお話しします。 背景 スマートフォン版 mixi は、2010年5月に始まりました。 この頃のスマートフォンは、iPhone 端末であれば iPhone 3GS、Android 端末であれば Nexus One という時期です。 また、スマートフォンの世界では、Webkit ベースのブラウザーが席巻していた時代ということになります。
CSSで泥沼にはまらない3つのアプローチ｜『プロとして恥ずかしくない 新・WEBデザインの大原則』発売記念イベント
注釈 60分のセミナー用のスライドです 60分間ひたすらしゃべるための資料なので、目次はありません セミナーのフォローアップのために公開しています 文字が大きいのは、会場の後ろの席でも見えるようにするためです Cascading Style Sheets .header { margin: 8px; color: #f00; } マジックナンバーの良くない例 .main { float: left; width: 640px; } .main h1 { width: 640px; } .main p { width: 640px; } .main ul li { width: 620px; margin-left: 20px; } 数値が乱立 .aaa { width: 640px; } .bbb { width: 324px; } .ccc { width: 216px; } .ddd
いま俺たちに必要なのはz-indexの明確な指標だ - Qiita
こんにちは、@armorik83です。こういう煽ったタイトルを書きたいってずっと思っていたので今回やってみます。 z-indexの値付けどうしてる? z-indexの説明は省略しますが、この値は取りうる範囲が膨大1でそれに対する指標が無いことから、複数のWeb設計者が入り混じる場合にバッティングする恐れがあります。 1から10までの範囲で収めていた設計者のサイトに100刻みの値付けをするプラグインが導入されると、一気に関係が崩れてしまうことが想像できます。 W3Cではこの値についての明確な指標を載せていないようにみえます。（調査不足だったらすいません） 広告業界では Web広告業界の展開は日本国内外問わず盛んで、さまざまな手法でうっとうしい広告を載せてきます。この時、元のコンテンツにオーバーレイする形で表示される広告や、マウスオーバーで拡大する広告などが普及してきたことで、2012年にこの
link要素へのhidden属性
link要素へhidden属性を指定してやり、それのトグルで特定のCSSファイルに書かれたルール群の有効・無効を切り替えられるかなと考えた。まずhidden属性でCSSが無効になる必要があるので調べた所、無効にならなかった……。仮定で挫折。 Demo: <link hidden> もし無効になるとしたら外部CSSファイルに書かれたcolor: redは反映されないはずだが、そうはならなかった。style要素への指定でも同じ。 hidden属性は単純に見えなくなるというだけで、機能性自体は残ると捉えておいた方が良いのかな。hidden属性を指定した要素の子要素の機能性についてはその仕様で触れられているけど、指定した要素の機能性については触れられていないような気がする。 セレクター単位ではなく、ファイル単位でCSSを簡単に有効化・無効化する方法を考えているわけだけど、良さそうな方法が思いつけな
これがスマートフォン向けサイトを作るときの viewport 設定３パターンだ
スマートフォン向けの Web サイトを作るとき、viewport の設定次第で使い勝手が大幅に変わる。 最近はレスポンシブ Web デザインが流行してるけども、その大前提として viewport の設定パターンを抑えておくのは重要だろう。 この記事では、viewport の設定によって、見た目・使い勝手がどう変わるかを解説する。 パターン1: 何も考えずに HTML を書く まずは、viewport を指定せずに、単純な HTML をスマートフォンで表示してみる。 <!DOCTYPE html> <head> <meta charset="utf-8"> </head> <body> <img src="/images/logo-ja.png"> <p>色んな素材がごった煮になった様子をお椀で表現しています。 湯気が<strong>「てっく」</strong>に見えるのが隠し味になっていま
Latest topics > CSS3のborder-imageを先行実装した-moz-border-imageの仕様変更とその対策 - outsider reflex
「Metal」の場合、右の辺だけ5ピクセル幅でそれ以外の辺は10ピクセル幅という事にしていた。しかし、単にこう書くと、「タブの内容」の周囲に「10ピクセル幅の枠線」が付くことになるので、タブの高さが上下合わせて20ピクセル広がってしまう。なので、「タブの内容」の方に という感じでネガティブマージンとそれを相殺するパディングを指定して、枠線とタブの内容を重ねることでタブの大きさをそれほど大きく変えないようにしていた。 それが、Nightlyではこんな事になってしまってた。 新しいborder-imageの仕様に合わせて実装が変わったということなのか、「タブの内容の周囲に10ピクセル幅の枠線が付」いても、その分ボックスの大きさが広がるという事が無くなったようだ。にもかかわらずネガティブマージンを適用していたがために、今度は逆にタブの高さが上下合計で20ピクセルも小さくなってしまって、このスクリ
hr要素を文字で入れ替える
HTML5になってhr要素はセクション内での区切りに使うものなどと役割が割りとはっきりと決められました。今までもそんな感じで使ってた人が多いですけど。ただhr要素のCSSによる装飾はなかなか難しいところがあります。そこを擬似要素を利用してゴニョゴニョすることにより、あまり罫線々々してない区切りを作って頑張ろうとかそういうお話です。 Demo: Swap HR Element with Character(s) 単純に元のスタイルを消して背景を透明にし、そこに擬似要素を重ねてやるという最近良く使われるテクニックです。 hr { margin: 2em auto; border: none; position: relative; clear: both; width: 100%; height: 48px; background-color: transparent; box-sizing:
preの背景をブラウザの幅いっぱいに拡大する
ここ最近のコードブロックのスタイリングの流行りに、本文よりもコードブロックが左右に飛び出すようなデザインがある。有名所だとQuirksModeで見ることができる(ここが発祥かもしれない)。このデザインはmarginプロパティで負の値を指定し、paddingプロパティでその分戻すことによって実現している。そのため非幅固定か幅固定でもQuirksModeのように左寄せならこの方法で実現できるが、うちのサイトのように幅固定で中央寄せな場合は左右のマージンが不定なため実現できない。しかし:before及び:after擬似要素を使うまったく別の方法でも実現することができた。 Demo: Expand pre Background ブラウザをリサイズしても幅固定と中央寄せのレイアウトを崩すことなくpre要素の背景がブラウザの幅いっぱいに拡大しているように見えるのが確認できると思う。 pre { pos
IE8バグ？：a要素内に画像があってa要素に背景を指定した時に位置がずれる
キャプチャ見てもらうと分かるようにIE8だけ極端に位置がおかしい。 IE8がリリースされてから、まだあんまりいじってないのでよく分かってないのですが、今組んでいるサイトをIE8でチェックしたら、「あれ？表示がおかしい...」って事に遭遇してしまったので、エントリー。 よくある感じで、リストのマーカー変わりに背景の指定をa要素にして、そのリスト内には画像テキストが入ってたんです。はい。 毎度のようにサンプルも用意してみました。 サンプルを見る 発生条件は調べた感じa要素内にimg要素があって、a要素にbackgroundプロパティの指定をした時に起こる感じです。 img要素にテキストが隣接してても同様でした。 サンプルみたいなデザインの場合、マーカー部分も一緒に切ってしまう事が多いから過去の案件は大丈夫だと思うけど・・・ 取りあえず、今回のサンプルに使ったソースは以下です。 <ul> <li
a要素が2行になった場合に背景下にテキストが来ないように。
目新しいネタは全く見つからないとか色々を言い訳に、月1書けばいい方になってる今日この頃・・・うぅ。 そういえば、web creatorsの5月号（たぶん）に参考にしているサイトでウチのサイトの名前があったとかどーとか聞いたんですがマジっすか！？読んでないーorz あと、7月号（Vol.91）にちょろっと記事書いてるので良ければ買ってくだしあ。 タイトルがa要素になってますが、インライン要素でもいいです。 背景下にとかも書いてますが、リストとかでマーカーの変わりにbackgroundをa要素に指定した時なんかの場合です。 タイトルって難しいですねorz さて、時間もあまりないので本題に。 サンプルページを見る 以前に書いた、ユーザーの動き。にもあるように、リストのマーカー部分をクリックして、クリック出来ない的な人が居たりするってのもありますが、li要素にbackgroundの指定をしてpad
CSSを追加する関数 - 素人がプログラミングを勉強していたブログ
の39番目とGM_addStyleの実装と最適化 - 0xFFについて。 まず、style要素を使う方法。 function addStyle(css) { var style = document.getElementsByTagName('style').item(0); if (!style) { style = document.createElement('style'); style.type = 'text/css'; (document.getElementsByTagName('head').item(0) || document.documentElement).appendChild(style); } style.appendChild(document.createTextNode(css + '\n')); } 元からあるstyle要素を利用する方法。コメント欄
KHTMLへの暫定的対処を行った (kuruman.org > Kuruman Memo)
Safari 3やChromeで使用されているKHTMLはacceptヘッダでapplication/xhtml+xmlを要求してくるにもかかわらずxml-stylesheet処理命令による代替スタイルシート指定を無視し、すべてのスタイルシートを適用する。このページはそれらの環境で盛大に崩れていたのだが、Chromeの登場に伴いなにやらあまり無視できないシェアになってきた、らしい。一応読めるので放置してきたが、今日限りでUser-AgentヘッダにKHTMLを含む環境に対してはapplication/xhtml+xmlの優先度がtext/htmlより高い場合においてもそれを無視してtext/htmlを返すよう変更した。 AcceptヘッダをみてHTML4.01若しくはXHTML1.1っぽいXML複合文書を出力する事にして、自らXMLを選択するようなUAはきっとスタイルシートの実装が進んでい
RedLine Magazine : スペースは嫌、class付けるのも嫌な時用(追記有)
スペースは嫌、class付けるのも嫌な時用(追記有) >>081210：追記 コメント欄にてもっといい書き方教えて頂きました！ タイトル、なんのこっちゃ？って感じなんですが、そういう時があるんです。例えば会社概要なんかをマークアップした時、定義リストとして書く際にdtに社名、所在地、電話番号・・・って入れるじゃないですか。そういう部分の元原稿って「社 名」みたいな感じで２文字の部分に予めスペースが入ってて見た目を整えてあるものが多いんですね。なんちゃって均等割り付けみたいな感じ。 ところがwebの場合、そういうのってhtmlに直接スペース入れられないじゃないですか。アクセシビリティ的にも文書的にも。もちろんデザイナ目線でのその部分の見た目を整えたい気持ちも分かるんですね。なのでCSSのletter-spacingで左右揃ってなくてもとりあえずなんとなく全部間隔あけとくか、チマチマと例外部分
ウノウラボ Unoh Labs: IE6 CSS 『border-leftとpadding-bottom』の謎
こんばんは、sashaです。 次のような形のスタイルを実装しようとしていて、 実例 posted by (C)フォト蔵 IE5.5や6でこんな状況に出会ったことはありませんか？ （赤と青のボーダーは、elementの境目がわかりやすいように入れてあります） 実例バグ posted by (C)フォト蔵 どこがおかしいかお分かりになりますでしょうか。2項目目の赤と青で囲まれたテキストが、左に飛び出ていますね。その下にあるテキストまで、左にずれてます。 これは、多くのデザイナーの悩みの種である、「IE」の代表的なバグのひとつです。 このバグを再現させるのに必要なことはたったこれだけ。 「divの中にdiv」など、ブロック要素を2重にする 外側のブロック要素に、border-leftとpadding-bottomを定義する 以上。これだけでIEさんの地雷を踏めます。 以下のH
operaでのfloatの挙動
operaでのfloatの挙動 TPLHさんでOperaでfloat要素の後続が回り込まないとのエントリーを見て、気になったことをボクもエントリーしておこう。 TPLHさんのエントリーでは以下の記述で、OperaだとBOX3が回り込まないというもの。 <div class="sample-code"> <div style="width:240px; list-style:none; margin:0; padding:0;"> <p style="border:1px #333 solid; margin:0 0 10px; padding:10px; background:#ccccff; ">BOX1</p> <p style="width:93px; height:130px; border:1px #333 solid; margin:0 10px 0 0; padding:10
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
IDEA * IDEA
CSS4セレクタ (Selectors Level 4) の新機能
CSSバグ辞典 Wiki