HTML/CSS のどんな質問にも優しく答えるスレ 32
レス数が950を超えています。1000を超えると書き込みができなくなります。
ここは初心者からベテランまで、全ての人を対象に優しく答えるスレです
類似質問、重複質問、丸投げ大いに結構。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 >>870
ブラウザでコピってテキストエディタに貼ればタブ区切りになるじゃろ >>870
もしくは
二列目でソートするJSをチャチャっと書いて
開発ツールで実行して
描き変わったDOMを開発ツールでouterHTMLコピーすればよかろう エクセルにコピペしてフィルターかければいいだけじゃないのか そんだけの行数を手書きしたやつがいるだと？DBか何かのデータじゃねーの タブ区切りにしたものなり、直接なりをエクセルに貼ってソートまでは思いついたのですが
そこからhtmlに戻す方法が浮かばなくて…
コツコツと追記されてきたデータ表なのです >>875
ソースがどなってるかわからんから検証めんどくさい
2行ぐらい書けないの？ >>875
エクセルでソートしたら、そこを範囲選択して右クリックしてコピー、
ブラウザ開いて、
`ここに貼り付け`.trim().split`\n`.map(row => {
var cells = row.split`\t`;
return `<tr><td>${cells[0]}</td><td>${cells[1]}</td><td>${cells[2]}</td><td>${cells[3]}</td><td>${cells[4]}</td></tr>`;
}).join``;
スマホなので確認できないけどこんな感じでどうだ × ブラウザ開いて
○ ブラウザのデベロッパーツール開いて pcで確認できた。多少冗長だったので修正
`ここに貼り付け`.trim().split`\n`.map(row => `<tr><td>` + row.split`\t`.join`</td><td>` + `</td></tr>`).join``; Dreamweaver CS6アカデミック版をメルカリなどのフリマアプリに出品しようと思ってるんだが 2万位で買う奴が居るかな？ Dreamweaver CS6アカデミック版をメルカリなどのフリマアプリに出品しようと思ってるんだが 2万位で買う奴が居るかな？ >>878
よくスマホでそれを書く気になれたなw
わりとマジで尊敬する >>881
スレ違いも甚だしいけど
アカデミックて転売・譲渡できんの？
出来るなら俺お金持ちになれる！ 皆さんありがとうございます
確かにソースないとわかりにくいですよね、すみません
<table>
<tr>
<td>Clm_1_通し番号</td>
<td>Clm_2_別の番号</td>
<td>Clm_3_項目名</td>
<td>Clm_4_ファイルへのリンク1</td>
<td>Clm_5_ファイルへのリンク2</td>
</tr>
<tr>
<td> 1</td>
<td> 54</td>
<td>○○</td>
<td><a>リンク1</a></td>
<td><a>リンク2</a></td>
</tr>
<tr>
<td> 2</td>
<td> 263</td>
〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜
上記のような繰り返しで、表としては単純な感じです
ごめんなさい、書いていて気づいたのですが
4列目・5列目にファイルへのリンクが<a>タグで貼ってあるので
エクセルに貼ってソートじゃダメですね… //要素選択の簡便ため<table>にidをふって<table id="odai">となっている前提
var tracks = [...document.querySelectorAll`table#odai tr`].map(track => [...track.querySelectorAll`td`].map(col => col.innerHTML)); //操作しやすいよう二次元配列に変換
tracks
.filter((track, index) => index !== 0) //一行目はヘッダのようなので除く
.sort((a, b) => a[1] > b[1]) //二列目の数値でソート
.map(track => `<tr><td>${track.join`</td><td>`}</td></tr>`) //マークアップを復元
.join``; >>883
自分も思った。スマホで多彩な半角の記号たくさん打てるとか信じられない。
自分にはストレスすぎて3行目で発狂だわ （横ながら）>>890
もしも>>888の通りだと「 54」スペース入ってるぽいから
a[1] > b[1]のところ数値変換しないとだめ？だった まちがってたらすまん >>893
スペース関係なくね？
"10" < "2" が期待通りとは思えん >>894
そういうことだわ
スペース関係なく文字列だと自分の環境では（不等号の向きによって）全部trueかfalseになってしまった .sort((a, b) => +a[1] > +b[1])にすればいいってこと？ 名前・郵便番号・住所（郵便番号から一部自動入力される）・電子メール の入力フォームのテンプレどっかにないかな どうせ他人に見せるわけでもなし
どんどん使っていこうや >>902
ちゃんとコントロール出来てるなら問題なかろう
今は開発ツールが整ってるから
そんなに混乱することもないし コントロールできてないからimportantを乱発するんやで 見出し箇所を均等割り付けしたいんだけど、
最後の文字以外なんかのスタイルを適用するやつしかないのかな？
…おや、文字をそれぞれiで囲ってflexしたら解決か？ >>905
自分の場合はdisplayプロパティ関連でimportantを乱発するわ
だってさ、displayプロパティって表示/非表示の側面と、レイアウト（改行される/されない）の2つの側面を持ってしまっていて
代替がきかない糞仕様じゃん。
visibirityだと見え方違うし >>906
自分だったら正規表現使ってjsでやるかな。 と思ったら質問の意味が良くわかんねｗ
text-justifyの事言ってるのかな？ >>911
それそれ
効かないブラウザあるから困ったなと >>908
意味がわからん。
displayは元からblockとしてあつかうかinlineとして扱うか
なにもないものとして扱うかのレイアウトの機能でしかないんだが？
なにもないから見えなくなるのであって、
単に見えなくなるだけの意味しかないなら、レイアウトは変わらん
それとimportantを乱発することに何も関係ないんだが、
1. あなたがアホだから
2. displayを間違った解釈をして
3. displayを糞仕様呼ばわりして
4. important乱発などという変なことをしている。
すべては1.が根本原因なんだよ？ >>906
その方法はアクセシビリティ的にはどうなんだろう… https://dotup.org/uploda/dotup.org1576039.jpg
細かいことなんですがお願いします。
縦方向の中央揃えをしたいのですが若干上方向へ寄ってしまいます。
categoryとh3を分けたらline-heightを調整して何とかできるのですが
.category h3のなかで調整できないかなと。 >>913
たぶんあなたはレスポンシブの経験浅いでしょ？
jQueryでいうhide();に該当するものがcssにあるか？
あるなら答えてみてよ。 https://codepen.io/brenden/pen/RNZXqx
最近javascriptからcssを勉強し始めたものです。
上記のページに記載されているコード（scssではなくcssにコンパイルされたもの)について質問があります。
また、記載のコードは私自身が書いたものではなく、ほかの方が書いたもの、
を自分が勝手に勉強用として使わせていただいているだけです。
bottomとtopでスクロールされる画像が左右にずれていると思うのですが、
これはどこにプロパティーを追加することで解消できますか？
上下で別の画像を使用する手も考えたのですが、コードで解消してみたい次第です。
また、スクロールのスピードを操作することはできたのですが、上下で画像を一致させるには、
どのような手を打つのが妥当でしょうか。
ご回答お待ちしています。 >>916
>913ではないが、display:none >>918
やっぱそうなるでしょ？笑
ちなみにその話を>>908でしたら意味ワカランとか言われたから
この質問をしているところ 円形の線を描くアニメーションを考えているんですけど、1つの要素だと難しいですか？
CSSで頑張るよりsvgつかったほうが早いですかね >>919
noneするのに書き出す必要ないんとちゃうか >>919
意味わからんのは、jQueryでhideするわけでもないのに、
cssでimportantを使うことなんだが。
そもそもhideでimportantは使われてないからなｗ displayは糞仕様でも何でもないし、
正しく理解していれば、
importantを多用することもない >>920
JavaScriptかCanvasかな。
JSなら、そのぐらいのライブラリはいっぱいありそう。 displayでimportant使うことなんてまずないしレスポンシブならなおさらないぞ
それこそレスポンシブ組んだことないんじゃないか？
さらにそこにhideが出てくる意味がわからん
支離滅裂 >>924
一本の線ごときで…と思ってしまいますがそれが一番簡単そうですね
円の上にマスクの要素を置いてそれを回転させるって方法も思いつきましたが、背景ベタ塗りじゃないと使えないから汎用性低そうですね
どうもありがとうございます >>914
見た目が最優先のサイトだからそういうのは置いとく…
でも、めんどくさいからただのテキストにしたよ… >>923,>>923
試しにさ、これcssでどう書くか言ってみて。
<span class="hoge">hoge<span>
.hogeは、スマートフォン用のレイアウト時のみ表示するようにする。
もちろんインライン要素のままで。 >>930
お前も書いてみて。
important使わなきゃできない理由が知りたい >>930
はい
@media (min-width: 600px) {
.hoge {
display: none;
}
}
PC優先のmax指定派ならこっち
.hoge {
display: none;
}
@media (max-width: 600px) {
.hoge {
display: inline;
}
}
ってかこれを書かされる意味がわからないんだけど…
今の話の流れからなんでこれ？ >>930
それは特に困らないんじゃ…
ああもしかして
PC用に書いたスタイルがSPでも反映するようにして
必要なとこだけ上書きする方式なのか？ >>934
いや、それは普通だろ
そのためのメディアクエリだ
それで困るとかならこの仕事向いてない display:inlienじゃnoneを上書き出来ないとでもおもってんじゃねーのw >>908
インライアンってプライベートライアンの親戚か何か？ 便乗質問だけど
@media only screen and (max-width: 576px)
と
@media (max-width: 578px)
ってどうちがうの？ displayするのにimportantって
結局何が言いたかったんだ？
結局これが的中か
1. あなたがアホだから
2. displayを間違った解釈をして
3. displayを糞仕様呼ばわりして
4. important乱発などという変なことをしている。 git push -f すればいい。
自分が管理するブランチの歴史を書き換えて
強制pushするのはよくやること >>933
ごめん質問間違った
PCの時は非表示、スマホの時は表示を
汎用クラスのみで制御する場合だった
もちろん場所によってはinlineであったりblockであったりのケース >>938
質問は only screen のこと？
だと思って回答します
メディアクエリを適用する対象デバイスを指定するんだけど指定できるデバイスが3つあって
screen:通常の画面
print:印刷
speech:音声読み上げ
それぞれにonly、notをつけれる
何も指定しないとデフォルトであるallになってすべてに適用する >>942
同じ
2つ目のやつのnoneとinlineを逆にするだけ >>942
だからお前が書けって言ったよね？
importantをクソな使い方を
見てやろうって言ってるんだよ。
ほらはやく importantなんてJavaScriptライブラリがつけたスタイルを上書きする時ぐらいしか使わないだろ
あとは破綻したクソなコードを引き継いでどうしようもなくなった時
自分でコーディングしててimportant使う必要があるとかよっぽどクソのコードしか書けないっていう証拠かと importantニキは新しい仕事探せ
それが世の中のため かなり大掛かりなサイトになるが
まずサイトの基本となるスタイル、コンポーネントがあって
その上で、各サブサイト毎に特有のスタイルが重なって
さらにそこに各スタイルをガン無視したLPを作ることになって…
みたいな時に使うことはあるし問題もないと思ってる
ただそこまで大掛かりなサイトは少ないし
それの制作に携わる人もそんなにいないだろうな >>950
その場合は高い優先順位で
スタイルを定義すればいいだけなので
importantを使うっていうのは、その優先順位を
正しく理解できてないだけ >>950
ああそれはあるかも
大がかりじゃなくてもWordPressで既存テーマを基に子テーマを作った時はそんな感じになる
いずれにしてもちょっと特殊なパターンで、>>930のようなこと言ってくるってことはそんなパターンでもなくそもそも理解してないんだろね >>951
ライブラリとかだとこいつには勝てねえってぐらいのセレクタ使ってる時があってそれにはimportant使う時ある >>951
必ずしも全てをコントロールで来るとは限らんのよその手の仕事だと
たまにあるじゃん、メーカーとかインフラ系で
ハウスエージェンシーが最上流を仕切ってて
基本スタイルの時点で頑張りすぎてるやーつ
もちろんそれ作ってる人達もそれが良くないことはわかってて
それでも仕事のしがらみでガッチリやらざるを得なかった感が溢れてる、的な
そういうの
理想的じゃないの >>953
その場合でもライブラリで使ってるセレクタ + 任意のセレクタにすれば絶対勝てるだろ >>955
へー、理想的じゃないのの例が
さっきのレスポンシブの簡単な例なんですか？ｗ
無知な人が偉そうに、できないことだってあるんだよ！と
言われましてもね。お前がわかってなかっただけじゃんで
終わってるんですよ >>944
へ〜〜〜〜なるほど
ありがとうございました。 固定高さのdiv内にadsence（レスポンシブ）を配置
毎回広告サイズが変わるがdiv内トップに位置されて下が空いてしまう
高さを中央配置にできないものでしょうか？
ダメ元で
padding: auto auto;
vertical-align: middle;
をしたがやはり変わらずです
そもそもスクリプトがらみでcssだけで対処できるかですが >>960
importantは>>908=>>919=>>930=>>942が頭悪かったっことで無事決着がついた >>960
959ですが付けても付けなくても変わらずです ピクセル数とかってさ、8の倍数文化は意味あるのかな？
なんかコンピュータカッコイイ！にしか見えない。 devicePixelRatio
=> 3
orz... >959
1. 親要素にdisplay: table-cell を指定する
vertical-align は基本的に displayが inline 系の要素にしか効かない
(元々文字の縦位置を指定するスタイルのため)
ただし、例外的に display: table-cell の子要素には効く
tableもtable-row もなくても機能するので便利だが、それでいいのか？と使うときはいつも思う
2. 親要素に display: flex と align-items: center を指定する
未対応ブラウザを気にしないならこれでいい >>955
あるなーそういうの
今やってるのもまさにそうだわ
アホみたいなページ数のマニュアルがある 頼むからもうやめて、オレが悪かったよ・・・
サーバー代ケチる為にライブドアブログ使ったの。
で、独自タグからの展開で訳わかんなくなって乱発したの。 >>965
共に全く表示されなくなります
ちなみに子要素は
ins class="adsbygoogle" style="display: block; height: 90px;"〜です
読み込まれる（広告が変わる）度にheightも変わります
その後にもheightやwidh含むパラメータがずらずら並んでいます レス数が950を超えています。1000を超えると書き込みができなくなります。
