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

1

： Name_Not_Found [] 2017/10/15(日) 14:00:32.64

ID

:t8jVDNmf

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

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

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

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

■次スレについて
基本的にレスナンバー

>>980

を取った人（立てられない場合は次の宣言者）が立てて下さい
重複を避けるため、独断でスレ立てはせず必ず意思表示をしてから立てて下さい（

>>980

を取った場合も）
立てられない事が予め分かっている場合は、

>>980

付近の書き込みは自重しましょう

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

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

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

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

2

： Name_Not_Found [sage] 2017/10/15(日) 14:51:43.76ID:???

997 名前：Name_Not_Found[sage] 投稿日：2017/10/14(土) 21:55:52.16 ID:???
次スレどこ？

998 自分：Name_Not_Found[sage] 投稿日：2017/10/14(土) 21:58:45.24 ID:???
ここでいいよ

Webサイト制作初心者用質問スレ part248 [無断転載禁止]©2ch.net
ttp://mevius.2ch.net/test/read.cgi/hp/1494233240/

3

： Name_Not_Found [sage] 2017/10/15(日) 15:51:00.28ID:???

>>2

そこは初心者用の制作スレであって
こっちはＨＴＭＬ（初心者限らず）スレだから趣旨が違うよと

4

： Name_Not_Found [sage] 2017/10/15(日) 18:31:03.82ID:???

なんだ、26がいつまでたっても消えないから消費しようと思ったんだけどな

5

： Name_Not_Found [sage] 2017/10/15(日) 19:41:49.27ID:???

そうか。すまなかったな
なんだったらそうしてもらっても構わん
こっちはsageておくか？

6

： Name_Not_Found [] 2017/10/15(日) 21:37:51.53

ID

:B4NNVPlx

cssの深い話題についてはどこのスレで出来ますか？
css 2.2の話とか

7

： Name_Not_Found [sage] 2017/10/15(日) 21:56:39.04ID:???

今は特にないかもね
回答あるかはわからないけど
ここでいいんじゃね

8

： Name_Not_Found [sage] 2017/10/16(月) 01:48:51.31ID:???

www-style

9

： Name_Not_Found [] 2017/10/16(月) 14:06:47.21

ID

:ws+UX3+d

>>6

ナンバリングする方は今後はあまり語られなくなるんじゃない？

10

： Name_Not_Found [sage] 2017/10/17(火) 04:43:57.58ID:???

オライリーの詳説正規表現入門に
HTMLの中ではクォートをエスケープ出来ないと書いてありました
""の中に"を書くつもりで\"と書いたりはできないと。
実際、適当な属性に"hoge\"hoge"という属性値を持たせて
jqueryで表示すると、"hoge\"になります
他の処理系ではエスケープできるのが普通なので予想外でした
こんなこと知っていましたか？

11

： Name_Not_Found [sage] 2017/10/17(火) 11:15:57.89ID:???

>>10

本当にエスケープ出来ないと書いてあったのか？
「バックスラッシュでエスケープ出来ない」ではなく？
" でエスケープ出来る

12

： Name_Not_Found [sage] 2017/10/17(火) 11:47:56.71ID:???

>>11

そうです
HTMLではHTMLエスケープなんですよね・・
HTMLエスケープのことは知っていましたが、
「エスケープ文字がない」ということを意識したことが今までなかったので
ファッ？となりました

13

： Name_Not_Found [sage] 2017/10/17(火) 12:28:04.39ID:???

>>12

プログラミング言語とマークアップ言語の違いじゃないかね…
HTMLでは <p>a>b</p> なんて書き方も許容する(invalidだが)曖昧さがある
つまり、エスケープしなくても「テキストノード」として解釈される場合がある
勿論、エスケープすべきであり、XHTMLでは許されない書き方なんだがね

14

： Name_Not_Found [] 2017/10/17(火) 13:38:54.70

ID

:g1qH16hr

>>12

だってHTMLですもの

15

： Name_Not_Found [sage] 2017/10/17(火) 21:09:48.29ID:???

書いた事を書い通りにしか動かないプログラム言語とは違い
解釈というフィルターを入れて驚きの結果を生み出す新感覚の言語だな

16

： Name_Not_Found [] 2017/10/18(水) 00:06:35.77

ID

:0y8vS1lK

>>15

インタプリタがいくつかある的な

17

： Name_Not_Found [sage] 2017/10/18(水) 02:01:28.73ID:???

display:flexした時に、親要素のulが内包したli要素の高さを認識しないんだが
どうしたいい？

18

： Name_Not_Found [sage] 2017/10/18(水) 07:16:23.19ID:???

>>17

それinlineになってるか、ulにheight設定されてるんじゃないか？
普通に認識するよ

19

： Name_Not_Found [sage] 2017/10/18(水) 12:36:55.54ID:???

>>18

その通りでした。さすがです。
失礼しました<(_ _)>

20

： Name_Not_Found [sage] 2017/10/18(水) 20:20:38.73ID:???

word-wrap: break-word;
word-break: break-all;
って同時に使えるの？

21

： Name_Not_Found [sage] 2017/10/18(水) 22:06:51.17ID:???

word-break: normal;
word-wrap: break-word;

22

： Name_Not_Found [] 2017/10/19(木) 00:38:56.30

ID

:+W/eR5wA

両方指定するとword- break: break-allの方が優先されん？

23

： Name_Not_Found [sage] 2017/10/19(木) 08:50:42.89ID:???

>>20

その二つは適用される機能が異なるから併用出来るよ
ttps://w3g.jp/blog/confusing_word-break_word-wrap

24

： Name_Not_Found [] 2017/10/19(木) 13:21:25.70

ID

:E6UMWttk

>>23

そのページでも

なお、body{ word-break: break-all; word-wrap: break-word; overflow-wrap: break-word;}のように両方のプロパティを記述した場合は、word-break: break-all;だけを指定した場合と同じ動作となります。

と書いてるな

25

： Name_Not_Found [] 2017/10/20(金) 12:26:59.45

ID

:GbTT7z4r

質問です
flexを使ってaタグの2行×2列のナビボタンを作りたいです。
条件としては、左右の高さを統一し、テキストを上下中央配置にする事を保つ事です。
見た目はできているのですが、リンク範囲がおかしいです。

ttps://jsfiddle.net/g33n5wh5/

↑これのリンク範囲をボタン全体にするにはどうしたらよいでしょうか？

26

： 25 [sage] 2017/10/20(金) 12:29:05.75ID:???

すいません条件追加です。
pxなどの固定幅はナシで可変の方法でお願いします。

27

： Name_Not_Found [] 2017/10/20(金) 13:08:39.19

ID

:5aRzHIz7

>>26

と言う割にはすでに固定幅使われてるような…

中のa要素もflexに

28

： Name_Not_Found [sage] 2017/10/20(金) 13:13:51.31ID:???

ザ・矛盾

29

： Name_Not_Found [] 2017/10/20(金) 16:25:54.83

ID

:RMF3A8ko

ttps://jsfiddle.net/g33n5wh5/1/

30

： Name_Not_Found [sage] 2017/10/20(金) 18:12:28.22ID:???

>>27

,

>>29

うわぁありがとうございます.:*゜.:。:.(´∀｀).:*゜:。:.

31

： Name_Not_Found [sage] 2017/10/20(金) 18:15:42.24ID:???

ttps://adminlte.io/

管理画面用のフレームワークなら、これが最強なん？

adminLTって有名なの？

32

： Name_Not_Found [] 2017/10/20(金) 21:43:59.83

ID

:YHMeuosf

<ol>
<li>aaa
<li>bbb
<li>ccc
</ol>
の番号部分だけの色や大きさを変えるにはどうすればいいんですか？

33

： Name_Not_Found [] 2017/10/20(金) 22:16:27.12

ID

:RMF3A8ko

>>32

そのスタイルを書けば良いとしか…
パソコン全体で言えば
「マウスのボタンを押すことをクリックと言います」くらいの基本なのでここで聞くよりも

CSS 入門

でググったほうがわかりやすいと思うよ

34

： Name_Not_Found [sage] 2017/10/20(金) 22:40:02.31ID:???

>>33

いや、そんなに自明でもないんじゃ？

>>32

番号部分は疑似要素であり、親（ li ）のスタイルを継承するので
番号部分だけスタイルを変えるためには、それをセレクトする疑似要素を使うことになる
その疑似要素はたしか ::marker だが、サポートしているブラウザはまだないと思う

35

： Name_Not_Found [sage] 2017/10/20(金) 22:49:46.25ID:???

あーすみません

> の番号部分だけ

の「番号」を見逃してた
ほんとすみません
罰としてちょっと田んぼの様子見てきます…

36

： Name_Not_Found [sage] 2017/10/20(金) 23:00:13.69ID:???

>>32

, 34
代替案として
<ol>
<li><span></span>aaa
<li><span></span>bbb
<li><span></span>ccc
</ol>
のようにして、
counter で <li> の番号は消すかわりに <span> に番号をふっておき
span に番号用のスタイルをあてがう方法が考えられる

37

： Name_Not_Found [sage] 2017/10/21(土) 11:51:17.02ID:???

スマホ用のページで文字サイズ、18pxってデカすぎかな？
グーグル推奨してるのが、16pxだけど
最近、女性用のサイトとか文字小さいサイト多いから、文字サイズ大きいサイトにしようと思うんだけど、デカすぎると見にくくなんかな？

38

： Name_Not_Found [sage] 2017/10/21(土) 13:41:26.44ID:???

1画面内に収まる情報量が少なくて大丈夫な情報サイトとか読み物系サイトなら別にいいんじゃない
ECだと無理

39

： Name_Not_Found [] 2017/10/22(日) 23:44:37.40

ID

:co/FkXbx

wordpressで既存のテーマを編集したいんですが、何から勉強すればいいんでしょうか
CSSが理解出来れば楽勝ですか？

40

： Name_Not_Found [sage] 2017/10/23(月) 01:54:25.86ID:???

質問です。
flexを使ってtableのセルの縦のマージと同じような見た目（実際は結合してない）は可能でしょうか？

ttps://jsfiddle.net/tfr9q05x/

上記の2のli高さを1＋3の高さにしたいんです

41

： Name_Not_Found [] 2017/10/23(月) 01:54:47.73

ID

:IMTWkmTu

age

42

： Name_Not_Found [sage] 2017/10/23(月) 03:22:06.33ID:???

リストタグの時点でおかしい

43

： Name_Not_Found [sage] 2017/10/23(月) 04:07:15.22ID:???

>>42

こうしたらわかりやすいですか？
ttps://jsfiddle.net/tfr9q05x/

44

： 43 [] 2017/10/23(月) 04:08:26.43

ID

:IMTWkmTu

URL間違えました。こちらです
ttps://jsfiddle.net/wub524wc/1/

45

： Name_Not_Found [sage] 2017/10/23(月) 04:22:58.40ID:???

リストタグを使うなと言うておるのじゃ

46

： Name_Not_Found [sage] 2017/10/23(月) 10:00:45.82ID:???

のじゃ

47

： Name_Not_Found [sage] 2017/10/23(月) 10:16:33.22ID:???

ttps://jsfiddle.net/wub524wc/2/

48

： Name_Not_Found [sage] 2017/10/23(月) 15:46:11.80ID:???

画像表示で詰まっています
以下の条件を満たしたいのですが…

前提
・レスポンシブでブラウザの大きさによって親要素widthが変わる
・画像は様々な比率のものがある

実装したい画像表示
・可能な限り親のwidthにあわせて画像を展開表示したい（縦横のアスペクト比は保つ）
・ただし画像の縦表示が350px以上になったら展開をストップしたい
・ストップしたら親要素のcenterに表示したい

画像に「width100％ max-height:350px」とするとアスペクト比が保たれず（縦350で横いっぱいになってしまう）
「width:auto　max-height:350px」とすると画像本来の大きさ以上に広がらない

他にも色々設定したのですがうまくいかず…
どうかご教授お願いします

49

： Name_Not_Found [sage] 2017/10/23(月) 16:00:46.44ID:???

>>48

object-fit プロパティで半分は解決するだろう
ところで展開とはなんぞや？

50

： Name_Not_Found [sage] 2017/10/23(月) 16:15:58.01ID:???

>>48

ttp://www.tagindex.com/html5/embed/img_srcset_sizes.html とかは？
違ったらｽﾏｿ

51

： Name_Not_Found [sage] 2017/10/23(月) 16:20:10.10ID:???

>>49-50

ありがとうございます。試してみます
展開というのは本来の画像の大きさより大きく表示するという意味合いで使ってました

52

： Name_Not_Found [sage] 2017/10/23(月) 16:39:46.68ID:???

object-fitで解決しました！こんな便利なものがあったんですね
ありがとうございました

53

： Name_Not_Found [sage] 2017/10/23(月) 16:57:53.05ID:???

IE対応してましたっけか >>object-fit

54

： Name_Not_Found [sage] 2017/10/23(月) 20:57:46.72ID:???

IE対応ならpolyfill使え

55

： Name_Not_Found [sage] 2017/10/24(火) 02:58:30.86ID:???

>>45

メニューのリストなのにＨＴＭＬ側にリストタグを使ってはならないのは何故ですか？

>>47

こんなのがあるとは知りませんでしたありがとうございます。
flexでは無理という事ですね？

56

： Name_Not_Found [sage] 2017/10/24(火) 09:02:58.02ID:???

マテリアルデザインって、結局、ボックスシャドウを使いこなせないとできないんだな

57

： Name_Not_Found [sage] 2017/10/24(火) 15:42:27.22ID:???

>>55

リストとなるものなら<ul>要素で間違いはないと思うよ
gridに関してはIEが正式に対応してないから個別に対応する必要があるみたいね
flexじゃ作れなかったわ

58

： Name_Not_Found [sage] 2017/10/25(水) 14:13:26.10ID:???

少し前からネットで見るようになってきた、
ユーザー名の頭文字を大きくしてバッジのようにしたアイコンの名前は何ですか？

59

： Name_Not_Found [sage] 2017/10/25(水) 15:30:37.93ID:???

gmailの右上に出るアレみたいなやつか？
名前なんかあるんかな

60

： Name_Not_Found [sage] 2017/10/25(水) 22:57:19.64ID:???

たまに見かけるのだが、特定の機能の名前を質問する人って何が目的で知りたいんだ？
その機能を実装するライブラリをぐぐるためか？

61

： Name_Not_Found [sage] 2017/10/25(水) 23:04:58.48ID:???

UIの名前が分からないと
そのUIを追求できないですよね？
まず名前を確認するというのは基本だと思います

62

： Name_Not_Found [sage] 2017/10/26(木) 03:12:20.81ID:???

>>61

> そのUIを追求できないですよね？
そんなことはないと思うけど。
要件さえ分かっていれば機能を実装する事が出来る。
名前なんかより「要件」や「アルゴリズム」の方が重要だと思うな。
例えば、Ajaxという言葉を知らなくても同様の機能を実装できるよね。

63

： Name_Not_Found [sage] 2017/10/26(木) 08:27:13.68ID:???

いやどう考えても要件やアルゴリズムよりも先に名称

64

： Name_Not_Found [sage] 2017/10/26(木) 12:22:57.65ID:???

いや、どう考えても名前は重要じゃない

65

： Name_Not_Found [] 2017/10/26(木) 13:18:49.16

ID

:YbLaWqPd

専門学校にもいるなあ
何にでも呼び名があると思ってる子

66

： Name_Not_Found [sage] 2017/10/26(木) 17:01:24.91ID:???

別のスレだが、ttp://mevius.5ch.net/test/read.cgi/hp/1494233240/577 も思い込みが激しい人だったな

67

： Name_Not_Found [sage] 2017/10/26(木) 17:53:00.36ID:???

道端に落ちてる変わった形の石に対して
「あの石の名前なんだと思う」っていう
子供の頃の会話を思い出した
名前は川瀬だった

68

： Name_Not_Found [] 2017/10/26(木) 17:58:29.02

ID

:ZDQHXs5p

名前といえば、マウスを乗せると何かが起こる、のことを
「オンマウス」と呼ぶ人が一定数いる

もちろん意味はわかるから声には出さんけど
心の中では「オンマウス何だよ！」と思ってしまう

69

： Name_Not_Found [sage] 2017/10/26(木) 18:45:24.34ID:???

俺「マウスホバー」ﾄﾞﾔｯ

70

： Name_Not_Found [sage] 2017/10/26(木) 19:30:56.81ID:???

>>68

まあオンマウス属性があるからなぁ

71

： Name_Not_Found [sage] 2017/10/26(木) 20:12:47.48ID:???

俺「乗っけたら反応するやつ」

72

： Name_Not_Found [sage] 2017/10/26(木) 21:28:15.48ID:???

キュレーションサイト最近作ってるけど、灰色文字、灰色背景こんなにいっぱい使うとは、思わなんだわw
なんで、どこもかしこも灰色文字、灰色背景ばっか使うんだろう？
まるで、win95、98時代のUIに逆戻りした気分だわw

73

： Name_Not_Found [sage] 2017/10/26(木) 22:09:16.00ID:???

>>70

つ onmouseover属性、onmouseout属性

74

： Name_Not_Found [sage] 2017/10/26(木) 22:24:11.79ID:???

>>72

モノトーンの汎用性と便利さ。階調つける為とコントラスト落とす為にグレーになる
仮に特定の色相に同系色のフォントなんて使ったらそのサイトでしか使えないから。
キーカラーと写真を際立たせるのは無彩色。

75

： Name_Not_Found [sage] 2017/10/27(金) 00:45:20.38ID:???

onmouse〜属性のonは「マウスで」であって、マウスが上に乗っていることを表しているわけではないんだよな
そういうのはmouseover

76

： Name_Not_Found [sage] 2017/10/27(金) 22:38:53.37ID:???

>>32

亀だが。昔同じことやってこれで濁してた。

<ol>
　<li><span>あああ</span></li>
　<li><span>いいい</span></li>
</ol>

ol {
　color:
　font-size:
}

ol span {
　color:
　font-size:
}

77

： Name_Not_Found [sage] 2017/10/27(金) 23:23:35.33ID:???

昔の不便な頃からやっている人は
考えて創意工夫する習慣が付いてるだろうな。

78

： Name_Not_Found [sage] 2017/10/28(土) 09:52:00.84ID:???

端末ごとに文字サイズ合わせようと思ったら、メディアクエリでしかできないんかな？

幅320サイズ、375サイズ、414サイズに合わせるのが面倒い

79

： Name_Not_Found [sage] 2017/10/28(土) 13:10:53.94ID:???

calc 式で無段変速

80

： Name_Not_Found [sage] 2017/10/29(日) 11:06:50.19ID:???

vw

81

： Name_Not_Found [sage] 2017/10/29(日) 13:02:20.43ID:???

www

82

： Name_Not_Found [sage] 2017/10/29(日) 14:13:57.62ID:???

ttps://ja.wordpress.org/themes/fara/
というテーマを見て思いついたんですが、再背面の背景に薄くスライダーを表示させるのって変でしょうか？

83

： Name_Not_Found [sage] 2017/10/29(日) 17:44:40.02ID:???

背景画像がスライドショーするサイトなら昔からよくあるよ

84

： Name_Not_Found [sage] 2017/10/29(日) 18:56:56.95ID:???

pixivとかじゃね？

85

： Name_Not_Found [sage] 2017/10/29(日) 19:07:56.27ID:???

>>83

ありがとうございます！
ちょっと試してみます

86

： Name_Not_Found [sage] 2017/10/29(日) 19:18:37.95ID:???

cssでclearっていうプロパティあるじゃん
何がクリアなの？

87

： Name_Not_Found [sage] 2017/10/29(日) 19:35:26.99ID:???

float

88

： Name_Not_Found [sage] 2017/10/29(日) 20:00:39.91ID:???

調べればわかることは調べた方がいいよ
それが出来ないなら向いてないし辞めた方がいい

89

： Name_Not_Found [sage] 2017/10/29(日) 22:12:10.14ID:???

>>86

日本語には存在しない概念

90

： Name_Not_Found [sage] 2017/10/30(月) 03:33:09.47ID:???

>>89

日本語にも存在するぞ。
>まっさらな状態に初期化すること。データクリアなど。
ｃｓｓの場合floatをクリア（解除）するって事。

91

： Name_Not_Found [sage] 2017/10/30(月) 03:34:35.89ID:???

クリアってステージを攻略することだろ

92

： Name_Not_Found [sage] 2017/10/31(火) 12:22:27.95ID:???

floatを攻略せよって事？

93

： Name_Not_Found [sage] 2017/10/31(火) 12:23:26.44ID:???

BSスカパー!やWOWOWなどで録画したものをパソコンに入れたのですが、容量が6GB以上ありDVDに焼こうと思ったのですが、焼けません。どうすればDVDに焼くことができますか？
時間は２時間以内の
物なんですが、容量がオーバーしているためDVDRに焼けません。圧縮？すればいいんでしょうか？
あまり詳しくないため簡単にできる方法やサイトとかあれば教えて下さい。よろしくお願いいたします。

94

： Name_Not_Found [sage] 2017/10/31(火) 13:00:22.27ID:???

なぜよりにもよってこの板のこのスレを選んだのかw

95

： Name_Not_Found [sage] 2017/10/31(火) 14:49:23.06ID:???

画像がブラウザの幅を超えた時の為に、max-width:100%と設定してるのですが
これだと縦に引き延ばされた画像になってしまいます
比率を保ってブラウザの幅へ縮小するにはどうしたらいいですか？

96

： Name_Not_Found [sage] 2017/10/31(火) 15:31:57.49ID:???

objectなんとかじゃね

97

： Name_Not_Found [sage] 2017/10/31(火) 16:22:26.28ID:???

その条件だけならheight:autoでいいんじゃね？

98

： Name_Not_Found [sage] 2017/11/01(水) 01:58:57.65ID:???

height: autoだな

99

： Name_Not_Found [sage] 2017/11/01(水) 02:00:06.18ID:???

>>96

100

： Name_Not_Found [sage] 2017/11/01(水) 02:00:32.89ID:???

>>96-98

どっちのやり方でもできました、ありがとうございました

101

： Name_Not_Found [sage] 2017/11/01(水) 19:04:00.73ID:???

背景を白にしてるんだけど、 他のサイトに比べて青白く見えるんだけど、原因がわからない
文字は黒と灰色で構成されてるんだけど、全対的に見るとすごい青白く見える

原因わかる人教えてほしい

102

： Name_Not_Found [sage] 2017/11/01(水) 19:14:07.76ID:???

サイト見ないと判断できない

103

： Name_Not_Found [sage] 2017/11/01(水) 20:02:41.05ID:???

液晶側の問題じゃなくてる

104

： Name_Not_Found [sage] 2017/11/01(水) 20:03:01.60ID:???

○液晶側の問題じゃなくて？

105

： Name_Not_Found [sage] 2017/11/01(水) 20:04:06.10ID:???

かなうちだああああああああああああああああああ

106

： Name_Not_Found [sage] 2017/11/01(水) 23:59:04.92ID:???

古式若葉きたー

j3

107

： Name_Not_Found [] 2017/11/02(木) 18:18:43.88

ID

:ZpIDpSfq

>>106

懐かしすぎ泣いた

108

： Name_Not_Found [sage] 2017/11/03(金) 20:03:05.17ID:???

質問ですが、フォントの種類で画面の明るさって変わります？

font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Noto Sans Japanese", "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, Arial, Meiryo, sans-serif;

今これでやってるんですが、白背景でフォントカラーが#444でiPhone6で見ると画面が青白くなります。
ブログ系では#444がベストって書いてあったので入れたんだけど、長文だと画面が暗く感じます。

検証で、グーグルのRobotoを振ったらPC上では明るく感じたんだすけどフォントの種類で端末の見栄えが変わったりするのでしょうか？

109

： Name_Not_Found [sage] 2017/11/03(金) 20:09:56.97ID:???

そりゃ変わるよ。画面太い文字や文字間のスペースが小さいなど
文字が白だとして画面における白の部分が多ければ多いほど明るくなる。

110

： Name_Not_Found [sage] 2017/11/03(金) 20:57:03.38ID:???

見やすい行間ってありますでしょうか？ 16ｐｘで読みやすいように1.7emにしましたけど、これって広すぎますでしょうか？
行間の平均がわからないですがだいたいどれくらいなのでしょうか？
line-height、サイトによってばらばらで書き方も異なるので迷いまくりです。
16pxでline-heightってどれくらいなのでしょうか？

111

： Name_Not_Found [sage] 2017/11/03(金) 21:34:22.22ID:???

自分のサイト、
パソコンで閲覧すると文字化けしないけど、
スマホで閲覧すると文字化けする。
タグのどこをいじればいいですか。

112

： Name_Not_Found [sage] 2017/11/04(土) 07:09:58.70ID:???

>>110

＞見やすい行間ってありますでしょうか？
ない

強いて言えば他のサイトと同じ形にする
bootstrapってフレームワークに従えばいい
これを最初に入れておき、グリッドシステムを使えば行間やらpaddingがそれっぽくなる

113

： Name_Not_Found [sage] 2017/11/04(土) 15:53:51.01ID:???

>>110

新聞みたいにぎっちり詰まってるのか
ブログのようにスペースがゆったりしてるのか
などで違ってくるから上の人が書いてるように他を参考に

蛇足かもしれんがpx指定だとユーザが変えられないので特別な理由がない限りem指定などがいい

114

： Name_Not_Found [sage] 2017/11/04(土) 15:57:04.36ID:???

>>111

先ずその前に

HTMLのhead
<meta charset="utf-8">

CSS
@charset "utf-8";

などと書いて、かつそのエンコードで保存してる？

115

： Name_Not_Found [sage] 2017/11/04(土) 19:38:46.59ID:???

2個目のh2タグのデザインを変えたいんですけど、2個目って設定できるのでしょうか？

116

： Name_Not_Found [sage] 2017/11/04(土) 19:40:32.40ID:???

h2タグの見出しタイトルが連続することがあるんですが、設定できるのでしょうか？

117

： Name_Not_Found [sage] 2017/11/04(土) 19:50:13.70ID:???

>>115

n個目 css
でぐぐれ

ただ、liの最初と最後以外で指定するのはやめておいたほうがいい
大抵間に何か入る

118

： Name_Not_Found [sage] 2017/11/05(日) 08:55:43.42ID:???

こういう時にどうしていますか？

何度も使うデザインはCSSにかいてクラス等で反映させるのが基本ですが、
ページのデザインが大体出来上がってきた頃に、
部分的に「ここには共通のデザインをクラスで反映させているけど、margin-bottomを少し増したいな」とか
「ここだけletter-spacingをあけて強調したいな」と思った時は該当箇所のタグのstyleに直接書いちゃいますか？
それとも新規にクラスを作ったりとCSSを編集しますか？

119

： Name_Not_Found [sage] 2017/11/05(日) 09:04:23.20ID:???

>>118

＞該当箇所のタグのstyleに直接
インラインのstyleはもう絶対にやめとけ
保守の時に死ぬ

素直にクラス作るといい

120

： Name_Not_Found [sage] 2017/11/05(日) 09:47:00.22ID:???

>>119

ほんとこれ
１箇所だけ…と思っても何ヵ所か増えて最後にレスポンシブで死ぬ

121

： Name_Not_Found [sage] 2017/11/05(日) 09:50:34.49ID:???

で、結局クラス作って書き直すハメになるんだよな
で、これを聞いて尚、

>>118

はインラインで書くんだよな

歴史は繰り返される

122

： Name_Not_Found [sage] 2017/11/05(日) 10:54:34.42ID:???

DDDでindexに流し込むファイルが変わるならそのファイルに<style scoped>で追加する

123

： Name_Not_Found [sage] 2017/11/05(日) 15:33:51.42ID:???

style scoped は廃止されてないか？

124

： Name_Not_Found [sage] 2017/11/05(日) 18:25:43.06ID:???

>>114

あざっす。
そのタグを挿入する前にもう一度スマホから閲覧したら、なぜか文字化けしてなかったんだけど、iOSをバージョンアップしたからですか？

125

： Name_Not_Found [sage] 2017/11/05(日) 21:06:39.13ID:???

知らんがな
先ず質問に答えるのが普通だぞ

126

： Name_Not_Found [sage] 2017/11/05(日) 23:28:10.52ID:???

モディファイヤという概念があってだな

127

： Name_Not_Found [sage] 2017/11/05(日) 23:31:41.65ID:???

しってるしってるヨガファイヤー

128

： Name_Not_Found [sage] 2017/11/07(火) 10:20:50.38ID:???

待ちダルシムなんて反則かよー

129

： Name_Not_Found [] 2017/11/07(火) 10:24:16.09

ID

:0kf3C1NY

