HTML/CSS の質問に優しく答えるスレ 30

**Name_Not_Found** · 2017/10/15(日) 14:00:32.64

ここは初心者からベテランまで、全ての人を対象に優しく答えるスレです

類似質問大いに結構。分からない人は何回聞いても結構HTML / CSS 関係の事なら何でもOK
質問するときはIDを出すためにメール欄を　age　にすることをおすすめします

回答してくれる方は優しい人のみ！質問者に対して暴言を吐く人はこのスレを見るな！！終わった話を蒸し返すやつはこのスレにくるな！！！

質問側も節度あるレスで！質問前にスレ内を検索しましょう

■次スレについて
基本的にレスナンバー>>980を取った人（立てられない場合は次の宣言者）が立てて下さい
重複を避けるため、独断でスレ立てはせず必ず意思表示をしてから立てて下さい（>>980を取った場合も）
立てられない事が予め分かっている場合は、>>980付近の書き込みは自重しましょう

■前スレ
HTML/CSS の質問に優しく答えるスレ 29
http://mevius.2ch.net/test/read.cgi/hp/1503136885/

■関連スレ
Webサイト制作初心者用質問スレ part248
http://mevius.2ch.net/test/read.cgi/hp/1494233240/

■HTML
HTML Living Standard 日本語訳
https://momdo.github.io/html/index.html

■CSS
Selectors Level 4 日本語訳
https://triple-underscore.github.io/selectors4-ja.html

**Name_Not_Found** · 2017/12/09(土) 19:59:47.73

flexいる？

**Name_Not_Found** · 2017/12/09(土) 20:18:06.41

space-between設定しないと端につけられないからじゃない？

**Name_Not_Found** · 2017/12/09(土) 23:56:50.94

幅が広い場合は
<th1><th2><th3><th4>
<th1><td2><td3><td4>
<th1><td2><td3><td4>

幅が狭い場合は
<th1>は画面左半分に固定、<th2>～<th4>を右半分に

<th1><th2>
<th1><td2>
<th1><td2>

右半分側を横スクロールして

<th1><th4>
<th1><td4>
<th1><td4>

のようにしたいのですがどうやったらいいでしょうか？
IE9以上、iflameなしでお願いします

**Name_Not_Found** · 2017/12/10(日) 00:14:48.78

テーブル　固定　スクロール　css
とかでぐぐってみては
absoluteとpadding、スクロールになると思う
PCだといいんだけど、モバイルだとスクルオールバーが不安定なので結構難しい

**Name_Not_Found** · 2017/12/10(日) 03:01:21.04

「css レスポンシブフレームワーク」で検索！

**Name_Not_Found** · 2017/12/10(日) 09:22:45.36

書く前にぐぐって
theadを左側、tbodyを右側にしてoverflow-x:scroll
は見つけたのですがそれは使えずにいます

**Name_Not_Found** · 2017/12/10(日) 09:37:59.99

theadの代わりにclassを設定すればいいだけでは

**Name_Not_Found** · 2017/12/10(日) 16:22:11.66

何十もあるthに全てclass表記しろと？

**Name_Not_Found** · 2017/12/10(日) 16:22:57.89

>>401は例えばの話ね

**Name_Not_Found** · 2017/12/10(日) 17:13:18.56

んなもん知らんよ
数が多いなら別にfirstchildでもいいしjsでclasつけてもいい

**Name_Not_Found** · 2017/12/10(日) 17:40:56.05

thにプロパティあてたらえだけちゃうんか…スマホでCSS打ってやがるのかな？

**Name_Not_Found** · 2017/12/10(日) 17:54:00.86

>>396の一行目、一列目がthなんだよ

**396** · 2017/12/10(日) 17:57:33.73

最上段の<th1>や<th2>は実際は2行でして結合部もあります

**Name_Not_Found** · 2017/12/10(日) 18:39:17.51

>>396見て以前はまったこと思い出した
1列目がthのときでもcolgroup使えたっけ？
1列目を簡単に指定できるプロパティってどんなの？

**Name_Not_Found** · 2017/12/10(日) 22:02:03.96

グリッドシステムだけBootstrap使うのは駄目なのかな？

**Name_Not_Found** · 2017/12/10(日) 23:47:52.11

めんどくさいの来た

**Name_Not_Found** · 2017/12/11(月) 00:44:55.76

>>401
<div id="aaa">
<th>
<div/>

