HTML/CSS のどんな質問にも優しく答えるスレ 32
■ このスレッドは過去ログ倉庫に格納されています
ここは初心者からベテランまで、全ての人を対象に優しく答えるスレです
類似質問、重複質問、丸投げ大いに結構。HTML / CSS 関係の事なら何でもOK
分からない人は何回聞いても結構。質問するときはIDを出すためにメール欄を
age にすることをおすすめします。
回答してくれる方は優しい人のみ！ 質問者に対して暴言を吐く人はこのスレを見るな！！
終わった話を蒸し返すやつは このスレにくるな！！！
自分で調べろという回答も禁止！！回答するかさもなくば何も書き込むな！！
質問側も節度あるレスで！質問前にスレ内を検索しましょう
■次スレについて
基本的にレスナンバー>>980を取った人（立てられない場合は次の宣言者）が立てて下さい
重複を避けるため、独断でスレ立てはせず必ず意思表示をしてから立てて下さい（>>980を取った場合も）
立てられない事が予め分かっている場合は、>>980付近の書き込みは自重しましょう
■前スレ
HTML/CSS のどんな質問に必ず優しく答えるスレ 31
https://mevius.5ch.net/test/read.cgi/hp/1517028608/
■関連スレ
Webサイト制作初心者用質問スレ part248
http://mevius.2ch.net/test/read.cgi/hp/1494150188/
■HTML
HTML Living Standard 日本語訳
https://momdo.github.io/html/index.html
■CSS
Selectors Level 4 日本語訳
https://triple-underscore.github.io/selectors4-ja.html 沢山の回答ありがとうございます
「テキストエリア」と差別化できているので、
「テキストフィールド」が一番よさそうだなと思いました
ありがとうございました sass大好きなんだけど、みんなscss形式で書くからsassのインデント派な自分は肩身が狭い
hamlみたいにすっきり書けるの所がいいのに >>62
なんだかんだでもう数年もすればsasｓが主流になってるだろう flexboxで、flexアイテムにmarginを設定しても
flexコンテナのpaddingや、
他のflexアイテムのmarginと相殺されません
アイテムの並びが固定されている場合は、
スタイル指定を調整することでうまく等間隔に配置できますが
並びがレスポンシブに変わる場合にはそれはできません
コンテナとアイテムの間、アイテムとアイテムの間に
等しくマージンを設定したい場合はどうしたらいいのでしょうか？ 一方にのみ設定してみたり、
擬似クラスを使ってみるとか？
コードがあれば分かりやすいかも >>66
てことは主流でないもので回答してる輩がいるわけか >>67
並びがレスポンシブに変わる場合、ってのがよくわからんが
marginは上下と左右で違うことはＯＫ？ 要はスマホサイズ時にボックスが縦並びになる時に
意図したようなmarginサイズになって並ばないってことでしょ ある要素を浮かせて特定の場所に表示させるのってどうすんでしたっけ
position:absolute
と
float; left
かなんかだったとおもうのですが
できません >>74
前者であってる
それと一緒にleft、right、top、bottomで座標を決める
その要素から親要素を辿っていって
最初にpositionがstatic以外の要素が座標の基準になる
そのような要素がなかったら<body>が基準になる >>75
例えばJSで75のコメントの要素を浮かせてスレ上部に移動させるとするとどうすればいいですか?
前試しにやったらできたのですが。。。
elm = document.getElementById("75")
elm.setAttribute("style", "position:absolute; top:100; left100")
をコンソールで実行しても移動しないのです left の:が抜けてますが脱字です。無視して下さい。 >>76
それは書き方がおかしい
var elem = document.getElementById('75');
elem.style.position = 'absolute';
elem.style.left = '300px';
これでこんな感じにズレる
https://i.imgur.com/WsW5mcZ.jpg >>76
top、leftは単位が必要
100px、100%、100emなど >>67
そもそもmargin設定したかったらflexbox使う必要なくない？
> * を inline-block にして margin つければいいんじゃないの
flex 使うからには space-around か between で任せたいから使うんでしょ <html style="font-famiry:書体;">
とか？ >>81
font-family: serif;
見た目を変えるのはHTMLの仕事ではないので
CSSでやろう >>82
>>85
ありがとうございます試してみます。
全体のフォントをそうしたいのではなく一フレーズだけ変えたいのでhtmlかなと思ったのですがど素人なものですみません。 >>86
それもCSSでやるのだよ
書体を変えたい要素のスタイルをCSSで書く >>86
そういうのはspanのclass指定でいいじゃね？ 回答ありがとうございました
皆様のレスを読んで、根本的にmarginの相殺に関して誤解していたと気づきました
相殺するのは縦marginだけで、しかも縦marginが全て相殺するわげではないのですね
どうしたかについてですが
Mastering Wrapping of Flex Items : Creating gutters between items
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Mastering_Wrapping_of_Flex_Items
ここを見ると、アイテムやコンテナの間に自由にマージンを設定するには
現状ではラッパーを使うしかないようです
場合によってはコンテナのpaddingとアイテムのmarginだけでも可能ですが
コンテナ-アイテム間の幅と、コンテナ-コンテナの間の幅を変えるなどしたい場合は
ラッパーを使うしかないようです
見た目のためだけのHTML要素を使うのはなるべくなら避けたいですが、
今の時点では仕方ないですね
row-gapとcolumn-gapというのが将来Flexboxにも追加されるそうなので、
それが実装されれば解決するのかもしれません
ありがとうございました ×コンテナ-アイテム間の幅と、コンテナ-コンテナの間の幅
○コンテナ-アイテム間の幅と、アイテム-アイテムの間の幅
でした >>78
>>79
ああ、単位か
ちょくちょく忘れる
ありがとうございました。 >>87
う〜ん面倒…と思ってしまいますがそれが基本中の基本ですよね
css苦手意識が強くて極力弄りたくないと思ってましたがそれじゃダメですね、がんばりますありがとうございます
>>88
そういう答えが欲しかったんです！
でもcssがんばってみますありがとうございます <table cellpadding="10">のようにテーブル内にあるセル全部の余白をcssで設定するには
どうすればいいんですか？
<table style="padding:10px">だとテーブルの外枠だけしか余白が設定されないので >>93
border-collapse:separate;
border-spacing: お好み値;
marginみたいに縦横書けるよ >>94
それセル間のスペースだったで
やりたいのはセル内にスペースをつけたいってこと
<td style="padding10px;">だとそのセルだけにしかスペースが適用されないけど
それをテーブル内にあるセル全体に適用したいんです >>95
<td style="padding10px;">を全部のセルに書く
またはcssで
td {padding10px;} emは、親要素のフォントサイズが基準になると、教則本などには書いています
フォントサイズの指定にこの単位を使った場合は、その通りだと思いますが
この単位をwidthなどに使った場合、
親要素のフォントサイズではなく自要素のフォントサイズが基準になっているように思います
たとえば
#parent {
font-size: 13px;
}
#child {
font-size: 30px;
width: 10em;
}
のようにすると、#parentのfont-sizeを変えても#childの幅は変わりませんが
#childのfont-sizeを変えると#childの幅も変わります
emが親要素基準になるのはフォントサイズ指定に使った場合だけなのでしょうか？ 「プロとして恥ずかしくない 新・CSSデザインの大原則」には
font-sizeは親要素基準、それ以外は自要素基準と書いてありました
このことに触れてもいない本とかオンライン学習とか、結構多くないですか？ あと参考書は出版時期のそれ以前のものが基準だからね remがいい場合もあるし、emがいい場合もありますよね
それにemはかなり以前（CSS2.1あるいはもっと前）からあって、
その時から性格も変わってないと思いますが…。
ともあれ、買ってはいたもののあまり読んでいなかった
「プロとして恥ずかしくない 新・CSSデザインの大原則」が
読んでみると本質に迫っている非常にいい本だと気づいたのは副産物でした それだけ内容が薄い、詳しくないってこと
だから良本や良サイトと呼ばれるものは、何万もある本、サイトの中でほんの一握りもない >>99
そんなことはないよー
cascade（とinherit）についてうやむやなままにしてる人が多いだけだよー >>98
>親要素基準になるのはフォントサイズ指定に使った場合だけ
そのとおり。
仕様にもそう書かれている
継承されるから、何でも親基準であるかのように誤解しやすいだけ Cascading Style Sheetなんだから
あれこれ覚える前に
まず継承についてしっかり知らないといかんですな 表形式のデータを
スプレッドシートにコピペすると
各セルに自動的に分かれる場合と別れない場合がありますが
あれはどういう場合に各セルに分かれるのでしょうか?
↓の形式のデータなら出来るのかと思ったけど
libre office calcなら自動的にセルごとに分かれるのですが
google spreadsheetだと1つのセルにまとまって表示されてしまいます。
<table><tbody><tr><td>1</td><td>2018/3/22</td><td>13:28:49</td><td>7:28:50</td><td>17323</td><td>5529</td></tr><tr> >>110のテーブルデータは例として冒頭部分をコピペしたものです 古い時代でも省略可能だから書かない人多かったと思うけど
自分は<thead>と<tbody>書く派だな
CSSやJSのために >>110です
<br>いれれば行は自動でぶんかつしてくれるようになりましたが
列が自動で分割されてくれません･･･
誰かよろしくお願いします。 たしかJSでtdを追加すると自動でtbodyが追加されて構造が勝手に変えられる記憶があったので
tbodyはつけるようにしてます
cellだったかもしれないけど >>115
innerHTML で追加した場合じゃないか？（パースされるときに自動で追加される）
appendChild などで自動で追加されることはないはず thead,tbodyは通常省略するけど、jsで使う時は付けてるな
例えばAjaxで検索して結果を一覧テーブル更新みたいな時はtheadはそのままでtbodyを空にしてtrで入れていくのでtbodyがあった方が楽だから content:"";
という空のcontentはどういう意味で書いてるんでしょうか？ >>118
そのままだけど、なにも書くことがないって意味だよ
アイコンとかそうすることが多いな俺は >>119
空ならなくてもいいと思うのですがわざわざ書く理由は特にないんですか？
例えば
li:before {
content: "";
display: block;
}
は
li:before {
display: block;
}
と同じということでしょうか >>120
違うよ
試してみ
後者は表示されんじゃろ >>120
「空文字」と「存在しない(プログラムではnullと言います)」は違うのです。
前者のcontentは空文字、後者のcontentは存在しない。
contentが存在しない要素は消える。
なので後者はbefore自体が消える。 ということは後者は
たとえli:beforeと記述しても意味がないってことに？ >>121
>>122
ありがとうございます。
今やってみてようやく分かりました おかしな話だというのはわかっているのですが、
要素をfloat:leftした上で再度中央寄せする方法ってないでしょうか？
jqueryで追加した要素とその下の要素が重なってしまうのを
display: block + float: leftで回避しているのですが、
なんとか中央寄せしたいのです。 キャプって画像あげるか
コード晒してもらわんと正確に何がしたいか分からんけど >>126
display:flex;あとは調べろ flex-flow: row
margin:auto >>126
もうfloatは旧世代のものになりつつあるのでこれを期にflexを勉強してみては？ いや、floatでって質問だろｗ
なんでfloatなんか使ってるかわからんけどfloat 使う理由があるのかもしれんし
そもそもなにがしたいのかわからん状態だから思いもよらない理由があるんじゃないか
理由聞いた上でそれflex使えよってなるかもだけどｗ なにがしたいかわからんのにflexが解とは言えないぞ すいません。
動的に追加した要素と元々その下にあった中央寄せしている要素について以下のサイトのような現象が起きていて、
https://ja.stackoverflow.com/questions/33814/html%E3%81%A7%E7%94%BB%E5%83%8F%E3%81%A8%E6%96%87%E5%AD%97%E3%81%8C%E9%87%8D%E3%81%AA%E3%81%A3%E3%81%A6%E3%81%97%E3%81%BE%E3%81%86
提示されている解決策のうち、
display: block + float: left
を適用すれば重なること自体は解決できたのでfloat:leftを使用していました。
みなさんが教えてくださった情報を元に、調べて直してみます。
ありがとうございました。 重なるのをfloatで回避ってのがよくわからないなー
ちなみに重なってるのはfloatが悪いんじゃなくmarginをimgやspanにつけてるから
span(inline要素)には上下marginやpaddingがきかない(ベースライン規準で位置を変化させない)
spanにスタイルつけるときは文字修飾や文字サイズ分の背景をつけるときだけにして
レイアウトの調整は外側にコンテナブロックを作ってそれにつけるのがコーディングマナーだと思う
なのでimgをそのままおくのもよろしくない
外側にdivを作ってその中にimgをおくのがコーディング的にはきれい
あとはdivどうしをどうレイアウトするかはflexなりfloatなりを使えばいいと思う とりあえず解決したのでご報告しておきます
結論から言うと要素の間でclearfixすると要素が重ならなくなり
謎の解決方法？のfloat:leftも使う必要がなくなり再度中央寄せする必要がなくなりました
最初からサンプルを乗せればよかったのですが…すいません。
元々：Prev Nextの真上の6やajaxをクリックするとPrev Nextが重なってしまっていた
http://pilotfarm.uh-oh.jp/gridder/demo/demo.html
floatでなんとかしていたもの：
http://pilotfarm.uh-oh.jp/gridder/demo/demo-float.html
修正後：
http://pilotfarm.uh-oh.jp/gridder/demo/demo-fix.html
大変お騒がせしてすいませんでした。 >>134
spanにIDで属性付けるってとこで？なんだが
こういう風なデザインの場合はflexでやるのがスマートで良いと思う
これを期にflexを導入してみては？ 起こっている現象が同じというだけで
そこのサイトの質問者と同じ条件をしているわけではないです
136ではったURLのソースを見てもらうとわかるかと思います(Gridder.jsのdemoほとんどそのままですが)
混乱させてすいません
何にせよflex勉強してみます <div class="parent">
親の中身
<div class="child">この中身</div>
</div>
の親はブラウザ幅最大上下左右中央ぞろえを
parentは
position: relative;
width:100%;
childは
position: absolute;
top: 50%;
left: 50%;
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
で、対応したんですがIEのみtranslateで移動した分？の余白が右に出来ます
overflow:hiddenを使わずに対処できるでしょうか？ なんどやってもうまくいかなくて
もうええわ！って、次の日にやったら
ちゃんとできてる現象に名前をつけたい ・リフレッシュ
・気持ちの切り換え
・発想の転換
・落ち着く
お好きなのをどうぞ
まあ強いて言えば「明日の俺はすごい」かな 何度やってもうまくいかない！もうええわ！
って時はリフレッシュすればなんとかなるって俺は知ってるい！
よし少し休もう…
…っは！朝！？
って現象はなんていうの？ IEはもう対象から外しても問題ないと思う
今WEBをPCデスクトップで閲覧してるのは全体の10パーセントくらいだから IEユーザーは広告よく踏んでくれるから
無駄とは思えないな
これで子供4人養ってるのに 全体の〜みたいな統計持ち出すと
こいつ大雑把だ！って言われない？
代理店とか客の広報とかとか
自サイトを解析して無視できるほど少ないかどうか判断すべきだと思う まあクライアントがIE対応しろと言ってくるか
個人的にずっとIEをフォローしたいとこはしとけばいいんじゃね？としか 未だにIE6なんか使ってるやつおらんやろってバカにしてたけど
フロッピー使ってるPC見て戦慄した そもそもIE6なんてXP時代の産物だから今の時代にそんな環境で
オンラインするようなのを数に入れる必要はないと思う >>157
独自開発のシステムとか開発終わったソフトの関係上古いPCつかう企業はあるよ
でもさすがにネットするのはそこそこ新しい機体だろ
そもそもフロッピー使うようなPCじゃアナログモデムとかで今のネット回線つかえんだろ ■ このスレッドは過去ログ倉庫に格納されています