http-equiv="refresh" タグで質問。

リダイレクト先がPC閲覧の場合は「○○.com」に飛ばしたいのですが、
リダイレクト先がスマホ閲覧の場合は「△△.com」に飛ばしたいです。

どうすれば、デバイスごとに複数のページに分別して飛ばすことが出来ますか？

130

： Name_Not_Found [sage] 2017/11/07(火) 12:36:32.56ID:???

>>129

飛んだ先で判別して振り分け

131

： Name_Not_Found [sage] 2017/11/07(火) 19:12:03.54ID:???

構造化データを導入するメリットは、検索結果がリッチになりやすいということでしょうか？

132

： Name_Not_Found [age] 2017/11/10(金) 11:38:59.77ID:???

CSSの入門書を紹介してください。

133

： Name_Not_Found [sage] 2017/11/10(金) 15:29:57.02ID:???

質問です。
質問内容もHTMLに書いてあります。

ttps://jsfiddle.net/0bLros06/#&togetherjs=Uzwkb9RsK2

黒いバーをウィンドウ幅に対して中央にもってきたいです。
よろしくお願いします。

134

： Name_Not_Found [] 2017/11/10(金) 15:37:10.37

ID

:on4AJzAS

>>133

ほい
ttps://jsfiddle.net/0bLros06/1/

左右だけじゃなく上下もできるよ
もし中央に寄せたい内容物がボックスより大きくなる可能性があるときは
数値を0じゃなくじゅうぶん大きい負の値にして

なんでそうなるか知りたかったら
CSSの仕様書のmargin: autoとposition: absoluteのところに書いてあるよ

135

： Name_Not_Found [sage] 2017/11/10(金) 15:56:13.94ID:???

>>134

早い！早いよ！
ありがとうございます。
margin: autoとposition: absolute調べてみます。

136

： Name_Not_Found [sage] 2017/11/10(金) 16:03:55.05ID:???

Firefoxです
下記のradikoのHPを開いて、続いてYahooのHPを開きます
その後、左上にある
前のページに戻ります、という左向きの矢印ボタンを押すと、radikoのページに戻るのですが、
すると、右矢印の次のページへ進みますというボタンが消えてしまうのです
htmlでそんな仕掛けをしてるのかなと思って、radikoのページを名前を付けて保存でウェブページ完全というので保存し、
保存したhtmファイルを開いて、同様にYahooのHPに行ってから左矢印ボタンでradikoページに戻ると
今度は右矢印ボタンは消えずに残っています

これはどういうことなのでしょうか。なぜ右ボタンが消えるのでしょうか
右ボタンが消える仕組みを教えてください

ttp://radiko.jp/#!/live/RN1

137

： Name_Not_Found [sage] 2017/11/10(金) 16:12:23.80ID:???

>>136

window.historyでも見てみれば？

138

： Name_Not_Found [sage] 2017/11/10(金) 16:19:49.94ID:???

javascriptで、window.historyオブジェクトとかDOMがあるのはわかりました。
が、何かそういうスクリプトで仕掛けをしてるのなら、
名前を付けて保存で完全保存したファイルを開くと、ボタンが消える現象が起きないのが不思議です

139

： Name_Not_Found [sage] 2017/11/10(金) 16:35:18.12ID:???

historyの中身見た？

140

： Name_Not_Found [sage] 2017/11/10(金) 16:47:40.85ID:???

おっしゃってることが良くわからなかったので、履歴で今日というところを全部削除して
まず、radikoを開きました。　次にYahooへ行って、さらに深く入って
履歴に次々に表示されることを確認して、戻るボタンでradikoに戻ったら、今度は、進むボタンが消えません

なんなんだ？

一旦Firefoxを完全に終了させてFirefoxを起動しなおして、今度は、radikoを表示、次にYahooHPにだけ行って
すぐにRadikoに戻っても、もう進むボタンは消えなくなりました

わけわからん。　radikoの時間帯によって違うのかなw

141

： Name_Not_Found [] 2017/11/10(金) 18:44:33.97

ID

:GdMq/gBH

.form-line.form-line-column {

padding-left: 18px !important;

}

に関して}の移置はあくまでその場所でないとだめか。
これは左端のマージンを18pxあけているということか
また !important;とは

スマソこれがCSS始めてで

142

： Name_Not_Found [sage] 2017/11/10(金) 19:20:52.11ID:???

{}の書き方は以下のような感じ
!importantは他のスタイルシートの設定よりも優先するっていう意味やで

.form-line.form-line-column {
　padding-left: 18px !important;
}

.form-line.form-line-column {
　padding-left: 300px;
}

例えば同じ名前のスタイルが2つあると普通は後ろのスタイルが優先されるんだけど
!important;をつけると、つけられた方が優先される
つまりこの場合、上が優先される


padding-leftは箱の中身の左側の余白を設定する

padding-left: 18px

|　　　　→18px|

padding-left: 3px

|　→3px|

margin-leftは箱の外側の左側の余白を設定する

margin-left: 18px

　　　→18px|箱|

143

： Name_Not_Found [sage] 2017/11/10(金) 23:20:32.80ID:???

>>140

進む、戻るはブラウザの履歴をたどっているのに他ならんけど
その履歴がwindow.historyに入っているのよ

144

： Name_Not_Found [sage] 2017/11/11(土) 00:48:16.38ID:???

hoverについて質問です。
メニュー一覧になるdiv#subの中にa hrefタグを数個貼り、#info、#mainのようなidをそれぞれに付けました。
その後cssで#sub ul li a#info｛background-image: url(〜〜)｝で画像を挿入して表示されました。
ここからが行き詰まってしまったのですが、hoverはどう書けば良いのでしょうか？
#infoの画像にマウスを乗せると別の画像に変わるようにしたいのです。
#sub ul li #info a:｛background-image: url(〜〜)｝など書いてみましたが無理でした。
｛｝の前はなんと書けば良いですか？
わかる方がおられましたらご教授して頂けると嬉しいです。

145

： Name_Not_Found [sage] 2017/11/11(土) 00:51:09.58ID:???

#info:hover {}
だろ？

146

： Name_Not_Found [sage] 2017/11/11(土) 01:07:39.44ID:???

>>145

早速レスを頂きありがとうございます。
試してみましたが動きませんでした…

147

： Name_Not_Found [sage] 2017/11/11(土) 01:18:55.38ID:???

a hover 順番
とかでぐぐってみては

148

： Name_Not_Found [sage] 2017/11/11(土) 02:02:27.26ID:???

a#info:hover

149

： Name_Not_Found [] 2017/11/11(土) 12:18:57.44

ID

:eF74HGiv

#sub ul li a#info｛background-image: url(〜〜)｝
の記述で画像だしてたのに
#sub ul li #info a:｛background-image: url(〜〜)｝
セレクタの順序変えたら動くわけ無いでしょ

150

： Name_Not_Found [sage] 2017/11/11(土) 13:00:26.10ID:???

$img_path:'/img';

#sub ul li a#info {
&:hover {
background-image: url(#{$img_path}/bg.png) no-repeat;
}
}

上記を、SassMeister に入力してみ
ttps://www.sassmeister.com/

結果は以下となる

#sub ul li a#info:hover {
background-image: url(/img/bg.png) no-repeat;
}

151

： Name_Not_Found [sage] 2017/11/11(土) 13:45:27.06ID:???

質問です。
<html><head></head>
<body>
<a href="file:///c:/windows/system32/notepad.exe">メモ張</a>
</body></html>
を書いてメモ張が開けますが、警告(?)が出て[実行]を押さないと開けないんです。どうすれば出ないようにできますか?

152

： Name_Not_Found [] 2017/11/11(土) 14:31:17.15

ID

:67Y81RBP

ビジネスフォーマットの件です。

練習でビジネスフォーム作成をしています。Firefoxで右クリックするとViewPageSource
というのがでてきます。これらのコードの段階からどんなフォーマットになっているかを
みるにはどのようにすればいいでしょうか

153

： Name_Not_Found [sage] 2017/11/11(土) 14:36:36.76ID:???

>>151

無理
ブラウザからローカルファイルは触らないほうが良い。はっきり言ってすげーめんどくさいし、仕様変更で使えなくなる可能性が大
googleスプレッドシートなどを使ったほうが良い

>>152

言ってる意味がよくわからないけど、F12キーの開発ツールの方が見やすいと思う

154

： Name_Not_Found [sage] 2017/11/11(土) 18:37:59.40ID:???

>>151

その「メモ帳」の notepad.exe が virus.exe だったら、とても危ないので警告は絶対必要になる。
それでも、警告と似たような見かけのダイアログで繰り返しアンケートに答えさせ、間にホンモノの実行ダイアログを挟んでおいて、うっかり OK をクリックさせようと騙すページもあり得るので、そんなダイアログで .exe を開けること自体がすでに望ましくない。

155

： Name_Not_Found [sage] 2017/11/11(土) 19:05:50.09ID:???

書き方的に自分用のウェブアプリとかじゃないの
みんな自分と同じ環境だと思ってる人が多いな

156

： Name_Not_Found [sage] 2017/11/11(土) 19:07:38.87ID:???

>>153

だけどそれはわかった上での回答だよ
そういうのは、昔やった

157

： Name_Not_Found [sage] 2017/11/11(土) 19:11:16.84ID:???

ローカルファイルは、Node.js, Electron とかを使う。
つまり、ブラウザではなく、PC 内にサーバーを立てる

まあ、Firefox では、直接ローカルファイルにアクセスできるらしいが

158

： Name_Not_Found [sage] 2017/11/11(土) 19:12:49.16ID:???

それもうクラウドサービスにすりゃいいんじゃないっすかね…

159

： Name_Not_Found [sage] 2017/11/11(土) 21:52:08.90ID:???

>>150

hoverがわかんない奴にsassとかw
どっかいけよ無能

160

： Name_Not_Found [sage] 2017/11/11(土) 23:52:19.22ID:???

質問ですが、スマホページでタイトル見出しの上に細長いバナー広告がある場合ってだいたいどれくらいの余白が必要なのでしょうか？
見出しのフォントサイズは18pxです。
今、30px取ってるですがどうも広く取りすぎてるので縮めたいのですがどれくらいが理想的なのでしょうか？
15pxか、20pxくらい必要でしょうか？

161

： Name_Not_Found [sage] 2017/11/11(土) 23:56:53.46ID:???

>>160

知らん多かろうと少なかろうto,gooleにあわせておけば違和感は少ないｘ

162

： Name_Not_Found [sage] 2017/11/14(火) 21:20:02.45ID:???

Sassのextendってよく使いますか？
HTMLにマルチクラスでいいような気がするんですが

163

： Name_Not_Found [sage] 2017/11/14(火) 22:25:04.72ID:???

「button要素をaタグで囲むのは駄目」ときいたのですが、
button要素にリンクをはる場合どう記述するんが適切ですか？

164

： Name_Not_Found [sage] 2017/11/14(火) 22:44:08.64ID:???

>>162

それで済んでるのならそれでいいんじゃない？

1バイトでも削りたい時とかに
mixinとextendはよく考えて使い分けたい

165

： Name_Not_Found [sage] 2017/11/14(火) 22:56:21.89ID:???

>>162

設計や仕様によるだろうね
完全に100%仕様が決まっているなら使ってもいいけど、
正直webって仕様が変わりまくるからとてもじゃないけど使えない

>>163

buttonをaで囲むのは最悪かな。どのブラウザでどう動くのか全くわからない。絶対にaで囲んではいけない
buttonのｃｌｉｃｋイベントにイベントをバインドするだけでいい

166

： Name_Not_Found [sage] 2017/11/14(火) 22:58:37.86ID:???

>>162

個人的にはなんでマルチクラスタやBootstrapのような
HTMLをごちゃごちゃと肥大化させるようなものが流行ってるのか理解できない

HTMLにはシンプルにクラスを1つ書いておいて（もしくは何も書かない）
CSSの方で頑張ればいいじゃないか
そうすれば見た目を変える時、本当にCSSだけの修正で済む

> 1バイトでも削りたい時とかに
1バイトでも削りたいとは思わないな。単にメンテナンス性のため
HTMLをごちゃごちゃさせたくない

167

： Name_Not_Found [sage] 2017/11/14(火) 23:20:26.19ID:???

メンテ性のためにマルチクラスにしてるんだけどね
OOCSSの考え方になるのかな？ ほかの設計方法も勉強してみますー

168

： Name_Not_Found [sage] 2017/11/14(火) 23:26:49.79ID:???

>>166

ごちゃごちゃ扠せたくないのはわかるが、限度がある
headerにしても、h2にしても、設計・仕様によって容易に見た目が変わる。
なんだったらhtml自体が5.2になればどうなるかわからない

はっきり言おう、君は未熟だ
html5でhタグを全部h1にした俺が断言する

169

： Name_Not_Found [sage] 2017/11/14(火) 23:28:49.92ID:???

classは大体bodyにつけると問題がなくなる
body.className ul
ダメ化

170

： Name_Not_Found [sage] 2017/11/14(火) 23:29:58.59ID:???

いや、だから容易に見た目が変わるから
HTMLにごちゃごちゃ書きたくないんだよ。

HTMLにごちゃごちゃ書いてあったら
メンテナンスの時大変だろ

> html5でhタグを全部h1にした俺が断言する
それは単におまえがバカなだけ

171

： Name_Not_Found [sage] 2017/11/14(火) 23:38:28.41ID:???

>>170

htmlにある程度classを書いて置かないとそれこそ大変なんだよ

＞> html5でhタグを全部h1にした俺が断言する
＞それは単におまえがバカなだけ
しらねーよ

172

： Name_Not_Found [sage] 2017/11/14(火) 23:43:45.66ID:???

> htmlにある程度classを書いて置かないとそれこそ大変なんだよ
だから1つで十分だって言ってるんだが

173

： Name_Not_Found [sage] 2017/11/14(火) 23:44:37.44ID:???

>>167

> メンテ性のためにマルチクラスにしてるんだけどね

sass（scss）を使わない場合は、それが限界だってだけ

174

： Name_Not_Found [sage] 2017/11/14(火) 23:45:19.47ID:???

>>166

CSSが使い物になるか？って頃から
CSSだけでデザイン変更って甘言をよく見るけど
実際そんなことほとんどなくね？

ずっと企業サイトとウェブアプリケーションしか作ってないから
小規模サイトではそんなことないのかもしれんけど

175

： Name_Not_Found [sage] 2017/11/14(火) 23:48:40.30ID:???

>>163

button要素がいらない
aだけでいい

176

： Name_Not_Found [sage] 2017/11/15(水) 00:01:23.45ID:???

Bootstrapとか初めて聞いた
プログラミングの世界って「僕の考えた最強のやり方」が沢山あって面白いね
お前には最強かもしれないけど俺には最低だーなんてのも沢山ありそうだけどw

177

： Name_Not_Found [sage] 2017/11/15(水) 00:08:30.98ID:???

>>175

アホか死ねボケ

>>176

時代遅れすぎ
とりあえずbootstrap入れておけば大抵「それっぽく」なりクレームも少なくなる、というのは常識だろう
その上で取捨選択はしている

178

： Name_Not_Found [sage] 2017/11/15(水) 00:11:49.24ID:???

>>177

アホはお前だろ
buttonにリンク付けるなボケ
リンクはaだろ

179

： Name_Not_Found [sage] 2017/11/15(水) 00:19:01.53ID:???

>>178

煽り合い仕様と思って前提が決まっていないことに気づいた

>>163

の場合、buttonのclickもfalse、submitもない、aもreturn falseで何か別の事をやろうとしている可能性が30%ぐらいある

180

： Name_Not_Found [sage] 2017/11/15(水) 09:05:20.00ID:???

>>176

uikitって聞いたけど、違うんかな？

181

： 163 ◆ytEVpkdjek [sage] 2017/11/15(水) 16:22:30.40ID:???

>>163

だけど、人の質問に勝手に怒って勝手に煽っている>177等は何なの？

>>165

はJSですよね。
buttonクリックで新しいタブでリンクを開くようにしたいのですけど、何と書けばいいですか？

182

： Name_Not_Found [sage] 2017/11/15(水) 18:34:10.98ID:???

button>aはコーダーなりたての頃に書いてFirefoxで動かないことに気づいてやめたな

183

： Name_Not_Found [sage] 2017/11/15(水) 18:43:07.46ID:???

>>181

いや、だからaだけにすればいいだけだよ
なんでbuttonにこだわるの？

184

： Name_Not_Found [sage] 2017/11/15(水) 19:31:46.78ID:???

>>179

return falseするなら、それはリンクではないのでa要素でマークアップするのは不適切

185

： Name_Not_Found [sage] 2017/11/15(水) 19:32:49.26ID:???

>>181

a要素にterget属性を付けるだけで良い
button要素は不要

186

： 163 ◆ytEVpkdjek [sage] 2017/11/15(水) 19:50:10.92ID:???

>>183

>>185

CSSフレームワーク使ってて、button要素に丁度いいデザインがありまして。
だからbutton使いたいんですよね。

187

： Name_Not_Found [sage] 2017/11/15(水) 20:02:12.77ID:???

>>186

ならそのボタンのCSSをaに持ってくる

divやpぐらいなら別にどっちでもいいと思うけど、
buttonとaは機能が強すぎる
ここで変なhtml書くとまともに動かなくなるぞ

188

： Name_Not_Found [sage] 2017/11/15(水) 21:25:33.53ID:???

仕様的に正しい

>>175

に対して

>>177

の突っ込みがわからない

ダウンロードさせるaを、他のbutton（これは普通にボタンの機能）と並べる手前
appearance: buttonで見た目buttonにしたのだがNGだろうか？

189

： Name_Not_Found [sage] 2017/11/15(水) 21:40:26.71ID:???

>>175

> button要素がいらない
> aだけでいい

buttonはユーザが押すものaはどこかへのリンク
押すものと、つながりを示すもの意味は全く違う。

ボタンは押さなければ意味がないが
リンクは押さなくても意味がある
その典型的な例がクローラー
クローラーはリンクというドキュメントのつながりをたどる

190

： Name_Not_Found [sage] 2017/11/15(水) 22:18:12.85ID:???

>>175

は163へのレスでしょ

191

： Name_Not_Found [sage] 2017/11/15(水) 23:11:59.43ID:???

>>189

だがdownloadの場合は操作上リンクというよりbuttonに近いよね
他の機能と並べる場合は更に

192

： Name_Not_Found [sage] 2017/11/15(水) 23:14:19.66ID:???

>>190

そりゃアンカしてるからそうだろうな
どうした？

193

： Name_Not_Found [sage] 2017/11/15(水) 23:53:56.40ID:???

>>182

動かないのが正解なんだけどね

button要素のコンテンツモデルははフレージングなんだけど
インタラクティブコンテンツを内包することは出来ないのよ
だからa要素を中に入れるのはNG

でもそれ以外ならOKで、a要素でやるのと同じように、img要素とかを入れてもいい
やる人少ないけど

194

： Name_Not_Found [sage] 2017/11/15(水) 23:57:33.98ID:???

>>193

細かくありがとうーもちろん仕様は理解した上で使ってないよ
p>aとbutton>spanでスタイル揃えたいとき(input使いたくないとき)なんかは便利なのかな

195

： Name_Not_Found [sage] 2017/11/16(木) 00:20:39.14ID:???

>>194

input要素との違いは子要素持てるかどうかなんだろうね
MDNだとクリックやタップした時のfocusの違いにも言及してるね

196

： Name_Not_Found [sage] 2017/11/16(木) 00:29:20.76ID:???

>>186

デザインだけの話ならaでもbuttonでも同じだよ
例えばbootstrapでclassにbtn付ければaもbuttonもsubmitも同じボタンデザインになる
なのでデザインのためにおかしなタグを使うのはやめた方がいい
リンクはって遷移させるんならaにすべき

197

： Name_Not_Found [sage] 2017/11/16(木) 01:27:58.14ID:???

>>191

ダウンロードなんて機能はないよ。
リンクした結果それがファイルに相当するものなら
ブラウザが勝手にダウンロードするだけ。
物によってはダウンロードせずにブラウザ内に表示するだろ？

特定のリソースに結びつかないものはボタン
リソースに結びついているものはリンク

198

： Name_Not_Found [sage] 2017/11/16(木) 22:07:00.76ID:???

>>197

あるよ。そんことは承知の上
ttp://www.tagindex.com/html5/text/a_download.html

199

： Name_Not_Found [sage] 2017/11/16(木) 22:10:00.41ID:???

>>198

うん、だからそのhtmlをブラウザが判別するんだよ
ダウンロードって機能は本質的にないんだよ
そもそも論を言えば全部ダウンロードだし

200

： Name_Not_Found [sage] 2017/11/16(木) 22:18:10.84ID:???

>>199

そうだよ、所詮リンクだよ
だから？

201

： Name_Not_Found [sage] 2017/11/16(木) 22:24:12.41ID:???

どっちでもいいがこれは確かだな。

buttonに近い＝誰もボタン機能とは言ってない。
download="〜"はある。

202

： Name_Not_Found [sage] 2017/11/16(木) 22:25:29.01ID:???

>>201

いやお前はまず日本語を勉強してくれ
buttonに近い
ってなんの定義だよ

203

： Name_Not_Found [sage] 2017/11/16(木) 23:06:30.28ID:???

なんとなくだろ
どうでもいいこといちいち気にし過ぎ

204

： Name_Not_Found [sage] 2017/11/16(木) 23:08:21.45ID:???

プログラムに少しでも携わるなら、仕様に関しては妥協してはならない

205

： Name_Not_Found [sage] 2017/11/16(木) 23:25:53.19ID:???

input type=“button”>の存在意義を教えてください

206

： Name_Not_Found [sage] 2017/11/16(木) 23:27:27.59ID:???

JavaScriptと連携させて何かの処理を行うためにあります

207

： Name_Not_Found [sage] 2017/11/16(木) 23:32:26.59ID:???

このスレでいちゃもんって

208

： Name_Not_Found [sage] 2017/11/16(木) 23:36:40.11ID:???

>>206

それこそbuttonタグでいいんじゃ

209

： Name_Not_Found [sage] 2017/11/16(木) 23:39:47.94ID:???

>>205

>>208
お前ら。

昔は
input type=“button”>
しかなかっただけ。
今はそれを使う理由はない
buttonタグでいい

210

： Name_Not_Found [sage] 2017/11/16(木) 23:41:33.86ID:???

>>207

またconstさんかな
押し付けがましいんだよな

211

： Name_Not_Found [sage] 2017/11/16(木) 23:44:29.76ID:???

あ、押し付けがましいは

>>207

さんのことではなく、一応
いかん、もう寝よ

212

： Name_Not_Found [sage] 2017/11/16(木) 23:47:30.23ID:???

いちゃもん言っちゃうもん

213

： Name_Not_Found [sage] 2017/11/16(木) 23:48:35.81ID:???

そろそろPHPとか覚えようかね…
仕事で使えるようになるまで途方もなくかかりそうだが

214

： Name_Not_Found [sage] 2017/11/16(木) 23:53:05.23ID:???

phpマニュアル全部嫁
一ヶ月もあれば読めるし、だいたいのphpっは読めるようになる

215

： Name_Not_Found [sage] 2017/11/16(木) 23:56:17.70ID:???

PHP技術者認定試験なんてあるんだな
資格に意味はほとんどないだろうけど一先ずの勉強の方向性見つけるにはわかりやすいか

216

： Name_Not_Found [sage] 2017/11/16(木) 23:58:53.13ID:???

もう生のPHPなんて扱うことないんじゃないか
フレームワーク覚えていかに使いこなすかのほうがよほど有益で安全だと思う

217

： Name_Not_Found [sage] 2017/11/17(金) 01:13:04.42ID:???

PHPってフロントエンドじゃWordPress触れる程度の実力で十分な気がする
バックエンドやるってんなら当たり前のように知識ないと無理だけど
知識あるに越したことないけどね。大体フォームなんかは会社でフォーマットがある気がする

218

： Name_Not_Found [sage] 2017/11/17(金) 11:10:16.45ID:???

>>205

ボタンを置きたくて、かつ、子要素を取りたくない時

219

： Name_Not_Found [sage] 2017/11/17(金) 15:18:48.25ID:???

htmlのソース上はタグを改行やインデントで整列させたい
でもタグ間の空白類が邪魔、ってときどうすればいいですか

<body>
<div>
</div>
<div>
</div>
</body>

220

： Name_Not_Found [sage] 2017/11/17(金) 16:18:21.53ID:???

「タグ間の空白類」ってどれを指してるの？

221

： Name_Not_Found [sage] 2017/11/17(金) 18:17:16.76ID:???

わかりづらい上に適当じゃない例でした

<html><body><input><input><input></body></html>
と、それぞれの<input>の前に改行・タブが入ったときとを比べると
後者は<input>の間に隙間ができると思います、これです

222

： Name_Not_Found [sage] 2017/11/17(金) 18:34:52.59ID:???

inputをブロック要素にする

223

： Name_Not_Found [sage] 2017/11/17(金) 21:38:25.86ID:???

全て改行やインデントする

224

： Name_Not_Found [sage] 2017/11/17(金) 22:01:03.42ID:???

flex

225

： Name_Not_Found [sage] 2017/11/17(金) 22:10:47.60ID:???

>>219

猛反発されるのを承知で書くが


<タグ>なかみ</タグ
> <タグ>なかみ</タグ>

226

： Name_Not_Found [sage] 2017/11/17(金) 22:12:31.14ID:???

>>221

あと隙間っていうのはおかしいかも
半角スペース1個だよ
HTML内の連続する半角スペース、タブ文字、改行文字は
1個のスペースにするって、ティムたんが決めた

227

： Name_Not_Found [sage] 2017/11/17(金) 22:23:04.70ID:???

>>225

これ目から鱗
cssでwhite-spaceがあるんだし、trimできたっていいじゃんな

228

： Name_Not_Found [sage] 2017/11/17(金) 22:29:26.28ID:???

>>227

ちゃんと調べたわけじゃないけど
HTML内の英文を途中で改行したりさらにインデントしたりすることを考えて
こうなっているんだろうなと

んでこのスペースをなんとかする方法は
スタックオーバーフロウとかでもよく見たから
英語圏でもうっとおしがられてるんだろうに
なんで残ってんだろう…

229

： Name_Not_Found [sage] 2017/11/17(金) 23:14:30.30ID:???

空白類も空白類以外の文字も<input>も全部インライン要素だから
単純にタグとタグの間の空白類を除去してしまうと
"a b c d"の空白も
"<span>a</span> <span>b</span> <span>c</span> <span>d</span>"の空白も
等しくなくなってしまいそう、とか
ブロック要素でオプション的に指定できるようにすればそれで済むもするが

230

： Name_Not_Found [sage] 2017/11/17(金) 23:27:36.76ID:???

{% spaceless %}{% endspaceless %}使ってるな
smartyの時代は{strip}{/strip}だった

231

： Name_Not_Found [sage] 2017/11/17(金) 23:35:23.92ID:???

来た来た

232

： Name_Not_Found [sage] 2017/11/17(金) 23:54:16.97ID:???

アラレちゃん

233

： Name_Not_Found [] 2017/11/18(土) 00:10:32.39

ID

:52PTO9hV

>>226

HTML では要素と要素の隙間の空白列（ inter-element whitespace という用語が定義されている）は、ある種の文脈では無視するものとされているが、
半角スペース1個であったかのように扱うと決めているのは CSSのはず
（DOM が半角スペース1個になるわけではないし、ティムは関わってないんじゃないか？）

234

： Name_Not_Found [sage] 2017/11/18(土) 07:03:09.54ID:???

>>219

<li>なら終了タグ省略で

>>225

と同じになるぞ

<ul>
<li>1こめ
<li>2こめ
<li>3こめ
</ul>

これは

<ul>
<li>1こめ
</li><li>2こめ
</li><li>3こめ
</li></ul>

と同じ

235

： Name_Not_Found [sage] 2017/11/18(土) 11:20:45.84ID:???

どこもかしこも、なんで記事にもっと読むとか、続きを読むとかをアホみたいに入れてるの？
これって、SEO対策なんかな？
読むユーザーから矛盾してると思うんだけど、これ意味あるんか？

236

： Name_Not_Found [sage] 2017/11/18(土) 12:11:19.41ID:???

SEO対策なんてものは存在しない
何をやった所で意味があるかないかなんかわからないんだから

237

： Name_Not_Found [sage] 2017/11/18(土) 12:29:54.85ID:???

>>219

インライン要素の改行は隙間ができる

対処法としては
�@
<span>テキスト</span><!--
--><span>テキスト</span>
のように改行をコメントにする

�A
<div class="wrapper">
<span>テキスト</span>
<span>テキスト</span>
</div>
のように改行するインライン要素を何かで囲む