th を、div で囲んで、id でも付ければ？

**Name_Not_Found** · 2017/12/11(月) 03:22:34.88

stickyがchrome,ff,edgEでいけるやん

**Name_Not_Found** · 2017/12/11(月) 10:34:28.25

>>401
最近は手書きでもそれもそんなに苦じゃなくなってきた気がする
emmetとかでさらっと書けるし

**Name_Not_Found** · 2017/12/11(月) 14:56:38.76

FirefoxのTimbleってどう

**Name_Not_Found** · 2017/12/11(月) 17:15:02.39

置換なり正規表現なり使えばいいでしょ

**Name_Not_Found** · 2017/12/11(月) 19:47:57.12

buttonを囲むborderの線上でクリックしてもイベントは発生しないようなのですが
それはHTMLの仕様ですか？

**Name_Not_Found** · 2017/12/11(月) 20:05:03.27

>>415
とおりあえず FF と Chrome は発生したが（ <button> <input> 両方）。
HTML 仕様には書かれてないかも。

**Name_Not_Found** · 2017/12/11(月) 20:36:06.31

boxsizingじゃね？
と思ったけどcontent、borderどっちにしてもイベント発生したな@chrome
何か勘違いしてるんじゃね

**Name_Not_Found** · 2017/12/11(月) 21:52:41.93

>>410
こうなるが？
<div id="aaa">
<tr>
<th1></th1><td2></td2><td3></td3><td4></td4>
</tr>
<div/>

そもそもtable内でdivっていいの？

**Name_Not_Found** · 2017/12/11(月) 22:09:49.49

trをdivで囲むのか・・・
なんか疲れた・・・

**Name_Not_Found** · 2017/12/11(月) 22:16:10.06

（1列目の）ｔｈを囲むとこうなるな
確か実意わからん

<div id="aaa">
<tr><th1><th2><th3><th4>
<tr><th1><td2><td3><td4>
<tr><th1><td2><td3><td4>
<div/>

**Name_Not_Found** · 2017/12/11(月) 22:16:59.72

×確か実意わからん
○確かに意味わからん

**Name_Not_Found** · 2017/12/11(月) 22:17:54.18

いやそこにｄｉｖは

**Name_Not_Found** · 2017/12/11(月) 23:03:13.91

それぞれのth1全てをdivで囲うならclassでいいよな
さすがdiv厨不可思議

**Name_Not_Found** · 2017/12/11(月) 23:10:02.43

そもそもthをdivで囲うって・・・

**Name_Not_Found** · 2017/12/12(火) 02:53:45.15

HPで友達が稼げるようになった情報とか

⇒　http://asaswq3wq.sblo.jp/article/181819223.html

興味がある人だけ見てください。

4INJTW8JKS

**Name_Not_Found** · 2017/12/12(火) 05:09:13.90

ユーザーCSSの記述方法の質問もココでいいのかな？

すべてのwebサイトで　font-weight　が400(normal)未満のものだけを抽出して
400に固定するような記述方法ってないですか？

**Name_Not_Found** · 2017/12/12(火) 05:13:24.02

426の追記補足ですが
Noto sans Japaneseあたりの細字を標準にしたいってことです

**Name_Not_Found** · 2017/12/12(火) 11:11:04.06

>413
X　Timble
〇 Thimble

オンラインエディターということだけしかわからない

**Name_Not_Found** · 2017/12/12(火) 15:52:45.71

文字のハイパーリンクの青色がデフォルトだと少し薄いように思います。
濃い目にしたいんですが、濃すぎると黒に見えてリンクと分からない恐れもあります。
HTML業界でお勧めの色は有りますか？

**Name_Not_Found** · 2017/12/12(火) 17:35:59.69

メディアクエリについて質問です。
別のファイルや<style>タグ内に書く場合、@media(max-width:600px){・・・}でかけると思うのですが、これを普通のタグ内に書く場合はどのように書けばいいですか？
例
<p style="font-size:16px;">
みたいな書き方でメディアクエリを使いたい場合です。

**Name_Not_Found** · 2017/12/12(火) 21:32:24.92

>>430
http://daikokudrug.com/
<link rel="stylesheet" href="http://daikokudrug.com/wp/wp-content/themes/main/lib/slidebars/slidebars.css"; media="screen and (max-width: 540px)">

**Name_Not_Found** · 2017/12/13(水) 02:47:50.28

