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
これがスマートフォン向けサイトを作るときの 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ピクセルも小さくなってしまって、このスクリ
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要素を利用する方法。コメント欄
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