んで、CSSで
.wrapper {
letter-spacing: -.4em;
}
.wrapper span {
letter-spacing: normal;
}
のように親要素の文字間をつめて、子要素の文字間をノーマルに戻すことで回避できる

他にも上のレスであるように閉じタグ省略とかタグの書き方工夫したりとかもあるから
自分の好きなのでいいと思うよ

238

： Name_Not_Found [sage] 2017/11/18(土) 13:37:16.03ID:???

それよく見るし俺も使うけど、
0.4emって何のことなの

239

： Name_Not_Found [sage] 2017/11/18(土) 14:31:55.42ID:???

サイトのCSS（と、それに付随するHTMLのクラス名）を修正しようと思います。
クラス名を分かりやすく改名したり、必要ないクラスを消したり、2つに分けていたクラスを一つにしたり等あると思います。
この作業をするにあたって注意すること、アドバイス等ありましたら教えてください。

240

： Name_Not_Found [sage] 2017/11/18(土) 14:40:41.69ID:???

効率化したいならscssを使うのをおすすめする

241

： Name_Not_Found [sage] 2017/11/18(土) 14:58:43.01ID:???

>>240

SCSS使っています
便利ですよね。

242

： Name_Not_Found [] 2017/11/18(土) 16:29:39.88

ID

:ohlKYw3f

影のinsetについてなんですが
box-shadow: 0px -15px 30px -2px white inset;
などとすると４方向に影がつきます
垂直方向だけ、または横方向だけに影をつけることは出来ますか

243

： Name_Not_Found [sage] 2017/11/18(土) 18:05:00.76ID:???

>>238

横レスで申し訳ないけど、remとemの使いどころがよく分からんのだけど
どういう時に使うの？

244

： Name_Not_Found [sage] 2017/11/18(土) 18:19:07.00ID:???

30px…

245

： Name_Not_Found [sage] 2017/11/18(土) 19:05:47.55ID:???

jqueryの.css() で何らかの属性を取得した場合、
帰って来る英単語は小文字であると保証されていますか？
たとえば
white-spaceの値を取得すると'pre'だったのですが、'PRE'とか'Pre'などに
なる可能性もありますか？

246

： Name_Not_Found [sage] 2017/11/18(土) 19:54:42.69ID:???

書いたとおりに取得されるで良いんじゃないの？
全部小文字で書いてれば迷うこともない

247

： Name_Not_Found [sage] 2017/11/18(土) 20:17:19.20ID:???

>>235

ユーザーの離脱率、ページ閲覧時間は年々短くなっている
少しでも興味をもたせようという計らい

>>243

emは死ぬほど使うよ
pxで指定すると非常にめんどくさいことになる

>>245

強ければ小文字に変換したら？

248

： Name_Not_Found [sage] 2017/11/18(土) 20:33:00.31ID:???

>>235

上の通りと、広告の表示回数が増える
結果SEO対策の１つとなってる

>>243

emは文字サイズほぼ全てで使ってる
固定サイズ枠の中からはみ出したくないとき除いて

249

： Name_Not_Found [sage] 2017/11/18(土) 20:40:27.50ID:???

px指定って本当に使わなくなったな
widthは%、marginはem

250

： Name_Not_Found [sage] 2017/11/18(土) 20:42:06.54ID:???

remはルート(html？body？)の割合だっけ
px指定と比べた時の利点って、フォントサイズを一括で調整しやすいとかになるのかな？

251

： Name_Not_Found [sage] 2017/11/18(土) 20:44:02.37ID:???

emってなんの略なんでしょうか？

252

： Name_Not_Found [sage] 2017/11/18(土) 21:02:52.64ID:???

emはなんかの略じゃなくて「em」か正式名称だよ

253

： Name_Not_Found [sage] 2017/11/18(土) 21:10:16.57ID:???

いちおう豆知識として説明しておくと「em」はアルファベットの「M」のこと
アルファベットにはそれぞれ形と名称が定義されてて、形の定義が「M」でその名称が「em」
なので「em」で「エム」と読む
「M」は縦横ともに幅一杯使うから印刷業界でこの大きさを1とする単位として「em」が使われるようになった
それが今も残ってる

254

： Name_Not_Found [sage] 2017/11/18(土) 21:35:43.00ID:???

最近はemからremにしてるわ

255

： Name_Not_Found [sage] 2017/11/18(土) 21:41:48.73ID:???

へぇ勉強になりました

256

： Name_Not_Found [sage] 2017/11/18(土) 22:32:17.21ID:???

最近はhtmlにfont-size:62.5%かけてremだな
疑似要素ではIEでバグがあるからem

メディアクエリもem。pxはsafariで拡大したときにバグる

257

： Name_Not_Found [sage] 2017/11/18(土) 22:33:19.45ID:???

拡大縮小は動作保証外にしてるわ
chromeでも結構バグるのに手に負えない

258

： Name_Not_Found [sage] 2017/11/18(土) 22:41:48.86ID:???

243だけど皆さんありがとう
width以外はpx指定してたから勉強し直そう

259

： Name_Not_Found [sage] 2017/11/18(土) 22:55:01.27ID:???

＜input type="search"/＞
で、IEはクリアのxアイコンが出るのですが
[　　　　　　　　x]
chrome, FFは出ません。どうしたら出せますか？

260

： Name_Not_Found [] 2017/11/18(土) 23:08:55.28

ID

:52PTO9hV

>>259

クリアのアイコンの実装は義務付けられていない
実装されてない場合は出しようが無い
何らかの隠しオプションはあるかもしれないが

261

： Name_Not_Found [sage] 2017/11/19(日) 09:12:21.85ID:???

>>260

ありがとうございました。
>クリアのアイコンの実装は義務付けられていない
そう言うのはどこを調べれば書いてあるのでしょうか？

262

： Name_Not_Found [sage] 2017/11/19(日) 09:21:38.58ID:???

W3Cなどで大体のブラウザの共通仕様は書かれているけど
＞義務付けられていない
を調べるのは大変かも

263

： Name_Not_Found [] 2017/11/19(日) 09:33:31.70

ID

:OPd3pVC4

ＨＴＭＬの動画を見たんですが、ダブルクォーテーションを入力した時に
１回の入力で""と２つ同時に画面に出て間にカーソルが入ってました
とても便利だなと思ってお尋ねしたいんですがどうしたらいいのでしょうか？

264

： Name_Not_Found [sage] 2017/11/19(日) 09:58:33.19ID:???

>>263

テキストエディタを使う
atomとかオススメ
ttps://qiita.com/spiegel-im-spiegel/items/3d41d98dacc107d73431

265

： Name_Not_Found [] 2017/11/19(日) 14:26:06.19

ID

:sezJOvpe

>>261

論理的なふるまいを除く UIの詳細はブラウザの裁量に任されることが多い。
入力方式など、最適なUIはプラットフォームに依存するので。
その例だと IE は Windows のしきたりに合わせてクリアアイコンを付けているのかも（ Windowsは使ってないので憶測だが）。
Chrome やFF はマルチプラットフォームなのでWindows のしきたりよりプラットフォーム間の一貫性を優先しているように思われる。

266

： Name_Not_Found [sage] 2017/11/19(日) 14:30:23.69ID:???

クリアアイコンってあれもともとSafariが始めたものだろ

267

： Name_Not_Found [] 2017/11/19(日) 15:20:37.63

ID

:sezJOvpe

>>265

付け加えると、ブラウザの裁量が暗黙の了解になってるので、仕様にはわざわざ書かれない（特に必要な場合に限り、指定される）

268

： Name_Not_Found [sage] 2017/11/19(日) 16:12:51.03ID:???

Foxのコンソールに毎回

XML パースエラー: タグの対応が間違っています。終了タグが必要です: </meta>

のエラメが出てうっとうしい
メタタグは終了タグいらないんじゃなかったっけ

269

： Name_Not_Found [sage] 2017/11/19(日) 16:15:25.78ID:???

>>260

お前の書き方が悪い
意味もわからずコピペばかりしてるからだ

270

： Name_Not_Found [sage] 2017/11/19(日) 16:15:42.35ID:???

>>268

XMLは必要

271

： Name_Not_Found [sage] 2017/11/19(日) 16:16:24.77ID:???

XMLってなんですか？

272

： Name_Not_Found [sage] 2017/11/19(日) 16:16:50.76ID:???

>>270

<!DOCTYPE html>
でもいるの？

273

： Name_Not_Found [sage] 2017/11/19(日) 16:24:39.31ID:???

>>272

いらない

>>271

htmlと似た別言語。はっきり言ってスゲー書くのがめんどくさい
詳細はめんどいからぐぐって

274

： Name_Not_Found [sage] 2017/11/19(日) 16:25:30.98ID:???

もしhtml5でもそのエラーが出るならURLを教えて欲しい
拡張機能か、iframe内のエラーような気もする

275

： Name_Not_Found [sage] 2017/11/19(日) 16:47:37.71ID:???

>>274

今気がついたが
・ローカルだと出る
・ローカルでApache(3.2.1)だと出る
・サーバーにアップすると出ない

HTML(A)←ajaxで読み込み−HTML(B) ってことしてて、両方のheadに
<meta name="viewport" content="width=device-width,initial-scale=1.0">
の記述があり、B側の行をエラー表示してる
ちなみにどちらのファイルもname="robots"など他のメタタグあり
Chromeだとローカルでも出ず

スレチなのでこの辺にしときます

>>259

見て思い出しただけなので

276

： Name_Not_Found [sage] 2017/11/19(日) 19:40:50.48ID:???

>>272

XHTMLなら必要

277

： Name_Not_Found [sage] 2017/11/19(日) 19:46:34.77ID:???

HXMLってなんですか？

278

： Name_Not_Found [sage] 2017/11/19(日) 19:48:28.12ID:???

>>275

Content-Typeの問題。

> Content-Type: text/html
終了タグを閉じなくても良い(HTML)。

> Content-Type: application/xhtml+xml
全てのタグを閉じなくてはならない(XML)。
DOCTYPEが何であろうが、XML準拠である事が強制される。

279

： Name_Not_Found [sage] 2017/11/19(日) 19:49:38.13ID:???

>>277

ttp://old.haxe.org/doc/compiler?lang=jp

280

： Name_Not_Found [sage] 2017/11/19(日) 19:51:39.54ID:???

>>278

はい、正解、おめでとう
でも、答えが出るまで3時間かかりました

281

： Name_Not_Found [sage] 2017/11/20(月) 12:36:10.96ID:???

>>280

礼儀のなってない奴だな
教えてもらっておきながら、上から目線の態度が鼻につく

282

： Name_Not_Found [sage] 2017/11/20(月) 20:00:51.41ID:???

>>278

text/htmlに当たると思うがそれでもいるということ？
他のブラウザでエラーが出ないのはなぜ？

>>281

そら別人だよ

283

： Name_Not_Found [sage] 2017/11/20(月) 21:45:23.27ID:???

Content-Typeの問題なら鯖で出ないのはなぜ？

284

： Name_Not_Found [sage] 2017/11/20(月) 21:58:04.93ID:???

色々な妨害してくるのは、荒らしだから、相手をするな。
無視しろ

質問者は、荒らしと間違われないように、age て、ID を表示すること。
sage で書かないように

sage で書くと、荒らしと区別がつかないから

285

： Name_Not_Found [sage] 2017/11/20(月) 22:15:42.75ID:???

教えてもらいたいという人が

>>280

のようなこと書くわけないな。
しかも常時2chにへばりついてるわけでもなかろうに3時間は早いほうだろ。
いつもの詳しい人かな。

286

： Name_Not_Found [sage] 2017/11/21(火) 00:20:41.80ID:???

>>283

その辺はブラウザごとに色々あんじゃね？
ガラケーのXHTML書くときに
使えるブラウザとそうでないのあってイライラきたじゃん？

287

： Name_Not_Found [sage] 2017/11/21(火) 20:38:56.59ID:???

最初の質問者ではなく便乗質問でもageたほうがいいのかな
日変わったらidも変わるから意味ないようなキガス

288

： Name_Not_Found [] 2017/11/21(火) 22:55:54.06

ID

:AyUjQO9L

>>264

なるほど！早速使ってみます
ありがとうございました

289

： Name_Not_Found [] 2017/11/22(水) 17:28:54.16

ID

:7U2fmHE+

Templateのアンケートフォームをカスタマイズしたいのです。なんかCSSを使えばできるみたいですが、
その場合、どんなツールが必要でしょうか。

290

： Name_Not_Found [] 2017/11/22(水) 18:46:31.27

ID

:+l8nRiBU

cssでボックスの内側に単純なグラデーションをかけたいですが、どのような記述をすればいいでしょうか
boxshadowだと４方向のグラデーションになります

291

： Name_Not_Found [sage] 2017/11/22(水) 20:23:26.93ID:???

text-alignの変更をアニメーションさせることはできますか？

292

： Name_Not_Found [sage] 2017/11/22(水) 21:10:29.35ID:???

>>290

「css gradient」で検索！

CSS グラデーションの利用
ttps://developer.mozilla.org/ja/docs/Web/Guide/CSS/Using_CSS_gradients

293

： Name_Not_Found [sage] 2017/11/22(水) 23:40:36.24ID:???

>>289

テキストエディタ

294

： Name_Not_Found [sage] 2017/11/22(水) 23:40:54.42ID:???

>>291

いいえ

295

： Name_Not_Found [] 2017/11/23(木) 11:49:51.36

ID

:beX3NM7J

>>293

テキストエディターでライブビューのあるものでお勧めのものありますか。
フォームだけですけど、HTMLは本当に必要ないのでしょうか

296

： Name_Not_Found [sage] 2017/11/23(木) 18:43:47.85ID:???

>>295

atom

後半は何を言ってるのか分からん
必要ならすれば良いだけだよ

297

： Name_Not_Found [sage] 2017/11/24(金) 07:25:51.55ID:???

>>289

ならchromeの開発者ツールでいいんじゃね

298

： Name_Not_Found [] 2017/11/24(金) 10:01:13.26

ID

:TP9bTofi

>>297

　プログラマーでないと難しいのではないか

299

： Name_Not_Found [sage] 2017/11/24(金) 18:19:13.55ID:???

cssはプログラミングではない

300

： Name_Not_Found [sage] 2017/11/24(金) 19:05:54.15ID:???

CSSってプログラミングじゃないの？
デザイン？

301

： Name_Not_Found [sage] 2017/11/24(金) 19:20:30.60ID:???

プログラミング言語じゃなくてマークアップ言語でしょ？

302

： Name_Not_Found [sage] 2017/11/24(金) 19:23:11.80ID:???

間違えた
htmlがマークアップ言語で
cssはスタイルシート言語だった

303

： Name_Not_Found [] 2017/11/24(金) 20:15:07.27

ID

:ef5mzT19

ＵＲＬの、「これ」って記事の、画像の赤丸で囲ってあるところに広告入れたいのですが、
ＣＳＳのどこに入れたらいいのかわかりません。教えてください。
お願いします。　ttp://dietsokuhou.liblo.jp/archives/5300274.html

304

： Name_Not_Found [sage] 2017/11/25(土) 01:14:42.85ID:???

>>303

アフィ

305

： Name_Not_Found [sage] 2017/11/25(土) 02:16:42.68ID:???

>>303

CSS関係ない

306

： Name_Not_Found [sage] 2017/11/25(土) 07:36:57.89ID:???

>>300

例えばフォトショで
とあるテキストレイヤーを選択して
文字パネルのフォントサイズのところに「20」って入れる

みたいな作業に近い

307

： Name_Not_Found [sage] 2017/11/28(火) 18:59:08.50ID:???

例えば
<div>
<a href=xxx>hoge1</a>
"hoge2"
<a href=yyy>hoge3</a>
</div>

って記述されてる場合に、CSSで『hoge2』を選択、指定するにはどうすれば？

308

： 307 [age] 2017/11/28(火) 19:01:35.00ID:???

↑すみませんage忘れてました

309

： Name_Not_Found [age] 2017/11/28(火) 19:06:21.52ID:???

あれ？ID出てない…

310

： Name_Not_Found [] 2017/11/28(火) 22:06:32.60

ID

:6o5OPX4d

<div> "hoge2" </div>

<div>hoge2</div>

下じゃないの？

<div>に、id, class とか付けないと、すべての<div>でしか選択できない。
その<div>だけを選択したいのなら、id, class などで特定すべき

メールアドレスに「sage」と入れたら、ID は出ない

311

： 307 [] 2017/11/28(火) 22:29:57.32

ID

:spoTi3BI

>>310

どうもお世話になります

hoge2には<div>は付いておらず上下の<a>hoge</a>の間に
挟まれる形で直接記述されてます

どうにかしてhoge2だけを指定できないものかと思いまして

312

： Name_Not_Found [sage] 2017/11/28(火) 22:30:03.05ID:???

そもそもhoge2がpにもdivにも囲われずタグなしってどうよ

313

： 308 [] 2017/11/28(火) 22:32:58.27

ID

:spoTi3BI

近い形でいくと、5chの板一覧（ttp://menu.5ch.net/bbstable.html）における
"/"のような記述状態です

314

： Name_Not_Found [sage] 2017/11/28(火) 23:29:42.80ID:???

>>307

div:not(a) {};

つうかpとかで囲っとけよ。。。

315

： 307 [] 2017/11/28(火) 23:48:36.27

ID

:spoTi3BI

なんかうまくいきませんね
jsとかで拾ってタグ振り直す方が現実的な感じですかね

もう少し自力で格闘してみます
とりあえずお付き合い頂いてどうもありがとう

316

： Name_Not_Found [sage] 2017/11/29(水) 01:56:27.20ID:???

そもそもマークアップから漏れるほうがおかしい

317

： Name_Not_Found [sage] 2017/11/29(水) 01:58:00.37ID:???

>>316

そうけ？

318

： Name_Not_Found [sage] 2017/11/29(水) 01:59:35.95ID:???

すまぬ途中で送信してしまった

>>316

文の一部をインラインレベル要素でくくったら
こんな感じになるんじゃね？

319

： Name_Not_Found [sage] 2017/11/29(水) 02:00:02.43ID:???

セレクタで文字は基本的に選択できねーぞ

320

： Name_Not_Found [sage] 2017/11/29(水) 07:23:10.60ID:???

content()
はjQueryだけだっけか

321

： Name_Not_Found [] 2017/11/29(水) 11:27:32.46

ID

:noQEIW7U

このページをパソコンで表示して、
ttps://lifemagazine.yahoo.co.jp/articles/8500
マウスホイールで下にスクロールすると、先頭にある大きな画像がズームインする
のですが、どういう仕組みですか？

322

： Name_Not_Found [sage] 2017/11/29(水) 13:39:49.78ID:???

いや、<div>hoge2</div>が根本的に駄目だろ。
p等で囲めよ。

323

： Name_Not_Found [sage] 2017/11/29(水) 13:42:10.41ID:???

>>321

JSで制御しているから板違い

324

： Name_Not_Found [sage] 2017/11/29(水) 14:02:21.29ID:???

>>321

スクロール量に応じて、配置したimgタグにtransform: scale3d() と opacityをかけてる
JSでcssを制御してる

325

： Name_Not_Found [] 2017/11/29(水) 16:49:53.13

ID

:noQEIW7U

>>324

解説ありがとうございました。
この効果は何を狙っているのでしょうか？

326

： Name_Not_Found [] 2017/11/29(水) 18:23:42.27

ID

:6sOvPvP9

ホームページの新着情報の部分にスクロールバーを常に表示させたいのですが
スマホのchromeで見ると表示されません

overflow-y: scroll;　や　::-webkit-scrollbar　を試してもダメでした
どうすれば宜しいでしょう？

327

： Name_Not_Found [sage] 2017/11/29(水) 19:00:58.15ID:???

>>325

何も狙ってない
恐らくだけど、js担当がテキトーに作ってみたものが上司のハートに突き刺さって実装されたものと思われる

328

： Name_Not_Found [sage] 2017/11/29(水) 21:19:25.91ID:???

>>313

<div class="message">
あいう<br/> <br/>ABC
</div>

2ch では、<p> で囲っていない。
5ch では知らないけど

329

： Name_Not_Found [sage] 2017/11/29(水) 22:24:55.15ID:???

hoge2総突込みだな
なんかpやspanの感覚でdivで囲っちゃってる気がする

330

： Name_Not_Found [sage] 2017/11/29(水) 22:25:50.26ID:???

いうｔも思うけどなんでhogeなんて使うのfooでよくないhoge打ちやすいけど

331

： Name_Not_Found [sage] 2017/11/29(水) 23:21:02.75ID:???

何でhogeと書いてホゲとは書かないのか突っ込みたい

332

： Name_Not_Found [sage] 2017/11/29(水) 23:25:14.07ID:???

2バイト文字の変数使えないからじゃないの

333

： Name_Not_Found [sage] 2017/11/30(木) 00:26:06.45ID:???

>>318

こんな感じか？

<div>
<なんかのタグ>
<a href=xxx>hoge1</a>
"hoge2"
<a href=yyy>hoge3</a>
</なんかのタグ>
</div>

だからうまくいかんのかな
そもそもそのhoge2は文字なんかな？ならばとりあえずこれでどうか

div:not(a) {color: red;};

334

： Name_Not_Found [sage] 2017/11/30(木) 00:46:45.83ID:???

2週間からネットの講座申し込んで始めた、初心者と言うのすらおこがましいレベルの人間です。
このスレでもいつも勉強させて頂いて(ほぼ理解できませんが)ありがたいです。
何度教材や他のサイト読んでもfloatが理解できません。
例えば

僕は あなたが
大好きだ

としたい場合、
<div class＝"main">
<h1>僕は</h1>
<h1>あなたが</h1>
<h2>大好きだ</h2>
</div>
スタイルシートで
.main h1 {
float:left;
}
と記述すると
僕は 大好きだ
あなたが

と、なってしまいます。
h2は並べるようにしてないのにどうして横に並んでしまうんでしょうか
そして、あなたが←はなぜ並んでくれないのでしょうか・・
全然思い通りになりません・・
初歩の初歩ですんません

335

： Name_Not_Found [] 2017/11/30(木) 00:57:19.34

ID

:3r0ffdPZ

すいません、サゲでID表示してませんでした

336

： Name_Not_Found [] 2017/11/30(木) 01:08:07.95

ID

:3r0ffdPZ

僕は
あなたが の改行
はブラウザ？のサイズの問題と自己解決しました！

337

： Name_Not_Found [] 2017/11/30(木) 01:30:33.76

ID

:3r0ffdPZ

も、もう少し勉強して出直してきます・・m(_ _)m

338

： Name_Not_Found [sage] 2017/11/30(木) 04:47:59.98ID:???

floatは一番最初にぶち当たる壁だからな。
仕様を理解すればなんてことないし、同時にfloat糞だなって思うよ。

339

： Name_Not_Found [sage] 2017/11/30(木) 07:13:50.74ID:???

floatの仕様を理解するためにブロック要素やインライン要素を理解せにゃならんのと
インライン部分だけずれるって摩訶不思議（でもないんだけど）な仕様が本当にとっつきにくい
最初は重ねずに使えばどうってことないんだけどね

340

： Name_Not_Found [] 2017/11/30(木) 14:21:10.80

ID

:cyWiisnf

CSSをHTMLに適用するには３種類あるに関して質問させてください

ttp://www.htmq.com/csskihon/004.shtml

のURLを参照してください。

たとえば１つのホームページはHTMLとCSSで構成されてコードソースの順番がCSSとHTMLに分かれていないですか。

たとえば、

CSSの記述
HTMLの記述

になっているか

CSSの記述
HTMLの記述
CSSの記述

のようにごちゃごちゃになっているか

以上から適用するという文言から、コードの順番がごちゃごちゃであれば、HTMLに適用しなくてもCSSのままでコードを書いていけば
いいのではないでしょうか

341

： Name_Not_Found [sage] 2017/11/30(木) 14:26:06.39ID:???

>>340

海外の方かな？

適用ってなんのことを言っているの？

342

： Name_Not_Found [] 2017/11/30(木) 17:04:21.47

ID

:YvAqVZom

>>326

これなんですが質問の仕方が悪かったですか？

343

： Name_Not_Found [] 2017/11/30(木) 17:43:46.03

ID

:3r0ffdPZ

>>338-339

ありがとうございます！少し安心しました！
精進して少しはまともな質問できるように頑張ります
その時はまたよろしくお願いしますm(_ _)m

344

： Name_Not_Found [sage] 2017/11/30(木) 20:24:47.69ID:???

>>342

chromeの仕様
全体のスクロールバーもよく考えたら見えてないだろ、それと同じ
多重スクロールは避けた方がいい

345

： Name_Not_Found [sage] 2017/11/30(木) 20:37:22.87ID:???

>>340

普通、HTML, CSS は、別のファイルに書く

HTMLファイル内に、CSS も書いてあるのは、
Java, PHP, Ruby など、サーバー内のプログラムで、
HTMLファイルを作っているからだろう

だから、人間が書いていない。
プログラムによって作られたもの

346

： Name_Not_Found [sage] 2017/11/30(木) 21:08:09.53ID:???

自分のエスパー力に挑戦であえて書いてみる。

>>340

言う通り（上書きしない限り）順番は関係ない。

(2)CSSが簡単なものであれば、また初心者は「<style>要素で文書単位に適用する」、
つまりHTMLファイルに直接書いてもいいだろう。

(1)HTMLファイルが複数になるとCSSの共通部分がいくつも出てきたりすることが多い。
その場合は「<link>要素で外部CSSファイルを呼び出して適用する」にする。

これが君の言う”HTMLに適用しなくてもCSSのままでコードを書いて”かな？
管理（メンテ）面からこの方法が最もいい。(2)と(1)の併用もある。

(3)「要素にstyle属性を追加して局所的に適用する」は悪い例とされているので
特別な事情がない限り用いないほうがいい。（そのURLは説明のため書かれているが。）

話がずれてたら言ってくれ。

347

： Name_Not_Found [] 2017/12/01(金) 11:44:07.54

ID

:mkw2c/+3

>>345

なるほど、たとえばFirefoxのF12を押せば、どういう構成でできているかわかるが、素人
が把握はなかなかできないだろう。アンケートなどのフォーマットをCSSなどをいじって
カスタマイズしたいのだけど、それでも素人にとっては難しいのかな。体裁だけなので、
HTMLは関係ないと思うのだが。

348

： Name_Not_Found [] 2017/12/01(金) 11:54:08.91

ID

:mkw2c/+3

>>346

たとえば、HTMLとCSSが密接になっている例として下記をとりあげれば、私が質問した
１から３のうち、どれにあてはまる。

プラウザ表示
段落(青)
段落(赤)
段落(赤)

IDセレクタ CSS
p { color: red; }
#blue { color: blue; }
id属性を指定 HTML
<p id="blue">段落 </p>
<p>段落 </p>
<p>段落 </p>

349

： Name_Not_Found [] 2017/12/01(金) 17:53:34.70

ID

:spNzFXof

游ゴシックが好きで個人サイトで使ってるんですが
いつも使用しているFirefoxじゃなくてchromeから見てみたらなんだか全体的に字が細く？見づらい感じになってました
これってよく知られた話ですか？対策とかあるのでしょうか

350

： Name_Not_Found [sage] 2017/12/01(金) 19:51:49.70ID:???

>>340

詳細度が同じセレクタは後から宣言されたセレクタによって上書きされる
ttps://teratail.com/questions/86578

351

： Name_Not_Found [] 2017/12/01(金) 20:21:29.43

ID

:X7oqfLY+

selectを使ってドロップダウンリストを作りました。
現在の選択項目を再び選択してもonchangeが発生しないようですが、
その場合でもonchangeを実行させる方法はありますか？

352

： Name_Not_Found [sage] 2017/12/01(金) 21:15:50.59ID:???

またもやエスパーで。

>>348

p { color: red; }
#blue { color: blue; }
を、

・HTMLファイルの<style type="text/css">（ココ）</style>に書くか→(2)
・別ファイルの○○.cssに書くか→(1)

なので君次第。

353

： Name_Not_Found [sage] 2017/12/01(金) 23:41:50.53ID:???

>>351

クリックも併用してみれば？

354

： Name_Not_Found [sage] 2017/12/02(土) 00:02:21.42ID:???

>>351

まぁそこは自然にまかせたほうがいいともうけどねぇ
正解は

>>353

だけど

355

： Name_Not_Found [sage] 2017/12/02(土) 00:41:00.54ID:???

>>349

調べたら対策方法出てくるよ
対策しないとMacで汚くなったりIEで縦にずれたりすげーめんどくさいフォントだよ
IEは本当に致命的

356