>>429
text-decorationはどないした。リンクならこれがいちばんや

**Name_Not_Found** · 2017/12/13(水) 07:42:56.32

text-decorationはもう2px下に下げたいとかできないのが難点

**Name_Not_Found** · 2017/12/13(水) 13:51:27.50

全くの初心者です。html cssを始めようと思ってます。独学で。オススメの本を教えてください。

**Name_Not_Found** · 2017/12/13(水) 15:23:52.47

>>434
https://www.w3.org/TR/html5/

**Name_Not_Found** · 2017/12/13(水) 17:57:27.41

>>435
「日本語」の「本」でお願いします！

**Name_Not_Found** · 2017/12/13(水) 19:09:18.11

<select size="行数"><option>
の行数をブラウザの幅に応じて変更したいのですが、CSSのみで出来ますか？

**Name_Not_Found** · 2017/12/13(水) 20:34:57.85

>>436
そうか！なるほど、すまんかった
じゃあちょい古いかもだけどこの辺がいいんじゃないかな
実際に作りながらだからわかりやすいし、初心者向けにていねいに解説してる
古いっていってもトレンドを勉強するわけじゃないし問題ないと思う

『作りながら学ぶ HTML/CSSデザインの教科書』
https://www.amazon.co.jp/gp/aw/d/4797373024

**396** · 2017/12/13(水) 21:59:39.45

出ないようなので別の方法にします
バラシでも縦横入替でもなくスクロールもやめます

**Name_Not_Found** · 2017/12/13(水) 22:12:48.89

丸投げ半端ないな。
position:stickyとメディアクエリでできるだろ

**Name_Not_Found** · 2017/12/14(木) 13:09:43.29

>>436
本はなんでもいいと思うよー
本屋行って、出来るだけ薄くて、デザインの気に入ったものを選べばいいよ

**Name_Not_Found** · 2017/12/14(木) 13:49:16.29

DWcs6についてなんだけど。。
ドリームスレが過疎ってるみたいなんで
よかったらこっちで聞かせてください

Macで使ってるんだけど、DWのローカル一覧にデータをデスクトップ等からそのままドロップ(ドラッグ？)できない…
普通できるよね？設定だとしてもどこ見たらいいか分からずです
どうしたらいいかだれか教えてください

**Name_Not_Found** · 2017/12/14(木) 15:29:39.13

DWなんか使ってる人まだいるのか？

**Name_Not_Found** · 2017/12/14(木) 20:38:19.84

>>440
質問スレなんてそんなもんだろ
具体的コードで示したらいいよ

**Name_Not_Found** · 2017/12/14(木) 20:42:58.18

>>440
position:stickyって何？

**Name_Not_Found** · 2017/12/14(木) 20:54:26.50

>>440は質問文すら読んでないな
よく知ってて、頭がよくて、テスト全部正解で埋めるが名前書いてないパターン
またconstか？

**Name_Not_Found** · 2017/12/14(木) 20:56:47.44

>>445
https://developer.mozilla.org/ja/docs/Web/CSS/position
ブラウザ実装はいまいち

**Name_Not_Found** · 2017/12/14(木) 20:58:03.05

>>440
は、どれに対する回答？

**Name_Not_Found** · 2017/12/14(木) 21:24:49.47

>>396 はCSSだけじゃ無理だったからJavaScriptで作ったことはあるな
<table>を読み込んで

<div><table>ー</table></div>
<div overflow><table>ー</table></div>

こういう構造に作り変えるという荒業

>>408 みたいにグリッドシステムを使うのが一般的だと思うが
都合上使えなかったから

**Name_Not_Found** · 2017/12/14(木) 22:52:58.09

>>396
＞幅が広い場合は
＞<th1><th2><th3><th4>
＞<th1><td2><td3><td4>
＞<th1><td2><td3><td4>
＞
そもそもこんなthの使い方は文法違反じゃあないの？

**Name_Not_Found** · 2017/12/14(木) 22:56:18.44

>>450
HTMLやらの解説サイトでよく見るがそうなの？

**Name_Not_Found** · 2017/12/14(木) 23:05:34.64

>>450
別に問題ない
そういうヒョウになることはたまによくあるだろう

**Name_Not_Found** · 2017/12/14(木) 23:07:56.65

>>452
theadやtbodyはどこに入るの？

**Name_Not_Found** · 2017/12/14(木) 23:11:54.28

