【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］/テキスト・フォント/要素の前後に内容を追加する - TAG index
:before と :after について :before … 要素の直前に対する指定 :after … 要素の直後に対する指定 :before と :after に関する詳細は、疑似要素の指定をご覧ください。 追加する内容 ここでは3種類の値を説明しています。（この他に、引用符を挿入することもできます） 文字列を追加する 文字列を追加する場合は、追加したい文字列を次のような形式で指定します。（文字列を引用符で囲みます） content: "追加するテキスト"; 例えば、p要素の直前に文字列を追加したい場合は、次のような指定内容になります。 p:before { content: "追加するテキスト"; } 文字列の中に引用符を入れたい場合は、次のようにバックスラッシュ（ \ ）でエスケープしておきます。 content: "追加する\"テキスト"; 画像等を追加する 画像等を追加する場合
【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) 下記より詳しく解説します。
【JavaScript】scrollTopが効かない時の対処法
先日遭遇したJavaScriptでの現象について。 タイトルにある通り、scrollTop プロパティに値を指定しても、その位置にスクロールしない現象が発生しました。 何故か scrollTop から返ってくる値が常に 0 になっており、それが原因のようです。 で、こちらの問題の解決にあたって、下記の記事が参考になりました。 document.body.scrollTopが常に0を返す謎を調べてみた – Qiita https://qiita.com/tkengo/items/ee758c75ba874757b7fd この記事によると、原因は scrollTop プロパティでスクロール位置を取得したい要素に下記の CSS を指定するとのことでした。 #sample { overflow-y: auto; width : 300px; height: 200px; } width と hei
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】テーブルタグ内のラジオボタンの押しにくさを解消する - 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】nth-child()で要素の指定 - 株式会社ネディア │ネットワークの明日を創る│群馬
CSSの小技 その7 今回は「nth-child()で要素の指定」です。 今までのデモページで使用していましたが、nth-child()について もう少し掘り下げていきたいと思います。 用途 テーブルやナビゲーションや横並びなどで、何番目かの要素に特定の装飾をしたいときに、 今までですとclassを加えて装飾していましたが、nth-child()を使うことで便利に、かつ綺麗なソースで構築する事が出来ます。 実装方法 今回は前回使ったナビゲーションで説明します。 ナビゲーションの順番によって要素の色を変更し、1番左の要素の横幅を半分にします。 ひとつ目の要素はfirst-childで指定することも出来ます。 CSSは下の方に記述しています。 HTML <nav> <ul> <li><a href="#">HOME<span>ホーム</span></a></li> <li><a href="#
表(テーブル)の行の色を動的に変える - CSS小技集
CSSの小技として、表(テーブル)の行の色をマウスカーソルに合わせて動的に変える方法です。 表(テーブル)の行の色を動的に変えるには。 大きな表(テーブル)では、マウスカーソルに合わせて行の背景色を変えられるようにする事で、データを読み易くする事が出来ます。 この方法は簡単で、:hover擬似クラスを利用します。 意外に誤解されているようですが、:hover擬似クラスは<a>要素で無くても有効です。 尚、:hover擬似クラスを列に対して適用しようとして、<colgroup>要素や<col>要素に付けても効果はありません(列に効果が無い理由は後述します)。 この方法は、当然ながら、ネットスケープ 4.xでは不可能です。 テーブルの行の色を動的に変える実例。 実際のCSSでは以下のようになるでしょう。 ここでは、マウスカーソルが合わせられた際に、行を薄緑色で表示するようにします。 表(テーブ
マウス移動に合わせて表のセル/行/列に色を付ける
<table class="tableArea" id="makeImg" onclick="tableClick(event)" onmousemove=";mouseMove(event)" onmouseout="mouseOut(event)"> <tr><th>見出し1</th><th>見出し2</th><th>見出し3</th><th>見出し4</th></tr> <tr><td>データ11</td><td>データ12</td><td>データ13</td><td>データ14</td></tr> <tr><td>データ21</td><td>データ22</td><td>データ23</td><td>データ24</td></tr> <tr><td>データ31</td><td>データ32</td><td>データ33</td><td>データ34</td></tr> <tr><td>データ4
拡張はセキュリティリスクなので、なるべく入れない方が良い (#3146931) | Webブラウザアドオン「Styish」、ユーザーデータの収集を始めて騒動に | スラド
「入れているアドオンの数が多いほど、ブラウザを使いこなしている上級者である」と考えている人もいるようですが、アドオンを入れれば入れるだけセキュリティリスクが高まったり重くなったり不安定になったりするので、ブラウザの標準機能でできることは標準機能でやった方が良いでしょう。 Firefox の場合、昔のバージョンでは標準であったような気がする chrome ディレクトリや userContent.css ファイルが無くなっていますが、自分で作ることで Firefox 最新版 (50.1.0) でも、拡張無しでユーザーCSSが適用可能です。 プロファイルディレクトリ "%AppData%\Mozilla\Firefox\Profiles\【ランダムな英数字】.default" を開く"chrome" というディレクトリを作成する"userContent.css" というファイルを作成する例えば、
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> 回ります！
borderで背景画像を表示する border-image - シンプルシンプルデザイン CSS
border-imageは、一枚の画像で9スライスのデザインが実現できちゃうという優れもの。 残念ながらIE8以下で適用できず、実際にはまだ使えないかなーという印象。プログレッシブエンハンスメントを適用してうまく見せるのは結構難しそうだなー、という感触。 とはいえせっかく調査したので備忘録。 border-image を使ったサンプル 仕様 border-image-source none（初期値）/ url(画像パス) border-image-slice 100％（初期値）/ 数値 / ○○% / 数値 fill / ○○% fill border-image-width 1（初期値）/ ○○px / ○○% / auto border-image-outset 0（初期値）/ 数値? px? border-image-repeat stretch（初期値）/ repeat / rou
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
jQueryでCSSの値を複数設定するときの記述 - Qiita
「max-width: 100%」が指定されたimg要素を縦横比が維持された状態で縮小する方法 | CreativeStyle
tableでwidthを指定しても幅が固定されない場合の対処法｜クロノドライブ