： Name_Not_Found [sage] 2017/12/02(土) 00:44:42.16ID:???

>>347

ブラウザに送られてくる、HTML, CSS は、ツールによって合成された結果だから、
開発者は、数個のファイルに、別々に書いているから、開発者にはわかりやすいけど、
合成物からは、元々のファイルに分割できない

CSS も最近では、SASS で作っているから、
SASS ファイルを見ている開発者にはわかりやすいけど、
変換後のCSS から、変換前のSASS はわからない

つまり、変換前のファイルをわかりやすく書いているけど、
変換後のファイルは難しいから、
変換後のファイルに、手を出しちゃいけない。
変換前の数倍の解析時間が掛かるから

例えれば、変換前のファイルが答えとすると、答えを知っている人には簡単だけど、
答えを知らない人、つまり、変換後のファイルを見ている人には難しい

機械語と同じ。
ソースコードを見るとわかるけど、
コンパイル後の機械語を見ている人には、さっぱり分からない

357

： Name_Not_Found [sage] 2017/12/02(土) 01:19:35.97ID:???

SASS、さっすがー

358

： Name_Not_Found [] 2017/12/02(土) 02:30:57.47

ID

:IgFKfaeS

>>355

Macを検索ワードに入れたらそれらしいものが出てきました
知らなかった…
ありがとうございました

359

： Name_Not_Found [sage] 2017/12/02(土) 20:48:41.43ID:???

逆アセンブリという技術もあるがな

360

： Name_Not_Found [] 2017/12/03(日) 11:23:45.15

ID

:nm+GhIQB

＜select＞
　＜option value="1"＞100＜/option＞
　＜option value="2"＞200＜/option＞
　＜option value="3"＞300＜/option＞
＜/select＞
この場合、200を選択すると
[　200▼]
と表示されますが、選択した後に
[　　　▼]
と何も表示させないようにできますか？
と言うのは、実際には表示する項目が 200などの単純な文字ではなくて、
ちょっと長い文字列なので、全体を表示するにはselectの表示欄の幅が狭く、
かと言って途中までしか表示しないと見た目が悪いので、それならいっその事
何も表示させないほうが見た目がスッキリするかなあと思いました。
あるいは、より良い代替案が有れば教えて下さい。

361

： Name_Not_Found [sage] 2017/12/03(日) 13:01:46.08ID:???

>>360

<select style="max-width:5em; text-overflow:ellipsis;">

362

： Name_Not_Found [] 2017/12/03(日) 13:44:10.17

ID

:nm+GhIQB

>>361

レスありがとうございました。
でも、教えて頂いた記述では何も変わりませんでした。
上手く行くと　[長い文字列...]　が表示されるんですか？

363

： Name_Not_Found [sage] 2017/12/03(日) 15:25:18.82ID:???

JSでやったほうが簡単かもしれない
選択切り替わったらフォントカラーを白に変更

アクセシビリティ考えると選んだものが見えないって最悪だと思うけど

364

： Name_Not_Found [] 2017/12/03(日) 18:12:53.18

ID

:6sJnP4BH

font-sizeの指定方法がよく分かりません
htmlを62.5％で指定すると1rem=10pxになるので便利というところまでは分かったんですが、
そこからemでの指定が混乱します
全てremで指定するとマズイのでしょうか？

365

： Name_Not_Found [sage] 2017/12/03(日) 18:24:54.72ID:???

>>364

全然便利じゃない。10pxなんて使わないからめちゃくちゃ使いにくい

どれが最高ってのはないけど、現状最も見やすいのは14pxだと思う
迷ったらbootstrapに合わせておけばいい
ttp://bootstrap3.cyberlab.info/css/typography-body.html

366

： Name_Not_Found [sage] 2017/12/03(日) 19:44:37.63ID:???

>>360

>何も表示させないほうが見た目がスッキリ

そうは思えんしユーザは戸惑うかと。
代替というか思いつきでこっちのスレに書いておいた。
jQuery 質問スレッド vol.8
ttp://mevius.2ch.net/test/read.cgi/hp/1508707878/

367

： Name_Not_Found [sage] 2017/12/03(日) 20:03:18.89ID:???

>>366

なんでいちいち移動するかな？
話がわからなくなるだろ
その動きならjQuery（JavaScript）は不要

<select id="hoge">
　<option>ああああああああああああああああああああ</option>
　<option>いいいいいいいいいいいいいいいい</option>
　<option>ううううううううううううううううううう</option>
</select>

#hoge { width: 100px }
#hoge:hover { width: 300px }

368

： Name_Not_Found [sage] 2017/12/03(日) 20:26:35.87ID:???

>>367

ああそうだった。寝起きでボケてたわtnx
移動はよくあることだぞ。

369

： Name_Not_Found [sage] 2017/12/03(日) 21:56:57.29ID:???

>>364

>全てremで指定するとマズイのでしょうか？

em が基本

rem だと、親要素のフォントサイズを変えても、子要素のサイズが変わらないから、
それらを変えるのが大変

子要素は、親要素のサイズへ、依存させておく方が良さそう

370

： Name_Not_Found [sage] 2017/12/03(日) 22:00:02.02ID:???

親要素のフォントサイズを変える場面ってどういうときでしょう

371

： Name_Not_Found [sage] 2017/12/03(日) 22:21:22.64ID:???

>>364

remは比較的最近できたもの
emが使いづらいからremが登場した
古いブラウザで対応してないことも有るが
対応しているならremでよい

372

： Name_Not_Found [sage] 2017/12/03(日) 23:26:47.43ID:???

スレチ（だと思ったのだから）で移動するのはマナーの１つで問題なし
その流れでそのまま続けられるしな

373

： Name_Not_Found [sage] 2017/12/04(月) 00:49:13.26ID:???

>>360

select:selected{
color:#fff;
}
これあかんのか？

374

： Name_Not_Found [sage] 2017/12/04(月) 00:51:58.01ID:???

>>364

rootサイズが参照されるremのが便利だ。emだと親要素のサイズ変えて小要素もかえる必要がある。

375

： Name_Not_Found [sage] 2017/12/04(月) 00:57:40.54ID:???

>>373

それ効かない気がする

376

： Name_Not_Found [sage] 2017/12/04(月) 11:24:29.56ID:???

>>360

これではダメ？
選択項目は見切れるのは全体を分かっているWeb製作者側からすれば便利だけど、初見のユーザからすれば不便だと思うな
長すぎてデザインが崩れるなら、長くてもいいようにデザインを工夫するか短い項目名を考えるのが良いかと

<select>
<option>未選択</option>
<option>ああああああああああああああああああああ</option>
<option>いいいいいいいいいいいいいいいい</option>
<option>ううううううううううううううううううう</option>
</select>

377

： Name_Not_Found [] 2017/12/04(月) 12:35:44.44

ID

:OTXfwXH+

>>365

古い人間なので16pxをベースにしていたんですが、今は14pxが主流なんですか？

378

： Name_Not_Found [sage] 2017/12/04(月) 13:04:09.67ID:???

px は一切使わず、em だけで見てる側の好みに任せる

のは主流なのかどうか？

379

： Name_Not_Found [sage] 2017/12/04(月) 20:22:55.97ID:???

　＜option value="1"＞100の項目　：　100の内容100の内容100の内容＜/option＞
　＜option value="2"＞200の項目　：　200の内容200の内容200の内容＜/option＞
　＜option value="3"＞300の項目　：　300の内容300の内容300の内容＜/option＞

select

380

： 続き [sage] 2017/12/04(月) 20:25:39.38ID:???

select {
　width:○○px;　/* 100の項目の幅 */
}

幅は帳尻合わせでｗ

381

： Name_Not_Found [sage] 2017/12/04(月) 21:08:24.57ID:???

>>378

最近はそういう風潮もあるね。もうリセットやめてある程度はブラウザデフォルトのcssに任せようって
俺は絶対にやらんけど

382

： Name_Not_Found [sage] 2017/12/04(月) 22:39:26.10ID:???

>>377

px で指定すると、固定サイズになるから、
ユーザーが変更できなくなるので、使わない方がよい

body { font-size: 62.5%; }

普通、ブラウザのデフォルトサイズは、16px だから、
16px * 62.5% = 10px となり、
1em, 1rem が、10px となり、em, rem での計算がしやすい

font-size - MDN
ttps://developer.mozilla.org/ja/docs/Web/CSS/font-size

383

： Name_Not_Found [sage] 2017/12/05(火) 04:03:44.08ID:???

10インチFHDとか24インチFHDとかある環境で
px指定してたらとても読めたもんじゃない

あとブラウザ設定で何pxよりも小さくしないこともできる
10pxで指定しても14pxとか16pxで表示されるから、
デザイナーの意図通りの大きさで見られてるとは限らない

20年前の「このサイトはIE専用です」ならぬ「このサイトは24インチ以上専用です」で作るのもよし、
どんな環境でも問題なくみられるようにするのもよし

384

： Name_Not_Found [] 2017/12/08(金) 11:48:59.29

ID

:asnUkH4L

font-sizeをlargerにするとlargeよりも小さくなるのはなぜですか？
逆じゃないですか？

385

： Name_Not_Found [sage] 2017/12/08(金) 15:12:49.48ID:???

>>384

larger は相対的に大きくするので
large と比較してどうかは場合による

386

： Name_Not_Found [sage] 2017/12/08(金) 16:49:53.36ID:???

>>385

補足
smallにlargerするとlargeの方が大きい
mediumにlargerすると同じ
largeにlargerするとlargerの方が大きい

387

： Name_Not_Found [] 2017/12/08(金) 20:48:56.38

ID

:asnUkH4L

>>385

ところが例えばH1に対して
large
larger
試したらlargeのほうが大きくなったのですが。
なぜですか？

388

： Name_Not_Found [sage] 2017/12/08(金) 21:52:32.59ID:???

>>387

larger は親のfont-sizeに基づく

h1 自身がデフォルトで largeでも
親のfont-sizeが小さいなら larger の方が小さくなる

389

： Name_Not_Found [sage] 2017/12/09(土) 05:12:14.97ID:???

>>388

なるほど。ありがとうございました。

390

： Name_Not_Found [] 2017/12/09(土) 11:42:20.18

ID

:WOv5RS3/

三つの画像を
| □　□　□ |
のようにウインドウの左中右に均等に配置するにはどんな手法がお勧めでしょうか？
ウインドウ幅が狭い場合には、それぞれの幅に応じて均等に配置したいです。
| □ □ |
| 　□　|
もっと狭い場合は
| □ |
| □ |
| □ |

391

： Name_Not_Found [] 2017/12/09(土) 13:59:51.12

ID

:TNVIRONO

ttps://mallento.com

こういうの使って似たようなサービスできんかね
システムよくわからんから誰かおしえてくれ

392

： Name_Not_Found [sage] 2017/12/09(土) 18:09:43.56ID:???

↑マルチ、宣伝乙

393

： Name_Not_Found [sage] 2017/12/09(土) 18:54:21.90ID:???

>>390

flexとtext-align;center？

394

： Name_Not_Found [sage] 2017/12/09(土) 19:59:47.73ID:???

flexいる？

395

： Name_Not_Found [sage] 2017/12/09(土) 20:18:06.41ID:???

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

396

： Name_Not_Found [sage] 2017/12/09(土) 23:56:50.94ID:???

幅が広い場合は
<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なしでお願いします

397

： Name_Not_Found [sage] 2017/12/10(日) 00:14:48.78ID:???

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

398

： Name_Not_Found [sage] 2017/12/10(日) 03:01:21.04ID:???

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

399

： Name_Not_Found [sage] 2017/12/10(日) 09:22:45.36ID:???

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

400

： Name_Not_Found [sage] 2017/12/10(日) 09:37:59.99ID:???

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

401

： Name_Not_Found [sage] 2017/12/10(日) 16:22:11.66ID:???

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

402

： Name_Not_Found [sage] 2017/12/10(日) 16:22:57.89ID:???

>>401

は例えばの話ね

403

： Name_Not_Found [sage] 2017/12/10(日) 17:13:18.56ID:???

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

404

： Name_Not_Found [sage] 2017/12/10(日) 17:40:56.05ID:???

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

405

： Name_Not_Found [sage] 2017/12/10(日) 17:54:00.86ID:???

>>396

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

406

： 396 [sage] 2017/12/10(日) 17:57:33.73ID:???

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

407

： Name_Not_Found [sage] 2017/12/10(日) 18:39:17.51ID:???

>>396

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

408

： Name_Not_Found [sage] 2017/12/10(日) 22:02:03.96ID:???

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

409

： Name_Not_Found [sage] 2017/12/10(日) 23:47:52.11ID:???

めんどくさいの来た

410

： Name_Not_Found [sage] 2017/12/11(月) 00:44:55.76ID:???

>>401

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

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

411

： Name_Not_Found [sage] 2017/12/11(月) 03:22:34.88ID:???

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

412

： Name_Not_Found [] 2017/12/11(月) 10:34:28.25

ID

:JR2YAbbz

>>401

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

413

： Name_Not_Found [] 2017/12/11(月) 14:56:38.76

ID

:ye0C1WW6

FirefoxのTimbleってどう

414

： Name_Not_Found [sage] 2017/12/11(月) 17:15:02.39ID:???

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

415

： Name_Not_Found [] 2017/12/11(月) 19:47:57.12

ID

:XQar8lvx

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

416

： Name_Not_Found [sage] 2017/12/11(月) 20:05:03.27ID:???

>>415

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

417

： Name_Not_Found [sage] 2017/12/11(月) 20:36:06.31ID:???

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

418

： Name_Not_Found [sage] 2017/12/11(月) 21:52:41.93ID:???

>>410

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

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

419

： Name_Not_Found [sage] 2017/12/11(月) 22:09:49.49ID:???

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

420

： Name_Not_Found [sage] 2017/12/11(月) 22:16:10.06ID:???

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

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

421

： Name_Not_Found [sage] 2017/12/11(月) 22:16:59.72ID:???

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

422

： Name_Not_Found [sage] 2017/12/11(月) 22:17:54.18ID:???

いやそこにｄｉｖは

423

： Name_Not_Found [sage] 2017/12/11(月) 23:03:13.91ID:???

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

424

： Name_Not_Found [sage] 2017/12/11(月) 23:10:02.43ID:???

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

425

： Name_Not_Found [] 2017/12/12(火) 02:53:45.15

ID

:MrUcGD8N

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

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

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

4INJTW8JKS

426

： Name_Not_Found [] 2017/12/12(火) 05:09:13.90

ID

:jKrIZ5O1

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

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

427

： Name_Not_Found [] 2017/12/12(火) 05:13:24.02

ID

:jKrIZ5O1

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

428

： Name_Not_Found [] 2017/12/12(火) 11:11:04.06

ID

:KxsIUi6g

>413
X　Timble
〇 Thimble

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

429

： Name_Not_Found [] 2017/12/12(火) 15:52:45.71

ID

:Cj5deiHl

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

430

： Name_Not_Found [] 2017/12/12(火) 17:35:59.69

ID

:A9mdEmNE

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

431

： Name_Not_Found [sage] 2017/12/12(火) 21:32:24.92ID:???

>>430

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

432

： Name_Not_Found [sage] 2017/12/13(水) 02:47:50.28ID:???

>>429

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

433

： Name_Not_Found [sage] 2017/12/13(水) 07:42:56.32ID:???

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

434

： Name_Not_Found [] 2017/12/13(水) 13:51:27.50

ID

:nqETxZ26

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

435

： Name_Not_Found [sage] 2017/12/13(水) 15:23:52.47ID:???

>>434

ttps://www.w3.org/TR/html5/

436

： Name_Not_Found [] 2017/12/13(水) 17:57:27.41

ID

:nqETxZ26

>>435

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

437

： Name_Not_Found [] 2017/12/13(水) 19:09:18.11

ID

:3ZAIdqMx

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

438

： Name_Not_Found [sage] 2017/12/13(水) 20:34:57.85ID:???

>>436

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

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

439

： 396 [sage] 2017/12/13(水) 21:59:39.45ID:???

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

440

： Name_Not_Found [sage] 2017/12/13(水) 22:12:48.89ID:???

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

441

： Name_Not_Found [] 2017/12/14(木) 13:09:43.29

ID

:m2MU+Gg1

>>436

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

442

： Name_Not_Found [sage] 2017/12/14(木) 13:49:16.29ID:???

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

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

443

： Name_Not_Found [sage] 2017/12/14(木) 15:29:39.13ID:???

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

444

： Name_Not_Found [sage] 2017/12/14(木) 20:38:19.84ID:???

>>440

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

445

： Name_Not_Found [sage] 2017/12/14(木) 20:42:58.18ID:???

>>440

position:stickyって何？

446

： Name_Not_Found [sage] 2017/12/14(木) 20:54:26.50ID:???

>>440

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

447

： Name_Not_Found [sage] 2017/12/14(木) 20:56:47.44ID:???

>>445

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

448

： Name_Not_Found [sage] 2017/12/14(木) 20:58:03.05ID:???

>>440

は、どれに対する回答？

449

： Name_Not_Found [sage] 2017/12/14(木) 21:24:49.47ID:???

>>396

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

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

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

>>408

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

450

： Name_Not_Found [sage] 2017/12/14(木) 22:52:58.09ID:???

>>396

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

451

： Name_Not_Found [sage] 2017/12/14(木) 22:56:18.44ID:???

>>450

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

452

： Name_Not_Found [sage] 2017/12/14(木) 23:05:34.64ID:???

>>450

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

453

： Name_Not_Found [sage] 2017/12/14(木) 23:07:56.65ID:???

>>452

theadやtbodyはどこに入るの？

454

： Name_Not_Found [sage] 2017/12/14(木) 23:11:54.28ID:???

trすらないしな

455

： Name_Not_Found [sage] 2017/12/15(金) 00:15:05.87ID:???

>>451

>>452

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

456

： Name_Not_Found [sage] 2017/12/15(金) 00:53:14.91ID:???

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

457

： Name_Not_Found [] 2017/12/15(金) 00:58:56.05

ID

:jXq5lX2q

>>450

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

458

： Name_Not_Found [sage] 2017/12/15(金) 01:36:32.58ID:???

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

459

： Name_Not_Found [sage] 2017/12/15(金) 07:12:18.27ID:???

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

460

： Name_Not_Found [sage] 2017/12/15(金) 08:12:13.66ID:???

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

461

： Name_Not_Found [sage] 2017/12/15(金) 12:06:00.45ID:???

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

462

： Name_Not_Found [] 2017/12/15(金) 12:17:18.34

ID

:PQ34pRVB

時代はHTML LSですよ

463

： Name_Not_Found [] 2017/12/15(金) 16:48:46.16

ID

:JPlQq7Xf

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

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

464

： Name_Not_Found [sage] 2017/12/15(金) 19:16:39.06ID:???

大学いけよ

465

： Name_Not_Found [sage] 2017/12/15(金) 21:40:08.16ID:???

>>454

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

466

： Name_Not_Found [sage] 2017/12/15(金) 21:42:42.65ID:???

>>460

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

467

： Name_Not_Found [sage] 2017/12/15(金) 21:56:30.17ID:???

>>463

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

468

： Name_Not_Found [] 2017/12/15(金) 23:19:40.40

ID

:KRtfC3O4

>>463

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

469

： Name_Not_Found [] 2017/12/16(土) 11:41:05.68

ID

:5ITrm/zI

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

470

： Name_Not_Found [sage] 2017/12/16(土) 11:50:21.12ID:???

>>469

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

471

： Name_Not_Found [] 2017/12/16(土) 12:03:14.30

ID

:ANR61hmv

>>470

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

472

： Name_Not_Found [sage] 2017/12/16(土) 12:06:33.66ID:???

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

473

： Name_Not_Found [] 2017/12/16(土) 12:16:18.83

ID

:ANR61hmv

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

474

： Name_Not_Found [] 2017/12/17(日) 17:09:32.68

ID

:/vbVZZok

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

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

475

： Name_Not_Found [] 2017/12/18(月) 20:38:03.72

ID

:mTqjzbGk

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

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

476

： Name_Not_Found [sage] 2017/12/18(月) 21:08:46.17ID:???

>>475

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

477

： Name_Not_Found [] 2017/12/18(月) 21:27:31.79

ID

:mTqjzbGk

>>476

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

478

： Name_Not_Found [] 2017/12/18(月) 23:24:10.81

ID

:tObqJuQV

>>477

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

479

： Name_Not_Found [sage] 2017/12/18(月) 23:25:50.87ID:???

>>477

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

480

： Name_Not_Found [sage] 2017/12/18(月) 23:25:55.23ID:???

>>478

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

481

： Name_Not_Found [sage] 2017/12/18(月) 23:29:40.92ID:???

>>480

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

482

： Name_Not_Found [] 2017/12/18(月) 23:30:29.29

ID

:tObqJuQV

>>480

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

483

： Name_Not_Found [] 2017/12/18(月) 23:39:22.58

ID

:mTqjzbGk

>>479

ありがとうございます！

484

： Name_Not_Found [sage] 2017/12/18(月) 23:48:11.40ID:???

>>481

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

485

： Name_Not_Found [sage] 2017/12/19(火) 00:07:05.97ID:???

>>484

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

486

： Name_Not_Found [sage] 2017/12/19(火) 00:42:55.49ID:???

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

487

： Name_Not_Found [sage] 2017/12/19(火) 06:05:11.75ID:???

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

488

： Name_Not_Found [sage] 2017/12/19(火) 15:26:16.23ID:???

iモードwwwwwwwwwwwwwwwwwwwww

489

： Name_Not_Found [sage] 2017/12/19(火) 16:23:49.56ID:???

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

490

： Name_Not_Found [] 2017/12/19(火) 16:59:21.06

ID

:RyEYvaWp

他社ってどこなん？

491

： Name_Not_Found [sage] 2017/12/20(水) 00:18:36.47ID:???

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

492

： Name_Not_Found [sage] 2017/12/20(水) 09:10:03.84ID:???

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

めんどくせえ！


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

他ないの？

493

： Name_Not_Found [sage] 2017/12/20(水) 09:32:01.65ID:???

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

494

： Name_Not_Found [sage] 2017/12/20(水) 10:42:21.34ID:???

面倒ならメディアクエリだのレスポンシブだのする必要はない
PC用に作ってviewport指定しなければ、スマホやタブレットでもPCブラウザと同じ表示になる

495

： Name_Not_Found [sage] 2017/12/20(水) 12:11:32.55ID:???

>>492

レスポンシプにせずに全て同じにすればいい

496

： Name_Not_Found [sage] 2017/12/20(水) 20:08:39.60ID:???

>>492

全部floatにしとけば勝手に縦横になる

497

： Name_Not_Found [sage] 2017/12/21(木) 00:56:34.36ID:???

PCでも狭い構成にすりゃいい

498

： Name_Not_Found [] 2017/12/21(木) 05:52:56.75

ID

:ske1sAQ+

>>492

結局似たような2画面作ってるわけだからね
労力の総和はそう変わらん

499

： Name_Not_Found [] 2017/12/21(木) 07:11:39.64

ID

:CfMTWfO+

ttps://oshiete.goo.ne.jp/qa/10151321.html
これおしえて

500

： Name_Not_Found [] 2017/12/21(木) 16:00:34.85

ID

:4YAGvJKK

cssファイル指定のパスが間違ってる
セレクタが間違ってる
プロパティ名か値の書き方が間違ってる
その他のシンタックスエラーがある
キャッシュを見てる

のどれか

501

： Name_Not_Found [sage] 2017/12/21(木) 19:02:13.20ID:???

全角スペースとか

502

： Name_Not_Found [sage] 2017/12/23(土) 11:01:07.14ID:???

クロームのキャッシュは本当にやっかいだな
htaccessのリダイレクト設定までキャッシュしやがる

503

： Name_Not_Found [] 2017/12/24(日) 16:20:07.47

ID

:S+8jq/75

キャッシュクリアするためのリロードボタン右クリをするために
開発ツール出さなきゃならんのも地味にイラッとする
いやショートカット1発だけなんだけど

あとiPhoneのSafariのキャッシュも地味にきついよね

504

： Name_Not_Found [sage] 2017/12/24(日) 20:11:30.62ID:???

>>503

ああ、ショートカット登録すりゃいいのか・・

iPhoneもイラつくね。
プライベートウインドウモードにしてても
cssキャッシュがリロードで消えない場合は直接CSSファイルの絶対パスをブラウザで一旦読ませてる。
オラ！ファイル内の記述が変わってるだろ？なのにページが変わらないのはおかしいよな？
さっさとページの方もちゃんと変えろよ！って心の中で怒ってるわ。

505

： Name_Not_Found [sage] 2017/12/24(日) 20:15:50.25ID:???

style.css?unixtime

506

： Name_Not_Found [sage] 2017/12/24(日) 21:22:41.01ID:???

最近Safariのキャッシュ強くなった？

507

： Name_Not_Found [sage] 2017/12/24(日) 21:35:11.99ID:???

ページ内で、段組み構造、横並びメニュー、などいくつかあってclearfixを使う場合
1. clearfixだけのclassを作ってHTMLにその都度idや複合classとして書く
2. css内にその都度全てclearfixを書く
みなさんどちら？flexはこの際置いといて

508

： Name_Not_Found [sage] 2017/12/24(日) 21:54:52.65ID:???

当然flexだけどfキーが壊れて打てないとかのヤムをえない事情なら2

509

： Name_Not_Found [sage] 2017/12/24(日) 21:55:42.03ID:???

cfやleft、rightは一見楽そうに見えて後々しんどいだけだよ
何回かちゃんとサイトを作れば分かる

510

： Name_Not_Found [sage] 2017/12/24(日) 22:12:11.07ID:???

floatって何に使う？

511

： Name_Not_Found [sage] 2017/12/24(日) 22:15:47.83ID:???

>>510

ttps://cdn.css-tricks.com/wp-content/csstricks-uploads/web-text-wrap.png
このレイアウトを作る時
と言ってもこのレイアウトで組むこと自体ないけど

cssが貧弱だったとは言え、今更floatでinline-blockをどうちゃらってのは考えられない

512

： Name_Not_Found [] 2017/12/24(日) 22:17:29.20

ID

:PgcdCazj

全くの初心者から、html cssデザインの教科書 何回もやったんだけど、次はどの本がオススメ？
ttp://htmlcss.cat-speak.net/

513

： Name_Not_Found [sage] 2017/12/24(日) 22:21:21.13ID:???

>>511

あー
ニュースとかの記事ページで使うか
table-cellでも良さそうだが

514

： Name_Not_Found [sage] 2017/12/24(日) 22:23:20.07ID:???

>>512

bootstrap＋wordpressでサイト作れるようになったらどんなサイトでも作れるようになると思う

515

： Name_Not_Found [] 2017/12/24(日) 23:23:49.85

ID

:PgcdCazj

>>514

ちょっと難しそう

516

： Name_Not_Found [sage] 2017/12/24(日) 23:43:31.32ID:???

>>507-509

皆、SASS の、clearfix mixin を使っているのじゃ？

>>512

Web制作者のためのSassの教科書 改訂2版、平澤 隆・森田 壮、2017

517

： Name_Not_Found [sage] 2017/12/25(月) 00:24:48.15ID:???

>>507

1しかありえない
フレームワークとはそういう理念からできている

パーツを組み合わせて効率化、コスト削減するのは製造業でも常識

518

： Name_Not_Found [sage] 2017/12/25(月) 00:39:15.62ID:???

サイトの規模による

519

： Name_Not_Found [] 2017/12/25(月) 11:42:45.85

ID

:xzsX+uUz

>>516

clearfix自体滅多に使わんなあ

520

： Name_Not_Found [sage] 2017/12/25(月) 12:13:40.97ID:???

>>507

3. clearfix を使わない

521

： Name_Not_Found [] 2017/12/25(月) 13:47:14.69

ID

:/UJRFp27

>>505

それやったらキャッシュされなくなっちゃうじゃん

522

： Name_Not_Found [sage] 2017/12/25(月) 21:09:08.91ID:???

clearfix使わないで空div使ってるのか・・・

523

： Name_Not_Found [sage] 2017/12/25(月) 21:45:00.75ID:???

日本語読めないのってるんだな

>>520

ある意味すげーわ

524

： Name_Not_Found [] 2017/12/26(火) 00:34:06.49

ID

:f74OC5ri

>>522

えええ

overflowを使うのって
もしかしてあまり有名ではないのかな？
clearfixよりずっと古いから最近の子らは知らなかったりすんのかな

525

： Name_Not_Found [sage] 2017/12/26(火) 02:55:52.80ID:???

>>524

おれもoverflowだわ。むしろclearfix初めて聞いた

526

： Name_Not_Found [] 2017/12/26(火) 04:20:28.97