trすらないしな

**Name_Not_Found** · 2017/12/15(金) 00:15:05.87

>>451
>>452
業務用ならむしろ行見出しと列見出しの両方あるのが基本

**Name_Not_Found** · 2017/12/15(金) 00:53:14.91

そもそもth1なんてタグはない！

**Name_Not_Found** · 2017/12/15(金) 00:58:56.05

>>450
それHTMLじゃないんだよ
ボックスの並びを表現してるだけで

**Name_Not_Found** · 2017/12/15(金) 01:36:32.58

そもそもタグが閉じられてない！

**Name_Not_Found** · 2017/12/15(金) 07:12:18.27

何度見てもよくわからない構造だわ・・・

**Name_Not_Found** · 2017/12/15(金) 08:12:13.66

相手を理解しようとせず批判だけしたがる人はいくらでもいる
仕事でも遊びでも、最も相手にしたくない人だ

**Name_Not_Found** · 2017/12/15(金) 12:06:00.45

HTML5プロフェショナル認定試験？て受けた人おる？
暇つぶしに受けようと思うんだけどどうなんだろうか

**Name_Not_Found** · 2017/12/15(金) 12:17:18.34

時代はHTML LSですよ

**Name_Not_Found** · 2017/12/15(金) 16:48:46.16

全くの初心者から独学でwebデザイナーとしてフリーランスになるのにどんくらいかかる？

四月から通信高校生（週に一回通う）になる予定だけど、その他の6日を、we bデザイナーの勉強に捧げるか、バイトしながらちょくちょく独学するか、どっちがいいかな。ちなみに17歳高2の代です。

**Name_Not_Found** · 2017/12/15(金) 19:16:39.06

大学いけよ

**Name_Not_Found** · 2017/12/15(金) 21:40:08.16

>>454
質問に必要ないから省略しただけだろ
と代わって書いてあげないとわからない？

**Name_Not_Found** · 2017/12/15(金) 21:42:42.65

>>460
同感
ちょっと考えればすぐわかるのにな
それともわかってて皮肉のように言ってるならなおさら嫌なやつだな

**Name_Not_Found** · 2017/12/15(金) 21:56:30.17

>>463
ウェブ系のバイトするのが一番早そうな気がする

**Name_Not_Found** · 2017/12/15(金) 23:19:40.40

>>463
まともに作れるようになってから
フリーで食えるだけの客捕まえるのに数年はかかるじゃろ

**Name_Not_Found** · 2017/12/16(土) 11:41:05.68

テーブルの行を並べ替えれるようにしたいんですが
いい感じのデザインが思いつきません
各行のはしをグリップして並べ替えしようと思うんですが
グリップする箇所はどんなデザインにするか悩んでます
業務用のシステムなんで派手でなくていいですが
どなたかいい感じのデザイン教えてください

**Name_Not_Found** · 2017/12/16(土) 11:50:21.12

>>469
デザインなんて考えなくていい
アルものを使うのが一番わかり易い
http://alphasis.info/2011/05/jquery-ui-sortable/

**Name_Not_Found** · 2017/12/16(土) 12:03:14.30

>>470
すいません言い方が悪かったですね
並べ替え用のプラグインが色々あるのは知ってるんですが
グリップの部分をつけたいのでいい感じのデザイン教えてください

**Name_Not_Found** · 2017/12/16(土) 12:06:33.66

そういや手動並び替えの需要が低いせいか、sortableなUIって知らないわ
マテリアルデザインで頑張るぐらいしかないかも

**Name_Not_Found** · 2017/12/16(土) 12:16:18.83

ハンバーガーボタンを端につければそれっぽく見えますね
自己解決しました
ありがとうございました

**Name_Not_Found** · 2017/12/17(日) 17:09:32.68

safari(mac)で、@keyframesを使ってskewXを変更すると、なぜか高さが変わる現象が出ます。
具体的には50%くらいのところで縦に膨らんで、100%でもとに戻ってる感じです。
なにかCSSの指定が足りないのでしょうか?
firefox/chrome(windows)では現象が出ません。

再現コードは以下の通りです。
https://jsfiddle.net/stu37mge/
下の「skew animation」を押すと赤枠がアニメーションします。
safari(mac)だとこの赤枠が外の黒枠をはみ出ます。

**Name_Not_Found** · 2017/12/18(月) 20:38:03.72

