【html/CSS】幅(width)を子要素に合わせる方法
親要素がdivなどのブロック要素の場合、何もしないと横幅がいっぱいになります。 下記は青背景が親要素、オレンジ背景が子要素です。後述する方法の比較のため兄弟要素にspanタグをいれています。 divの兄弟要素のspan <style> .example{ background: #77abd8; } .example>*{ background: #d3a142; } </style> <div class="example"> <a href="#">子要素(aタグ)</a> </div> <span>divの兄弟要素のspan</span> この親要素を子要素の幅に合わせましょう。
【CSS】tableの奇数行,偶数行・奇数列,偶数列の指定方法
「表の奇数行と偶数行の色を変えたい！」 tableの奇数行・偶数行、奇数列・偶数列を指定する方法を紹介します。 結論 【偶数行】tr:nth-of-type(2n) td【奇数行】tr:nth-of-type(2n-1) td【偶数列】td:nth-of-type(2n)【奇数列】td:nth-of-type(2n-1) 下記より詳しく解説します。
Webページを印刷するときの余白をCSSで設定する | クロジカ
ホーム / ハック / Webページを印刷するときの余白をCSSで設定する
CSSを非同期ロードする最も簡単な方法 - Qiita
CSS読み込みの<link rel="stylesheet">は同期なので、レンダリングブロックします。 どういうことかというと、CSSファイルの読み込み・パースが終わるまで画面描写が止まってしまいます。 これに対策する方法としてpreloadというものが策定されましたが、対応状況が微妙です。 2019年7月時点でもブラウザシェアが8割しかなく、Firefoxは当面対応するつもりがないようです。 とはいえ残り2割のためにloadCSSを突っ込んだりとか始めると本末転倒感に溢れます。 全ブラウザ対応のためには、なんにしろ結局JavaScriptをこりこり書くしかない状況でした。 が、なんかすっごい簡単な対処法があったので紹介してみます。 以下はScott Jehlによる記事、The Simplest Way to Load CSS Asynchronouslyの日本語訳です。 ちなみにSco
CSSのposition: stickyでテーブルのヘッダー行・列を固定する - Qiita
CSSの position: sticky を使ってテーブルのヘッダー行・列を固定する方法を解説します。動作確認したブラウザーは次のとおりです。 Google Chrome 71 Firefox 64 Safari 12 Microsoft Edge 43 (EdgeHTML 17) ちなみに、IE 11などの対応していないブラウザーで見た場合、ヘッダー行・列が固定されないだけで、表示が崩れたりはしません。 theadを固定するかthを固定するか 縦スクロール時にヘッダー行を固定するにあたり、thead に対して position: sticky を指定したくなりますが、これはあまり筋が良くなさそうです。まずChromeやEdgeは thead や tr の固定に対応していません1。 display: block などで回避できますが、列の幅が決まっていないといけないという制約が生まれたり
【CSS】テーブルタグ内のラジオボタンの押しにくさを解消する - Qiita
きっかけ td内部に設置したラジオボタンのクリックのしにくさに業を煮やして諦めかけてたところ解決したのでメモ 見えない壁 td内部に設置したラジオボタンのクリック範囲を広げるためにやったこと つまりは失敗例です labelで挟み込んでマージン無くして幅は100%高さも100%！！ あれ？ 幅はセル内いっぱいになったけど高さが何かに制限されている とクロームちゃんは教えてくれました その時のHTMLとCSS <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <link rel="stylesheet" href="test.css"> <title>jstest</title> </head> <body> <table> <tr> <th>ラジオ</th> <th>テキスト</th> </tr> <tr> <td>
TABLE の TD 要素内全てをチェックボックス化したいが…… - 風柳メモ
HTMLのチェックボックス要素（input[type="checkbox"]）で表示される□は、閲覧環境によっては小さく表示されてしまい、チェックを入れたり外したりしにくい場合がある。 その場合の対処法として、 チェックボックスそのものをCSSで拡大する（参考：チェックボックスやラジオボタンを大きくする方法: 小粋空間、チェックボックスを大きくしたい - Qiita） LABEL 要素を用いて、有効な範囲を拡大する チェックボックスの代替として、画像＋JavaScript 等でなんとかする といった方法があると思われる。 で、2. の手法でやろうとしたのだが、条件を チェックボックスを、TABLE 内の TD 要素下に置く TD の高さや横幅は不定 TD 内部全体を有効範囲としたい チェックボックスそのものは、TD要素の上下左右中央に表示 のように定めたところ、どうやって CSS を書けば
scrollbar-base-color－スタイルシートリファレンス
scrollbar-base-colorプロパティは、Internet Explorerが独自に追加したプロパティで、 スクロールバーのベースの色を指定します。 スクロールバーの色指定は、 IE5.5では<BODY>タグへの指定で有効となりますが、 IE6以降では<!DOCTYPE>宣言でブラウザの表示モードが「標準モード」となった場合、 <BODY>タグのみへの指定では無効となることがあります。 IE5.5とIE6以降の両方でスクロールバーの色指定を有効にするには、 <HTML>と <BODY>の両方に指定します。 また、Operaでは、ブラウザの表示モードが「互換モード」のときに <BODY>に指定すると有効となります。 尚、Netscape Navigator等のスクロールバーの色指定に対応していないブラウザでは無視されるので注意してください。 スクロールバーの色指定の比較（別ウィン
『リンク要素から離れた要素のhoverを実現する方法』
Remote Linking （別窓） このRemoteLinkingという手法では、リンク要素から離れた要素のhoverを実現することが出来ます。 デモは以下から。 Remote Link （別窓） リンク要素から離れた要素のhoverを実現と書きましたが、実際は要素同士は一つのaタグで囲まれています。 具体的には以下のような感じです。 <div class="people"> <a href="#toby" id="toby"> <span class="name">Toby Yong</span><br /> Toby Young joins the fifth season of Top Chef to lend his culinary expertise to the judges table. Young is a British journalist and the aut
IEでtd,thの幅指定（width）が効かないときにするべきこと - TechNote
table内のtd,thに対してcssできちんと幅指定をしているはずなのに、効かないことがあります。本件、遭遇する度にイヤ気がさす自分がいるので、今回はきちんと忘備録に残しておくことにしました。 自分の場合、以下のようにヘッダ行を２行にしている場合などにwidthが効かない現象に遭遇しているような気がします。 htmlの記述 <table class="sample"> <tr> <th width="350px" colspan="2">大ヘッダ</th> </tr> <tr> <th width="150px">子ヘッダ１</th> <th width="200px">子ヘッダ２</th> </tr> <tr> <?php foreach{$dbh->query($sql) as $rows}:?> <td><?php echo $rows['staff_id']; ?></td> <
Firefox 32：コンテキストメニューのナビゲーションを消す: べつになんでもないこと
Firefox 32になったらコンテキストメニューのナビゲーションがアイコン化してうざくなったので、userChrome.cssにナビゲーションを削除するよう追加。 #context-back, #context-forward, #context-reload, #context-stop, #context-bookmarkpage, #context-sep-navigation { display: none !important } せっかく面倒なことをしてるので、画像をコピー、画像の URL をメールで送信、デスクトップの背景に設定も消す。 #context-copyimage-contents, #context-sendimage, #context-setDesktopBackground { display: none !important } 先月（β）からもやもやし
[css][html] divでtableを作る tableの行全体をリンクにする divの高さとborder-bottomを揃える display:table-cellは神です。
[css][html] divでtableを作る tableの行全体をリンクにする divの高さとborder-bottomを揃える display:table-cellは神です。 スマホ用のサイトを作っててすんげーハマった。 何にハマったって、こういう２列のリスト（表）を作り、さらに行全体をクリックしてリンクに飛ぶようにする。 コレ、生半可なことじゃできないんだね〜。 調べると display:block; にするとブロック全体がリンクされるって言うけど、これを表の中にある行にするってのが・・・。左右の列、セルの高さを揃えないといけない。全然できない。揃わないったら揃わない。 <table> → display:block;とするとリンクがセル単位になってしまう（行単位じゃない）。 <ul><dl> → ブロック全体以前に、左右の列の高さが変わるとborder-bottomがずれて表にな
Nightly(Firefox 12.0a1) の about:newtab で表示するアイテム数を増やす - hogehoge @teramako
aboutURLに対してスクリプトを実行できる Scriptish でやってみた。 about:config 等からbrowser.newtabpage.enabledとextensions.scriptish.enabledSchemes.aboutをtrueにしておく。 3分クッキングみたいな気分で書いたので、ハードコーディングされていたりでコードはアレ（特に、CSSの変更周りが酷い） var rows = 4, columns = 5; 辺りを弄ればアイテム数を制御できる。 メモ http://mxr.mozilla.org/mozilla-central/source/browser/base/content/utilityOverlay.js#46 browser.newtab.urlの値は、一度参照されたら確定してしまう。途中で変更不可なのはいかがなものか。後でBugzilla
CSSで半透明、opacityとrgbaの違い - ぼくはまちちゃん！
こんにちはこんにちは！！ 今日はちょっとCSSのメモです！ 半透明について！ opacityを使った透過 #testOpacity { -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=40)"; /* IE */ filter: alpha(opacity=40); /* IE */ -moz-opacity:0.4; /* Firefox(old) */ -khtml-opacity: 0.4; /* Safari(old) */ opacity: 0.4; } Opacity test! opacityは子要素まで全て透過する。 RGBaを使った透過 #testRgba { background: rgba(0, 0, 0, 0.4); /* RGBを10進数(0〜255)で指定、不透明度を0〜1.0で指定 */
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
jQueryでCSSの値を複数設定するときの記述 - Qiita
「max-width: 100%」が指定されたimg要素を縦横比が維持された状態で縮小する方法 | CreativeStyle
tableでwidthを指定しても幅が固定されない場合の対処法｜クロノドライブ
ドラッグできる要素 - jsdo.it - Share JavaScript, HTML5 and CSS