【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) 下記より詳しく解説します。
frameset要素
frameset要素は、ウィンドウを各フレームに分割する要素です。分割された各フレームに対応する文書へのリンクはframe要素で行います。 frameset要素はnoframe要素を包含して、フレームをサポートしていないブラウザのために代替テキストを提供することもできます。
jQueryを使ってHTMLをオーバーレイ表示する方法を現役エンジニアが解説【初心者向け】
オーバーレイとは 「オーバーレイ」は要素を重ねて表示することです。 例えば、Webサイトでダイアログやポップアップ広告などを表示する際に使用されます。 そして、この記事ではjQueryを使ってHTMLの要素をオーバーレイ表示する方法を確認していきましょう。 様々なオーバーレイ表示をみてみよう オーバーレイ表示をいくつか確認していきます。 以下は、ダイアログウィンドウを表示する例です。画面の中央にある小さめのウィンドウがオーバーレイで表現されています。 jQueryUI Dialog 写真に文字を重ねたオーバーレイの例です。観光サイトなどで良く見かけます。 潮風感じる、ゆるい街 台湾・高雄 [PR] Webデザインで副業する学習方法を動画で公開中 jQueryでオーバーレイ表示してみよう 今回のサンプルプログラムでは、jQueryでダイアログウィンドウを作成します。 なるべくシンプルなコード
【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 を書けば
定義リスト[dl]のdt/ddを横並びにする方法 | たねっぱ！
定義リスト dl のdt/ddタグを横並びにする方法を紹介します！ floatをつかってキレイに整えましょう！ こんばんちわ、やのっぱです。(´・ω・｀) 今回は定義リスト[dl]の中身(dtとdd)を横に並べる方法やってみるよ。 その前に定義リストってなん？？？美味しいの？ ッと思ってたら、どこからともなく天の声が！！←天から聞こえとるがな 「説明しよう！定義リストとは定義（dt）する用語を説明（dd）するリストである！」 つまりは用語があって、それを説明する文がセットになってるときに使うリストってことです。 もっと噛み砕くと[これ]はこういう[意味]やで～ってことです。 やのっぱ（ここdt）毎日せこせことマークアップすることに快感を覚え、しかし打つのは面倒いので如何にして楽にマークアップするかと言うことに情熱を注ぐ汎用人型まーくあっぷえんじにゃぁ（ここdd） こんな感じで使ったりします
![定義リスト[dl]のdt/ddを横並びにする方法 | たねっぱ！](https://cdn-ak-scissors.b.st-hatena.com/image/square/4e3d0e670c454b9af93366310784f905b0ebd3c7/height=288;version=1;width=512/https%3A%2F%2Ftaneppa.net%2Fwp-content%2Fuploads%2F2013%2F01%2Fcss2.jpg)
『リンク要素から離れた要素の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
表(テーブル)の行の色を動的に変える - CSS小技集
CSSの小技として、表(テーブル)の行の色をマウスカーソルに合わせて動的に変える方法です。 表(テーブル)の行の色を動的に変えるには。 大きな表(テーブル)では、マウスカーソルに合わせて行の背景色を変えられるようにする事で、データを読み易くする事が出来ます。 この方法は簡単で、:hover擬似クラスを利用します。 意外に誤解されているようですが、:hover擬似クラスは<a>要素で無くても有効です。 尚、:hover擬似クラスを列に対して適用しようとして、<colgroup>要素や<col>要素に付けても効果はありません(列に効果が無い理由は後述します)。 この方法は、当然ながら、ネットスケープ 4.xでは不可能です。 テーブルの行の色を動的に変える実例。 実際のCSSでは以下のようになるでしょう。 ここでは、マウスカーソルが合わせられた際に、行を薄緑色で表示するようにします。 表(テーブ
How to scroll to an element inside a div?
I have a scrolled div and I want to have an event when I click on it, it will force this div to scroll to view an element inside. I wrote its JavasSript like this: document.getElementById(chr).scrollIntoView(true); but this scrolls all the page while scrolling the div itself. How to fix that? I want to say it like this: MyContainerDiv.getElementById(chr).scrollIntoView(true);
Input系jQueryのまとめ select,textarea,textの内容取得やチェックボックスの変更不可等 | Stronghold Archive
Input系jQueryのまとめ select,textarea,textの内容取得やチェックボックスの変更不可等 どうもこんばんは！ ちょっと個人的に地味に忘れちゃうINPUT系のマトメを書いておきます。 ざっとまとめると… ・select – 内容取得 ・select – value取得 ・text – 内容取得 ・textarea – 内容取得 ・checkbox – 変更不可方法 ・checkbox – デフォルトでチェック済みに指定する方法 こんな内容です。 時と場合によってとても便利だったりするので もし良ければお気に入りしていただければ幸いです。 selectの内容取得 select.1 ・HTML <p id="ex1">select.1</p> <select id="pull_ex1"> <option>optoin.1</option> <option>optoin.
jQueryでフォーム部品のcheckedやselectedはpropで操作する - 銀の弾丸
よく勘違いして慌てているので書いておきます。 フォーム部品のcheckedやselectedといったbool型のプロパティの操作は、propを使用する。以前はattrを使っていた記憶がありますが、それではちゃんと動いてくれないです。 いちご みかん りんご 全部 $(function () { //全部選択もしくは解除 $('#checkAll').change(function(){ $('input.fruit').prop( 'checked', $(this).prop('checked')); $('select[name=fruit] option').prop( 'selected', $(this).prop('checked')); }); //チェックボックスの変更をリストへ反映 $('input.fruit').change(function(){ $('select
「美乳」で文字化けが直るって本当？
・「美乳」で文字化けが直るって本当？ オンラインＤＶＤ＆ＣＤレンタルなら月々1980円で借り放題のＤＭＭがお得！ えっ？ って聞きなおしたくなるようなタイトルですが、「この『美乳』という文字をヘッダー部分にコメントとして挿入しておくと、文字化けが直る」という話は確かに存在します。ただし、これは大前提としてEUC-JPのページを作成するならば、という話になります。 <HTML> <HEAD> <meta http-equiv=Content-Type content="text/html; charset=EUC-JP"> <!-- 美乳 --> <TITLE>テスト1</TITLE> </HEAD> <BODY bgcolor="#FFFFFF"> このページはアダルトサイトとは無縁です。ヌード画像などは一切ありません。 </BODY> </HTML> では、なぜ、この「美乳」がおまじない
IE8をレスポンシブ、HTML5やCSS3、rgba角丸に対応させる場合の注意点まとめ - 京都のお墨付き！
IEでHTML5やCSS3を使う場合、いくつか補助プログラムを読み込んだり、制作上の注意点があります。これは、きちんとHTML5やCSS3の仕様を身につけていないと「動作しない」などのトラブルに見舞われることがあります。 この記事では、「なぜ、そうする必要があるのか」をキチンと書いて、仕様・仕組みを理解した上で使いこなすことができるようになる事を目標に書きました。 IE8で、HTML5のSectionsタグを使えるようにする「html5shiv.js」 「Sectionsタグ」とは以下のタグです。これはHTML5で定義されていますが、IE8では使えないもの(HTML5で追加した分)があります。これを使えるようにするのが「html5shiv.js」です。 section (HTML5から追加) nav (HTML5から追加) article (HTML5から追加) aside (HTML5か
そろそろ真面目に、HTMLで帳票を描く話をしようか - Qiita
帳票といえばPDFとして生成するのが一般的でしょうか? でも、2015年の今、あえてHTMLで描くのがホットです(個人的に)。ミリ単位で設定された高度な帳票も、CSSを駆使して簡単に作ることができます。業務システムでもモダンブラウザを選択することが増え、@pageなども積極的に使えるようになったこと、SPA(Single Page Application)の台頭、いろいろと条件が揃ってきました。 書いてたら結構長くなっちゃったので、さくっとコードだけ見たい方は、Paper CSSリポジトリをどうぞ。 はじめに HTML帳票のメリット 2015年現在、HTML帳票を選択する幾つかのメリットがあります。 ライブリロードで、リアルタイムなスタイル調整 バックエンドではなくフロントエンドで生成できる 前者は、gulpやGruntの普及で、CSSにしろHTMLにしろ、リアルタイムにプレビューできる環
【CSS3】くるくる回る星（マウスオーバーで） at softelメモ
問題 くるくる回る星ください！マウスオーバーで！ 答え 星は、文字、Webフォント、画像……、何らかの手段でご用意ください。 Bootstrapベースのページなら、以下のHTMLでBootstrapのアイコンが使えます。 <span class="glyphicon glyphicon-star"></span> マウスオーバー時に回転のアニメーションをするCSSの例は以下のようになります。 .mawaru-hoshi { transition: transform 500ms ease; } .mawaru-hoshi:hover { transform: rotate(180deg); } HTMLの方は、.mawaru-hoshi のクラスを付与すると、 <span class="glyphicon glyphicon-star mawaru-hoshi"></span> 回ります！
[チラ裏]自分自身のウィンドウ名を変更（上書き）する[HTMLとJSの話]
個人的メモ。HTMLとJSの話。 もしかしたら、知ってる人にとっては「当たり前じゃん」って話かもしれませんが、少なくとも私は今日まで気づかなかったのでメモ。 基本的にはHTMLでウィンドウをパタパタ開くのはよろしくない訳なんですが、システムによっては、新規ウィンドウだかを使わざるを得ない（使った方が便利）ってことはよくある。 んで、たとえばA.htmlからB.htmlを、aだかwindow.openだかで新規ウィンドウつかって開いた時、新規ウィンドウ（B.html）から、親ウィンドウ（A.html）に対して命令したいことってのは、まぁ普通にあるわけです。 ところが、B.htmlのハンドラをSWFとかに持たせた場合、JSによるwindow.openerってのは、環境によって警告がでちゃう。 そうなると、親（A.html）ウィンドウにウィンドウ名が割り振られていない場合、B.htmlからA.h
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
jQueryでCSSの値を複数設定するときの記述 - Qiita
「max-width: 100%」が指定されたimg要素を縦横比が維持された状態で縮小する方法 | CreativeStyle
tableでwidthを指定しても幅が固定されない場合の対処法｜クロノドライブ