HTML超初心者なのですが
2chを見てて疑問があります
Chromeでスレ一覧画面(この板の場合ですと https://mevius.5ch.net/hp/subback.html)を閲覧した状態でスレタイを左クリックすると
新規タブでクリックしたスレが開きます
そのスレを開いたタブを残したままスレ一覧画面のタブに戻り、また違うスレタイをクリックすると
新規にタブが開くのではなくさきほど残しておいたタブでクリックしたスレを開きます

これはどういう仕組みなのでしょうか
HTMLのコードを見てもよく分かりません
レベルの低い質問だとは思いますがよろしくお願いします

**Name_Not_Found** · 2017/12/18(月) 21:08:46.17

>>475
aタグのtarget属性です
targetに入れたものがタブの名称になり、同じ名称が入ったtargetのaタグはそのタブで開きます
また、targetにはいくつかキーワードがあり、例えばtarget="_blank"とすると常に新規タブになります。
デフォルト(targetがない時)はキーワード"_self"となり、今見ているタブで開きます。
通常のページ遷移ですね。

**Name_Not_Found** · 2017/12/18(月) 21:27:31.79

>>476
返信ありがとうございます
スレ一覧画面の個々のリンクを見ると
<a href="1508043632/l50">1: HTML/CSS の質問に優しく答えるスレ 30 (476)</a>
などとなっており、targetがないような気がするのですが
headタグに<base href="/test/read.cgi/hp/" target="body">
とtargetが書かれておりそれが適応されてるということでしょうか

**Name_Not_Found** · 2017/12/18(月) 23:24:10.81

>>477
2chのHTMLなんてながらく見てなかったが
<base>要素なんて使ってんのか
やるなジム

**Name_Not_Found** · 2017/12/18(月) 23:25:50.87

>>477
あ、baseタグ使ってたんですね
そうです、aタグにtarget属性がなく、baseタグがあればそれになります
ついでに言うと、baseタグのhref属性は相対URLの基準になります
これはaタグだけでなくimgタグなどで相対URLが指定されているものすべてです

**Name_Not_Found** · 2017/12/18(月) 23:25:55.23

>>478
2chのシステムなんて大半が何年もほったらかし
しかも鯖によって微妙に違ってたりしてかなりめんどい

**Name_Not_Found** · 2017/12/18(月) 23:29:40.92

>>480
スマホ対応とか、ひろゆきが消えてから
随分と改良されてるはずだが？

**Name_Not_Found** · 2017/12/18(月) 23:30:29.29

>>480
へー
たまに検索に引っかかったスレをブラウザで開くと
昔と違うイメージあるからてっきりメンテしてるものかと

**Name_Not_Found** · 2017/12/18(月) 23:39:22.58

>>479
ありがとうございます！

**Name_Not_Found** · 2017/12/18(月) 23:48:11.40

>>481
スマホ対応ｗｗｗｗ
あんなもんcss入れて終わりだろｗ

**Name_Not_Found** · 2017/12/19(火) 00:07:05.97

>>484
CSS入れて終わりじゃないことは明らかなので
随分と改良されていると言ってる

**Name_Not_Found** · 2017/12/19(火) 00:42:55.49

5ch のHTML には、<dt>, <dd> みたいなタグのあるサーバーと、無いサーバーがある

**Name_Not_Found** · 2017/12/19(火) 06:05:11.75

2chはiモードで見ると100%人大杉の画面が出るもんだったな

**Name_Not_Found** · 2017/12/19(火) 15:26:16.23

iモードwwwwwwwwwwwwwwwwwwwww

**Name_Not_Found** · 2017/12/19(火) 16:23:49.56

他社からパクってバリバリ独自仕様で固めて開発者を不幸にしたあのiモードですね
一時のIEよりひどかった

**Name_Not_Found** · 2017/12/19(火) 16:59:21.06

他社ってどこなん？

**Name_Not_Found** · 2017/12/20(水) 00:18:36.47

他社からパクったら、それは他社の仕様だろｗ

**Name_Not_Found** · 2017/12/20(水) 09:10:03.84

レスポンシブデザインって、メディアクエリでばっかばっか、条件書いていく手法で作っていくのね

めんどくせえ！

毎回、メディアクエリで条件分岐しないといけないからめんどくさいな

他ないの？

**Name_Not_Found** · 2017/12/20(水) 09:32:01.65

PCとSPでページ分けるってどう？余計なこと考えなくて済むよ