【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) 下記より詳しく解説します。
HTMLのリセット(reset)ボタンで検索条件をクリアのときに、すでにデータがあるとクリアされない - それマグで！
html で検索フォーム HTMLのFormで検索フォームを作ると、検索条件のリセットが欲しくなる。 とくにテストしているとリセットボタンが欲しくなる。 フォームのリセット フォームのリセット、とても簡単です。HTMLの遺物を使えばいいんです。 <form action=search method=get> <input type=search name=user value='' > <input type=submit value=search> <input type=reset value=reset > </form> とても簡単です、ボタンを一つおけばいいのですから <input type=reset value=reset > 問題点：リセットはクリアじゃない WEB側のCGI*1でHTMLを生成するとき サーバー側でHTMLレンダリングを行っていると <input type
frameset要素
frameset要素は、ウィンドウを各フレームに分割する要素です。分割された各フレームに対応する文書へのリンクはframe要素で行います。 frameset要素はnoframe要素を包含して、フレームをサポートしていないブラウザのために代替テキストを提供することもできます。
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
ファイルアップロードをajaxで行う IE対応 - AUSGANG SOFT
ファイル選択をしたら自動的にajaxでアップロードする機能をつくっていたのだけど、やっぱりIE対応でつまづいた。いちおうIE8対応を目指した。 ajax送信は、このライブラリを使用。 jQuery Form Plugin http://malsup.com/jquery/form/ そのままだとIEで動かない。 596行目のfinallyがIEではエラーになるので、コメントアウト。 次、ファイル選択で自動アップロードしたかったので、jQueryのchangeイベントで処理を書いたが発火してくれない。 jQueryのchangeイベントで気をつけること http://d.hatena.ne.jp/sho-yamasaki/20120319/1332168988 onchangeならうまくいくらしい。 あと、ファイル選択部分を以下をつかって整えた。 JavaScript · Jasny Boo
[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がずれて表にな
disabledなコントロールはフォームで送信されない: 永遠ログ
Mac OS X 向けアプリケーション開発を仕事としている永遠製作所が、日々の開発でつきあたった問題点や、ちょっとしたTipsをメモしていこうと言う、自分勝手な覚え書きブログ。 なぜ、Hidden Fieldなんて使おうと思ったのかというとdisabledに設定したText Fieldの値がサーバーアプリケーションで受け取れなかったからです。 そもそもブラウザが送信していないのか、WebObjectsがフィルタしているのかわかりませんが、バインドした変数には何にも入ってきていません。 そもそもHiddenなコントロールでは値は変更されないのだから意味がないのでは？と思うかもしれません。実は、ブラウザ上でJavaScriptを使って値を設定してサーバーで受け取ろうという考えです。直接テキストを編集されたくないのでdisabledに設定したのですが、サーバー側で受け取れませんでした。 そこで、
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
jQueryでCSSの値を複数設定するときの記述 - Qiita
「max-width: 100%」が指定されたimg要素を縦横比が維持された状態で縮小する方法 | CreativeStyle
tableでwidthを指定しても幅が固定されない場合の対処法｜クロノドライブ
365体育网在线手机版-首页(歡迎您)
ドラッグできる要素 - jsdo.it - Share JavaScript, HTML5 and CSS
フォーム送信前にJavaScriptでdisabled解除 - Artsnet
ブラウザ のキャッシュを制御する/no-cache