ID

:GtuuDEg5

お前らキッモｗｗｗｗｗｗｗｗｗｗｗｗ
まだウェブデザイナーなんてやってんの？ｗｗｗｗｗｗｗｗｗ
Web業界は終焉を迎えてるんだよ

せいぜい時給1000円稼げる程度が限界だろうなぁｗｗｗｗｗｗｗｗｗｗｗ

こんなクソ業界さっさと辞めて正解でした！！！！！！！！！！！！！！

527

： Name_Not_Found [sage] 2017/12/26(火) 08:09:12.71ID:???

時給3万円だよ
あんまり仕事しない、たまにサクッと終わらせるだけ

月給は60万ぐらい

528

： Name_Not_Found [sage] 2017/12/26(火) 08:12:39.92ID:???

>>524

すげー懐かしい
なんかバグがあったから使わなかった記憶がある
ぐぐったらIE6・7で効かないらしい
使うことはないと思う

529

： Name_Not_Found [sage] 2017/12/26(火) 12:34:48.12ID:???

>>524

overflowで解除できるのしらないんだよ
なんでもかんでもclearfix最高！って思ってる層はわりといる

530

： Name_Not_Found [sage] 2017/12/26(火) 20:40:32.07ID:???

>>524

overflowは他とからむといろいろ面倒だよ

531

： Name_Not_Found [sage] 2017/12/26(火) 20:41:43.31ID:???

>>517

さすが、やっぱそれですな

532

： Name_Not_Found [sage] 2017/12/27(水) 01:32:22.99ID:???

>>528

その頃のIEはclearfix以前の問題いくつも抱えてたからな
overflowと、IE用にzoom: 1 をセットで書くのが定番だった

ちなみにoverflowはハックの類ではなく仕様書に書いてある
子要素がフロートしててもoverflowの値を変えると高さ計算出来るって

533

： Name_Not_Found [sage] 2017/12/27(水) 01:36:44.94ID:???

んでこのzoom指定がIE用だからって
ご丁寧に先頭に\を書く奴が一定数いた

そんなCSSをたくさん抱えたサイトを現在になってメンテすることになって
SASSパーサにかけてエラー吐かれるたびにすんごいイライラする…

534

： Name_Not_Found [sage] 2017/12/27(水) 07:01:27.56ID:???

質問から逸脱してて完全にスレチ

535

： Name_Not_Found [sage] 2017/12/27(水) 10:58:44.03ID:???

>>522

clearfixを使わないで、弟要素にclear指定してる

536

： Name_Not_Found [sage] 2017/12/27(水) 20:27:55.88ID:???

前の要素にclear指定って方法もあったがメンテ上最悪なため
やってるやつはいなかった

537

： Name_Not_Found [sage] 2017/12/27(水) 20:58:49.80ID:???

>>508

f使えなかったらいろいろダメじゃね？
float、left、after、overflow

538

： Name_Not_Found [sage] 2017/12/27(水) 21:44:01.58ID:???

clearは最悪だな
空divにdlearのほうがよっぽどマシ

539

： Name_Not_Found [sage] 2017/12/27(水) 22:01:41.82ID:???

空divって何に使うの？
flexbox？

540

： Name_Not_Found [sage] 2017/12/27(水) 22:18:13.47ID:???

div float:left
div float:right
div clear:both

541

： Name_Not_Found [sage] 2017/12/27(水) 23:43:32.94ID:???

>>539

親要素の大きさを計算する一番簡単なのは
clear: left/right/bothを子要素に設定することだから
とりあえず空の要素置く

ってのはフロートが画像にテキストを回り込ませるだけのものだった頃から
おっちゃん達はわりとすぐにたどり着いたやり方

みんな真面目に取り組むようになったのは
JIS X 8341-3とMovableTypeによって脱テーブルレイアウトが促された
00年代前半あたりだった

542

： Name_Not_Found [sage] 2017/12/28(木) 03:18:27.18ID:???

cleaefixは当時、面倒が減っていいものだと思ったが、空の疑似要素を余計に作る実装がエレガントではなくて結局使わなくなったな

543

： Name_Not_Found [sage] 2017/12/28(木) 11:25:01.93ID:???

空divは絶対コロスマンがわくのに
空疑似要素はわかない

544

： Name_Not_Found [sage] 2017/12/28(木) 16:30:32.30ID:???

divは一応意味がある要素だからよろしくないって言われるわね
疑似要素にはそれがないし強いて言えば内容の前後に何かを付け足すって意味くらいでしかない
floatした子要素達の後に疑似要素で区切りを付け足すという（へ）理屈かな

545

： Name_Not_Found [sage] 2017/12/28(木) 22:32:25.81ID:???

空divあんなに不評だったのにファンがまだ残ってるんだな

cleaefixはそのdivがそのままmargin、border、backgroundなどの見た目や
また動的に指定するためにid付けたり割と無駄なく使える

546

： Name_Not_Found [sage] 2017/12/28(木) 23:18:46.39ID:???

空の記事の要素にしろ、弟要素にしろ、別の場所でclearしないといけないという点でメンテナンスコストは変わらない
なら、空の疑似要素を余計に作りこまない実装の方が良い

547

： 546 [sage] 2017/12/28(木) 23:19:39.65ID:???

×　空の記事の要素
〇　空の疑似要素

548

： Name_Not_Found [sage] 2017/12/29(金) 00:28:35.04ID:???

別の要素（親要素）に指定するのはflexも同じじゃん。
flexは左寄せの実装が完成してない。

clearfixは汎用クラスで楽に使えるし、
ボーダー、背景色、多重floatなど細かいデザインする上でも穴が無い。
それと疑似要素はタグではない。
見た目の為に余計なソース追加するのは嫌だ

549

： Name_Not_Found [sage] 2017/12/29(金) 00:33:35.22ID:???

>>548

左寄せっつーか
均等揃えの時の最後の行の処理だね
ほんと惜しい

でも使っちゃう…悔しい…

550

： Name_Not_Found [sage] 2017/12/29(金) 10:22:07.01ID:???

例えばdivをaで囲んだだとします。
ttps://codepen.io/anon/pen/EoWOMG

そうしたら、カーソルが指になるリンクの範囲は、そのdivの高さの��幅全てになります。
これを、divにいくつかmarginがあったとしても赤い部分だけをリンクの範囲にしたいのですが、
何と記述すれば良いですか？

551

： Name_Not_Found [sage] 2017/12/29(金) 10:46:18.09ID:???

>>550

まず、divのclassをnekoとして、CSSに、
.neko{display:inline;}
じゃだめかな

552

： Name_Not_Found [sage] 2017/12/29(金) 10:52:10.03ID:???

inline-blockじゃないと高さが取れないぞ

553

： Name_Not_Found [sage] 2017/12/29(金) 11:05:42.42ID:???

aタグblockにしてマージン付け直せばいいじゃん

554

： Name_Not_Found [sage] 2017/12/29(金) 23:30:45.33ID:???

cssとか全く知らないド初心者です。
ECサイトの運営を任されてトップページにランキングを載せてくれと言われ頭を悩ませております。

商品のランキングをタグでわけて表示まではできたのですが、タグをクリックすると自然に切り替わるのではなく、クリックしたタブ部分が画面外にいき、商品画像が画面一番上にきてしまいます。

タグ部分が画面外にいくので、ネックレス→ブレスとタグを続けてクリックできず、ネックレス→上に戻って→ブレス…とクリックしなければならない状態です。

タグを押す度に画面が上にズレるので非常に見にくいです。

説明が難しいので分かりにくいと思いますが、何か解決方法ありますでしょうか…すごく困ってます。

555

： Name_Not_Found [sage] 2017/12/30(土) 01:17:09.81ID:???

>>554

言葉だけじゃ分からない。
せめて図でも用意して分かりやすく説明してくれ。
そもそもスレ違いかもしれないし。

556

： Name_Not_Found [sage] 2017/12/30(土) 03:00:25.21ID:???

商品カテゴリーごとにタブ表示したいのかと予測
それはできて切り替わってるけどタブページ部分にスクロールしてしまってるってことなんじゃないか？
たぶんタブにaタグ使ってて、hrefにタブページのidをハッシュ(ページ内リンク)で入れてるのかと
もしそうならタブにaタグやhref使うのやめるか、preventDefaultやstopPropagationするかだけど、どっちにしてもjavascriptの話だね
手っ取り早く済ませるなら「jQuery Tabs」でググれば幸せになれるかもしれない
全然違うならすまん
わかりやすく説明してくれ

557

： Name_Not_Found [sage] 2017/12/30(土) 03:26:22.84ID:???

>>550

div > aでaをブロックにする方が効率的

558

： Name_Not_Found [sage] 2017/12/30(土) 03:57:00.15ID:???

>>550

ほらよ。あまりにも素人が多すぎる
ttps://codepen.io/anon/pen/aEWNMy

559

： Name_Not_Found [sage] 2017/12/30(土) 07:57:45.14ID:???

大したことない回答なのにめっちゃえらそうで笑った

560

： Name_Not_Found [sage] 2017/12/30(土) 08:22:23.01ID:???

>>517

>>507

と似た（同じ？）質問ですがCSSで
ヘッダやフッタなど横並びしかない場合でも1でしょうか？
つまりHTML全ての部分にclearfixクラスつけると？

561

： Name_Not_Found [sage] 2017/12/30(土) 09:26:03.23ID:???

2. css内にその都度全てclearfixを書く

ただし、sass使ってるので、その都度書くと言っても
@extend %clearfix と書くだけでいい

562

： Name_Not_Found [sage] 2017/12/30(土) 09:58:48.52ID:???

>>558

要件満たしてないのに馬鹿じゃねぇのコイツ

563

： Name_Not_Found [sage] 2017/12/30(土) 10:18:07.50ID:???

ありがとーございます！！試してみます！
分かりにくい説明なのに回答くださり感謝ですー

564

： Name_Not_Found [sage] 2017/12/30(土) 10:27:50.27ID:???

clearfixクラスなんて漬けるのはやめよう
clearfixクラスを変更した時にとんでもないことになる

565

： Name_Not_Found [sage] 2017/12/30(土) 10:58:28.24ID:???

>>562

要件書いてないのに、要件満たしてないとか
お前に判断できるわけねーだろ
書いてること＝要件じゃねーんだぞ？

566

： Name_Not_Found [sage] 2017/12/30(土) 11:01:15.35ID:???

>>564

のような問題も
sass使えば解決

567

： Name_Not_Found [sage] 2017/12/30(土) 11:16:45.20ID:???

>>561

>@extend %clearfix

おいおい、@mixin を使えよ。
「Sassの教科書」って本に書いてある

568

： Name_Not_Found [sage] 2017/12/30(土) 12:05:29.96ID:???

560ですがsassなしでお願いします
sass使ってますがcssでの質問です

569

： Name_Not_Found [sage] 2017/12/30(土) 13:18:15.96ID:???

考えるまでもなくflex
どうしてもflexが使えなくてもflexを使えるようにする
それでも無理なら2

570

： Name_Not_Found [sage] 2017/12/30(土) 13:27:56.55ID:???

また日本語読めないのが湧いてる・・・

571

： Name_Not_Found [sage] 2017/12/30(土) 13:48:38.17ID:???

>>567

お前が勘違いしてるか、その本が間違ってんだろｗ

572

： Name_Not_Found [sage] 2017/12/30(土) 13:53:17.17ID:???

>>560

理想は２

本来のHTMLはデザイン（CSS）とHTML・ドキュメント構造を切り分けるのが良い作り方なので
class属性を書き換えなくてもデザインを適用、変更できるようにすべき

573

： Name_Not_Found [sage] 2017/12/30(土) 14:37:39.83ID:???

>>564

全ファイルgrepで一発で変更できる
何がとんでもないのか？

もうSassは別スレにしたほうがいいな

574

： Name_Not_Found [sage] 2017/12/30(土) 16:36:00.99ID:???

>>517

>>572

どっちもどっちなのか

575

： 550 [sage] 2017/12/30(土) 17:07:37.67ID:???

レスどうもです。
div>a は必須でお願いします。

あと、 .nekoにinline-blockすると下部にリンクの領域が出てしまっています。

576

： 550 [sage] 2017/12/30(土) 17:08:15.85ID:???

訂正
a>divは必須でお願いします。

577

： Name_Not_Found [sage] 2017/12/30(土) 17:17:57.30ID:???

>>575

div {
display:inline-block

578

： 550 [sage] 2017/12/30(土) 17:23:44.53ID:???

>>577

それは.nekoにdisplay:inline-blockするのと同じですね。

579

： Name_Not_Found [sage] 2017/12/30(土) 17:30:59.21ID:???

>>576

じゃあ

>>588

の
<a href="" class="neko"></a> を
<a href="" class="neko"><div></div></a>
にすればいいだけだよね？

580

： 550 [sage] 2017/12/30(土) 17:46:55.45ID:???

>>579

divにmarginがある状態でおねがいします

581

： Name_Not_Found [sage] 2017/12/30(土) 17:48:58.56ID:???

>>558

は完全に無いだろw

582

： Name_Not_Found [sage] 2017/12/30(土) 17:50:53.13ID:???

>>574

エディタ使用で考えると後で書き換え大変なのは２だな

583

： Name_Not_Found [sage] 2017/12/30(土) 17:50:55.65ID:???

>>581

普通にある
無駄なdivはいらん

584

： Name_Not_Found [sage] 2017/12/30(土) 18:09:54.62ID:???

>>580

だから出来てますよね

585

： Name_Not_Found [sage] 2017/12/30(土) 18:16:05.11ID:???

>>583

実際は何か詰まってるんだろ
察しろよ

まあ普通ならdivとa逆だがな
aの周りに更にdivで囲うのはだめなんか？

586

： Name_Not_Found [sage] 2017/12/30(土) 18:27:03.61ID:???

だからaの中に詰めればいいだけじゃん

587

： 550 [sage] 2017/12/30(土) 18:35:16.33ID:???

>>584

こっちで再現できないのでcodepenにかいてもらっていいですか

588

： Name_Not_Found [sage] 2017/12/30(土) 18:40:00.91ID:???

>>586

それがdivなんじゃ

>>587

584ではないが、書いてあるじゃん

既存のを修正してるのか知らんがマージンは親要素で考えたほうが楽
子孫のが飛び出るのまで考えると面倒だろ

589

： Name_Not_Found [sage] 2017/12/30(土) 19:00:23.05ID:???

>>588

divでもなんでも好きなものを入れればいい

divなしでaだけで完結できているわけだから
その後何入れるのはなんでも自由なわけ

590

： Name_Not_Found [sage] 2017/12/30(土) 19:00:53.91ID:???

.neko{
width:100px;
height:100px;
margin:60px;
background-color: red;
position:absolute;
}

a {
position: relative;
}

591

： 本物550 [sage] 2017/12/30(土) 19:00:57.72ID:???

>>587

あなた誰ですか？

>>588

でOKですよ

592

： Name_Not_Found [sage] 2017/12/30(土) 19:02:25.95ID:???

>>589

>>580

だとさ

593

： Name_Not_Found [sage] 2017/12/30(土) 19:03:53.31ID:???

>>579

<a><div></div></a>

a の中に、div ？
逆だろ

<div><a></a></div>

594

： 本物550 [sage] 2017/12/30(土) 19:04:19.28ID:???

divにmarginがあっても
想定通りに処理されるので問題ないです。

595

： 本物550 [sage] 2017/12/30(土) 19:05:39.35ID:???

>>593

>>550

を読んで下さい
> 例えばdivをaで囲んだだとします。

divの中にaとか言ってるやつは偽者なので無視してください

596

： Name_Not_Found [sage] 2017/12/30(土) 19:06:42.49ID:???

すいません、

>>588

じゃなくて

>>558

でしたね。
完璧な回答ありがとうございます。

597

： Name_Not_Found [sage] 2017/12/30(土) 19:11:09.70ID:???

ちょ！ｗ

>>576

>div>a は必須でお願いします

は本物か？
何かの理由でHTMLはいじれないようなニュアンスに読めたが

598

： sage [] 2017/12/30(土) 19:13:59.20

ID

:P9VfbXvI

よろしくお願いします。
以下のようなボックスをコピペを元に作成したところ、ボックスタイトルが2行になると
右側の囲み枠が不自然に切れてしまいバランスが悪くなってしまいます。
もし対策方法があれば教えていただければと思います。

.box {
position: relative;
margin: 2em 0;
padding: 0.5em 1em;
border: solid 2px #333333;
border-radius: 8px;
}

.box26 .box-title {
position: absolute;
display: inline-block;
top: -13px;
left: 10px;
padding: 0 9px;
line-height: 1.2;
}

599

： 本物550 [sage] 2017/12/30(土) 19:17:05.14ID:???

>>597

偽者ですよ。間違いに気づいて訂正したみたいですが

600

： 本物550 [sage] 2017/12/30(土) 19:17:21.71ID:???

aの中にdivは必須でお願いします。
aだけではだめです。

601

： 598 [sage] 2017/12/30(土) 19:17:33.58ID:???

すみません
いろいろ混在していました

.box {
position: relative;
margin: 2em 0;
padding: 0.5em 1em;
border: solid 2px #333333;
border-radius: 8px;
}

.box .box-title {
position: absolute;
display: inline-block;
top: -13px;
left: 10px;
padding: 0 9px;
line-height: 1.2;
}

602

： 本物550 [sage] 2017/12/30(土) 19:20:11.56ID:???

>>590

codepenで再現できました！

603

： 本物550 [sage] 2017/12/30(土) 19:22:43.18ID:???

>>602

は偽者です

604

： 本物550 [sage] 2017/12/30(土) 19:25:27.78ID:???

ちょっと出かけますね。これから暫くの間
550を騙るレスはすべて偽者だと思ってください

605

： 本物550 [sage] 2017/12/30(土) 19:27:24.55ID:???

>>603

は偽者です。

>>550

を読んでください。

>>558

でいいなら最初からそうしてます。

606

： Name_Not_Found [sage] 2017/12/30(土) 20:03:11.16ID:???

トリつけるかageてID出しなさいよw

607

： 550 ◆XPjVckEBHk [sage] 2017/12/30(土) 20:25:45.24ID:???

なんだか偽物がいるのでトリップつけますね。

・a>div
・marginをもっているのはdivだけ

divにdisplay:inline-blockをかける方式は簡単で良いのですけど
下部にリンクの領域ができてしまいます。これさえなければ良いのですが。

608

： Name_Not_Found [sage] 2017/12/30(土) 20:27:07.70ID:???

>>598

>>601
absoluteは基本使わない

.box {
position: relative;
margin: 2em 0;
padding: 0.5em 1em;
border: solid 2px #333333;
border-radius: 8px;
}

.box .box-title {
display: inline-block;
padding: 0 9px;
line-height: 1.2;
}

609

： Name_Not_Found [sage] 2017/12/30(土) 20:27:34.89ID:???

あと質問するならhtmlも書いてくれ

<div class="box"><span class="box-title ">a<br>a</span></div>
<div class="box">b</div>

.box {
position: relative;
margin: 2em 0;
padding: 0.5em 1em;
border: solid 2px #333333;
border-radius: 8px;
}

.box .box-title {
display: inline-block;
padding: 0 9px;
line-height: 1.2;
}

610

： Name_Not_Found [sage] 2017/12/30(土) 20:34:28.96ID:???

>>550

>>607
divにmarginはなんのためにつけるの？
aにpadding付けたほうが良い
複数並べたいなら最初以外の.nekoに
margin-left:60pxを漬けるだけで良い

a,
.neko {
display: inline-block;
}

.neko{
width:100px;
height:100px;
background-color: red;
}

a{
padding: 60px;
border: solid 1px blue;
box-sizing: border-box;
}

611

： Name_Not_Found [sage] 2017/12/30(土) 20:53:17.09ID:???

W3Cはインライン要素でブロックレベル要素包むのＯＫしたのは撤回しろよな
こういう素人がタグの意味を理解せずに見た目だけできてりゃいい的なソースが氾濫しそうだよ

そのうち
<a><section><main><div><p>箱</p></div></main></section></a>とか
<span><div><a><ul><li>あ<li></ul></a></div></span>とか
わけわかんないけど構文的にエラーではないから文句言えない質問とかきそうだ

612

： Name_Not_Found [sage] 2017/12/30(土) 21:25:45.45ID:???

最も初期からある要素だから仕方ないとは言え、
そもそも論を言えばa要素がインラインなのがおかしかった
inline-blockにすべきだった

613

： Name_Not_Found [sage] 2017/12/30(土) 21:48:13.21ID:???

>>607

リンクの領域というのがいまいちわからんけど
HTMLの改行が悪さしてるんじゃないんかな?
<a>〜</a>まで改行なしにしたらok?

614

： Name_Not_Found [sage] 2017/12/30(土) 21:53:32.95ID:???

>>611

お前が素人だろｗ
今はa要素でdiv要素等を包むのは仕様どおりだ
仕様に反することをするな

615

： Name_Not_Found [sage] 2017/12/30(土) 21:57:02.12ID:???

まず文書構造とデザインは分離して考えるべき
どうしてもCSSだけで実現できないならdivとか使うことになるが、
そうでないのであればHTMLだけを先に作ることができる

だから先にHTMLを決定する

<html>
<body>
　<a href="" class="neko"><div>neko</div></a>
</body>
</html>

ここまではいいか？

616

： Name_Not_Found [sage] 2017/12/30(土) 22:08:52.41ID:???

正直なところ
既に文書構造とデザインを分離して考えるというのは
すたれてきてるんじゃないだろうか……

文章とか中身よりまずデザインありきっていうか
そんな仕事ばかりな気がする

617

： Name_Not_Found [sage] 2017/12/30(土) 22:16:35.53ID:???

素直にHTMLを適切なデザインにするためのCSSを書くことが出来ません
テーブルレイアウト素晴らしいですねって言ったらどうだい？ｗ

618

： Name_Not_Found [sage] 2017/12/30(土) 22:22:26.23ID:???

>>616

ttp://jp.louisvuitton.com/jpn-jp/homepage?campaign=sem_GG-JP-JPN-EC-BRAN-BREX
文書とは一体

619

： Name_Not_Found [sage] 2017/12/30(土) 22:24:38.67ID:???

デザイン先に考えないと後で詰まるような流れが増えてきたな
PCとモバイルの順序が全然違うとか、ザラにある
まぁflex使えば難しいわけじゃないんだけど、もにょる

620

： Name_Not_Found [sage] 2017/12/30(土) 22:26:40.99ID:???

>>618

例えばこういうの
ttps://gsnedders.html5.org/outliner/ で変換

1. ルイ・ヴィトン公式サイト（公式ショッピングサイト）
　1. Untitled Section
　2. Untitled Section
　3. The world of wondrous gifts
　4. MASTERS
　5. この冬を彩るとっておきのウィメンズ小物
　6. 2018クルーズ広告キャンペーン
　7. 贈りたくなるメンズ･ギフト
　8. リンカーンセンターで表彰されたルイ･ヴィトンとニコラ･ジェスキエール
　9. 贈りたくなるウィメンズ･ギフト

このような文書構造を持ってる

621

： 550 ◆XPjVckEBHk [sage] 2017/12/30(土) 22:35:56.66ID:???

>>610

最初にdivでレイアウトを作り、後からリンクにしたい部分をaで囲む作り方をしているからです。
ちなみにこれだと赤い部分だけではなくmarginもリンクの範囲として含まれてしまいます。
赤い部分だけがリンクになるの理想です。
今回はdivを使っていますが、これがmarginをもったimgになっても使えたら尚良いです。

>>613

赤いdivの下のほうにカーソルが指になるエリアができるので、それを「リンクの領域」と呼びました。
すいません。改行？というのがよく分かりません。

622

： Name_Not_Found [sage] 2017/12/30(土) 22:50:25.97ID:???

> 最初にdivでレイアウトを作り、後からリンクにしたい部分をaで囲む作り方をしているからです。

な？ そういう間違ったやり方してるから、
こんな簡単なことが難しくなるんだよ。

問題を自分で難しくしてるんだよ

623

： Name_Not_Found [sage] 2017/12/30(土) 22:53:14.27ID:???

やっぱり文書構造を先に作って、デザインをそれに割り当てるって
正しいやり方に矯正した方がいいな

624

： Name_Not_Found [sage] 2017/12/30(土) 22:57:50.02ID:???

CSS以前だな。HTMLが間違えてる。
間違ったHTMLをベースに、正しく作るなんてできるはずがない

625

： Name_Not_Found [sage] 2017/12/30(土) 23:13:22.89ID:???

撤収だな。まずdivをなくせ、aだけにしろ。
人の話を聞かないやつにアドバイスしても無駄だ

626

： Name_Not_Found [sage] 2017/12/30(土) 23:13:38.09ID:???

どこまで行ってもマークアップはコーダーの自己満足で終わりがち

627

： 550 ◆XPjVckEBHk [sage] 2017/12/30(土) 23:15:14.36ID:???

やり方が間違っているんですね。
今後の参考にします。

それとは別に今回の質問について解決できる方はいませんか？

628

： Name_Not_Found [sage] 2017/12/30(土) 23:16:42.70ID:???

>>558

で解決してんだろ

629

： 550 ◆XPjVckEBHk [sage] 2017/12/30(土) 23:18:11.50ID:???

>>628

それだとdivがimgになったりしたらできないですね。

630

： Name_Not_Found [sage] 2017/12/30(土) 23:19:55.39ID:???

>>550

>>553

で解決している
アホな設計のせいで30分で終わる話が一日半かかっている
もっとしっかり勉強しよう

>>627

ハンマーをどう使えば魚をうまく捌けますか？
と聞いてるようなもん
答えるのがアホらしい

631

： Name_Not_Found [sage] 2017/12/30(土) 23:22:26.88ID:???

何の問題もなく解決してるが？
ttps://codepen.io/anon/pen/EombVw

632

： 550 ◆XPjVckEBHk [sage] 2017/12/30(土) 23:25:33.14ID:???

>>631

marginがあるのはaじゃなくてimgにある場合ですね。

633

： Name_Not_Found [sage] 2017/12/30(土) 23:25:41.11ID:???

>>631

その赤の部分にリンクがつくと駄目らしいｗ
この年の瀬に本当にアホらしいものを見てしまった

634

： Name_Not_Found [sage] 2017/12/30(土) 23:27:13.13ID:???

>>632

ほらよ、imgにmargin付けてやったぞ
ttps://codepen.io/anon/pen/EombVw

635

： Name_Not_Found [sage] 2017/12/30(土) 23:29:55.50ID:???

divで先にレイアウトを作るとかいう
ばーかなことをするから、
自分で作ったレイアウトに自分で苦しめれてる
divにmarginつけるな。aにmarginつけろで終わりだ

636

： 550 ◆XPjVckEBHk [sage] 2017/12/30(土) 23:31:07.05ID:???

>>634

marginがリンクになっていますね。
80*80のグレーの画像だけをリンクの領域にしたいんです。

637

： Name_Not_Found [sage] 2017/12/30(土) 23:33:43.20ID:???

aの部分がリンクになるんだから当たり前だろ
何言ってんだ

638

： Name_Not_Found [sage] 2017/12/30(土) 23:38:14.88ID:???

>>637

もう相手にしなくていいぞ
完全に時間の無駄

639

： Name_Not_Found [sage] 2017/12/30(土) 23:41:21.09ID:???

ほんとなぁ、先にHTML作って
デザインを後から適用しろといってるのに

ほれ見ろ、ちゃんとしたHTMLにしたらこんなに簡単だろうが
ttps://codepen.io/anon/pen/QavOKy

先にデザインとか作るから、自分で作ったデザインを
調整するのに苦労してるっていってんだろーが

640

： Name_Not_Found [sage] 2017/12/30(土) 23:43:47.88ID:???

a（リンク）の周りに空白付けたいのか、
aの一部として空白を埋めたいのか
自分で理解してねーだろ？

先に赤の領域なんてデザイン作るからそうなるんだ。

赤の領域を先に作るわけだから、当然この部分が
リンクかどうかも考えないで作ってるわけだからな

641

： Name_Not_Found [sage] 2017/12/30(土) 23:45:27.11ID:???

こんな新人が来たら勉強してきてって一旦家に帰すわ
無理だ

642

： 550 ◆XPjVckEBHk [sage] 2017/12/30(土) 23:57:08.48ID:???

>>637

なるほど、つまり私の要望をCSSで実現するのは仕様で無理という事なんですね。

643

： Name_Not_Found [sage] 2017/12/30(土) 23:59:32.06ID:???

divがdisplay:blockだからできない、
imgはdisplay:inline-blockならできるというのなら、

div {display: inline-block;}

を追加すればいい

644

： Name_Not_Found [sage] 2017/12/31(日) 00:02:25.46ID:???

>>642

そりゃお前の「間違い」を実現できるわけがないだろｗ

645

： Name_Not_Found [sage] 2017/12/31(日) 00:05:30.45ID:???

なるほど、じゃねーよｗ

646

： Name_Not_Found [sage] 2017/12/31(日) 00:12:50.80ID:???

正しい考え方というのがどれだけ重要かがよく分かるな

647

： 550 ◆XPjVckEBHk [sage] 2017/12/31(日) 00:18:05.35ID:???

やっぱり

>>553

の方式に矯正するのがいいですね。
たっくさんのレスありがとうございました。

648

： Name_Not_Found [sage] 2017/12/31(日) 00:19:06.28ID:???

>>618

ルイヴィトンのサイトおもしれーな
こっちは文書構造なしなんね
ttp://jp.louisvuitton.com/jpn-jp/stories/holidays-2017

649

： Name_Not_Found [sage] 2017/12/31(日) 00:23:01.29ID:???

さっき書店で立ち読みしたらclearfixいれたfloatを駆使して3ペインのサイトの構築方法が解説されてた
もうfloatじゃなくてflexboxを駆使したほうが分かりやすいと思うんだが

650

： Name_Not_Found [sage] 2017/12/31(日) 00:26:23.48ID:???

>>618

ソースコードみたら改行すげーあるけどこれ何でだろう。

651

： Name_Not_Found [sage] 2017/12/31(日) 00:29:06.33ID:???

見返すと

>>558

を延々と押し売りしてて吹いたw

652

： Name_Not_Found [sage] 2017/12/31(日) 00:33:10.50ID:???

>>650

スペースの数が同じだけあるので、includeするごとにスペースが入る設定になってしまってるってとこだと思う

653

： Name_Not_Found [sage] 2017/12/31(日) 00:33:39.08ID:???

>>649

本が古いんじゃないんかね

654

： Name_Not_Found [sage] 2017/12/31(日) 00:50:20.09ID:???

>>653

2015年だった。
こんなもんかな。
ttps://www.mdn.co.jp/di/book/3214203016/

655

： Name_Not_Found [sage] 2017/12/31(日) 02:03:47.41ID:???

>>629

a>imgでええがな。勉強し直してこい

656

： 本物550 [sage] 2017/12/31(日) 08:06:21.06ID:???

>>655

やっぱり

>>558

が一番ですね！

657

： Name_Not_Found [sage] 2017/12/31(日) 10:33:03.99ID:???

そうだね

>>558

は一番ないねｗｗｗ
素人すぎる

658

： Name_Not_Found [sage] 2017/12/31(日) 18:06:29.91ID:???

>>655

>>558

>>591

といい どんだけ自己擁護したいんだよ
ったく年の瀬に気持ち悪いもん見せんなよアホ

>>558

はねーから

659

： Name_Not_Found [sage] 2017/12/31(日) 18:14:34.63ID:???

だからさー
a>divを仕様的にOKにしなければ
こんな事最初から起こらないのに・・・
以前だったら、構文エラーなのと、
実際にIE7で範囲がおかしくなるからやめろって言えたんだけどなぁ

660

： Name_Not_Found [sage] 2017/12/31(日) 18:18:48.57ID:???

インライン要素とブロックレベル要素の概念が無くなったとかいうなら
ブロックレベルは改行されてインライン要素は改行されない仕様は何故残すんだ。
この改行の仕様が残っている限り、
概念は残っていと考えた方が、おかしなことにならない。

661

： Name_Not_Found [sage] 2017/12/31(日) 18:19:44.94ID:???

つまり最初からブロックレベル要素をインライン要素で包むような事はやるなって事。

662

： Name_Not_Found [sage] 2017/12/31(日) 18:25:35.79ID:???

>>661

昭和かｗ

663

： Name_Not_Found [sage] 2017/12/31(日) 18:27:07.87ID:???

何が一番気持ち悪いってクラス名
class="neko"って・・・

664

： Name_Not_Found [sage] 2017/12/31(日) 18:29:33.93ID:???

でもcatにするとカテゴリーと勘違いしない？
いや内容読めば判断できるだろうけどさ

665

： Name_Not_Found [sage] 2017/12/31(日) 18:45:18.33ID:???

そうじゃなくてだな。
こういう場合はfoo、bar、bazって便利な単語があるんだよ

666

： Name_Not_Found [sage] 2017/12/31(日) 18:46:06.89ID:???

もしくはinnerとかouterとか
意味のないところで意味の無いことをするとどんどん仕事が増えていく

667

： Name_Not_Found [sage] 2017/12/31(日) 19:08:20.89ID:???

mediaqueryですが、どういうふうに分けるのが良いでしょうか？
・ファイルで分ける。linkタグを2つにする
・ファイルは同じにして、要素ごとに分ける
@media (min-width: 768px) {body{...}}
@media (max-width: 767px) {body{...}}
@media (min-width: 768px) {div{...}}
@media (max-width: 767px) {div{...}}
・ファイルは同じにして、画面サイズごとに分ける
@media (min-width: 768px) {
body{...}
{div{...}
}
@media (max-width: 767px) {
body{...}
div{...}
}

どれも一長一短な気がしています
他にも何か良い方法があれば教えてください
開発は自分一人で、勉強を兼ねた趣味のサイトです

668

： Name_Not_Found [sage] 2017/12/31(日) 19:13:09.22ID:???

Web制作者のためのSassの教科書 改訂2版、平澤 隆・森田 壮、2017

669

： Name_Not_Found [sage] 2017/12/31(日) 19:28:01.30ID:???

>>668

を読めば分かるということでしょうか？

670

： Name_Not_Found [sage] 2017/12/31(日) 20:37:48.90ID:???

>>667

自分にとって何が長で短なのかを考えて決めれ
サイトの規模、構造、作り方、人数、コストなどなどで変わって来る

671

： Name_Not_Found [sage] 2017/12/31(日) 23:54:24.84ID:???

>>669

いえ、買ってあげてください。作者が喜びます。

672

： Name_Not_Found [sage] 2018/01/01(月) 03:15:29.70ID:???

<span>aaaaaaaaa</span><span>bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</span>

みたいなのを
　　↓aaa...のwidthの右端
　　|bbbbbbbbbbbbbbb|←bbb...のwidthの右端
aaaa|bbbbbbbbbb　　　　|

と表示させたいのですがbbb...が短い場合は
aaaa|
bbbbbbbbbbbbbbbbbbbbbbbbbb|

とかそれ以外の方法では
aaaa|bbbbbbbbbbbbbbbbbbbbb
bbbbb
とかになってしまいます
なんと指定すればいいでしょうか？

aaa...の上下の位置はどうでもいいです

673

： 672 [sage] 2018/01/01(月) 03:26:43.53ID:???

すみません補足

bbb...が短い場合には
aaaa|bbbbbbbbbbbbbbbbbbbb|
と表示させたいのです

674

： Name_Not_Found [sage] 2018/01/01(月) 10:21:33.27ID:???

>>672

ttps://jsfiddle.net/zxe88253/q4zagf2o/1/

675

： Name_Not_Found [sage] 2018/01/01(月) 10:22:25.25ID:???

>672
違った、aは詰めるのか

ttps://jsfiddle.net/zxe88253/q4zagf2o/2/

676

： Name_Not_Found [sage] 2018/01/01(月) 13:26:23.65ID:???

>>669

>>668

は作者が売れなくてステマしてるだけだから気にすんな便所の紙にもならないクソ本

677

： Name_Not_Found [sage] 2018/01/01(月) 16:24:19.16ID:???

>>676

その程度の本ならブログいくつか読み回れば済むわな

>>667

先ずはCSSをしっかり身に付けたほうがいい
Sassはその上で学べばいい

678

： Name_Not_Found [sage] 2018/01/02(火) 00:47:50.29ID:???

SASS(SCSS)では、@media, @at-root とか、
メディアクエリは、extend ではなく、mixin を使う

CSS MQPacker で、バラバラになったメディアクエリを、まとめてくれる

Sassの変数とmixinで変更に強いメディアクエリをつくる
ttps://www.tam-tam.co.jp/tipsnote/html_css/post10708.html

「sass メディアクエリ mixin」で検索！

SassMeister, css2sass のサイトで試してくれ

Web制作者のためのSassの教科書 改訂2版、平澤 隆・森田 壮、2017

679

： Name_Not_Found [sage] 2018/01/02(火) 00:56:36.04ID:???

>>660

> ブロックレベルは改行されてインライン要素は改行されない仕様は何故残すんだ。
それはCSSの領分
HTMLとCSSは区別して考えなさい

680

： Name_Not_Found [sage] 2018/01/02(火) 01:36:51.29ID:???

jQueryで別ファイルからヘッダとフッタを読み込みってことやったんですが、処理は上手く行っているようだが
サーバーのファイルを更新してもjQueryで読み込むから日付チェックをしていないようで古いものがキャッシュから読まれてしまう
こう言うの抑止する方法とかありませんか？

当方webに関しては殆ど素人です

681

： Name_Not_Found [sage] 2018/01/02(火) 01:58:20.43ID:???

こちらのスレに、質問して

jQuery 質問スレッド vol.8
ttps://mevius.5ch.net/test/read.cgi/hp/1508707878/l50

キャッシュを捨てるとか、
ファイルのバージョンが上がったら、再読み込みするとか、

そういう機能があったような気がする

682

： Name_Not_Found [sage] 2018/01/02(火) 02:07:32.03ID:???

>>681

そっちに質問投げてきました
ありがとうございます

683

： Name_Not_Found [sage] 2018/01/02(火) 08:21:52.07ID:???

>>558

年明け一発目で笑わせんなよw

684

： Name_Not_Found [sage] 2018/01/02(火) 09:38:27.28ID:???

>>683

もうフィーチャーしてやるなよ

685

： Name_Not_Found [sage] 2018/01/02(火) 12:47:15.94ID:???

>>679

じゃあなんだ？<br>は改行する仕様もCSSの領域か？
そもそもまだ完全に分離されて完成していない言語なのにきれいごとで方付かないだろ

CSSなしでもある程度ビジュアルの構造ができるように作られているし、それが残されている。
本当に分離してあるなら、文字の大きさも改行情報もインデントも
全て無い状態（デフォルト状態からリセットされていなる状態）になってないとおかしい。

教科書みたいな意見を上から目線でいうなや

686

： Name_Not_Found [sage] 2018/01/02(火) 12:52:26.41ID:???

<br>はいつまで置いとくんだろうね。確かにこれは癌としか言いようがない
実体参照にするか、preの中で書くようにすべきだろう
と言いたいが、pcとモバイルで<br>を表示/非表示切り替えたりするのでそういうわけにもいかんしな。難しい

あと、ブラウザのデフォルトcssもいい加減どうにかしてほしい。いつまでreset.cssが必要になるんだ
構文一個入れたらmargin/paddingを0、aもliもインライン要素はすべて文字の装飾なしにしてくれればいいのに

687

： 672 [sage] 2018/01/02(火) 12:55:35.34ID:???

>>675

ありがとうございますできました
これは上位階層に display:flex; をかけてるのがポイントなんですかね
CSSは奥深い

688

： Name_Not_Found [sage] 2018/01/02(火) 13:08:02.48ID:???

>>687

そう
flexは絶対に覚えたほうがいい
どんな組み方でもできるようになる

689

： Name_Not_Found [sage] 2018/01/02(火) 14:18:52.12ID:???

>>679

素人ばっかりだな。

690

： Name_Not_Found [sage] 2018/01/02(火) 14:34:41.29ID:???

>>689

ではプロの考えをどうぞ

691

： Name_Not_Found [sage] 2018/01/02(火) 14:47:25.76ID:???

>>675

display:flexなくてもいいのでは？
ブラウザ依存（互換性のためのハック）？

692

： Name_Not_Found [sage] 2018/01/02(火) 15:01:48.05ID:???

>>691

flexがないとheight調節がめんどくさい
上下どうでもいいって言ってるけど、一応例がそうなってるので合わせておいた

693

： 691 [sage] 2018/01/02(火) 15:49:09.84ID:???

>>692

ありがとう

自分に誤解してたところがあった
Runボタンを押さないと反映されないんだな

自分のやり方だと、.aと.bにdisplay:table-cellを使うことが多いが
自分にも参考になった

694

： Name_Not_Found [sage] 2018/01/02(火) 18:57:46.17ID:???

>>685

見た目はCSSの領分だよ
強制改行って意味のただのインラインレベル要素

695

： Name_Not_Found [sage] 2018/01/02(火) 23:58:57.00ID:???

本当、あまりにも素人が多すぎるわ。
aタグでいいって

696

： Name_Not_Found [sage] 2018/01/03(水) 00:10:11.62ID:???

>>693

table-cellはもうやめたほうがいい。本当にflex一本にした方がいい
table-cellは確かに強力だけど、float同様に時代遅れと、めんどくさいだけだと思う。
「table-cell」で検索すると「table-cellはやめろ」という検索結果が返ってくるレベル

俺もdlでdtにfloatかましてddで…とかやってたけど、たまにdtが複数行で
「ddよりdtの方が高い定義リスト(dl,dt,dd)を横並びさせる。」
ttp://blog.sakurachiro.com/2010/05/juxtaposition-of-definition-list/
とかやってたけど、バッドノウハウとしかいいようがない

もうflexでいい
というか頼むからflexにしてくれ
保守するのがめんどいんじゃ

697

： Name_Not_Found [sage] 2018/01/03(水) 00:16:07.63ID:???

>>694

改行は会話文を除けば、ほぼすべて見た目のため
＞見た目はCSSの領分だよ
言いたい事は分かるが、改行に関しては完全にhtmlとcssの間に存在している
これはpreなどで解決できる問題でもない
恐らく終わりのない問題だろう

698

： Name_Not_Found [sage] 2018/01/03(水) 00:30:22.12ID:???

レスポンシブにするにしてもfloatが一番楽だと思う。
floatレイアウトは本当に死ね。

699

： Name_Not_Found [sage] 2018/01/03(水) 00:41:39.97ID:???

>>697

どゆこと？
ここに強制改行が入りますよ、ってだけじゃん？br要素は

んでメディアがスクリーンやプリントだと
改行としてのスタイルで表示することがほとんどだけど
例えば音声メディアだったら大抵無視するスタイルなわけだし
今後ほかのメディアが出てきたとき、スクリーン、プリントと同じような表現ができるかどうかもわからんよ

700

： Name_Not_Found [sage] 2018/01/03(水) 11:48:39.71ID:???

だからさあ
あんたらが完全に分離したい（願望）ってだけであって
実際は、CSSでリセットでもしなきゃ見た目に影響がある状態なわけじゃん？
言語側が完成してないのに、不都合が出ないわけないんだよ

そもそもの話はブロックレベルとインラインの概念がもう無いから<a><div></div></a>はOK！
ってのをW3Cは撤回すべきって意見したんだが、本当にないならさ、今後
<font><body></body></font>とかもありって事になるんだぞ？グダグダすぎだろ

>>694

インラインレベル要素って言葉は無い。「ブロックレベル要素」と「インライン要素」な
ちゃんと勉強してから意見しろよな

701

： Name_Not_Found [sage] 2018/01/03(水) 14:15:58.72ID:???

そこじゃない。そもそも<a>がインライン要素なのがおかしい。どう考えてもinline-blockであるべき
インラインがブロックを包括できるのがおかしいのとは別問題

702

： Name_Not_Found [sage] 2018/01/03(水) 15:40:22.90ID:???

>>700

見た目に影響ってなんのこと？
デフォルトCSSのこと？

703

： Name_Not_Found [sage] 2018/01/03(水) 16:07:33.75ID:???

>>702

そうだよ
デフォルトのCSSって何だよｗ

704

： Name_Not_Found [sage] 2018/01/03(水) 17:02:21.53ID:???

ただ横に並べるだけなのに、色々なやり方があってよく分かんなくなるね

705

： Name_Not_Found [sage] 2018/01/03(水) 17:07:12.44ID:???

>>700

＞<font><body></body></font>とかもありって事になるんだぞ？
ならねえよ

便利でいいだろに
嫌なら使わなきゃいいだけ

706

： Name_Not_Found [sage] 2018/01/03(水) 17:24:09.29ID:???

>>703

ブラウザがデフォで設定してるCSSのことよ

707

： Name_Not_Found [sage] 2018/01/03(水) 17:54:56.88ID:???

デフォルトCSS分からないなら発言しない方がいいぞ・・・

708

： Name_Not_Found [sage] 2018/01/03(水) 17:57:12.99ID:???

htmlに静的ファイルをimportする機能ってありますか？

709

： Name_Not_Found [sage] 2018/01/03(水) 18:06:13.30ID:???

ありません

710

： Name_Not_Found [sage] 2018/01/03(水) 18:13:37.42ID:???

そうですか、残念です
jsで読み込むことにします

711

： Name_Not_Found [sage] 2018/01/03(水) 18:41:06.25ID:???

CSSありきの考えのやつは自分の環境でしか想像つかないんだろ
本文部分にしかソースを入れられないブログシステムとかガラケーとか触った事もないのかもな
なんでも自由にCSSが書けて、それが効いて、外部ファイルに書き出せてなんてのは
常にあたりまえのことじゃないんだぞ

712

： Name_Not_Found [sage] 2018/01/03(水) 18:52:58.49ID:???

>>711

ガラケーだって
見た目を制御してたのはブラウザの持っているCSSだったんだが

713

： Name_Not_Found [sage] 2018/01/03(水) 19:33:09.20ID:???

>>711

それ言い出せばキリがないだろ、何を言ってるんだ
一般的なサイトの話だ

714

： Name_Not_Found [sage] 2018/01/03(水) 19:36:51.18ID:???

仕事で答えてるわけじゃないし

715

： Name_Not_Found [sage] 2018/01/03(水) 20:25:20.23ID:???

いつまで

>>558

の話し続けるんだよ？ｗ

716

： Name_Not_Found [sage] 2018/01/03(水) 20:37:52.33ID:???

とっくに終わってるけど

717

： Name_Not_Found [sage] 2018/01/03(水) 21:38:02.82ID:???

>>558

の回答は完璧だった

718

： Name_Not_Found [sage] 2018/01/03(水) 22:27:53.89ID:???

>>717

いやHTML変わっとるやん

719

： Name_Not_Found [sage] 2018/01/03(水) 22:53:50.57ID:???

>>660

> ブロックレベルは改行されてインライン要素は改行されない仕様は何故残すんだ。
お前さんの理屈だと「改行される要素=ブロックレベル要素」だが、<span style="display: block"> はブロックレベル要素か？
<span><span style="display: block">block</span></span> はinvalidだと思ってるのか？
ブロックレベル要素が物理要素であるかのような論理に読めるんだがな

>>685

> じゃあなんだ？<br>は改行する仕様もCSSの領域か？
当然、そうだ
"user agent style sheet" の領域でCSS2時代から存在する
ttps://drafts.csswg.org/css-cascade/#cascading-origins

> 本当に分離してあるなら、文字の大きさも改行情報もインデントも
> 全て無い状態（デフォルト状態からリセットされていなる状態）になってないとおかしい。
"user agent style sheet" が予めデフォルトのスタイルシートを宣言してくれているからだ
完全にスタイルシートを無効化したら、改行が何もないテキストノードを書き連ねただけの文書となる

あなたはもっと、CSSを勉強した方がいいと思うぞ
他人を素人呼ばわりできる知識レベルではない

720

： Name_Not_Found [sage] 2018/01/03(水) 22:55:45.28ID:???

>>717

divにmaginが消えてるので2点/500点

721

： Name_Not_Found [sage] 2018/01/03(水) 23:01:22.79ID:???

>>719

その辺の知識はCSS2時代つーか
テーブルレイアウトからCSSに本格移行した時代を知らん子には厳しいかも知れん
知らなくても、ただページ作るだけなら困らんから

722

： Name_Not_Found [sage] 2018/01/04(木) 00:22:55.46ID:???

>>719

CSSの領域の事はそうだな。user agent style sheetであり、自分の間違いだわ

そもそもの話は、
ブロックレベル要素をインライン要素で包むのOKにしておかしくなったって話だったんだが、
今でも<p>を<span>で囲うと正しく認識されない。
結局、インラインとブロックレベルの概念が残されているのは事実なんだから、
きれいごとで済む話ではないって事

723

： Name_Not_Found [sage] 2018/01/04(木) 02:40:45.45ID:???

>>722

> 結局、インラインとブロックレベルの概念が残されているのは事実なんだから、
残されてはいない
お前さんはCSSだけでなく、HTMLも勉強不足のようだな

724

： Name_Not_Found [sage] 2018/01/04(木) 02:46:28.67ID:???

>>721

彼はCSSもそうだが、HTML5も理解してない感がある
仕様を知らないのに仕様に文句をつけるという自信過剰な態度が鼻につくんだな…

725

： Name_Not_Found [sage] 2018/01/04(木) 08:46:28.62ID:???

>>722

さん！お願いがあります！
発言する時はageてください！

726

： Name_Not_Found [sage] 2018/01/04(木) 13:37:56.31ID:???

ここでブロックだインラインだ言っても仕様が変わるわけないし戻るわけないし
そもそもスレ違いなんだが

727

： Name_Not_Found [sage] 2018/01/05(金) 01:23:41.61ID:???

仕様の話をするのは勉強になるからいいけど、

>>722

のように間違った情報を流布するのは止めてほしい

728

： Name_Not_Found [sage] 2018/01/05(金) 09:36:25.74ID:???

ブロック要素とかインライン要素といった区別は
なくなったということでOK？

まあ昔からインライン要素に他の要素を入れたり出来たしね

整理すると、

1. 要素毎に内包できる要素が定義されている

2. ブロックやインラインというのは要素の見た目の
違いでしか無く、CSSのdisplayで変更するもの

ということかな

729

： Name_Not_Found [sage] 2018/01/05(金) 11:59:46.72ID:???

昔からそうだぞ

730

： Name_Not_Found [sage] 2018/01/05(金) 14:37:07.30ID:???

このスレに書いてあることがすんなり理解できるレベルになりたい

731

： Name_Not_Found [sage] 2018/01/05(金) 14:52:08.31ID:???

あー、大丈夫大丈夫
フローコンテンツとかフリージングとかパルプンテとか
みんなよく分かってないからｗ

732

： Name_Not_Found [sage] 2018/01/05(金) 22:44:39.24ID:???

formのネスト不可なので替わりにいい方法ありますか？
●理想、希望

<form id="c">
　<input><select>など各種…(C)
　<form id="a">
　　<input><select>など各種…(A)
　　<button id="a-btn">
　</form>
　〜色々〜
　<form id="b">
　　<input><select>など各種…(B)
　　<button id="b-btn">
　</form>
　<input><select>など各種…(C)
　<button id="c-btn">
</form>

a-btn/b-btnクリックでそれぞれa/bをreset（jQueryのclickイベントを使用）
c-btnクリックでAB含むc全てをreset

●現状
formのネストは無し
(A)全てにform="a"属性、bも
(C)で心折れ、いい方法ないかと

jQqueryなどでタグを動的に生成するでなく、なるべくHTMLは固定させたし
どなたかお願いします

733

： 732 [] 2018/01/05(金) 22:45:44.53

ID

:eb3CNU7/

age忘れました

734

： Name_Not_Found [sage] 2018/01/05(金) 22:51:42.64ID:???

>>732

DIVでグループ化する

<div id="a">
　　<input><select>など各種…(A)
　　<button id="a-btn">
　</div>

735

： Name_Not_Found [sage] 2018/01/06(土) 00:04:36.81ID:???

>>728

> 1. 要素毎に内包できる要素が定義されている
HTML4.01, HTML5 共にその通りで、「内容モデル」が定義されている
ttp://https://momdo.github.io/html/dom.html#content-models">ttps://momdo.github.io/html/dom.html#content-models

> 2. ブロックやインラインというのは要素の見た目の
> 違いでしか無く、CSSのdisplayで変更するもの
ブロックやインラインと書かれても何を指しているのか分からん
とりあえず、CSSのdisplayプロパティの節を読んでみては？
ttps://momdo.github.io/css2/visuren.html#display-prop

---

736

： 735 [] 2018/01/06(土) 00:17:13.91

ID

:jObwJmXH

> ブロックやインラインと書かれても何を指しているのか分からん
一つ付け加えると、HTML4.01のブロックレベル要素とCSSのブロックボックスが別概念だという事
HTML5では前者の概念がなくなったので、残ったのはCSSの方だけだが、どちらの意味で使っているかによって本質が変わる
そういう意味では、仕様が指す用語は正確に使った方がいい

737

： Name_Not_Found [sage] 2018/01/06(土) 00:51:54.84ID:???

>>732

ttps://jsfiddle.net/cazcvx1a/
こんな感じ。ただしselectには対応していない

リセットする対象が、DOMツリーの構造で決まるなら
押されたボタンを含む親グループ・・・の子input要素に対して
リセットをすればいい

formだとreset()メソッドが有るが、input要素などにはないので
自分で作る必要がある。inputはdefaultValueを使うだけ
selectだったらdefaultSelected、checkboxだとdefaultCheckedから
初期状態は取得できる。その値に戻せば良い

ちなみに昔、inputやselect要素などにreset()メソッドを追加する
jQueryプラグインを書いたことが有る
$('input, select').reset() などとできて便利

738

： Name_Not_Found [sage] 2018/01/06(土) 01:00:09.24ID:???

>>734

各種のリセットどうすんの？

739

： Name_Not_Found [sage] 2018/01/06(土) 01:57:02.78ID:???

>>700

> <font><body></body></font>とかもありって事になるんだぞ？グダグダすぎだろ
そもそも、font要素はHTML5で廃止されてるから使えないのでは？
君の時計は1999年から進んでないのね

740

： Name_Not_Found [sage] 2018/01/06(土) 02:01:40.72ID:???

>>738

>>737

ですでに答えは出てるが
defaultValueやdatasetに初期値を書いておいてその値を代入すればいい
そうでなければonDOMContentLoadedで初期値をキャッシュしておく

一応代案として
外側の<form>を<div>に変更する

外側の<form>（内包するformのすべての値）をひとまとめにして送信したいなら、
別の場所に書いた<form>に値をコピーするのが簡単だろう

<div id="c">
<form id="a">
</form>
<form id="b">
</form>
<button> ・・・#a、#bをreset()
<button> ・・・#a、#bの内容を#zにコピーして#zをsubmit()
</div>

<form id="z">
<input type="hidden"> ...
</form>

idにするかclassにするかはご自由に
jQueryの話はjQueryのスレッドへどうぞということで

741

： Name_Not_Found [sage] 2018/01/06(土) 06:03:51.82ID:???

年またぎの

>>558

痛すぎだからw

742

： Name_Not_Found [sage] 2018/01/06(土) 11:08:09.57ID:???

>>737

selectもですがcheckboxやradioなど全種のパーツがあるので
いくつかeachする必要があるということですね
1つのfunctionでABC共有できそうです
jQueryで一時的にタグを変えることも検討してましたが
それよりは無理やり感がなくてよさそうです
form属性と並列で検討していきます。ありがとう

それにしても
設定でそのタブだけや、対戦対局で2つ同系列の片方だけresetするなど
formのネストの需要はけっこうありそうですけどね

743

： Name_Not_Found [sage] 2018/01/06(土) 11:12:35.63ID:???

>>739

それもそうだし、HTML4でfont要素がbody要素を内包できないのは、インライン要素がブロックレベル要素を内包できないルールによるものじゃないしね
彼はbody要素もブロックレベル要素と勘違いしてるんでしょ
というわけで、彼はHTML4もまともに理解してないと思うよ

744

： Name_Not_Found [sage] 2018/01/06(土) 14:45:05.87ID:???

>>742

formはGET/POSTする塊を表すものだから
フォーム内でグループを作るのはfieldsetがいいだろう

fieldsetのdisabled属性は子孫要素をまとめてdisabledにするんだから
同じ考えでresetメソッドがあってもいいと思うんだけどね

cookieを読み書きするやつとか、jQueryプラグインにする必要がない
プラグインが多い中、フォーム関連の要素のresetを行うものは
jQueryプラグインどころかコアにあってもいいと思うんだけどな

745

： Name_Not_Found [sage] 2018/01/06(土) 15:38:10.63ID:???

>>734

と

>>740

は別人？
回答になってない734をフォローした？

746

： Name_Not_Found [sage] 2018/01/06(土) 15:41:01.48ID:???

>>744

でもfieldset内だけでリセットできないよね

747

： Name_Not_Found [sage] 2018/01/06(土) 15:41:55.53ID:???

別人。別に734をフォローしてない
使えない回答だと思った程度で忘れた。参考にすらしてない。
俺のコードが734と似てると思ったのであったら心外だｗ

748

： Name_Not_Found [sage] 2018/01/06(土) 15:42:31.29ID:???

>>746

できるなんて言ってない

749

： 734=740≠737 [sage] 2018/01/06(土) 16:13:34.47ID:???

グループ化するのはdivしかないので、737とHTMLが同じになるのは当然かと

>>734

<div id="a">
　　<input><select>など各種…(A)
　　<button id="a-btn">
　</div>

>>737

も省略してないだけで<div>で囲ってるのは同じ
<div id="a" class="form-group">
<input value="a"><select><option>a1</option><option>a2</option></select>
<button id="a-btn" class="reset-button">reset #a</button>
</div>


fieldsetも考えたけど汎用タグとしてdivを使った
まあ、グループごとにリセットできる機能がほしいと思うことはままある

750

： Name_Not_Found [sage] 2018/01/06(土) 17:16:52.23ID:???

>>748

では今リセットには関係ないことだな

751

： Name_Not_Found [sage] 2018/01/06(土) 17:39:46.34ID:???

>>744

はレスする相手が間違ってるんだよ
それと質問を解決する手段でもないのならややこしくなるだけなので書かないほうがまし

752

： Name_Not_Found [sage] 2018/01/06(土) 20:44:11.05ID:???

質問はもう解決してる。だから問題ないだろ。

753

： Name_Not_Found [sage] 2018/01/06(土) 20:44:55.61ID:???

>>750

フォームのネストに関係ある話をしてる

754

： Name_Not_Found [sage] 2018/01/06(土) 23:04:47.59ID:???

cssの色指定でrgbaでrgbとaを別々に指定する方法はないでしょうか？
opacityは文字まで透過してしまうので使いたくありません

755

： Name_Not_Found [sage] 2018/01/06(土) 23:22:42.79ID:???

？

756

： Name_Not_Found [sage] 2018/01/06(土) 23:33:17.11ID:???

>754
文字以外透過にしたいなら、backgroundに色つけてそれを操作すれば良いだけでは

757

： Name_Not_Found [sage] 2018/01/06(土) 23:44:17.29ID:???

>>754

話が理解できない人は困るねｗ

758

： Name_Not_Found [sage] 2018/01/06(土) 23:46:10.73ID:???

CSSでやるのは無理かもしれないね
sass（scss）を使うと変数とか計算で
指定することができるよ

759

： Name_Not_Found [sage] 2018/01/07(日) 00:06:09.67ID:???

var()使えばできる。:rootで変数に定義してvarで吐く

760

： Name_Not_Found [sage] 2018/01/07(日) 00:06:55.35ID:???

>>758

CSSの変数を使うことで解決できました！
ありがとうございます

761

： Name_Not_Found [sage] 2018/01/07(日) 00:27:32.78ID:???

やべえ全然何言ってるかわかんなくて泣く

762

： Name_Not_Found [sage] 2018/01/07(日) 14:57:00.09ID:???

大丸画像に重ねて小丸画像をのせた二重丸のような形から、大丸にホバーで大丸の色が変わった後に小丸にホバーが移ると色が戻りますが戻らないようにしたいです。小丸に同じスタイルを適用するのではなく、小丸のホバーを無効？にできますか？
どちらもa要素です

763

： Name_Not_Found [sage] 2018/01/07(日) 15:08:34.39ID:???

大丸画像です

ttps://www.daimaru.co.jp/common/images/head_logo01.gif

764

： Name_Not_Found [sage] 2018/01/07(日) 15:10:50.98ID:???

>>762

そもそもaはネストできない
HTMLを勉強してでなおしな

765

： Name_Not_Found [sage] 2018/01/07(日) 15:36:00.91ID:???

>>762

jsでclassをつけるような形なら、まぁなんとでも

766

： Name_Not_Found [sage] 2018/01/07(日) 15:36:18.94ID:???

>>763

それはヨミながら思ってたけどさぁｗ

767

： Name_Not_Found [sage] 2018/01/07(日) 15:37:37.04ID:???

>>764

div< <a大丸><a小丸> > でcssで重なって見えるようにしてるだけだけどこれもネスト？
一応リンクは動いてます

768

： Name_Not_Found [sage] 2018/01/07(日) 15:39:33.51ID:???

>>765

挑戦してみます!ありがとう

769

： Name_Not_Found [sage] 2018/01/07(日) 15:51:26.79ID:???

ビットコインの値動きをブラウザ更新するたびに読み込むシステム組みたいのですが、取引所からAPI引っ張ってきてhtml内に組み込めば表示されるようにできますか？

770

： Name_Not_Found [sage] 2018/01/07(日) 16:08:12.45ID:???

ちょっと投げっぱなしすぎないか

771

： Name_Not_Found [sage] 2018/01/07(日) 16:17:43.85ID:???

>>769

取引所のページを更新すれば良いだけでは？

772

： Name_Not_Found [sage] 2018/01/07(日) 16:49:09.04ID:???

申し訳ない
自分のサイト上に現在価格だけ表示したくて色々調べてたんだけど取っ掛かりが掴めなくて抽象的な質問になってしまった。

773

： Name_Not_Found [sage] 2018/01/07(日) 16:51:45.05ID:???

更新する度に火パってくると速攻でアクセス禁止になる
cronで5分に一回ダウンロード、ダウンロードしたデータを見るようにするといい

774

： Name_Not_Found [sage] 2018/01/07(日) 17:04:40.19ID:???

>>773

なるほど、アク禁のことまで考えていませんでした。cronを調べつつ努力してみようと思います。ありがとうございます

775

： Name_Not_Found [sage] 2018/01/07(日) 17:52:57.02ID:???

>>753

見れば分かるし関係ないな

776

： Name_Not_Found [sage] 2018/01/07(日) 19:17:44.50ID:???

> formのネスト不可なので替わりにいい方法ありますか？
> formのネストの需要はけっこうありそうですけどね

これよめ。フォームのネストの話をしてるんだよ

777

： Name_Not_Found [sage] 2018/01/07(日) 19:41:30.14ID:???

お前もいい加減しつこい。
質問者はfieldsetを使ってないとは書いてないし、fieldsetにして問題解決になるわけでもない。
質問者が明らかに誤りをしてるなら指摘アドバイスもいいがどうでもいい。

778

： Name_Not_Found [sage] 2018/01/07(日) 20:26:36.96ID:???

>>776

その質問者ですが当初fieldsetやdisabledやname属性でやってみたりしました

結局

>>737

さんの方法でcheckbox、radio、selectなど全てできました
プラグインは面倒なのでfunction(resetするエリアのid)としました
その節はどうもでした

779

： Name_Not_Found [sage] 2018/01/07(日) 20:45:58.24ID:???

>>777

いい加減関係ない人は首を出さないでくれないかね？
俺は質問者と話をしてるんだよ

780

： Name_Not_Found [sage] 2018/01/07(日) 22:49:29.18ID:???

質問者にとって何の利益もないことを蒸し返す粘着

781

： Name_Not_Found [sage] 2018/01/07(日) 23:19:16.12ID:???

利益ないし質問そのものに関係ないしな

782

： Name_Not_Found [sage] 2018/01/08(月) 00:35:13.40ID:???

プログラム板C++のスレで話題になっているんだが、
ttp://mevius.2ch.net/test/read.cgi/tech/1511509970/

日本語と英単語が混在した文章で、
英単語と日本語の境界に半角スペースを（見た目だけ）挿入するのって、CSSだけじゃ無理だよな？
具体的には、「定数を示すキーワードは const です」みたいに表示するとか。

783

： Name_Not_Found [sage] 2018/01/08(月) 00:53:05.93ID:???

利益の有無は質問者が判断すればいいことであって、第三者がいちいち突っかかることが無意味

784

： Name_Not_Found [sage] 2018/01/08(月) 00:57:56.97ID:???

>>782

無理だなぁ
英語だけ幅広フォントで
ーワードは c o n s t で
みたいなのなら実現できるけど。フォントから作らんとアカンけど。

785

： Name_Not_Found [sage] 2018/01/08(月) 02:00:43.25ID:???

>>784

やっぱそうか。サンクス。
どうやら今は半角スペースを文書内に混ぜているようだから、需要はあるって事で、
標準化に携わっている奴が居たら提案しておいてくれ。

786

： Name_Not_Found [sage] 2018/01/08(月) 02:20:20.35ID:???

やるならjavascriptで正規表現でa-zと先頭末尾を識別してタグ挿入とかだろな

787

： Name_Not_Found [sage] 2018/01/08(月) 05:25:19.66ID:???

>>782

せいぜいこんな感じじゃないかな

<p lang="ja">定数を示すキーワードは<span lang="en">const</span>です</p>

p[lang=ja] > span[lang=en]:before,
p[lang=ja] > span[lang=en]:after{content:" ";}

タグを使わずに、文章内の一部分に適用するのは無理
スタイルはタグ（要素）に適用されるものだから

788

： Name_Not_Found [sage] 2018/01/08(月) 07:57:50.64ID:???

>>787

一文字目だけに適用されるcssもある
使ったこと無いし名前も忘れたけど

789

： Name_Not_Found [sage] 2018/01/08(月) 09:09:20.62ID:???

>>788

:first-letter擬似要素

日本人には馴染みがないんだけど
英語には最初の文字を強調して段落をわかりやすくするinitial capsていう文化があるんよ
raised（上）、drop（下）、hanging（横）にはみ出させるのがある

790

： Name_Not_Found [sage] 2018/01/08(月) 09:30:53.19ID:???

何が勉強して出直せだよw
お前こそ勉強してよw

791

： Name_Not_Found [sage] 2018/01/08(月) 09:48:46.14ID:???

>>764

へのレス？

792

： Name_Not_Found [sage] 2018/01/08(月) 10:11:35.00ID:???

>>787

MDNの ::first-letter のページでは、半角スペースが挿入されている。
ttps://developer.mozilla.org/ja/docs/Web/CSS/::first-letter
自動挿入する場合はタグでも半角スペースでも手間は変わらないから、
現実的に、こちらの方がいいという判断なのだろう。
（この場合は、画面の端まで行って結果的に改行され、
偶々半角スペースが次行の行頭に来てしまった場合、
《俺が試した限り》その半角スペースは全行末尾に表示され、
行頭が英単語でも行頭に半角スペースが表示されることがない。
なお、タグの場合でも同じかもしれんが）

CSSで切り替えることを諦めるなら、
・DB上はスペースなし、
・鯖側で挿入、または
・JavaScriptで挿入、
といったところか。

793

： Name_Not_Found [sage] 2018/01/08(月) 11:07:46.27ID:???

逆に日本語の文字同士だとソース内の改行が
消されるようになったブラウザ（FF）はあるな
→　こんな感じに「…改行が消される…」

794

： Name_Not_Found [sage] 2018/01/08(月) 12:01:21.70ID:???

>>793

そのレス、chromeでもFFでも見た目変わらないし、俺には意味が分からないが。

改行はHTMLの仕様で表示しないことになっているし、
明示的に改行したければ<br>挿入するしかないだろ。
というか、HTML的には<p>内の改行は自動で行われるべきであって、
2chみたいに各ユーザーが各自の環境に合わせて改行を入れるのは悪手となっている。
この俺のレスみたいに改行して欲しいのなら、全ての句読点に<wbr>挿入しろってことだろ。

795

： Name_Not_Found [sage] 2018/01/08(月) 12:33:08.87ID:???

改行は表示上半角スペースに変換されるだろう、今更何を言ってるんだ

796

： Name_Not_Found [sage] 2018/01/08(月) 12:59:01.84ID:???

>793 の消されるは、
ソース内の newline 文字は、表示上は space 1 個分の空きではなく本当に空間を占めなくなる、という意味な。

797

： Name_Not_Found [sage] 2018/01/08(月) 13:18:07.51ID:???

>>783

>>778

の通り無意味なことは最初からわかる

798

： Name_Not_Found [sage] 2018/01/08(月) 13:24:59.70ID:???

>>767

大丸と小丸はリンク先おんなじなん？
だったらaひとつにしてカドマルにしてボーダーと背景色でおんなじことできるぞ

799

： Name_Not_Found [sage] 2018/01/08(月) 13:36:44.01ID:???

ttp://yume.hacca.jp/koiki/css/midashi/midashi8.htm
を、spanを使わずに実現することは可能でしょうか？

ttps://jsfiddle.net/zdndgdf6/
こんな感じで作ってみましたが、contentの"."が残ってしまいます
fontsizeを0にすると今度はborderが消えてしまいます

width:0とoverflowでなんとか出来ないかと思いましたが、なんかずれてしまいます
ttps://jsfiddle.net/zdndgdf6/2/

何か良い方法はありますか？

800

： Name_Not_Found [sage] 2018/01/08(月) 14:03:37.09ID:???

>>799

>contentの"."が残ってしまいます

簡便に片付けるなら “.” の代わりに &nbsp; にあたる文字にする
（ Unicodeエスケープで書けば明瞭）
スペースでもOKかも？

801

： Name_Not_Found [sage] 2018/01/08(月) 14:15:32.26ID:???

違う、afterを使う
ケツに要素を置いてabxoluteで持ってくる。border-leftじゃなくbackgroundにする
そうすればずれない


.h4title4 {
position: relative;
font-size: 120%;
margin: 10px;
padding: .75em 1em .75em 1.5em;
border: 1px solid #ccc;
}
.h4title4::after {
position: absolute;
top: .5em;
left: .5em;
content: '';
width: 6px;
height: -webkit-calc(100% - 1em);
height: calc(100% - 1em);
background-color: #3498db;
border-radius: 4px;
}

それとfont-size0でborderが消えるんじゃなくてheightが0になるから見えなくなるだけ。heightを設定すれば良い

802

： Name_Not_Found [sage] 2018/01/08(月) 14:21:20.56ID:???

>>799

content: ".";でやりたいなら、text-indent:-9999px;付ければ解決はする
ttp://https://jsfiddle.net/m0yr11rs/">ttps://jsfiddle.net/m0yr11rs/

803

： 802 [sage] 2018/01/08(月) 14:25:33.77ID:???

URL間違ってたわ　こっち
ttps://jsfiddle.net/z76u3mvw/

804

： Name_Not_Found [sage] 2018/01/08(月) 14:35:42.82ID:???

>>797

質問者は無意味とはいってないが、第三者が指摘したことは無意味だった

805

： Name_Not_Found [sage] 2018/01/08(月) 14:39:43.58ID:???

>>799

です、いろいろな方法ありがとうございました！

806

： Name_Not_Found [sage] 2018/01/08(月) 15:48:02.70ID:???

>>804

それで解決すると勘違いするとこでしたので指摘は意味がありました

807

： Name_Not_Found [sage] 2018/01/08(月) 16:01:33.96ID:???

違いの分からない男は最高にかっこ悪いな

808

： Name_Not_Found [sage] 2018/01/08(月) 16:31:01.83ID:???

フラットデザイン、マテリアルデザインなどがありますが、
その前のデザインにはは何か名前があったのでしょうか？

809

： Name_Not_Found [sage] 2018/01/08(月) 16:50:42.58ID:???

>>807

form（+fieldset）かdivかが問題ではなかった
少なくとも質問者は知っていた

810

： Name_Not_Found [sage] 2018/01/08(月) 17:04:13.35ID:???

>>808

ないよ。あったとしても一般的ではなかった。

2005年くらいにWeb2.0風デザインみたいな流れがあって
ボタンがやたらテカテカ、ツヤツヤ、とかMac風デザインとかあったけど
論理的、定量的に行うようなものでは決してなかった。

811

： Name_Not_Found [sage] 2018/01/08(月) 17:10:42.31ID:???

>>810

なるほどー、ありがとうございます

812

： Name_Not_Found [sage] 2018/01/08(月) 20:33:47.25ID:???

テンプレートを弄ったことは在るが、フルスクラッチで作ったのが初めてなので
奇特な方レビューしてもらえないでしょうか？
ttp://www7b.biglobe.ne.jp/~megatherium/
色合いとか線の太さとかマージンの広さとかのバランスがよう分かりませんわ

813

： Name_Not_Found [] 2018/01/08(月) 21:12:07.84

ID

:HPH8+uaN

urlに含まれる文字列で ! には何か特別な意味がありますか？
と言うのは、以前どこかで
example.com/!aaa
example.com/#!aaa
どっちか忘れたのですがこんな記述を見たのですが。
aaaは何らかのキーワードです。

814

： Name_Not_Found [sage] 2018/01/08(月) 21:22:32.07ID:???

>>812

パット見、海外の怪しいソフトみたい。ダウンロードしたくない、というかしてはいけない感じがしてくる

とりあえず
・基本的に文字サイズはgoogle辺りを真似すると良い。フォントはでかすぎる
・でかい画面でどうなるかも確認したほうがいい。倍率を変えれば擬似的に確認できる

良い
・cdn使ったのは正しい。
・アイコンフォントも正しく使えている○

悪い　デザイン
・色を使いすぎ。青、緑、茶色、紫って虹か。ゲイか？配色はもう少し勉強した方がいい

悪い　全体
・レスポンシブが壊滅的。まぁPCソフトならやらんでもいいっちゃいいけどね
・上のでかいバナーが邪魔すぎる。うざい。googleの検索画面ぐらいで良い。それとhomeへのリンクをつけ、更にh1で囲む
・guideをクリックするのがめんどくさすぎる。マウスオーバーでアコーディオンだsu
・下のhomeはパンくずと思うけど、homeにパンくずは不要
・referenceの右側なんで開けてるの？広告載せるスペースならとりあえずダミーとか入れておいてほしい。何も入れないなら中央揃えにする
・イメージ画像へのリンクはいらん
・htmlが惜しい。以下のようにすればすっきりする
<body>
<header>内容</header>
<article>内容</article>
<footer>内容</footer>
</body>

途中で飽きたけど、ヘッダは小さくすれば大体こんな感じ
ttps://i.imgur.com/JqpRXXV.png

815

： Name_Not_Found [sage] 2018/01/08(月) 21:22:47.27ID:???

>>813

ないけどバグりやすいから使わない方がいい

816

： Name_Not_Found [sage] 2018/01/08(月) 21:28:02.31ID:???

#! はハッシュバングだね
Ajaxで操作するためのハッシュ
! は要らないんだけど、昔Google Botが上手く処理できないから作ったもので、それを「SEOのために必要」と勘違いした人たちがこぞって付けてた
今はpushStateができたので完全に不要

817

： Name_Not_Found [sage] 2018/01/08(月) 21:29:56.92ID:???

アンカ忘れた

>>816

は

>>813

宛

818

： Name_Not_Found [sage] 2018/01/08(月) 22:36:18.79ID:???

>>814

詳しいレビューありがとうございます。とりあえず速攻で出来る色を減らすは実行してみました
が、refarenceの中でで使っている色がどうもしっくり来ないのでとりあえずそのまま
あとバナーにリンク張るのと中央揃えは済ませました
flexは今日覚えたばかりで使いこなせていませんね

色々参考になります、ありがとうございました。

819

： Name_Not_Found [sage] 2018/01/08(月) 22:45:52.82ID:???

>>812

スマホで開いたら右側に変なスペースが開いてるね
まあPCソフトだしスマホは無関係だからいいのか

820

： Name_Not_Found [sage] 2018/01/08(月) 22:58:49.86ID:???

>>819

justify-content: center;が効いていないんですかね？
一筋縄ではいかない物ですね

821

： Name_Not_Found [] 2018/01/08(月) 23:28:35.42

ID

:0+qDTiQC

XSLの質問もここで良いですか？
要は、とあるXSLコードのSVGへの適用方法を知りたいです。

環境：　Win7-Pro､FirefoxとChrome

822

： Name_Not_Found [sage] 2018/01/08(月) 23:58:14.91ID:???

>>820

なんかソフトウェアの画像とメニューのとこの一部が右側にはみ出てる
横画面にすると画像は収まるけどメニューのはみ出しはそのまんま

823

： Name_Not_Found [sage] 2018/01/09(火) 00:47:46.47ID:???

>>822

スマホのときは画像を小さくする小細工が要るんだな
もう少し研究しますわ

824

： Name_Not_Found [sage] 2018/01/09(火) 07:37:25.78ID:???

>>823

imgにwidth:100%をつけるだけでいい
あと「番組名のフォルダー」のフォントを変えて強調しなくていい。分かる。強調するのはリンクをつける時。逆にリンクが無くて腹立つ
それとはみだしてるのはヘッダメニュー。メニュー〜カウンタ〜言語選択、全部縦並びにでもしてみては

825

： Name_Not_Found [] 2018/01/09(火) 12:53:46.23

ID

:6q+5s9h4

サブページのナビゲーションメニューからトップページの各所へページ内リンクをしている（#aaa，#bbb，#cccとします）のですが、
「パソコン画面での#aaaへのリンクのみ」がうまく飛ばず、トップページの一番上（ファーストビュー）が表示されます。

・#aaaはページ内リンクとしては一番上（トップページのファーストビューでは見切れています）
・ナビゲーションメニューはスマホ版とPC版で別のもの表示切替えして使っていますが#aaaへのリンクは同じ（コピペ）です
・スマホ画面ではちゃんと飛びます（chromeのデベロッパーツールで確認）
・ieでもためしましたが結果は同じでした

どのような原因が考えられますでしょうか？

826

： Name_Not_Found [] 2018/01/09(火) 12:59:07.73

ID

:6q+5s9h4

補足
今確認しましたが、アドレスバーへのurl直打ち（●●●.com/#aaa）でも、スマホ版だと飛んで
PC版は飛ばない（同様にトップページの一番上に飛ぶ）です

827

： Name_Not_Found [sage] 2018/01/09(火) 13:14:36.40ID:???

ファーストビューに大きな画像があって、imgタグにheightが指定されていないとか
Ajaxでコンテンツ取得して表示してるとか

828

： Name_Not_Found [] 2018/01/09(火) 14:33:16.44

ID

:6q+5s9h4

なんか色々いじってたら解決できましたｗ
原因はうまく説明できないですが、#aaaを含むクラス名を#bbb,#cccと同じにしたらちゃんと飛ぶようになりました
なのでクラス名を同じにしてレイアウトをhtml側のstyle属性で調整することで一応解決しました
#aaa含む要素のcss設定に問題があったのかな…と思ってます

829

： Name_Not_Found [sage] 2018/01/09(火) 14:52:58.01ID:???

クラス名？

830

： Name_Not_Found [sage] 2018/01/09(火) 23:11:05.10ID:???

昨日レビューしてもらったものだが、まだ途上だし指摘もこなせていませんが出来る限り直してみました
ttp://www7b.biglobe.ne.jp/~megatherium/

皆さんのおかげで少しは見れるものに近づいたと思います。色々ありがとうございました

831

： Name_Not_Found [sage] 2018/01/09(火) 23:33:40.33ID:???

よかったね これからも頑張ってください

832

： Name_Not_Found [sage] 2018/01/10(水) 00:50:51.40ID:???

はい、ありがとうございます、頑張ります
また何か聞きたいことできたらそのときはよろしくお願いします

833

： Name_Not_Found [sage] 2018/01/10(水) 11:51:31.88ID:???

>>816

詳しい説明有り難うございました。

834

： Name_Not_Found [sage] 2018/01/10(水) 12:15:58.30ID:???

シバンを見るとJSよりもFlashやってた頃を思い出す

835

： Name_Not_Found [sage] 2018/01/10(水) 19:00:50.07ID:???

アフィカスだと教える気が起きないんだが、
こういうフリーソフト作ってる人とか
プログラマーとかだと何故か教えてあげたくなる不思議・・
俺だけかな

836

： Name_Not_Found [sage] 2018/01/11(木) 12:13:03.78ID:???

ローカルで見た時とサーバーに上げたときの見た目が異なります。
cssに書いたdisplay:noneがサーバーから見ると消えてるんですがどうしたらいいですか？
fc2ホームページを利用しています
ttps://i.imgur.com/a/k1SPD

837

： Name_Not_Found [sage] 2018/01/11(木) 13:07:13.14ID:???

アップロードしたファイルの反映に時間が掛かってるとかじゃ？
サーバー側CSS（HTMLも）がローカルのものと同一か確認してみよう
ブラウザのキャッシュも疑って

838

： Name_Not_Found [sage] 2018/01/11(木) 16:30:26.62ID:???

>>837

仰るとおり時間を開けてアクセスしたら思ったとおりの表示でした。ありがとうございます

839

： Name_Not_Found [sage] 2018/01/11(木) 21:14:33.27ID:???

>>836

で思ったけど、
例えばあるページを保守していたとして、
更新してもCSS反映にラグがあるとページを見た人が不完全なものを見ることになってしまうけど、こういうのってどう対処してるの？

840

： Name_Not_Found [sage] 2018/01/11(木) 21:23:38.83ID:???

バージョンとかUnixタイムとか

841

： Name_Not_Found [sage] 2018/01/12(金) 08:54:35.99ID:???

スーパーリロードじゃろ

842

： Name_Not_Found [sage] 2018/01/12(金) 13:46:58.02ID:???

アクセスしたときの現在時刻からCSSのバージョンつけてるわ

843

： Name_Not_Found [sage] 2018/01/12(金) 13:56:43.60ID:???

aタグ池沼まだ暴れてる？

844

： Name_Not_Found [sage] 2018/01/12(金) 16:08:16.18ID:???

no-cacheが更新がすぐに反映される上にキャッシュ利用されて書き換え箇所も少なく一番良いと思う

845

： Name_Not_Found [sage] 2018/01/13(土) 18:27:38.33ID:???

>>844

あんまり詳しくないけど、それって自鯖の話？

846

： Name_Not_Found [sage] 2018/01/13(土) 18:33:57.65ID:???

ヘッダだからhtaccessかね

847

： Name_Not_Found [sage] 2018/01/13(土) 19:26:08.67ID:???

metaじゃない？全く効かないけどそれ

848

： Name_Not_Found [sage] 2018/01/13(土) 23:39:58.89ID:???

phpならheader関数でいける

849

： Name_Not_Found [sage] 2018/01/14(日) 02:55:57.66ID:???

>>847

no-cacheってキャッシュしないってことじゃないぞ

850

： Name_Not_Found [sage] 2018/01/14(日) 03:47:01.20ID:???

金がないってことだ

851

： Name_Not_Found [sage] 2018/01/14(日) 04:18:43.54ID:???

metaタグで通用するのは古いブラウザだけだぞ

852

： Name_Not_Found [sage] 2018/01/16(火) 00:07:01.38ID:???

目的はキャッシュさせないことではなく
更新を反映させることなんでは

853

： Name_Not_Found [sage] 2018/01/16(火) 00:22:52.76ID:???

>>852

no-cacheは常に更新確認をした上で更新が無ければキャッシュを利用するすごい奴だよ

854

： Name_Not_Found [sage] 2018/01/18(木) 01:44:08.32ID:???

質問です。
某ECサイトでアコーディオン（折りたたみ）メニューが作りたいのですが、以下の制限でどうにか作る方法はあるでしょうか？

・javascript禁止
・CSSインライン表記のみ（外部・ヘッダー表記不可）
・onclick属性不可（onclickという文字がソースから消去される）

擬似クラスとかのインライン表記（style=":active {処理}みたいな）とかも試してみたのですが、
もうすでにHTMLの仕様から消されてる？とかで使えなかったです・・・。

855

： Name_Not_Found [sage] 2018/01/18(木) 04:46:30.77ID:???

>>854

チェックボックス使ってそれっぽいことしたことはあるけど
あんまりオススメせんな

それやることよりも
その程度のJS書ける自由度のない
もしくは用意のないCMS使ってることを改善する方が先な気がする

856

： Name_Not_Found [sage] 2018/01/18(木) 05:00:42.05ID:???

>>854

タグ書けるなら<style></style>で書きゃーいい。アコーディオンで遊んだことあるけどラジオですりゃいけるぞ

857

： Name_Not_Found [sage] 2018/01/18(木) 08:37:42.38ID:???

>>856

ヘッダー表記無理と言っているのが読めない？

858

： Name_Not_Found [sage] 2018/01/18(木) 08:47:02.90ID:???

なんだとこの野郎！！！！

859

： Name_Not_Found [sage] 2018/01/18(木) 10:04:45.40ID:???

文法違反になるけど<body>内に<style>を書いても適用される
（ブラウザのバージョンアップで使えなくなる可能性もあるけど）

onclick属性やonclickという文字列が使えないだけなら別の方法でいけるが
javascript禁止ならダメだな

860

： Name_Not_Found [sage] 2018/01/18(木) 10:07:07.57ID:???

やほおの使ったことあるけど
ちょっとでも自由にしたいならトリプル契約すべき
linkタグは使えるからジオシティーズドメインで読み込め

861

： 854 [sage] 2018/01/18(木) 12:00:47.29ID:???

レスありがとうございます。
<body>内の<style>も以前試したのですが、
<style></style>間の表記がまるごとテキスト変換（pre?）されて表示されてしまい無理でした。

チェックボックスでやる方法は、結局、擬似クラス？（input:checked）でチェックしてるみたいで、
インラインで表記が出来ず、諦めてしまったのですが、
ただ単に書き方が悪かっただけなのかな・・・
もっと試してみます。

>>860

事情があり、有料契約できないのですよねorz

862

： Name_Not_Found [sage] 2018/01/18(木) 14:13:46.54ID:???

JavaScript禁止でcssはインラインのみとか不可能じゃん
:checkedも使えないってことでしょ

863

： Name_Not_Found [sage] 2018/01/18(木) 17:02:19.78ID:???

ダイヤログウインドウ出したいんですがjquey ui使うのが普通ですか？

864

： Name_Not_Found [sage] 2018/01/18(木) 17:41:54.50ID:???

>>861

手っ取り早いのはそのアコーディオン無しで見やすいものを作ることじゃない。
アコーディオン使うくらいだからメニュー項目がどっさりあるのかもしれんが…

865

： Name_Not_Found [sage] 2018/01/18(木) 18:52:11.79ID:???

そもそもなんでインライン表記のみなの？？

866

： Name_Not_Found [sage] 2018/01/18(木) 20:14:25.57ID:???

>>854

CSSルールがなければいけるんだけどな……
ところで、ONCLIConclickKって書けばonclickできたりしないかな

867

： Name_Not_Found [sage] 2018/01/18(木) 22:13:23.78ID:???

>>865

ヤフーとか楽天を実務レベルでやった事ない人には
この苦労や仕様はきっと理解できなだろう・・マジつらいんだよな

なんでそんな糞モール使うかって、
そりゃ無名店でも自社ECより集客が格段にあるからなんだが
それにしてもトリプル申し込めないなら、アコーディオンなんてやろうとしちゃいけない。
昔cssだけでカルーセル設置したけど運用していく上でも糞すぎたわ

868

： 854 [sage] 2018/01/18(木) 22:50:47.29ID:???

とりあえず

>>864

の方面で考える事にしました。ありがとうございました。
メニューはどっさりあるのですが、ECサイト自体の機能と組み合わせることで、
大見出しのみでもなんとか妥協できるような機能性・デザインにはできそうです。
これ以上はスレ違いなので・・・

>>866

今、管理システムがメンテ中なので試せませんが、自分のローカル環境ではその表記では動作しませんでしたねー。

869

： Name_Not_Found [sage] 2018/01/19(金) 00:58:28.42ID:???

>>857

body内に書くんだよ

870

： Name_Not_Found [sage] 2018/01/19(金) 01:29:23.87ID:???

>>857

馬鹿だなぁ勉強しなおせよ

871

： Name_Not_Found [sage] 2018/01/19(金) 01:49:49.28ID:???

>>869-870

それでも結局ダメなんだけどね

872

： Name_Not_Found [sage] 2018/01/19(金) 02:53:44.95ID:???

おい表出ろよ

873

： Name_Not_Found [sage] 2018/01/19(金) 06:57:22.54ID:???

>>869-870

バカなの？

874

： Name_Not_Found [sage] 2018/01/19(金) 12:03:37.43ID:???

結局最初の回答が合ってたな

875

： Name_Not_Found [sage] 2018/01/19(金) 15:59:23.28ID:???

>>872

あーん？

876

： Name_Not_Found [sage] 2018/01/20(土) 13:38:06.62ID:???

アコーディオンの開閉ボタンやタブなどのクリッカブル要素は何タグで書くべきですか？

877

： Name_Not_Found [sage] 2018/01/20(土) 15:00:22.40ID:???

>>876

A、INPUT、BUTTON

878

： Name_Not_Found [sage] 2018/01/20(土) 16:53:01.77ID:???

aタグってページリンクじゃなくても使って良いものなですか

879

： Name_Not_Found [sage] 2018/01/20(土) 17:02:02.26ID:???

>>878

ページ限定じゃないよ。

ページを含んだリソースへのリンク
リンクを意味するならばどれでもいい

880

： Name_Not_Found [sage] 2018/01/20(土) 17:09:33.74ID:???

ありがとうございます
buttonタグも同じ用途ですか？
子要素を含めるinputみたいな立ち位置かと思ってますが

881

： Name_Not_Found [sage] 2018/01/20(土) 17:42:54.64ID:???

>>880

ボタンとリンクは違う

リンクは「繋がってる」ものだからクリックするかどうかは関係ない
単に「繋がってる」という状態を表すもの。クリックしなくても繋がってる。

ボタンは「押すもの」押した後どうなるかは関係ない
何処かに移動するだけかもしれないし、何かしらのデータをサーバーに送るかもしれない
単に画面上に変化を与えるかもしれない
ともかく押した後のことは関知しない
単に押すことができるもの

882

： Name_Not_Found [sage] 2018/01/20(土) 20:49:30.05ID:???

じゃあ結局button要素はどこで使うものなんだ

883

： Name_Not_Found [sage] 2018/01/20(土) 21:22:36.11ID:???

「ポチッとな」ってしたい時だよ

884

： Name_Not_Found [sage] 2018/01/20(土) 22:48:48.34ID:???

「閉じる」
これがaタグだったら気持ち悪いわ

885

： Name_Not_Found [sage] 2018/01/20(土) 22:55:33.18ID:???

開くと閉じるで違うのもやだしハンバーガーメニューならボタンは同じ要素だよな
それはbuttonで書くべきなのか、じゃあ

個人的にはaタグはjQueryでいちいちreturn false;って書かなきゃいけないのが面倒だからあまり好きではない 好き嫌いの話にしちゃダメなんだけど

886

： Name_Not_Found [sage] 2018/01/20(土) 23:55:38.86ID:???

>>884

それは正しい

>>885

クローラーのためになってるか？で考えるとわかりやすいよ
ハンバーガーメニューだと出し入れするための [三] はリンクじゃない
もちろん中のリンクは、aで良い

> 個人的にはaタグはjQueryでいちいちreturn false;って書かなきゃいけないのが面倒だから
使い方間違ってるんじゃない？

aはリンクなのだから、クリックしなくても「繋がってる」と言ってる通り
jQuery（clickイベント）があってもなくても同じ意味になっていないといけない
clickイベントを使う場合は、JavaScriptで何か処理をしつつ最終的にはaのhrefを使うことになる

887

： Name_Not_Found [sage] 2018/01/20(土) 23:58:51.68ID:???

ちなみに [三] はボタンもありだけど
チェックボックスもありだよ。
出してる状態と閉じてる状態、2値を表すものだからね

888

： Name_Not_Found [sage] 2018/01/21(日) 00:02:31.45ID:???

「前に戻るリンク」もリンクじゃダメなんだよね
どこにリンクされてるのか不明だから。

「前に戻るリンク」と称してどこかのページに
移動するっていうのなら間違ってないけど

889

： Name_Not_Found [sage] 2018/01/21(日) 01:04:44.79ID:???

学生時代軽くＨＴＭＬでサイトつくったことがあっただけで
最近会社のＨＰ作りさせられてるんだけど

（１）　[長い文章]
みたいなのかいたときに

（１）　○○○○○↓
○○○○○

ってなっちゃうんですけど

（１）　○○○○○↓
　　　　○○○○○
みたいな感じに表示するのってどうしたらいいんですか？

890

： Name_Not_Found [sage] 2018/01/21(日) 08:58:41.79ID:???

>>883

へぇボタン

891

： Name_Not_Found [sage] 2018/01/21(日) 09:46:33.21ID:???

>>876

開閉ボタンをリンク部とごっちゃになってるのかな？

<li><a>メニュー</a><input type="checkbox">
または
<li><a>メニュー</a><button></button>

このままだと見た目そのままなので開閉ボタン部分はCSSで
checkboxなら:checkedや擬似要素で色や+/-などを変えられる

892

： Name_Not_Found [sage] 2018/01/21(日) 10:00:25.70ID:???

>>889

<ol>

893

： Name_Not_Found [sage] 2018/01/21(日) 10:04:32.90ID:???

>>885

好き嫌いで言うならbuttonの方が嫌い。
cssで装飾する際にデフォルトの飾りを取っ払うのがめんどくさ過ぎる
iphoneも勝手に角丸やらグラデーション付けるし、PCだと変な立体的なボーダー付くし
あのボーダー逆にどうやってCSSで付けるんだ？ｗ

894

： Name_Not_Found [sage] 2018/01/21(日) 10:22:56.08ID:???

>>888

こいつは間違いなく有能

895

： Name_Not_Found [sage] 2018/01/21(日) 13:54:54.40ID:???

>>892

ＣＳＳを操作する権限がなくて
数字は（）つきのままにしたいんですよね

896

： Name_Not_Found [sage] 2018/01/21(日) 14:29:36.31ID:???

>>895

<(_ _)>

897

： Name_Not_Found [sage] 2018/01/21(日) 14:30:39.01ID:???

>>892

<orz>

898

： Name_Not_Found [sage] 2018/01/21(日) 17:17:41.50ID:???

>>895

HTMLのヘッダもだめなんか？
できればそこでcounter

899

： Name_Not_Found [sage] 2018/01/21(日) 17:37:30.69ID:???

それと（１）と○○を段組みや:first-lineなどあるが
CSS全くいじれないのではどうしようもなくね？
全角スペースでも入れとけば
ガタガタだが

900

： Name_Not_Found [sage] 2018/01/21(日) 17:54:07.78ID:???

てかCSS一切手をつけられないんだとしたら
それ以外の部分についてもレイアウトバラバラで統一感ゼロのサイトになっちゃうんでは？？ｗ

901

： Name_Not_Found [sage] 2018/01/21(日) 18:04:09.93ID:???

>>895

CSSができない人のためのテーブルレイアウト

<table border="0"><tbody>
<tr valign="top"><td>（１）</td><td>〇〇<br>〇〇</td></tr>
<tr valign="top"><td>（２）</td><td>〇〇<br>〇〇</td></tr>
</tbody></table>


ま、CSSも何もかもをいじくれる権限がなければできないと言っておいたほうが無難
エスカレートしてそのうち意味もなくサーバーハッキングや
ブラウザハッキング（ウイルス作成）が必要な内容を要求される

902

： Name_Not_Found [sage] 2018/01/21(日) 18:05:36.47ID:???

>>898

ヘッダ絶対だめですね

>>899

長文が自動折り返しされたときにインデントされるようにしたいんですよね

一応なるべく使うなとはいわれてますが
個別に style="" は最低限使っていいとはいわれてます
ので <div display"table-cell"> とかつかえばできなくはないんですけど
それが正解なのかなとここにいるプロの方にききたかった

実際インデント先の改行って顧客の原稿でわりとでてくるので覚えたいかなと

むしろ改行のあと左端までまわりこんじゃっても顧客側は気にしないものなんでしょうか
この程度のことでいちいち上にきくのも使えないやつだなって思われそうで…
みなさんならどうしてるんでしょうか

903

： Name_Not_Found [sage] 2018/01/21(日) 18:08:06.65ID:???

>>901

テーブルじゃないものをテーブルでレイアウトするのは絶対ＮＧです

ＨＴＭＬのコーディングガイドラインっていうのがあるらしくて
タグのセマンティックを無視したのはだめらしいです
どのタグにどのタグがはいるかとか　alt　は絶対つけろとか
ＨＴＭＬのマークアップやるなら最低限覚えろっていうので最初に覚えさせられました

904

： Name_Not_Found [sage] 2018/01/21(日) 18:21:03.39ID:???

>>903

それでcss触れないとかあり得ないだろ
デザインに合わせるためにhtmlだけでセマンティック無視して合わせるか、セマンティック準拠してcssで合わせるかのどっちか

905

： Name_Not_Found [sage] 2018/01/21(日) 18:24:13.17ID:???

JavaScript使えるならそこからhead内にstyle差し込んでcss使えるけどそれもだめなの？

906

： Name_Not_Found [sage] 2018/01/21(日) 18:39:32.46ID:???

>>904

ヘッダとかはサイト全体で統一するために自動生成するみたいで
スタイルシートはデザイン経験ある人だけがやってしたっぱには権限がないです
新人の自分は顧客の原稿みながら body の中のタグコーディングだけやってくれてっていわれてます

まあCSSがいじれないだけでスタイル指定はやっていいとはいわれてるので
できることはかわらないんですけどstyle指定使いすぎるのはよくないですよね
なのでスマートにやる方法あったりするのかなとちょっとききたかった次第です

見栄えとコードの厳格さがトレードオフになったとき
どこまで妥協してどこまでこだわるべきなのかまだわかってなくて…

企業のページで改行ずれがあるのと
ソースのぞいたときにstyle指定かいてあるのとどっちが恥ずかしいかって話になると思うんですよね
tableでメニューやレイアウト組んでるのは論外だと思いますけど

>>905

javascriptは当然ダメだと思ってきいてすらないけどおそらくダメなんじゃないかな…

907

： Name_Not_Found [sage] 2018/01/21(日) 19:25:32.29ID:???

>>902

俺はWeb屋ではないが。

> この程度のことでいちいち上にきくのも使えないやつだなって思われそうで…
いちいち上に聞け。
というか、会社はそれ(お前が使えないという事実)込みで雇っているんだから、
聞いていいし、聞くべきなんだよ。
それで、「自分で調べろ」と言われれば調べればいいが、今はそれ以前なんだろ？
当たり前だが、会社ごとにコーディング戦略があって、それに合ってないと意味が無い。
お前のオレオレコーディングされても困るんだよ。
君の会社はこの辺がきちんと整備されているのは以下からも分かる。
> スタイルシートはデザイン経験ある人だけがやってしたっぱには権限がないです
だから、まず聞くべきだ。
そしたら多分、具体的にこうしろと指示が来るはず。

次に、聞いても有効な答えが得られなかった場合だが、
自分で適当なサイト探してF12で確認して真似しろ。
例えば889のような場合、以下ページに
ttps://developer.mozilla.org/ja/docs/Learn/Getting_started_with_the_web/CSS_basics
1. とか表示されている部分はあり、折り返しもきちんと出来てるだろ。

ただし、そもそもエレメントにstyle付けるのはNGだと思うが。
それやったらCSSの意味がなくなっちゃうでしょ。

908

： Name_Not_Found [sage] 2018/01/21(日) 19:42:17.00ID:???

>>907

なるほど確かにやり方がわからないんじゃなく正解がいろいろあってコーディングポリシーの問題ですよね
上にきくことにします

結論からいってスタイル以外に折り返し回り込みをインデントさせるスマートな方法はないってことでいいんですか

909

： Name_Not_Found [sage] 2018/01/21(日) 20:01:06.00ID:???

エレメントにスタイルつけるのはＮＧじゃないぞ
１箇所にしかでてこないようなスタイル指定を全部ＣＳＳにまかせてたらそれこそ汚らしい

910

： 898=899 [sage] 2018/01/21(日) 20:21:40.59ID:???

>>908

共同作業なら他の文書（ページ）でも同じようなケースあるのでは？
すでにそういうclassあるかもしれんから聞いてみたらいい
タグだけの問題ではないので聞いて恥ずかしいことはない

>>909

いや、汚い

911

： 898=899 [sage] 2018/01/21(日) 20:32:13.82ID:???

顧客側が気にするか否かより君の会社、その案件でどうするかを気にしたほうがいい
ヘッダだめもその一つだが、でないと統一性がなくなってしまう
逆に余計なことしないほうがいいかも（読んでてそんな印象）

ま俺も独学ド素人だが

912

： Name_Not_Found [sage] 2018/01/21(日) 20:47:04.71ID:???

>>889

<div style="padding-left:32px;position:relative;">
<p><span style="display:inline-block;position:absolute;left:8px;">(1)</span>本文。本文。</p>
</div>

ちなみに、CSSを使う場合::before擬似要素と
counter-incrementプロパティを利用するのがベスト

913

： Name_Not_Found [sage] 2018/01/21(日) 20:56:38.12ID:???

似たような疑問だけど

２列のテーブルで左が日付とか短い単語で右側に長文かいたとき折り返しで左のセルも２行になって不細工じゃん
あれスタイルなしで防ぐ方法ある？

<table>
<tr>
<th>2018年1月21日</th>
<td>ながーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーい文章</td>
</tr>
</table>

みたいなの

914

： Name_Not_Found [sage] 2018/01/21(日) 21:46:24.81ID:???

>>909

ありえん
htmlはhtmlだ、しっかり分けろ

915

： Name_Not_Found [sage] 2018/01/21(日) 21:55:10.59ID:???

dl使うのはダメ?

916

： Name_Not_Found [sage] 2018/01/21(日) 22:33:49.77ID:???

テーブルならcolgroupで幅の調整はできるんじゃない

917

： Name_Not_Found [sage] 2018/01/21(日) 22:52:13.54ID:???

>>878

Aタグだとクリックしたらページを読み込んじゃうんじゃないの？

918

： Name_Not_Found [sage] 2018/01/21(日) 23:14:09.06ID:???

そのためのreturn falseでしょう

919

： Name_Not_Found [sage] 2018/01/21(日) 23:18:28.28ID:???

>>908

何もしない、が一番

920

： Name_Not_Found [sage] 2018/01/21(日) 23:25:47.92ID:???

>>913

>>889

と同じ人かな？
共に先ずHTMLのタグとCSSのデザインを分けて考えたほうがいい
基本的にはタグは見た目のためにつけるのではない
HTMLだけで見た目変えようというのがそもそも違う
HTMLだけでできない場合にdivやspanなどで囲うことはある

タグはそれでいい（俺ならdl使うが）

921

： Name_Not_Found [sage] 2018/01/22(月) 06:25:04.99ID:???

>>919

君は本当に無能だな

922

： Name_Not_Found [sage] 2018/01/22(月) 10:47:52.15ID:???

>>893

appearanceでググると幸せになれるかもしれない
あとresetとか

923

： Name_Not_Found [sage] 2018/01/22(月) 10:50:08.69ID:???

>>913

テーブルレイアウト時代の負の遺産だけど
セルのmin-widthは画像でつっかえ棒するんだ

924

： Name_Not_Found [sage] 2018/01/22(月) 17:26:38.01ID:???

spacer.gifって昔流行ってたよな
IT業界なのになんてこんな不自由でアナログなんだろうって思ってた

925

： Name_Not_Found [sage] 2018/01/22(月) 18:51:36.16ID:???

>>921

いや、あながち間違ってない
たぶんそこまでせんでいいと言われそう

926

： Name_Not_Found [sage] 2018/01/22(月) 19:06:09.72ID:???

プロパティの前にアスタリスクつけたりCSSのハックっていくつかあるけど
実際に使ってる人いる？

927

： Name_Not_Found [sage] 2018/01/22(月) 19:15:31.75ID:???

IE用のハックはそこそこ頻繁に使う

928

： Name_Not_Found [sage] 2018/01/22(月) 19:21:07.86ID:???

ここ最近のカキコではどうみても

>>921

が一番無能

929

： Name_Not_Found [sage] 2018/01/22(月) 20:44:07.41ID:???

>>912

頼まれて見てこんなstyleだらけだったらウゲーってなるな

930

： Name_Not_Found [sage] 2018/01/22(月) 20:50:05.58ID:???

>>926

昔はアホみたいに使ってた、というか使わざるを得なかったけど
もうツールに完全に任せられるようになったのでその辺は全く使っていない
未だにハックが必要な状況なんてあるんかね

931

： Name_Not_Found [sage] 2018/01/22(月) 23:43:18.10ID:???

cssの:と::ってどっち使っても良いんですか？

932

： Name_Not_Found [sage] 2018/01/23(火) 00:13:31.96ID:???

普通のブロック要素は横幅が親要素いっぱいに広がりますが
input type=textをdisplay:blockとしてもいっぱいに広がりません
width: 100%
としてもブロック要素の挙動の再現にはなりません
ブロック要素の場合、marginも考慮されて横幅が決められますが
width:100%と指定した場合marginは考慮されないので。
input type=textにブロック要素のような挙動をさせるにはどう指定すればいいのでしょうか？

933

： Name_Not_Found [sage] 2018/01/23(火) 00:19:31.09ID:???

inputは、終了タグないんだから
ブロックになるわけがないやん？

どこからブロックの開始なのかはいいとして
ブロックの終わりなんてないでしょ？

934

： Name_Not_Found [sage] 2018/01/23(火) 01:14:26.79ID:???

んーじゃあimgとかbrは？

935

： Name_Not_Found [sage] 2018/01/23(火) 02:37:12.68ID:???

>>933

>932 の「ブロック」というのはレイアウト構造の用語であって文書構造の用語ではない

>>932

input 要素などのコントロール類のスタイルは
自由にまたは統一的に制御できない部分が多い
理由はコントロールの内部ボックスツリー構造がブラウザによってまちまちだから

最近だと appearance: none というブラウザスタイルを無効化できる仕様も出てきている。
それを利用すれば（将来には）可能になるかもしれない
ttps://drafts.csswg.org/css-ui-4/#form-styling
ttps://triple-underscore.github.io/css-ui-ja.html#form-styling

936

： Name_Not_Found [sage] 2018/01/23(火) 07:21:03.45ID:???

>>933

＞inputは、終了タグないんだから
＞ブロックになるわけがないやん？
全く関係がない
それは文法上の仕様

937

： Name_Not_Found [sage] 2018/01/23(火) 08:03:43.72ID:???

>>935

ありがとうございます
そうなると表示を親要素基準にしたい場合は
ブロック要素のコンテナを挟ませて、
それに対して100%にするとかしないといけないということですね

938

： Name_Not_Found [sage] 2018/01/23(火) 20:57:29.98ID:???

appearance: noneなんてあったのか
iphoneで見たときめっちゃ崩れてて笑った
そのまま納品したけど

939

： Name_Not_Found [sage] 2018/01/23(火) 21:07:37.07ID:???

四角いイメージの真ん中に文字表示させてそれを
その画像おしたらボタンみたいなリンクにするのってできる？

940

： Name_Not_Found [sage] 2018/01/23(火) 21:48:02.07ID:???

できるけどそれボタンにする必要が全くない

941

： Name_Not_Found [sage] 2018/01/23(火) 21:53:18.42ID:???

<a href="パス"><button>文字表示</button></a>
または
<a href="パス"><img src="イメージファイルのパス"></a>

942

： Name_Not_Found [sage] 2018/01/23(火) 22:34:09.75ID:???

input[type="submit"]
button
a
これらはcssで全部同じ見た目にできる
もちろんクロスブラウザも
ただ上でも言われてるとおり、どれでもいいわけじゃなくて目的によって使い分けるべき

943

： Name_Not_Found [sage] 2018/01/23(火) 23:20:16.50ID:???

button
input type=button
はどう使い分けるのが良いの？
上級者のテクニックを教えろ

944

： Name_Not_Found [sage] 2018/01/23(火) 23:22:37.72ID:???

>>943

＞どう使い分けるのが良いの？
htmlのバージョン

945

： Name_Not_Found [sage] 2018/01/23(火) 23:35:29.33ID:???

>>942

inputはbeforeとafterが使えないので気をつけたいところ
四角いボタンで真ん中に文字があって横に矢印アイコンみたいなデザインの時
アイコン部分をうっかりbeforeで作っちゃったりすると事故る

946

： Name_Not_Found [sage] 2018/01/23(火) 23:41:15.72ID:???

>>944

大雑把だけどformとの関連で考えるといいかも

inputはformの部品なので基本的にはformの子要素でありたい
属性でどのformの子なのか示すこともできるんだけど

buttonにはその縛りはない

あとinput[type=button]は押すとformのsubmitが発火する

buttonはそうでもない

947

： Name_Not_Found [sage] 2018/01/24(水) 00:15:41.41ID:???

> buttonにはその縛りはない
inputもbuttonも一緒

ttps://developer.mozilla.org/ja/docs/Web/HTML/Element/button

> buttonはそうでもない
inputもbuttonも一緒

submit: これは type 属性が指定されていない場合、もしくは属性値が動的に空にされたり不正な値にされた場合のデフォルトの動作です。


単にもともとinputの方はデザイン変えられない標準のボタンで
buttonの方は中にimg入れれば画像ボタンが作れたと言うだけ
CSSのbackground-imageで変えられるようになってからは
大した違いはない

948

： Name_Not_Found [sage] 2018/01/24(水) 01:48:02.56ID:???

デザイン面でいうと中に子要素がもてるってのは大きな違いだな

949

： Name_Not_Found [sage] 2018/01/24(水) 14:44:54.77ID:???

すいません。
</h1>のすぐ後に<>

950

： Name_Not_Found [sage] 2018/01/24(水) 14:47:45.56ID:???

途中送信すいません
</h1>のすぐ後に<h2>を書くのはダメなんですか?

951

： Name_Not_Found [sage] 2018/01/24(水) 17:14:18.17ID:???

button要素で作ったアイコンのクリックでイベントが起きるようにしたのですが
クリックすると、アイコンの周囲にアクティブな要素を囲む線が残ってしまいます
この線を表示しないようにしたいのですが、どうやればいいですか？

952

： Name_Not_Found [sage] 2018/01/24(水) 19:41:32.48ID:???

outline

953

： Name_Not_Found [sage] 2018/01/24(水) 19:47:49.33ID:???

>>952

出来ました！
ありがとうございます

954

： Name_Not_Found [sage] 2018/01/24(水) 20:10:53.16ID:???

>>950

ダメなわけがない
大見出しのすぐ後に小見出しがあるドキュメントなんて山ほどある

955

： Name_Not_Found [sage] 2018/01/25(木) 00:15:52.16ID:???

>>941

ならなかった
というか文字がどこにもない

画像の上にテキストをのせたいんだけど
ＨＴＭＬって要素重ねるってできないのかな

956

： Name_Not_Found [sage] 2018/01/25(木) 01:18:15.14ID:???

>>955

<a href="#">文字</a>

a {
display: block;
width: 画像の横幅;
height: 画像の縦幅;
line-height: 画像の縦幅;
background: url(パス) no-repeat 0 0;
margin-right: auto;
margin-left: auto;
}

可変したい場合はちょっと変わるけど
かなり初歩的な質問だし可変までは想定してないよね。

957

： Name_Not_Found [sage] 2018/01/25(木) 02:23:37.87ID:???

>>955

>ＨＴＭＬって要素重ねるってできない
できるよ（重箱だがHTMLではなく、CSSな。）

(1) 絶対位置（ position: absolute,＋親に position:relative ）
(2) 強制オバーフロー（テキストをサイズゼロのボックスに入れる＋ボックスの z-index も指定（さもないとテキストが背後に隠れる））
(3) grid レイアウト（重ねたいものを同じセルに配置する）

他にもあるかも

958

： Name_Not_Found [sage] 2018/01/25(木) 12:55:19.19ID:???

>>955

見た目はHTMLではなくCSSのお仕事

配置を決めるスタイルプロパティにpositionてのがあって
デフォルトではほとんどの要素のこれがstaticて値になってる

これはただ書かれた順に、下へ下へと並んで積まれていくだけのスタイルなので
このままでは要素を重ねるのは難しい

値がrelativeになると、staticであった場合の座標を基準に
相対的に配置されるようになる

値がabsoluteになると、ある基準点からの絶対座標で配置される
基準点は先祖要素を順にたどって最初に見つかった
positionがstaticではない要素

この辺をうまく使って配置してみてください

959

： Name_Not_Found [] 2018/01/25(木) 15:03:10.87

ID

:LZ2FO3ia

select, optionを使ってDropDownListを作る場合、

Category　　SubCategory1
[　　▼]　　[　　　　▼]

みたいに２階層にしたいのです。
こう言う場合、Categoryの選択項目に応じてSubCategory1のoption一覧を更新する必要がありますが、
どう言う手法が良いのでしょうか？
(1)全部のデータをクライアントサイドで持っていて、必要なやつを表示してそれ以外は非表示にする。
(2)Categoryの選択項目が変化する度にサーバーサイドからSubCategory1のoption一覧を取得する。
(3)それ以外
など何がお勧めですか？

960

： Name_Not_Found [sage] 2018/01/25(木) 19:53:33.95ID:???

>>956

わーすごいすごい
文字と絵重なってる

だいぶやりたいことに近づいてきたけど文字が左端になるし
改行いれると画像に下にでちゃう
中央に表示できないの？
あと画像の大きさ毎回調べるの大変すぎるんだけど
ＨＴＭＬじゃ自動で真ん中に表示するリンクボタンって難しいんですね