HTML/CSS のどんな質問にも優しく答えるスレ 34

レス数が1000を超えています。これ以上書き込みはできません。
1Name_Not_Found2018/10/08(月) 11:45:57.53ID:???
ここは初心者からベテランまで、全ての人を対象に優しく答えるスレです

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

回答してくれる方は優しい人のみ! 質問者に対して暴言を吐く人はこのスレを見るな!!
終わった話を蒸し返すやつは このスレにくるな!!!
自分で調べろという回答も禁止!!回答するかさもなくば何も書き込むな!!

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

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

■前スレ
HTML/CSS のどんな質問にも優しく答えるスレ 33
http://mevius.5ch.net/test/read.cgi/hp/1531279252/

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

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

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

2Name_Not_Found2018/10/08(月) 11:52:22.06ID:???
969 名前:Name_Not_Found[sage] 投稿日:2018/10/07(日) 22:23:52.27 ID:???
どうやるの?
flexって好きな位置でのwrapと
複数行にわたる縦幅の一致ができないよね
それさえできれば万能なのに

973 名前:Name_Not_Found[sage] 投稿日:2018/10/07(日) 22:57:41.72 ID:???
>>971
更新してなかった
具体的にどうするんです?

<div class="container" style="width:1000px">
<div><img src="http://placehold.jp/200x100.png"></div>
<div><img src="http://placehold.jp/200x200.png"></div>
<div><img src="http://placehold.jp/200x100.png"></div>
<div><img src="http://placehold.jp/200x100.png"></div>
<div><img src="http://placehold.jp/200x100.png"></div>
<div><img src="http://placehold.jp/200x100.png"></div>
<div><img src="http://placehold.jp/200x100.png"></div>
<div><img src="http://placehold.jp/200x100.png"></div>
<div><img src="http://placehold.jp/200x100.png"></div>
</div>
これを (width height 指定一切なしで) flex 関連のスタイルだけで
3 x 3 の等サイズの四角形に配置できます?

3Name_Not_Found2018/10/08(月) 12:31:55.23ID:???
ほれ
flexで合わせてやったぞ
前スレでアスペとか言ってたヴァカは脳みそ足りねえからてめえはスルー
https://i.imgur.com/NvwzobL.jpg

4Name_Not_Found2018/10/08(月) 12:46:20.98ID:???
ぐーぐるこわい
あいつらその気になればせかいほろぼせる

5Name_Not_Found2018/10/08(月) 13:01:40.67ID:???
画像だけで証拠になってると本気で思ってるならアスペすぎだろ

6Name_Not_Found2018/10/08(月) 13:16:39.76ID:???
確かに行にまたがって高さ合わせたい場合あるよなー
リンクボタンで1つだけ長い文章で2行になったりするとみっともない

<style>
a {
display: block;
width: 50%;
border: solid 1px #000;
margin: 1em auto;
padding: 1em;
border-radius: 0.5em;
color: #000;
text-decoration: none;
text-align: center;
}
a:hover{
background-color: #eee;
}
</style>
<a href="#">長ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーい文章</a>
<a href="#">短い文章</a>

7Name_Not_Found2018/10/08(月) 13:25:40.73ID:???
めんどくせーからできるかだけでいいって前スレで言われてるからソースは不要ってことだろうな

8Name_Not_Found2018/10/08(月) 14:16:04.39ID:???
できないからごめんなさいっていえばいいのに

9Name_Not_Found2018/10/08(月) 14:36:40.02ID:???
flexboxで割付した際に余白のpx知りたいんだけど
デベロッパーツールで確認って出来るん?

10Name_Not_Found2018/10/08(月) 14:51:55.94ID:???
さすがにこれは恥ずかしい

11Name_Not_Found2018/10/08(月) 14:56:56.85ID:???
js使えば何でもできるぞ

12Name_Not_Found2018/10/08(月) 15:15:15.50ID:???
let max_width = 0, max_height = 0;
$('.container > div').each((_, e) => {
if($(e).width() > max_width ) max_width = $(e).width();
if($(e).height() > max_height) max_height = $(e).height();
});
$('.container > div').width(max_width).height(max_height);

13Name_Not_Found2018/10/08(月) 15:20:05.14ID:???
高さ合わせるのは無理でも折返しぐらいはできないの?
折り返しできないなら flex って inline-block 以下じゃん

14Name_Not_Found2018/10/08(月) 16:10:59.09ID:???
折り返しってなに?wrapのことではなく?

15Name_Not_Found2018/10/08(月) 16:35:57.38ID:???
たかが10レスも遡れないアスペだらけ

16Name_Not_Found2018/10/08(月) 16:37:53.52ID:???
残りスペースに関係なくすきなところで折り返すって意味だと思うよ
早い話 <br> をやりたいってことかと

17Name_Not_Found2018/10/08(月) 17:00:32.77ID:???
好きなところで折り返すなら最初からそう作れよカス

18Name_Not_Found2018/10/08(月) 17:17:56.85ID:???
最初からってどいういうこと?
最初からそう作るにはどうするかって話なのに
flexで何でもできるとか言い出したのお前じゃん

19Name_Not_Found2018/10/08(月) 17:35:43.66ID:???
バカかこいつ
一生悩んでろよクズwww

20Name_Not_Found2018/10/08(月) 18:19:56.27ID:???
ちょいちょい俺の荒らしレス入れてるから話がごっちゃになっとるねぇ〜

21Name_Not_Found2018/10/08(月) 18:26:22.45ID:???

22Name_Not_Found2018/10/08(月) 19:11:55.65ID:oTgN8l1Y
HTMLの初歩を学んでいるんですが、img要素ってわざわざp要素で囲まなきゃいけないんですか?
囲まなかったらどうなるんですか?

23Name_Not_Found2018/10/08(月) 19:16:07.87ID:???
普通pで囲わないよ

24Name_Not_Found2018/10/08(月) 19:20:01.86ID:oTgN8l1Y
>>23
そうなんですか?
だったら自分が今学習しているサイトはちょっと信頼できないかもしれないですね
画像をパラグラフ要素で囲むって意味分からないですもんね

25Name_Not_Found2018/10/08(月) 19:26:08.99ID:???
BEM記法とかそこまで厳密じゃなくても
基本的にインライン要素はブロックで囲むってのは推奨されてるね

flexがでてからは1つ外側に指定したいからスタイル当てるのがやりやすい

26Name_Not_Found2018/10/08(月) 19:30:33.12ID:???
divでもいいけど p で囲むのはデフォルトで p のほうが下側にマージンが付いてるから
がぞうが連続した場合でもレイアウトがみやすいってことかと

意味論を重視するなら コンテナー div であるべきだけど
p のほうが何もかかずに見栄えよくなるから好みかな

困ったら p つかっとけってコーディングスタイルはウェブコーダーでも普通にいる

27Name_Not_Found2018/10/08(月) 19:46:22.04ID:oTgN8l1Y
>>25>>26
ありがとうございます
まだまだ勉強が足りないですね

28Name_Not_Found2018/10/08(月) 21:20:31.70ID:???
>>22
俺の中でだが
インライン要素は生もの食品のイメージで裸で置いてはいけない。
魚、肉とかが何も包装されてない状態を連想するようにしてる

29Name_Not_Found2018/10/08(月) 21:29:10.21ID:???
もし<p>を書かずに<span>を書きたくなったらこうすればいい

<body>
<div class="main">

自由に配置できる

</div>
<body>



全てがdivブロックの中にあるので、>>28のルールを破ることなく
インライン要素を自由に配置できる

30Name_Not_Found2018/10/08(月) 22:15:10.23ID:???
>>29
お前みたいなのがいるからな…divなくなって欲しいわ無能

31Name_Not_Found2018/10/08(月) 22:26:38.06ID:8cvJ3V9E
>>29を見て思ったのだけど、

なんとなくbodyにCSSをあまりくっつけたくないから、
ページ全体をdivで囲って、そこにページの基本となるCSS
(background-imageとかfont-familyとか)
をくっつけてるんだけど、
これってマズイんだろうか

32Name_Not_Found2018/10/08(月) 22:38:57.40ID:???
bodyの末尾になんか追加するjqueryプラグインとかあるからなあ
<div>いれとくのはちょっと気持ち悪いけど仕方ないかなって思ってる

33312018/10/09(火) 00:53:58.27ID:RZPtjwyI
>>32
文法以外の所で、divを入れる必要性があるのか
そういう可能性は頭になかった
ありがとう

34Name_Not_Found2018/10/09(火) 02:00:15.10ID:???
>>29
俺の中でだが
1枚の袋に魚、肉とかまとめてブっ込んで
カオスに入り乱れてるイメージ

中のインライン要素をまとめて1つの段落やアウトラインとして認識されていいならいいのかも

35Name_Not_Found2018/10/09(火) 05:32:15.12ID:Tanwg30a
ニラ玉食べたい

36Name_Not_Found2018/10/09(火) 05:32:27.36ID:Tanwg30a
誤爆すまぬ

37Name_Not_Found2018/10/09(火) 07:46:49.24ID:???
>>30
無能はお前。インライン要素はブロックに入れずに置いていい。
それだけの話なのに、ブロックに入れないとダメとかいうから
お前の話は矛盾してるって突っついてやったんだよ

38Name_Not_Found2018/10/09(火) 08:18:49.59ID:???
htmlタグは気にせずにCSSのdisplayを駆使しまくれということでええのかな

39Name_Not_Found2018/10/09(火) 09:58:11.14ID:???
まさに今の議論がここにかいてあるぞ
https://soundorbis.com/htmlimgp/

40Name_Not_Found2018/10/09(火) 11:26:38.21ID:???
めんどくさ
そんなことしなくてもサイトに表示されればいいんだよ
細けえよ

41Name_Not_Found2018/10/09(火) 13:59:10.69ID:???
ul,olを入れ子状に何度も繰り返して配置する時、最大いくつまで入れ子に出来ますか?

42Name_Not_Found2018/10/09(火) 14:18:44.23ID:XWo9Vima
>>38
HTMLのルールと
スタイルとはまた別問題
良し悪しは別として

43Name_Not_Found2018/10/09(火) 14:18:58.71ID:XWo9Vima
>>41
無限に

44Name_Not_Found2018/10/09(火) 14:28:47.85ID:???
>>41
規定として入れ子レベルに制限はないけど、5000階層とかなったらブラウザの処理が重くなるかもしれない。勿論ul,ol直下にli以外は置いてはいけない。

45Name_Not_Found2018/10/09(火) 14:45:43.18ID:???
5000くらいならへーきへーき
http://jsfiddle.net/2pqh16nz/

46Name_Not_Found2018/10/09(火) 15:30:45.65ID:???
>>45
酔った、吐きそう

47Name_Not_Found2018/10/09(火) 15:33:25.49ID:???
>>37
何の話だよw
単純にdivのブロック要素で生置きspanが回避できる!っていってることがおかしいって話だよ
てかこの話何回目だろうぇ
多分divがある限り永遠と繰り返されるんだろうな

48Name_Not_Found2018/10/09(火) 15:47:21.09ID:???
MathJaxを使っています

$\begin{array}{cc}
a & b \\
c & d
\end{array}$

はちゃんと機能していますが、

$\begin{array}{cc}
a & b \\
\multicolumn{2}{c}{d}
\end{array}$

が機能しません。
なぜですか?
MathJaxでは\multicolumnは実装されていないんですか?

使っているMathJaxは
<script type="text/javascript"
src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.0/MathJax.js?config=TeX-AMS_CHTML">
</script>
です。

49Name_Not_Found2018/10/09(火) 18:28:21.49ID:VPq4a9rB
レシポンジブで、フォントの大きさ指定する単位は何でしてる?

rem?vw?それともpx…

なんか色々読んだけど。pxでいいような気がしてきた…

50Name_Not_Found2018/10/09(火) 19:16:29.89ID:???
>>49
pxだとデバイス毎に全〜〜部指定しなおさなきゃいけないから面倒じゃない?
remならrootのpxだけ定義すればいいから楽だぞ

51Name_Not_Found2018/10/09(火) 19:22:05.20ID:???
でも大手見るとpxでやってるとこはまだ多くある
デザインカンプに超忠実にやらなければならない場合
pxの方がいちいち計算不要だから作るのは早い

illustratorやphotoshopのカンプがpxで指定さいれてるわけだから
それをremに計算するといちいち面倒になる。

vwなんてウインドウサイズで文字以外の要素とのバランス崩れるから大変
全部の要素を完全リキッドに対応させる必要がでてきちゃう
海外サイトみたいに文字中心のざっくりデザインのサイトなら余裕だけど

52Name_Not_Found2018/10/09(火) 23:14:27.26ID:0tZw6BK+
>>49
もはやvwしか使いたくない
viewportを画面の大きさに合わせる仕組みがあるのならpxでも構わないと思う
何れにせよリキッドじゃなければそれほど面倒はないはず

53Name_Not_Found2018/10/10(水) 00:03:25.96ID:???
フォームのパーツでプルダウンの中身まで作ってあるデザインをもらって、selectタグで再現できないからulとJSのクリックイベントを使って実装したのですが、タブキーで操作できるようにしてくれないかと言われてしまいました。
たしかにselectタグを使えばタブで選択して項目を選ぶことができたのですが、HTMLでselectやinput「っぽい」パーツを作って、タブで操作できるようにすることは可能なのでしょうか?

54Name_Not_Found2018/10/10(水) 00:16:35.49ID:A5twItpy
>>53
そのくらいなら、はい

55Name_Not_Found2018/10/10(水) 00:18:00.17ID:???
プルダウン自体はCSSだけで可能だよ
ただ前スレでもでてたけど select というか option にデザインあてるのが結構制約あるから
デザイン指定されてるなら厳しいかもね

すでにJSで実装してるなら accesskey=key とかつけるだけでいいんじゃないの

56Name_Not_Found2018/10/10(水) 00:37:22.88ID:???
>>55
まさにoptionの方のカスタマイズが必要だったのでselectを使いませんでした。
accesskeyは調べてみましたが、あくまでほかのフォームパーツと同じようにタブ操作できるようにするのが目的なのでちょっと違うかなと思いました。

57Name_Not_Found2018/10/10(水) 01:26:59.44ID:???
タブキーで操作ってのをぐらいかしてくれないとよくわからないけど
jQueryUIのselectableとかなら数行かくだけでわりと高機能なことができた気がする

58Name_Not_Found2018/10/10(水) 03:46:29.52ID:???
>>49-52
漏れは、画像の高さに、vh を使えば「ctrl +-」で拡大縮小ができなかったから、

最初にJavaScript で、window.screen.availHeight で、
タスクバーのような、固定部分を引いた画面の高さ (ピクセル単位) を取得して、

728 px など、その値を元に、画像の高さを、px で設定した

vh, vw は便利だけど、拡大縮小ができないだろ?

59Name_Not_Found2018/10/10(水) 03:57:47.56ID:???
semanticをhtmlに、presentationをcssにとキレイに切り分けるためにはcss側で要素を追加する機能がまだ貧弱だと思うんだよね
::beforeと::afterの2人しか作れない…

ネストして::before::beforeと孫を追加したり、::before(2)で2人目のbeforeを作ったりしたいにょ

60Name_Not_Found2018/10/10(水) 07:48:57.94ID:???
:nth-child(3):hover:beforeとか疑似要素疑似クラスできるのには驚いた

61Name_Not_Found2018/10/10(水) 08:10:23.04ID:???
>>58
正確にできそうだけどサイトのフォントサイズ定義の場合
js使用前提だとなんとなく嫌だな
いやなんとなくなんだが

62Name_Not_Found2018/10/10(水) 08:52:55.42ID:Ziy1F9Mv
HTML5のフォームバリデーションを本番で使った人いる?
まだまだ、本番では使えないような気がするんだが…

63Name_Not_Found2018/10/10(水) 09:14:55.08ID:???
>>52
vwって最大最小決めれないからどこまでもでかくなり、どこまでも小さくなるよな
media queryで変更できるけど、どんなふうに使ってるんだ?

64Name_Not_Found2018/10/10(水) 09:39:26.46ID:YG+zE8tT
>>63
その通りメディアクエリで区切ってる範囲内だけど
別にいいじゃん小さくなっても

65Name_Not_Found2018/10/10(水) 10:07:25.55ID:???
>>64
読みやすさは必ずしも横幅と一致しないんだが
まあ人それぞれだからどうでもいいんだけど

66Name_Not_Found2018/10/10(水) 14:09:34.21ID:???
ライブドアブログですが
画像に枠を入れようと思い
img {
padding: 5px;
border: 1px solid #808080;

をCSSに入れたいのですが、どこに入れても
サイドバーが表示されなくなったりします。
どこに入れたらいいでしょうか?

67Name_Not_Found2018/10/10(水) 14:12:21.74ID:???
>>65
ほんそれ。
文字は文字であってオブジェクトじゃないのにな。
一行の長さだって段組の常識があるのに・・・

68Name_Not_Found2018/10/10(水) 14:14:55.26ID:???
>>66
ここでライブドアのブログなんて使ってる人なんてほとんどいないと思うから
ブログ系のスレとかアフィリエイトのスレの方が回答もらえそう

69Name_Not_Found2018/10/10(水) 15:08:13.18ID:???
まぁimgに指定してるのが悪さしてんだろ

70Name_Not_Found2018/10/10(水) 15:17:39.39ID:S3yFh3/C
>>66
セレクタがざっくりしすぎ
imgって書いたらドキュメント内のすべてのimg要素が対象になっちまう
だからサイドバーとかにも影響が出る
親要素で限定するとよかろう

あとimg要素やフォームの部品のような
何かに置き換わる奴を置換インライン要素なんて呼んだりするんだけど
大雑把にいうとpaddingは使わんほうがいい
少なくともCSSを理解できるようになるまでは

71Name_Not_Found2018/10/10(水) 17:11:03.06ID:???
>>68
>>70
ありがとうございます
暇つぶしニュースにある画像みたいに
画像に小さく枠がほしいんですけど
リンクが貼れなくて申し訳ありませんが

72Name_Not_Found2018/10/10(水) 17:23:31.04ID:K6Ege0oc
>>71
ブラウザはChromeかFirefoxかSafariを使おう

んで、真似したいものがあったら
例えばChromeだったら、それを右クリして一番下の「検証」を選ぶんだ
そうすっと、開発ツールってのが開いて
そこのHTMLとCSSがどうなってんのかわかるから、真似すればいい

んでそのニュースは見てないけど
十中八九、img要素の外に小さい枠のためのボックスが別にあると予想

73Name_Not_Found2018/10/10(水) 18:34:05.28ID:???
>>72 ありがとうございます
https://imgur.com/a/PlKfeRd
この画像の1.2.3当たりがCSSだと思うのですが

コピー参考にするヒントをいただけませんでしょうか?

74Name_Not_Found2018/10/10(水) 19:22:26.23ID:???
>>73


.article-body img { hoge: fuga; }

ってのは「article-bodyというclassを持つ要素の子孫のimg要素」って意味だよ
意地悪で言うわけじゃないんだけど
このくらいのことは聞く前にまず試してみたほうが、早いし理解も深いと思うよ

75Name_Not_Found2018/10/10(水) 19:42:50.17ID:???
>>74
ありがとうございます
やってみます

76Name_Not_Found2018/10/10(水) 20:24:15.80ID:???
2の.article-body-more img {}
の{}の中にカーソル合わせると左にチェックボックス出てくるから
オン・オフすると即時連動した変化が確認できるので
imgの枠線に重要な部分もすぐわかると思う >>73
(もちろん自分のサイトを作る時の確認にも活躍する)

77Name_Not_Found2018/10/10(水) 21:10:56.93ID:???
>>76 ありがとうございます。
ならない、、、のは

.article-body-more img {
margin: 5px 0;
max-width: 695px;
padding: 3px;
border: 1px solid #CFC7AF;
}
とCSSに入れればいい。という単純なことではないんですね、、

78Name_Not_Found2018/10/11(木) 00:01:22.53ID:???
>>45
FF で試したら 100 段までしか…

79Name_Not_Found2018/10/11(木) 00:26:54.05ID:???
>>77
>>66のコードから察するに
もしも、CSSの基本中の基本で躓いてる?なら
問題点はまず、
img {
の部分で括弧が開きっぱなしな点
img {}
という風に括弧を閉じないといけない

あとは、セレクタ(どの要素を選択するかの文字列)の意味と用法はググってもらうとして
CSSの基本は、
セレクタ { スタイル }
という形式になる、ということ。

>とCSSに入れればいい。という単純なことではないんですね、、
>>77の例で言うと、セレクタは
.article-body-more img
の部分で、意味はざっくり言うと
「クラス名がarticle-body-more要素の、子要素のimg要素全部を選択する」
なので自分のサイトのHTMLに、そもそも「クラス名がarticle-body-moreの要素」が存在しなければ
何も起こらない

ライブドアブログを使っているということなのでおそらく
テンプレの長文コードに滅入っていると推察。
さらに、HTMLもCSSの基本(中の基本)もわからないとなれば
おそらく、「要素にarticle-body-moreというクラス名を付加する」
というのを理解できているかどうか、そこから始めないといけない段階

80Name_Not_Found2018/10/11(木) 02:18:56.84ID:???
質問です。
特定のサイトを閲覧する際にユーザーCSSを適用し(ChromeのStylusを使っています)、
tableをflexなりgridなりで並べ替えたいのですがどうすればよいでしょうか?

<table>
<tr><td></td><td></td></tr>
<tr><td></td><td></td></tr>


</table>

と縦にひたすら並んでいるのを強制的に

┌──┬──┬──┬──┬──┬──┬──┬──┬──┬──┐
│tr│tr│tr│tr│tr│tr│tr│tr│tr│tr│
├──┼──┼──┼──┼──┼──┼──┼──┼──┼──┤
│tr│tr│tr│tr│tr│tr│tr│tr│tr│tr│
├──┼──┼──┼──┼──┼──┼──┼──┼──┼──┤

と横並び、かつ10個並ぶごとに自動で折り返してくれるようにしたいのです。
displayの値をtableやtable-cellから変えればよいのでしょうけれど、
flexやgridといった新しい要素は何度いじってもまだなかなか慣れなくて……。

81Name_Not_Found2018/10/11(木) 02:23:03.96ID:???
tr に display:block; float:left つけて
tr: nth-child(10n):after に clearfix でもつければいいんじゃない

82Name_Not_Found2018/10/11(木) 14:09:02.74ID:???
>>79
ありがとうございます
セレクタ(どの要素を選択するかの文字列)の意味と用法
勉強してみます。

83802018/10/11(木) 19:23:27.51ID:???
>>81

あ、新しいやり方をしないといけないと思い込んでいましたが
ずっと昔ながらのやり方でできましたね。ありがとうございます

どうもclearfixが効かないので、もう少し色々試してみます
(一応widthを調整するだけで無理やり10個ずつにはできましたが)

84Name_Not_Found2018/10/11(木) 21:19:20.78ID:???
div > section とあって
h1に画像をバックグラウンドを指定して
その下に
div > p class="utaimonku"に画像の謳い文句を書いていたのですが、
この謳い文句が文字だけなのも寂しいので画像にしつつ、文字としてもhtml上で記述するということはできますか?

85Name_Not_Found2018/10/11(木) 21:34:45.92ID:???
はい

86Name_Not_Found2018/10/11(木) 23:00:15.81ID:???
寒くなってきたので、そろそろ扇風機をしまい
電気ストーブを出そうと思います。
でもその前に秋物の洋服を着るとそこそこ暖かくなるのですが
電気ストーブをつけつつ扇風機はしまわずおいておき
服だけはまだ夏物にしてもいいですか?

87Name_Not_Found2018/10/11(木) 23:05:37.98ID:???
はい

88Name_Not_Found2018/10/11(木) 23:22:02.29ID:???
はいじゃないが

89Name_Not_Found2018/10/11(木) 23:55:09.77ID:???
いいえ

90Name_Not_Found2018/10/12(金) 01:00:26.58ID:???
よし

91Name_Not_Found2018/10/12(金) 01:20:28.02ID:???
キーボードの設定が全角かなと半角英数を間違った状態で
打ち始めている事って頻発しない?
これなんとかならんかなあ

92Name_Not_Found2018/10/12(金) 01:21:47.85ID:???
>>86
電気ストーブなら扇風機も回した方がいい
暖められた空気は上に行くので扇風機を上に向けて空気を回す
その方が暖まる
というか秋物着て暖かいんならそれでストーブつけなければ電気代うくんじゃないか?
というかこれってスレチじゃないか?

93Name_Not_Found2018/10/12(金) 06:44:32.75ID:???
>>91
F10

94Name_Not_Found2018/10/12(金) 10:30:45.74ID:???
電気ストーブ初心者スレここだったか

95Name_Not_Found2018/10/14(日) 11:53:08.20ID:???
アメブロですが
2chまとめくすで まとめサイト作ってみたのですが
<em style=color: %color%; background-color: %bgcolor%;
font-weight: bold;" class="specified">ID:%id%</em>

この文章に
<em style=size="1"color: %color%; background-color: %bgcolor%;
font-weight: bold;" class="specified">ID:%id%</em>

と変更しても駄目でした。アドバイスお願いします

96Name_Not_Found2018/10/14(日) 12:46:41.06ID:???
仕事変えたほうが良いよ
これがアドバイス

97Name_Not_Found2018/10/14(日) 12:57:36.08ID:???
普通のブラウザならば、
<details>
<summary>あ
<div>い</div>
う</summary>
<p>えお</p>
</details>
と書いた時、要約部分には「あいう」が表示されるはずですが、
現在の私の環境では「あ」しか表示されません(▲をクリックしたら展開されたところに「いう」が見えます)

何が原因だと考えられそうですか?

98Name_Not_Found2018/10/14(日) 13:06:28.69ID:???
お前の頭

99Name_Not_Found2018/10/14(日) 13:29:16.10ID:???
>>95
style=size="1"color: の部分が特におかしい。

正しくはこう
<em style="size: 1; color: %color%; background-color: %bgcolor%; font-weight: bold;" class="specified">ID:%id%</em>

100Name_Not_Found2018/10/14(日) 13:41:14.06ID:???
>>97
そんなタグが新たに追加されていた事すら知らなかったw
しれっと増えてるのなんとかなんないのかよ
こういうのって追加された時、どこで情報得てるの?

101Name_Not_Found2018/10/14(日) 13:43:33.96ID:???
こういう情報があるから
5chが地味に役にたってるんだよな

HTML5.1について見てみたけどコンテキストメニューとかまだFirefoxしか対応してなかったり
下手に手出すと廃止になったりするから使うタイミングがむずいな

102Name_Not_Found2018/10/14(日) 13:47:04.19ID:FOdMOjgv
元宇宙人が教祖な詐欺団体 ノーザンコペルニクス
https://mevius.5ch.net/test/read.cgi/internet/1539396820/

103Name_Not_Found2018/10/14(日) 14:03:24.57ID:???
>>99
ありがとうございます
2chまとめくすの設定で
日付/IDの文字を小さくしたいわけなんです。
で、その設定画面に
言われたように打ちましたが変わりませんでした。
https://imgur.com/a/0zty9vS
どこがおかしいのでしょうか?
すみません。。

104Name_Not_Found2018/10/14(日) 17:02:18.82ID:???
たまにデベロッパーツールで開けないサイトあるんだけど
どういう仕組みなのか分かる人いますか?
自分のサイトでもやってみたい&他人のサイトを覗いてみたい

105Name_Not_Found2018/10/14(日) 18:32:04.77ID:???
ない

106Name_Not_Found2018/10/14(日) 19:20:51.02ID:???
>>103
別の部分からの影響があるかもしれないのでそのサイトのURLか
もしくは吐き出された実際のソース部分をブラウザで見てみないとこれ以上はなんとも

107Name_Not_Found2018/10/14(日) 22:45:45.13ID:???
初心者でやっとホームページの公開がうまくできた
レンタルサーバー借りたりFTPの設定とかいろいろ大変だった。
そこでようやくHTMLとCSSの本格練習していこうと考えてるんですけど
ファイルやフォルダの基本形式?ってどうなってますか?
今の所、index.htmlとstylesheet.cssだけなのですべて同じwwwフォルダに入れてるんですがimgとかも増えるでしょうし
フォルダで階層わけしたりするんでしょうか?
例えば、wwwフォルダ(index.htmlとCSSフォルダ(cssファイルがいっぱい)imgフォルダ(imgファイルいっぱい))など
もしそうするとしてちゃんと読み込んで貰えるものなのでしょうか?
ファイルを挟んだ場合パス?の指定をすれば大丈夫??

108Name_Not_Found2018/10/14(日) 23:12:58.09ID:???
はい

109Name_Not_Found2018/10/14(日) 23:29:58.36ID:???
せっかくながなが書いたのになぜY/N質問にしちゃうんだろうw

110Name_Not_Found2018/10/15(月) 03:34:25.46ID:???
>>100
w3cの方はちゃんと
草案がまず出て、その後に勧告になってるよ

whatwgのLSもそのはず
ちゃんと追っかけてないから違ったらすまん

111Name_Not_Found2018/10/15(月) 09:40:43.40ID:???
>>110
HTML5への端境期までは草案も追ってたんだけど
w3cのサイトを定期的にチェックするとかダルすぎるな

最新情報を常に発信しているような制作会社やブログを定期チェックしてればいいんだが
重要じゃない情報やメインになりえない情報も多すぎて、見なくなってきたわ

112Name_Not_Found2018/10/15(月) 12:43:22.42ID:???
>>106
ありがとうございます
文字サイズを小さくしたいのは
http://blog.livedoor.jp/nanjstu/archives/54101260.html
このまとめサイトのように

6: 風吹けば名無し 2018/09/06(木) 11:48:46.63 ID:u6cU61gi0
え?2本打ったんか

の、
6: 風吹けば名無し 2018/09/06(木) 11:48:46.63 ID:u6cU61gi0
の文字だけ小さくしたいのです。
それの2chまとめくすの
設定 4
日付/ID欄の設定の設定という場所がどうも鍵みたいで
https://imgur.com/a/0zty9vS
ここを書き換えればどうにかなるのかな?けど書き方がわからない
という感じなんであります

113Name_Not_Found2018/10/15(月) 12:59:08.14ID:???
> え?2本打ったんか

ダメ。ゼッタイ。

   __(\--、
  /⌒ ⌒ \∧
  / (●(●) ∨
 |(___ノ ト、
 (ミ) ヽ_/ (ミ))
  ∨ダメ。ゼッタイ/~
  \___/
  _||||_
  (ヽ…)( …/)
   ̄ ̄  ̄ ̄


薬物乱用防止

114Name_Not_Found2018/10/15(月) 13:50:00.02ID:???
>>111
なんでわざわざそんな二次情報を追うのか知らんが



超最新の、まだ誰も知らない方法を教えてあげよう
whatwgやw3cのサイトでは更新をXMLで配信してくれてるんだ、RSSっていうんだけど
だからそれだけ見てればいちいちサイトチェックなんてしなくてもいいんだ
これで最新情報に乗り遅れることもなくなるね!
みんなには内緒だよ!

115Name_Not_Found2018/10/15(月) 14:23:54.45ID:???
RSSチェックだるい

116Name_Not_Found2018/10/15(月) 17:53:06.11ID:???
35歳だけど、HTML5の資格取得して転職できるかな?
今は社内SEでVBAマクロとか、SQLのサーバー管理、データ抽出してます。
来月に子供生まれるんで、育休1年取って独学で勉強しようと思います。
年収は今は450万程度です。380万くらいにはなっても良いです。アドバイスお願いします

117Name_Not_Found2018/10/15(月) 18:17:53.16ID:???
やめたほうがいい

118Name_Not_Found2018/10/15(月) 18:58:01.56ID:???
html5の資格取っても無意味
学生でさえ使えるものなのに

取得しようとしてる技術が子供レベルなんだが…

119Name_Not_Found2018/10/15(月) 20:04:33.49ID:???
>>116
マジレスするとフロントは一通りさらうくらいにしといてディレクターとかを目指した方が良い

120Name_Not_Found2018/10/15(月) 20:07:23.20ID:???
>>118
逆にどのレベルが子供じゃないですか?

121Name_Not_Found2018/10/15(月) 20:12:16.31ID:???
HTMLCSSってのはマジで誰でも出来るからそれプラスの技術ないと

122Name_Not_Found2018/10/15(月) 20:27:34.63ID:???
デザインできるかプログラムできるかディレクションできるかどれか
HTMLなんてほんとガキでもできるし
それだけ覚えても仕事ではなんの役にもたたない
サイト更新のパートや学生バイトレベルのお仕事しかないで

123Name_Not_Found2018/10/15(月) 20:33:35.47ID:???
そんな簡単なレベルなんですね。
もっと難しいかと思っていました。
プラスアルファで目指すとしたらおすすめありますか?
ネットワークではCCNAを2ヶ月でとりました

124Name_Not_Found2018/10/15(月) 20:48:07.44ID:???
>>123
おれ資格なんか一つもないけど仕事はいくらでもくる
営業してないけど勝手にくる

そんで、資格取るのやめてアプリつくりな
その無駄な2ヶ月をアプリ作る時間に使う

125Name_Not_Found2018/10/15(月) 20:56:23.10ID:???
だが2ヶ月じゃまともなアプリはできない

126Name_Not_Found2018/10/15(月) 21:11:36.65ID:???
一年あるなら持ってれば食っていける資格がいいと思う

127Name_Not_Found2018/10/15(月) 21:51:01.34ID:???
>>126
何がおすすめ?

128Name_Not_Found2018/10/15(月) 22:24:58.38ID:by3GfRhw
テキスト入力のinputを横幅いっぱいにしたいのですが、フォントサイズを大きくすると
横幅をはみ出してしまいます。フォントサイズが小さいときは問題ないです。
inputに横幅を指定しないといけないのでしょうか?

<div style='width:360px'>
...
<div style='display:flex'>
<input type=text style='flex:1 1 auto;font-size:40px;'>
</div>
...
</div>

129Name_Not_Found2018/10/15(月) 22:40:24.13ID:???
>>127
1級建築士

130Name_Not_Found2018/10/15(月) 22:45:14.98ID:???
>>128
inputもただの置換インライン要素なので
大きさはwidthとheightで決めてあげてください

131Name_Not_Found2018/10/15(月) 22:46:04.01ID:???
>>112
参考サイトのソースを見たいんじゃなくて、
https://imgur.com/a/0zty9vS で設定し、出力された実際のページのソースが見たいの。
何故かと言うと、その設定がそのままブラウザに表示されていない可能性と、それ以外の強いセレクタが邪魔をしている可能性があるから。

132Name_Not_Found2018/10/15(月) 23:03:55.68ID:by3GfRhw
>>130
ありがとう。
いちいちwidthめんどくせーと思ったが、幅指定は先祖のdivに任せて
inputにはwidth:0を指定しとけばぴったり収まるようになった。

133Name_Not_Found2018/10/16(火) 11:19:40.33ID:???
jsを使わずにテキスト文字列をキーにセレクタ作れないもんかねぇ

134Name_Not_Found2018/10/16(火) 11:27:29.69ID:???
>>124
仕事来るってのは全部アプリ製作がらみなん?

135Name_Not_Found2018/10/16(火) 12:16:47.77ID:???
>>134
そうだよ
あとwordpressのテーマ作ったりプラグイン作ったり
wordpress使ったことなかったけど独学で一ヶ月半でテーマとプラグイン作った

そもそも俺は36歳から独学でコーディング勉強したおっさん
今は普通に他の開発者と連携して大規模アプリ作ったり、一人で開発したりしてる

136Name_Not_Found2018/10/16(火) 13:04:39.61ID:???
>>135
あなたすごいね。
何から勉強すればいいか教えて

137Name_Not_Found2018/10/16(火) 13:04:50.90ID:???
>>135
案件はどこから得てる?
立ち上げ当初と現在では経路は変わった?
立ち上げ時は今と比べて苦労してた?そうでもない?
今後に不安はある?ない?そう考える理由は?

138Name_Not_Found2018/10/16(火) 13:18:07.51ID:???
>>135
すっごいなあ
フリーランスなりたいけどどうすりゃいいのか探している最中だわ

139Name_Not_Found2018/10/16(火) 14:01:13.76ID:???
>>138
コネなしで始めるのはハードル高い、どころか棒なし棒高跳だよなあ
この商売に限った話じゃないけど
未経験ならなおさら

おっちゃんが始めた頃はまだ未開の地だったので
やりたい放題だったなあ

140Name_Not_Found2018/10/16(火) 14:05:14.43ID:???
>>135
はい、かっこいいよwww

141Name_Not_Found2018/10/16(火) 14:36:55.38ID:???
>>136
好きなところからでいいと思う
どうせ必要に応じてなんでもやらないといけなくなるし

>>137
知人が勝手に案件持ってくる
その知人は営業が得意でIT関連のコンサルやったりしてるから

あとは自分で作ったアプリをサイトで売ったりしてると、そのアプリのこういう機能つけたの作ってくれみたいな話がくる

>>138
フリーランスになるなら自分で営業ができるかが大事だね
俺は営業まったくできないから上の営業マンと組んでる

142Name_Not_Found2018/10/16(火) 15:40:54.65ID:???
>>139
だよなぁ・・・
クラウドソーシングサイトなんか見ても仕事取れる気せんわ。
とういか取れない

143Name_Not_Found2018/10/16(火) 16:08:44.81ID:???
>>141
あらかりてぇ。
拝んどこ(‐人‐)

144Name_Not_Found2018/10/16(火) 16:40:19.80ID:???
自分はIT関連コンサル営業の知人に不払いされた…

145Name_Not_Found2018/10/16(火) 17:53:55.43ID:???
すいません、ワードプレスのSTINGER8使ってるのですが、
レイアウトのズレみたいなのが気になります・・

質問てここで大丈夫でしょうか?

146Name_Not_Found2018/10/16(火) 20:59:35.33ID:???
wordpressスレがあるのでそちらでどうぞ

147Name_Not_Found2018/10/17(水) 13:20:04.38ID:???
フリーエンジニアは、Ruby on Rails だろ

YouTube の動画にあったけど、
エージェントに、10% とか払えばよいって

148Name_Not_Found2018/10/17(水) 14:59:59.00ID:???
containerクラスのついて質問なんですが

・containerクラスの中にheader, main, footer要素を入れているサイト

・header, main, footer要素にそれぞれcontainerクラスを入れているサイト

の2つを見かけますが違いとか正解とかはあるんでしょうか?

149Name_Not_Found2018/10/17(水) 15:34:45.36ID:???
自由にやればいい

150Name_Not_Found2018/10/17(水) 15:55:01.18ID:???
クラス名は特に意味ないんで
好きにしたらいいんだぜ

151Name_Not_Found2018/10/17(水) 16:08:39.23ID:???
どっちでもいいんですね、
こだわりもっている人多いのかなと思って聞いてしまいました

152Name_Not_Found2018/10/17(水) 16:12:22.69ID:???
できるやつがこだわりを持っているだけ

153Name_Not_Found2018/10/17(水) 18:16:34.93ID:???
ライブドアブログのスマホ版での広告の余白がどうにかなりませんか?
https://imgur.com/a/igybrDW
このように右側に大きな余白ができてしまいます
レイアウトで2つ並べても同じ形が2つ縦に並びます。
どうしたらびしっと埋まるような広告を作ることができますか?

154Name_Not_Found2018/10/17(水) 21:06:26.60ID:iY90Vo4v
<table>
 <tr>
  <td class="col1"></td>
  <td class="col2"></td>
  <td class="col3"></td>
 </tr>
</table>

table{
 width:100%;
}

td.col1{
 width:50px!important;
}
td.col2{
 width:40%;
}
td.col3{
 width:40%;
}
こんな風にすると、ブラウザの幅を変更した場合に、
col1は出来る限り50pxになると思ったのですが、
実際は、勝手に変化してしまいます。
たぶん、100-(40+40)=20% の幅になっているようです。
そう言うもんですか?
やりたいのはcol1を50pxくらいに固定して、
col2,col3は同じ幅にしたいのですが。

155Name_Not_Found2018/10/17(水) 21:38:40.49ID:???
flexでやった方が楽そう

156Name_Not_Found2018/10/17(水) 23:05:23.07ID:???
col2とcol3をcalc(50%-25px)にしたら?

157Name_Not_Found2018/10/18(木) 02:22:11.01ID:???
 私たち日本人の、日本国憲法を改正しましょう。
総ム省の、『憲法改正國民投票法』、でググって
みてください。拡散も含め、お願い致します。

158Name_Not_Found2018/10/18(木) 07:27:30.95ID:HZJuwx98
>>156
さっそく試してみました。
その結果col1は50pxに固定出来たのですが、
col2,col3が同じ幅になりません。
col3のほうが広くなります。原因わかりません。

>155
flexでやると言うのはtableを使わないと
言う事ですか?もしそうなら、どんな要素を使えば良いですか?

159Name_Not_Found2018/10/18(木) 07:43:39.29ID:???
>>158
156に加えて、tableにtable-layout: fixed;をつけてみたらどう?

160Name_Not_Found2018/10/18(木) 08:35:35.12ID:HZJuwx98
>>159
さっそく試してみたら、
col1,col2,col3が同じ幅になりました。
もうわけ分かりません。

161Name_Not_Found2018/10/18(木) 09:16:07.49ID:???
>>154
col2とcol3の指定がいらないので外す。
<style>
table{
width:100%;
}
td.col1{
width:50px;
}
</style>



色付けて可視化
<style>
table{
width:100%;
}
td.col1{
width:50px;
background-color: #ddd;
}
td.col2{
background-color: #f5f5f5;
}
td.col3{
background-color: #eee;
}
</style>

162Name_Not_Found2018/10/18(木) 09:31:59.95ID:???
そういえばクロームは大丈夫なんだけど、
FirefoxとIEだとテーブルが崩れてtable-layout: fixedで直ったな
display:tableで子供全員に幅書いてたんだけど

163Name_Not_Found2018/10/18(木) 09:52:11.42ID:???
Table ってつかわくなったな

164Name_Not_Found2018/10/18(木) 10:04:28.72ID:HZJuwx98
>>161
col2,col3のwidthを指定しないと、
それらのwidthは中のテキストの長さに応じて
勝手に決まりますよね。
ご提示いただきましたコードを試しましたが、
col2=col3にはならなかったです。

165Name_Not_Found2018/10/18(木) 10:09:03.43ID:???
つかうよ

166Name_Not_Found2018/10/18(木) 13:08:22.84ID:???
table-cellの幅の決まり方って独特だからポイントで使いたくなることはある

167Name_Not_Found2018/10/18(木) 13:27:49.93ID:???
どう独特なの?

168Name_Not_Found2018/10/18(木) 19:17:47.16ID:???
>>164
ごめん。文字数考えてなかった
バグというかダメぽいな
もうdiv+tabelでやるしかないんじゃね

169Name_Not_Found2018/10/18(木) 20:45:30.17ID:???
たべる

170Name_Not_Found2018/10/19(金) 14:46:03.93ID:???
>>164
tdの親、つまりtrに対してflexを使うか
tdに対してinline-blockだな

table{
width:100%;
}
tr{
display: flex;
}
td.col1{
width:50px;
}
td.col2{
width: calc( 50% - 25px );
}
td.col3{
width: calc( 50% - 25px );
}

171Name_Not_Found2018/10/19(金) 15:14:39.89ID:???
>>164
ごめん、flexならcalcは要らないか
んでIE11とかも考慮するなら下記みたいな感じIE9とかは知らない
col2とcol3は設定いらない

table{
width:100%;
}
tr{
display: flex;
}
td{
display: block;
flex: 1;
}
td.col1{
flex: 0 0 50px;
}

172Name_Not_Found2018/10/19(金) 15:21:30.85ID:/OVo9gpo
header,footer,mainなどのタグでセクショニングすると、マシンリーダビリティが向上するのって、構成が分かりやすくなるから?それとも、タグで囲む事自体が重要なの?

タグで囲む事自体が重要なら、めちゃくちゃシンプルなコードでもセクショニングはした方がいいってこと?
例えば、php使った簡単な問い合わせフォームのコードをセクショニングすると、main要素だけになっちゃう場合とか。

173Name_Not_Found2018/10/19(金) 15:26:07.19ID:???
構造がわかりやすくなるからだろ
header footerなど共通部分は重複コンテンツとみなさないように重要度下げるのに対し
main部分を重要視したり
でもアクセス数やアクセス内容の重要度に比べたらほんと大した差は無いと思うがね。

174Name_Not_Found2018/10/19(金) 15:36:57.32ID:???
tableにdisplay:blockでレスポンシブにしたらいい

175Name_Not_Found2018/10/19(金) 18:11:54.53ID:/OVo9gpo
https://www.javadrive.jp/phpappli/keijiban/index4.html

ここに載ってるサンプルコードもheader,mainぐらいには分けた方がいいのでしょうか…

176Name_Not_Found2018/10/19(金) 19:14:45.19ID:???
>>175
このサンプルを無理やりマークアップするならこんな感じになる。
<hrader><h1>掲示板</h1></header><main>投稿部分</main>

サンプルだからというのもあるけど、知らない人を集めようとするならもっと親切にサイトについて書かないといけない。
何の掲示板で、どういうルールがあって、どういうメニューがあって、問い合わせ先はどこで、とか。
それらが全て自然とマークアープに繋がるから本来は自然とnavもfooterも必要が出てくる。
必要ないというならそもそも人を集める必要がないページなんだよ => つまりSEOは不要

177Name_Not_Found2018/10/19(金) 21:26:09.24ID:???
生cssでいつのまに変数が使えるようになってたか・・・

:root {
--main-gutter: 12px;
--main-position: center;
--main-lh: 1.5;
}

と思ったらIEだけ・・死ね

178Name_Not_Found2018/10/19(金) 21:29:22.93ID:???
↑androidも含めてIE以外は主要ブラウザは全部対応OKなんだが使ってる?

179Name_Not_Found2018/10/19(金) 22:20:06.66ID:oxDjTXud
使ってない

普段scssだからなあ

180Name_Not_Found2018/10/19(金) 22:40:23.97ID:???
使ってるぜ

181Name_Not_Found2018/10/20(土) 00:25:42.06ID:yOre4lbB
>>171
table{width:100%;}
tr{display:flex;}
td{display:block;flex:1 1 1px;word-break:break-all;}
td.col1{flex:0 0 50px;}

tdのflex:1 1 1pxとword-break:break-allを追加しました。
ie11とfirefoxで確認。

182Name_Not_Found2018/10/20(土) 07:36:39.54ID:???
>>170>>171>>181
どの方法でも上手く行きました。
ありがとうございました。

183Name_Not_Found2018/10/20(土) 17:16:46.69ID:???
formって不便じゃない?
ネストできなしいサブミットにアドレスつけられないし
フォーム共通にして別のアクションにポストしたいときどうしたらいいの

184Name_Not_Found2018/10/20(土) 17:37:38.02ID:???
ネストできるしサブミットにアドレスつけられるが
そんな事しなくても普通に、フォームに複数のアクションボタンをつければいいだけ
サーバー側で同じアドレスへのポストをパラメータ見て振り分けるだけ

185Name_Not_Found2018/10/20(土) 17:38:24.65ID:???
>>183
アクション先を変えればいいだけじゃん
もしくはアクション先を同一にしてポストするsubmitボタンの判定で別けるとか
どうにでもできる

1861842018/10/20(土) 18:01:59.36ID:???
あー、ネストはできなかったな

187Name_Not_Found2018/10/21(日) 10:51:34.04ID:???
どういうこと?

<form method="post">
<form method="get">
<input>
<input>
<submit>
</form>
<submit>
</form>

とか

<form>
<input>
<input>
<submit action="get">
<submit method="post">
</form>

ってできるの?

188Name_Not_Found2018/10/21(日) 11:29:02.65ID:???
できねーっていっとんじゃ

189Name_Not_Found2018/10/21(日) 12:16:40.61ID:???
>サブミットにアドレスつけられるが
>アクション先を変えればいいだけじゃん

これ具体的にどうかいて何をかえれるの?
name属性で同じCGI内でボタン識別できるのは知ってるけど
URLやGET,POSTメソッドかえることってできるの?

190Name_Not_Found2018/10/21(日) 12:28:06.48ID:???
動的に好きなように変えればいいじゃん

191Name_Not_Found2018/10/21(日) 12:35:02.88ID:???
まあそうなんだけどだからJSの力をかりないとできないの不便だなーと

192Name_Not_Found2018/10/21(日) 15:40:14.32ID:???
スライダー沢山あるけど、使い分けるんじゃなく、どれか1つでカスタマイズ次第でなんでも可能なものですか
https://creive.me/archives/10461/#jQuery

193Name_Not_Found2018/10/21(日) 16:39:26.63ID:???
SlickとBxsliderだな
自分では作らん

194Name_Not_Found2018/10/21(日) 17:21:54.92ID:???
swiperが熱いらしい

195Name_Not_Found2018/10/21(日) 17:46:43.82ID:???
>>192
なんでも可能かはドキュメント見るしかないけどまぁ試して見るのが手っ取り早い。
可能なことが多いと設定が多岐にわたり簡単なスライダー実装する時めんどくさかったりもするけど。

196Name_Not_Found2018/10/21(日) 18:12:33.71ID:???
俺はいつもswiperだな
前はslick、その前はbx使ってたけどもう使うことはないな

197Name_Not_Found2018/10/21(日) 19:23:22.83ID:???
俺もswiperだな
bxsliderはautoの扱いが癖強くてなあ

1981922018/10/21(日) 19:45:00.37ID:???
私もSWIPERです。最初に覚えたのがそれだったので。Slickとかのほうがメジャーとは知らず。

先日画像サムネイルとキャプションをつけたくてFotorama使ったけど、Swiperでもできたのかも。

199Name_Not_Found2018/10/21(日) 20:25:12.90ID:???
自分はbx
1つのページ内に複数のスライダーがあって全部違うの使ってるのに出会ったことがある
悩んだんだろうな

200Name_Not_Found2018/10/21(日) 21:47:28.78ID:???
スライドとかのアニメーションcssでも出来るけど無駄かね?
アニメーションであんまりjs使いたくない病なんだが…

201Name_Not_Found2018/10/21(日) 22:13:10.20ID:???
>>200
組んでるとパズルみたいで面白くはあるけど枚数変わるたび直さなくちゃいけないじゃん

202Name_Not_Found2018/10/21(日) 22:37:38.46ID:???
そういう場合にscssを使うのです

203Name_Not_Found2018/10/21(日) 23:45:53.26ID:???
だいたい更新頻度高いじゃんスライダー入れるとこって

204Name_Not_Found2018/10/22(月) 00:17:29.47ID:???
画像のサイズ同じならファイル名同じにして上書きすればいいだけだから
そんな面倒じゃなくね?

205Name_Not_Found2018/10/22(月) 00:19:26.62ID:???
>>204
んで蔵がキャッシュ消さずに見て
更新されてないんですが!!
までテンプレ

>>204
いや、CSSだけで作るやつの話
枚数増えると破綻するから

そもそもcssだけだとフリックも吸着もできないなー

208Name_Not_Found2018/10/23(火) 00:49:09.64ID:???
スライダーに最低限必要なもの
・自動スライド
・スライドからのリンク
・フリック(左右)
・ナビゲーション(前次のやつ)(左右)
・ページネーション(ドット/サムネイル)
jsなしでできるのって最初の2つだけじゃね?

209Name_Not_Found2018/10/23(火) 01:52:52.78ID:???
もうスライダーがメインのサイトは古く感じるわ

210Name_Not_Found2018/10/23(火) 18:03:24.24ID:???
>>208
ナビゲーションとページネーションはcssでも出来る

フリックはやったことないな

211Name_Not_Found2018/10/23(火) 18:10:04.61ID:???
ページネーションをcssってまたチェックボックスだろw
そういうのさわりたくない

212Name_Not_Found2018/10/23(火) 18:43:11.43ID:???
すまん。教えてくれ。

<div class=外側>
<div class=内側>
<p>ああああ</p>
</div>
</div>

これで、全画面固定して、内側の上下にボーダー引こうとしても引けない…。

内側で線を引こうとしてるのは、全画面の半分の幅だけに引きたいからなんだけど。

別の方法探るしかないかね

213Name_Not_Found2018/10/23(火) 19:42:01.30ID:???
cssも書け

214Name_Not_Found2018/10/23(火) 20:02:10.40ID:???
<label></label>
の内側ってブロックでも何でもいれてもいいの?

215Name_Not_Found2018/10/23(火) 20:45:05.38ID:???
Form 作り方わからんぞ これHTMLとCSSで済む問題じゃないよな。 
作り方サイト見てもことごとくそこにしか触れてない。

216Name_Not_Found2018/10/23(火) 22:53:15.92ID:???
>>215
HTMLとCSSで
なんとかなってない人の方が少ないと思うけどなあ

217Name_Not_Found2018/10/23(火) 23:25:03.40ID:???
>>215
PHPかvus.jsかAWSのサービス使え

218Name_Not_Found2018/10/23(火) 23:58:02.42ID:???
htmlとcssができない人に
php、vue、awsを勧めるのかw

219Name_Not_Found2018/10/23(火) 23:58:54.63ID:???
ひょっとしてサーバーサイドがないと
form意味ないだろって言ってるのか

220Name_Not_Found2018/10/24(水) 00:45:14.46ID:???
jsでいいでしょ

221Name_Not_Found2018/10/24(水) 01:51:16.95ID:???
form受け取る側で無料サービスでできるのってPHPぐらい?
他のフレームワーク無料で使えるとこってあるの?

222Name_Not_Found2018/10/24(水) 02:35:24.05ID:???
フレームワークは無料ですよ

223Name_Not_Found2018/10/24(水) 08:55:01.65ID:???
htmlとcssって頑張ればどのくらいである程度できるようになります?
システム管理やってるものですが、急にHP担当がやめることになって勉強しないといけないです。
アドバイスもあれば教えて下さい

224Name_Not_Found2018/10/24(水) 10:04:41.15ID:???
頑張れば3日でできるレベル

225Name_Not_Found2018/10/24(水) 10:27:26.00ID:???
>>212
線を付けるだけならcssで内側のdivにborder付ければいいだけ
内側div幅が画面いっぱい100%のまま線の横幅だけ50%にしたいって言うなら
内側divに疑似要素:beforeと:afterを使ってそれぞれにborderを付けて幅50%とかすればいい

>>214
HTMLのバージョンと仕様による

226Name_Not_Found2018/10/24(水) 11:29:58.61ID:???
>>224
それはないだろ
なにいってんだこいつ

227Name_Not_Found2018/10/24(水) 11:42:58.73ID:???
ある程度って書いてるだろ
正直、3日もいらん
1日で十分

228Name_Not_Found2018/10/24(水) 12:33:11.55ID:???
フォームはGoogle Formを埋め込むのが利用者目線ではベストじゃないかね。

229Name_Not_Found2018/10/24(水) 12:33:13.81ID:???
>>223
人にもよるけど
だいたい3日から30年ってところ

230Name_Not_Found2018/10/24(水) 13:56:16.74ID:???
>>227
ムリムリ

231Name_Not_Found2018/10/24(水) 15:27:03.81ID:???
1週間あれば余裕だろ

232Name_Not_Found2018/10/24(水) 15:32:45.18ID:???
どっちにしても誰でもすぐに習得できる
できないなら人間やめろ

233Name_Not_Found2018/10/24(水) 19:10:36.51ID:???
システム管理やってるって書いてんだからプログラマだろ
JavaやC++を完璧にマスターしてるかもしれんから
HTMLくらい余裕だろ。

234Name_Not_Found2018/10/24(水) 19:42:16.60ID:???
JavaやC++完璧にマスターしてる人はシス管なんてやんないよ

235Name_Not_Found2018/10/25(木) 16:01:34.62ID:???
>>232
って言う人って
蓋開けてみると条件付きでしか習得してない印象

236Name_Not_Found2018/10/25(木) 23:18:29.47ID:o5FKZ+A8
キーボードを押すだけで、
リンク先に飛ぶような、htmlを記述する事ってできるのですか?
リンク先は、他のサイトでも良いし、同じページ内の別の場所でも良いのですが。

それとも、そんなサイトを作る事は不可能ですか?

237Name_Not_Found2018/10/26(金) 01:15:49.69ID:???
HTMLもCSSも言語的には簡単よ
アルファベットわかるなら小学生でも覚えられる
ただそれらをつかってデザインする
デザイナーがつくったデザインをコーディングする
ディレクターやクラが言う要望のアクションをつけるってなると
また別なんよ

238Name_Not_Found2018/10/26(金) 09:03:35.89ID:???
>>236
JSで可

239Name_Not_Found2018/10/26(金) 10:55:39.11ID:???
>>208>>210
比較的新しい仕様で
CSS Scroll Snapというのがある。
https://drafts.csswg.org/css-scroll-snap/#snap-overflow

以下のページにあるCodePenのサンプルをスマホで最新のChromeで触ってみたら問題なく動いた。
https://newinweb.com/2018/09/06/css-scroll-snap/

Googleの解説も参照のこと。
https://developers.google.com/web/updates/2018/07/css-scroll-snap

240Name_Not_Found2018/10/26(金) 11:13:08.50ID:???
CSSトリックの翻訳記事もあった
https://coliss.com/articles/build-websites/operation/css/how-to-use-css-scroll-snap.html

あとはいつものMDN

241Name_Not_Found2018/10/26(金) 11:22:32.58ID:???
すごーい初めて知った

242Name_Not_Found2018/10/26(金) 12:59:49.42ID:???
>>239
すげえ

243Name_Not_Found2018/10/26(金) 13:24:30.08ID:???
まえに一度使おうとして断念したんだけど
CSSのscrollsnapって、JSで拾えるイベントあるもの?

244Name_Not_Found2018/10/26(金) 13:36:16.82ID:???
えぇ、それならJSで実装すればいいだけでは…

245Name_Not_Found2018/10/26(金) 14:53:50.13ID:???
まあそうなんだけど
snapしたときになんかイベントあったら便利なのになー
と思いまして

246Name_Not_Found2018/10/26(金) 15:52:49.81ID:???
便利だと思う挙動は他人には不便な場合が多い

247Name_Not_Found2018/10/26(金) 16:26:34.94ID:???
そりゃあったほうがいいわな
transitionのtrantitionEndみたいなもんだろ?

248Name_Not_Found2018/10/26(金) 16:30:42.72ID:???
わかる
snapした瞬間
ズギャーーーーーーン!!!
って鳴らしたいよね
このスレの総意

249Name_Not_Found2018/10/26(金) 16:32:03.74ID:???
ごめん、人によって
ガシューーーーーーン!!!
かもしれないから総意とは言えなかった

250Name_Not_Found2018/10/26(金) 17:44:23.96ID:???
発火するだけならあった方が便利だろうさ

251Name_Not_Found2018/10/26(金) 17:58:18.00ID:???
タッチイベント組み合わせて組めるのでは?知らんけど。
https://developer.mozilla.org/ja/docs/Web/API/TouchEvent

252Name_Not_Found2018/10/26(金) 18:01:43.66ID:???
LP的なアニメーションごりごりを作る時に
ぶっぴがーん!に合わせてアニメーション始めたいというのは当然あるな
同等のことをするJSライブラリが
停止時に発火するコールバックを設定できるのもそのためだろう

253Name_Not_Found2018/10/26(金) 18:55:23.25ID:???
もういいから病院行け

254Name_Not_Found2018/10/26(金) 22:45:11.93ID:???
え、あれイベント発生しねえの

255Name_Not_Found2018/10/30(火) 02:10:07.11ID:???
amazonと楽天にリンクするボタンがほしいのです
それっぽいのどこぞにプログラムございませんでしょうか?

256Name_Not_Found2018/10/30(火) 07:38:40.38ID:???
アフィリンクのボタンならそれぞれのアフィ審査受けないとリンクはもらえん
ただのボタンならプログラムじゃなくてaタグ

257Name_Not_Found2018/10/30(火) 12:18:49.33ID:???
Superfish モバイル用のハンバーガーメニューの設定がわからない。

258Name_Not_Found2018/10/30(火) 12:22:19.03ID:???
>>256
ありがとうございます
アマゾンも楽天も通ってます。
https://imgur.com/a/Yg8lNFi
このようなボタン形式のリンクがほしーのです、

259Name_Not_Found2018/10/30(火) 13:50:03.65ID:???
>>258
aタグのリンクにcss適用すればいい
aタグ ボタン cssで検索すればいくらでもでてくる

260Name_Not_Found2018/10/30(火) 15:13:01.68ID:???
cssが何かもよくわかってないんだろ
カエレバ CSSで検索

261Name_Not_Found2018/10/30(火) 16:34:35.39ID:???
>>259
>>260
ありがとうございます。こういうふうな仕組みなんですね、勉強になります
いろいろ触ってみますが、また何かあったらお助けお願いするかもです、、
ありがとうございます!

262Name_Not_Found2018/10/30(火) 17:37:16.06ID:???
ステマっ盛り

263Name_Not_Found2018/10/30(火) 20:10:11.43ID:vCSL+t+e
inline-blockである .dan と .jo がDOMツリー上で
男女女女男女男女男男女女
と並んでいるとき

男女
 女
 女
男女
男女

男女
 女

と左右に並べ分けたいのですが、どういう方法がありますか?
floatとかですか?

.dan + .jo { float: left } …うーん?

264Name_Not_Found2018/10/30(火) 20:15:01.48ID:???
ちょっと圧縮してみた


男姦嬲嫐女

265Name_Not_Found2018/10/30(火) 20:58:32.04ID:???
>>264
男が一人消えてるやり直し

266Name_Not_Found2018/10/30(火) 21:22:26.01ID:???
姦姦姦
姦嫐姦
姦姦姦

真ん中が俺

267Name_Not_Found2018/10/30(火) 22:09:51.13ID:???
.dan, .jo {
display: inline-block;
width: 49%;
}
.dan {
background-color: #eef;
margin-right: 2%;
}
.jo {
background-color: #fee;
}
.jo + .jo {
margin-left: 51%;
}
こんなじゃだめ?

268Name_Not_Found2018/10/30(火) 23:10:06.46ID:???
>>266
マンコだらけ、略して曼陀羅

269Name_Not_Found2018/10/31(水) 01:30:49.54ID:CBp4tfQF
>>238
JavaScriptの事で良いんですか?
解りました。
ありがとうございました。

270Name_Not_Found2018/10/31(水) 02:36:22.03ID:???
>>269
ありゃ
htmlでって書いてたのにjsでいいの?

271Name_Not_Found2018/10/31(水) 10:48:59.68ID:4RdtlEAQ
CSS Gridについて教えてください。

<div class="container">
<div class="a"><img></div>
<div class="b"><img></div>
<div class="c"><img></div>
...以下大量に。
</div>

この様な感じで、インスタグラムの様に、.a .b .c ...の中にあるimgをひたすら詰め込んで羅列したい場合は、
レイアウトする画像のサイズが決まっていれば(例えば300px角)
grid-auto-rows:300px と grid-template-columns:repeat(auto-fit,300px)
で可能ですが、

ウィンドウサイズによって画像のサイズも変動する様にするには、
(100px角にも800px角にもなったりする)
auto-rowsもrepeatも使用せずに、
.a .b .c ... にgrid-row と grid-columnをそれぞれのクラスに指定しなくてはならないのでしょうか?

272Name_Not_Found2018/10/31(水) 11:24:06.45ID:???
IEのクソ対応を考えたらcss gridは使いたくない

273Name_Not_Found2018/10/31(水) 11:40:26.37ID:4RdtlEAQ
こちらのサイト(カントリーマウム)は
gridを使用しているとのことで、
ウィンドウサイズを変えるとそれに伴って中の画像のサイズも変動していますが、
これは画像1枚1枚をcolumnとrowで1/5や5/17と1つずつ指定しているのかと思いまして

274Name_Not_Found2018/10/31(水) 11:40:58.77ID:4RdtlEAQ
>>273
URLを貼り忘れました すみません
https://www.fujiya-peko.co.jp/countrymaam/

275Name_Not_Found2018/10/31(水) 13:53:18.41ID:???
>>273
display: grid;を利用してるわけじゃなくてデザインがグリッドレイアウトなだけだと思う。

276Name_Not_Found2018/10/31(水) 14:14:16.08ID:4RdtlEAQ
>>275
検証を使うとdisplay:gridなら縦横の点線が出ると思うのですが、これにはでないので不思議でした
そういうことだったのですね・・・
このサイトはテーブルセルとtext-alignで画像を配置しているのでしょうか
ありがとうございます!

277Name_Not_Found2018/10/31(水) 15:22:50.40ID:???
>>276
flex-boxでwrapすればいいのでは?

278Name_Not_Found2018/10/31(水) 16:23:07.20ID:???
今日のおやつはカントリーマアムだな

279Name_Not_Found2018/10/31(水) 18:06:30.65ID:yE26+RAR
CSSに凝りだすと、ちょっと画面が狭い場合にはこんな感じで
@media screen and (max-width: 480px){
  設定を書く
}
とやりますよね。
でも、こう言うメディアクエリを一箇所に集めるのは手間が掛かります。
別の要素に対してCSSを書いていて、その場合にも少し狭い場合には、
@media screen and (max-width: 480px){
  別の設定を書く
}
みたいに、CSSの中に上のような同じ記述が何度も出て来ます。
WEBプログラミング上級者の人は、こう言う場合どのように対処されているのでしょうか?

@media screen and (max-width: 1030px){・・・}
@media screen and (max-width: 768px){・・・}
@media screen and (max-width: 480px){・・・}
みたいなのは一箇所にまとめるべきですか?

280Name_Not_Found2018/10/31(水) 18:36:58.71ID:???
SASS使おう

281Name_Not_Found2018/10/31(水) 19:06:52.74ID:???
>>279
ファイルをメディアによって分け、linkタグのmedia属性でメディア種別やクエリを指定する。
このリソースはメディアの条件が真になった場合のみ読み込まれるので、
1ファイルにまとめるより読み込まれる容量も減る。
https://developer.mozilla.org/ja/docs/Web/HTML/Element/link

SASSは所詮ブラウザに直接解釈されないので、使う場合はどのようなCSSになるのかを念頭に置きながら使わないといけない。
ツールが何をやっているかも分からずツールに使われている>>280のようになってはいけないよ。

282Name_Not_Found2018/10/31(水) 19:33:16.31ID:???
>>281
えええええ
そっちの方が面倒臭いじゃん…

283Name_Not_Found2018/10/31(水) 19:41:40.84ID:???
>>282
面倒くさいにも二通りの意味があってな


作業を効率化する(のが面倒くさい)が、その後の作業自体は楽になる

作業を効率化しなくて楽だが、その後の作業自体は面倒くさい


どっちの面倒くさいを取るかなんだよ?

284Name_Not_Found2018/10/31(水) 19:41:58.97ID:???
まぁそれがめんどくさいレベルの規模なら自動化の契機だな。PostCSSとnpm scriptまたはgulpで自動化できる。

285Name_Not_Found2018/10/31(水) 19:43:09.09ID:???
>>281
> SASSは所詮ブラウザに直接解釈されないので、使う場合はどのようなCSSになるのかを念頭に置きながら使わないといけない。

ブラウザで直接解釈されても、同じことでは?

286Name_Not_Found2018/10/31(水) 19:44:27.06ID:???

287Name_Not_Found2018/10/31(水) 21:31:49.57ID:yE26+RAR
>>281
解説ありがとうございました。
>このリソースはメディアの条件が真になった場合のみ読み込まれるので、
これはブラウザのウインドウ幅を変化された場合に、
それに応じてメディアファイルが読み込まれると言う事ですか?

288Name_Not_Found2018/11/01(木) 02:14:38.46ID:???
>>283
あたまかたーい
普通は
その後の作業が面倒くさくならないように、作業を効率化するよねー

289Name_Not_Found2018/11/01(木) 02:55:06.73ID:???
@media なんかを使っている、WEBプログラミング上級者は100%、SASS!
というか、海外では初心者でも90%、SASS

知らないのは、50% の日本人だけ

290Name_Not_Found2018/11/01(木) 02:59:28.07ID:???
>>289
日本でもそんなに変わらんじゃろ
流石に
普及してから何年経ったと

291Name_Not_Found2018/11/01(木) 04:52:41.04ID:+y4YZeqs
>>270
すんません。
さっぱり解らないんですが、htmlのjsってのが有るんですか?
それと、javaとhtmlってのは違うものなのですか?
自分としては目的のサイトを作れるのなら、方法については
何でも良いのですが。

292Name_Not_Found2018/11/01(木) 05:14:30.37ID:???
>>291
なんでもいいのなら他人に任せたほうが良い
自分でやるなら、理解しろ

293Name_Not_Found2018/11/01(木) 12:44:07.97ID:???
>>291
JSはJavaScriptのことだ
名前はJAVAと似ているが全くの別物だ
JAVAとJavaScriptは、メロンとメロンパンくらい違うものだ

JavaScriptはブラウザの中で動くプログラムのことだ

んでHTMLは文章の構造を決めるものでたいした機能はないんだ
何かを押したらどうこうする、みたいなのはJavaScriptの仕事だ

294Name_Not_Found2018/11/01(木) 12:51:39.71ID:???
>>293
まったくわかりません。
もっとわりやすく説明できませんか?

295Name_Not_Found2018/11/01(木) 13:12:45.81ID:???
ミニ丼セットの丼だけのオーダーはお受けできませ「ぬ!」

296Name_Not_Found2018/11/01(木) 16:47:53.33ID:???
メロンとメロンパンの例えに感動した

297Name_Not_Found2018/11/01(木) 17:07:01.91ID:???
>>296
いや昔からよく言われるから

298Name_Not_Found2018/11/01(木) 17:13:13.76ID:???
この上なくわかりやすいけどなぁ

299Name_Not_Found2018/11/01(木) 17:16:37.87ID:???
英語圏で色々もあるよー
difference java javascript でググると似たような与太話しいっぱいヒットする
CatとCatfish
hamとhamstar
CarとCarpet
CockとCocktail
とかとか

300Name_Not_Found2018/11/01(木) 20:55:35.84ID:???
仕様見てると
<h1>
<p>~</p>
</h1>



<p>
<h1>
~~~~
</h1>
</p>

もどっちも書いても良さそうだけど、ブログで後者はNGって記事をよく見る

実際どうなんやろ?

301Name_Not_Found2018/11/01(木) 20:56:38.59ID:+y4YZeqs
>>293

自分は291ですが、
良くわかりました。
ありがとうございました。

302Name_Not_Found2018/11/01(木) 21:00:41.05ID:???
>>266
20代前半はそういう職場で働いてたわ
皆おっとりしてたから居心地は良かったが
性格悪い奴とか気性が荒い女が紛れてると
パシリに使われるかボイコットされたり最悪な環境にもなりえるんだろうな

303Name_Not_Found2018/11/01(木) 21:07:03.94ID:???
>>279
それは汎用性、メンテナンス性に欠けるクソ構造だよ
更新や編集の多いサイトを深く運用してみれば意味がわかるようになる。

優れたデザインは常にシンプル。
複雑なものを複雑に書くより
必要なもの以外をいかにそぎ落としていくかに尽力した方がいい。

304Name_Not_Found2018/11/01(木) 22:45:47.80ID:???
>>303
>優れたデザインは常にシンプル

それ複雑なデザインをまとめられないだけなんじゃ…

305Name_Not_Found2018/11/01(木) 22:53:38.17ID:???
複雑なデザインをまとめるってどういうこと?

306Name_Not_Found2018/11/02(金) 01:05:16.95ID:???
整理してシンプルにすること

307Name_Not_Found2018/11/02(金) 03:10:17.06ID:???
複雑なものを整理してまとめることは誰でもできる
複雑なものを複雑なままバランス取るのは素人にはできん

308Name_Not_Found2018/11/02(金) 04:16:34.13ID:???
なら誰でもできることをやったほうが良いのでは?

309Name_Not_Found2018/11/02(金) 16:59:34.85ID:???
>>300
よさそうじゃない
どっちもだめ。

310Name_Not_Found2018/11/02(金) 20:11:59.71ID:???
根拠

311Name_Not_Found2018/11/02(金) 20:20:39.04ID:hPJ8g+KP
>>310
少なくとも後者は駄目だわな
<p>はブロックレベル要素を内包できない
だから無理やり入れると、そこで<p>のブロックは一度切れるじゃろ?

前者はどうだろう
<h1>って内包してはならん要素ってあったかなあ

312Name_Not_Found2018/11/02(金) 21:04:11.56ID:???
前者はいい
後者はだめ
根拠はchrome

313Name_Not_Found2018/11/02(金) 22:02:05.52ID:DYmjkWhV
所見です
font-sizeについて質問があります。
全ての要素のサイズをvmまたは%で指定し、
font-sizeもvmで指定すれば理論上、画面幅をいくつにしようが
全ての縦横比、スタイルは保持され、
文字もまた、行内文字数、行数が保持されるはずなのですが、
実際に画面幅を変えると、行内文字数、行数は変化してしまいます。
これはなぜでしょうか?

例外的にstrong内の文字は行内文字数、行数は変化しないことを発見しました。
これはなぜでしょうか?

314Name_Not_Found2018/11/02(金) 22:08:05.63ID:DYmjkWhV
vmではなくvwでした

315Name_Not_Found2018/11/02(金) 22:28:57.56ID:???
>>310
h要素はブロックレベル入れられないから

316Name_Not_Found2018/11/02(金) 23:22:45.29ID:???
>>300
やってもいいしちゃんと表示されるけど
正しいHTML構造文としてはNG
SEO的に評価下がるよってだけ

317Name_Not_Found2018/11/02(金) 23:36:36.76ID:???
>>316
それを世間一般ではやっちゃダメって言うやろ

318Name_Not_Found2018/11/03(土) 00:06:06.53ID:???
SEOきにしない趣味のサイトならいいんじゃね

319Name_Not_Found2018/11/03(土) 02:17:30.15ID:???
実際にはSEOの評価は下がらんのやけどねw

何故かと言うと結局の所検索で重要視したいのは
HTMLの文法ではなくてコンテンツだから。
HTMLのタグの違いによるスコアの差が悪用されたから
タグによってのスコアの差はなくなってしまっている

今はコンテンツ(CSSなどを反映した実際に画面に表示される内容)で
判断されるようになってる。昔は不正なHTMLをどのように解釈されるかが
バラバラだったから、正しいHTMLを書くことが推奨されていたけど、
HTML5になってから不正なHTMLも同じように解釈するようになったので
ブラウザで表示されてるように解釈される

例えば隠し文字は評価対象から外れるとかね

320Name_Not_Found2018/11/03(土) 08:47:05.46ID:???
ブロックレベルってhtml5でもまだ言うの?
まあフローコンテンツとかより分かりやすい気もするんだけど

321Name_Not_Found2018/11/03(土) 11:40:17.31ID:???
div多用したら怒られたんだけど…

divっていっぱい使ったらあかんのか?

322Name_Not_Found2018/11/03(土) 11:42:21.97ID:???
そりゃ必要ないときに使うのはだめだろうな
適切なタグを使っていれば、divは殆どいらない

323Name_Not_Found2018/11/03(土) 13:37:56.48ID:???
ネストしたレイアウトが必要だったり
アコーディオンやタブみたいに変化するようなのはdiv大量になるのは仕方ないんじゃない

逆にそういうのBEM記法使わずにコンテナでかこわなかったりすると
flex がとじてもどしたら block になったとかで変なバグ入りそう

324Name_Not_Found2018/11/03(土) 15:40:16.03ID:???
変な空divでレイアウト崩れることもあるからなぁ

325Name_Not_Found2018/11/03(土) 15:49:53.74ID:???
>>322
Google「・・・」

326Name_Not_Found2018/11/03(土) 16:10:21.17ID:???
>>321
いくらでも使っていいぞ
なんなら二、三個くらいおまけしてやってもいい

余分なタグは使うなとかいう
カビの生えたストリクト原理主義者の言うことに耳を傾ける必要はねえ
マジで

327Name_Not_Found2018/11/03(土) 17:26:19.28ID:pS15NHy1
現場に出なきゃわからないことが多いんだろうな
今はfloatは使わずにflexで、inlineは使わずにinline-blockが普通?

328Name_Not_Found2018/11/03(土) 18:20:29.18ID:???
普通っていうか、その場に適したものを使うだけよ。

329Name_Not_Found2018/11/03(土) 19:12:51.62ID:???
いまの現場ほぼdiv
かなりネストしてる
SEO関係ないけどどうなのよと思ってる

330Name_Not_Found2018/11/03(土) 19:27:12.16ID:???
Google「・・・」

331Name_Not_Found2018/11/03(土) 19:37:58.27ID:???
そうですよねgoogleさん…

332Name_Not_Found2018/11/03(土) 19:38:31.69ID:???
>>319
キュレーションサイトの問題で
構造より無意味な文章1万文字のほうが評価が高いって結果でちゃったからなぁ
あれからグーグルがなんか対策したならしらんけど

333Name_Not_Found2018/11/03(土) 21:18:59.56ID:6Ec8PRLb
何らかの要素を
display:none;
した後で、再び表示させたい場合、
display:unset;
display:initial;
どちらをセットしても同じような挙動になりますか?

334Name_Not_Found2018/11/03(土) 21:30:13.88ID:???
>>313
実際には vm や % で指定されてないスタイルがまだあるんじゃないか
ブラウザの UA スタイルシートなど暗黙的に設定されているやつ

335Name_Not_Found2018/11/03(土) 21:37:30.84ID:???
>>333
同じ挙動になるとは限らないので、元の display 値を覚えておくか、専用の class でオンオフ切り替えるしかないな
hidden 属性を設定する方法もある( hidden を消せば元に戻る)

336Name_Not_Found2018/11/03(土) 21:50:30.55ID:6Ec8PRLb
>>335
ありがとうございました。
大変参考になりました。
クラスでやります。

337Name_Not_Found2018/11/04(日) 01:10:29.25ID:???
そのためのコンテナー
外側はとりあえず div にしといて display は none と block できりかえる
flex 使いたければ内側にかく

jquery の .show() hide() 使えばそれやってくれるから楽だよ

338Name_Not_Found2018/11/04(日) 07:05:50.53ID:???
>>337
いつの時代だよ?そうやって適当に教えるな

339Name_Not_Found2018/11/04(日) 09:41:29.72ID:???
画面を小さくすると、背景画像の両端がトリミングされるコードが分からない。

340Name_Not_Found2018/11/04(日) 10:06:35.97ID:???
>>337の何がおかしいのかよくうわからない
うちでもそうしてるからもっといい方法があったら教えてくれ

341Name_Not_Found2018/11/04(日) 12:24:33.70ID:???
自分の会社でもブロック以外は裸でおかずにとりあえずとりあえず div か p でかこっとけっていわれてるわ
BEM記法ほど厳密じゃないが

342Name_Not_Found2018/11/04(日) 12:30:39.68ID:???
>>339
img に width height を pixel で設定して親に overflow: hidden つければいいんじゃないかな

object-fit:none; とか
absolute にして親に padding つける方法もある

343Name_Not_Found2018/11/04(日) 16:26:59.57ID:???
show hideは結局インラインでdisplay直接きりかえてるからスマートじゃないってことじゃないclassを使った方がなにかとよい

344Name_Not_Found2018/11/04(日) 16:38:29.87ID:???
>>339
background-size: cover; かな?
とエスパーしてみる

345Name_Not_Found2018/11/04(日) 16:47:12.39ID:???
>>339
background-sizeを指定しなければ勝手に両端切れなかったっけ
忘れちった

346Name_Not_Found2018/11/04(日) 17:25:29.52ID:???
background-positionをcenterじゃないの

347Name_Not_Found2018/11/04(日) 17:37:13.84ID:???
background-size:auto 100%;
とか?

348Name_Not_Found2018/11/05(月) 00:33:00.19ID:???
>>342-347
ありがとうございます。

いまいち画像サイズの概念やoverflowプロパティを理解してないから、
縦横比を維持したまま縮小してしまうんですよw

349Name_Not_Found2018/11/05(月) 09:22:11.55ID:rg4rpwwX
display:block;
をセットしている要素に対して後から追加した
display:none;
が有効に出来たのですが、display:table;に対してはnoneが効きませんでした。
それでnone:!importantにして解決したのですが、そういうもんですか?

350Name_Not_Found2018/11/05(月) 09:54:21.10ID:???
display: table; とか関係なく、詳細度が低いんじゃないのかな

351Name_Not_Found2018/11/05(月) 14:45:25.29ID:???
>>348
画像、と書くと
<img>要素のことか、background-imageのことか
混乱するから区別して書くといい

overflowは
内包するコンテンツが自分より大きい時に
どのようにするか(はみ出す・はみ出さない、スクロールする等)
を決めるプロパティ

352Name_Not_Found2018/11/05(月) 16:42:19.89ID:???
お前らborder imageって使う?

難しいから使うなって言われたんだが…。

353Name_Not_Found2018/11/05(月) 16:56:51.34ID:???
「難しいから」は理由じゃない。
お前の都合でしか無いって言ってやれ

354Name_Not_Found2018/11/05(月) 20:05:46.62ID:???
>>352
今まで使うような案件に出会ったことないや。最近シンプルな画面ばっかだし

355Name_Not_Found2018/11/05(月) 21:27:09.78ID:n+lZq6iO
質問失礼します

趣味ブログを運営しています。
アクセス数が増えてきたので、google adsenceに応募したら審査が通り、広告を張ってみたいのですが、張る場所の方法に書いてった<head>タグの下に埋め込んでも広告が表示されません。
他のブログテンプレートでは表示されるのですが、お気に入りのブログのみが操作不能です。HTMLの書き方によって広告が張れないということは起こりうるのでしょうか?

356Name_Not_Found2018/11/06(火) 09:02:29.68ID:G7U6fKUW
divで作った長方形の領域があり、その幅を右側に最大化したいのです。
ただし、左端はマージンがあるので、ウインドウの左端から離れています。
太線をウインドウの両端
細線をdiv域とすると、こんな感じです

┃  │    │┃

┃   │       │┃

ウインドウ幅を広げるとdiv左のマージンは増えますので一定ではありません。
ですので、 width:calc(100% - 200px) みたいな記述が出来ないので困っています。
良い方法はありますか?

357Name_Not_Found2018/11/06(火) 10:00:32.57ID:???
?
div って何もしなくてもめいっぱい領域使うよ
floatや 親にflex がついてたりしないか margin padding をもう1度よく確認してみて

358Name_Not_Found2018/11/06(火) 10:05:49.39ID:???
その増える左マージンがどう算出されるのかによる

359Name_Not_Found2018/11/06(火) 14:14:15.30ID:mqnTYbJk
Pseudo-classesからです。

https://gyazo.com/02535a5de4acdc8219053950a6949a72

https://gyazo.com/31affd8fb9780903bd3b89a3b26126c2

1と2を比較して、 text-decoration: noneとtext-decoration: underlineがあるないのは
どういう違いがあるのですか

360Name_Not_Found2018/11/06(火) 14:58:21.29ID:???
>>359
ブラウザの開発ツールで見てみるといいよ

制作者がCSS書かなくても
各要素にはブラウザがデフォで用意したスタイルが当たってる

a:linkはデフォでtext-decoration: underline;
だから下線がつく

ここでCSSにtext-decoration: none;を書くと
デフォのスタイルが上書きされて
下線がつかなくなる

361Name_Not_Found2018/11/06(火) 14:58:22.09ID:T3/sSPxo
【浜、マ@トレーヤ】 ナマポ、ニート、ヒキコモリ <対> ユニクロ、自民党 【分ち合い抵抗勢力】
http://rosie.5ch.net/test/read.cgi/liveplus/1541471001/l50

362Name_Not_Found2018/11/06(火) 18:54:53.93ID:9qlSO4j+
ここで良いのか分からないのですが、ツイッターの埋め込みツイートのデザインはcssで編集出来ますか?
togetterでは普通の埋め込みとはデザインが違うので何かしら方法があると思っているのですが、検索しても全然わかりません
htmlとcssの基本くらいしか分からないので、難しいようであれば諦めます

363Name_Not_Found2018/11/06(火) 19:04:57.39ID:???
OGP Twitterとかで検索してみればすぐできると思う

364Name_Not_Found2018/11/06(火) 19:25:00.20ID:lodyECL3
大切な女性を傷つけられた
相手の男性をdisplay:noneする方法を教えてください
今彼女は入院しています

365Name_Not_Found2018/11/06(火) 19:54:18.66ID:Opl2e+DL
よくわからなくなってきたんだが、beforeとafterの使い分けってどうしてる?

どっちでも同じことできるような気がするんだが。

366Name_Not_Found2018/11/06(火) 19:59:51.44ID:???
あそう

367Name_Not_Found2018/11/06(火) 20:09:14.94ID:???
「大切な女性を傷つけられた相手の男性」って被害者じゃないですかね。CSSの前に日本語の勉強した方がいい。

368Name_Not_Found2018/11/06(火) 22:51:06.23ID:???
>>367
ある男性と女性が付き合っていて、364がその女性に好意を抱いている
ある時、男性が女性を傷つけた(と364が思っている)←実はただの痴話喧嘩
364「相手の男性を消し去りたい」
つまり364はストーカー

369Name_Not_Found2018/11/06(火) 23:30:50.31ID:???
>>365
beforeはその要素のコンテンツの前に入る擬似要素
afterは後ろに入る擬似要素

って意外に違いはないよ
普通にHTML書くときに、何かの前や後ろに要素置くときと
同じ考えでいいよ

370Name_Not_Found2018/11/07(水) 00:11:05.72ID:L2hnebu7
>>363
ありがとうございます
これも知らない知識だったので勉強になりました!

特定のツイートを自分のサイトに埋め込んだ時のデザイン変更はやっぱり難しいですかね

371Name_Not_Found2018/11/07(水) 00:14:51.66ID:???
>>370
jsでやる方法ならあるよ

372Name_Not_Found2018/11/07(水) 00:33:33.63ID:???
>>365
重なり順は気にする

373Name_Not_Found2018/11/07(水) 00:56:06.96ID:L2hnebu7
>>371
JavaScriptですかー
それは未習得なので普通の埋め込みで妥協します
ありがとうございました

374Name_Not_Found2018/11/07(水) 11:05:55.62ID:???
<h1>タイトル文字</h1>
というHTMLがあったとして、
CSSで「タイトル文字」をtext-indentやpaddingで要素外に出しoverflow:hiddenで非表示しつつ
badkgroundで背景画像を指定ってのをちょいちょいやるんですが
SEO的にはこの「タイトル文字」は無視されちゃうのかな?

3753742018/11/07(水) 11:10:49.85ID:???
SEO的には〜無視って日本語がちょっと変でした
サーチエンジン的にはこのタイトル文字は無視されるのか、ですか

376Name_Not_Found2018/11/07(水) 12:45:44.18ID:???
いいえ

377Name_Not_Found2018/11/07(水) 12:46:31.94ID:SKekrxCb
>>374
なんでタイトル文字を隠すん?

378Name_Not_Found2018/11/07(水) 13:21:18.87ID:???
>>377
そりゃ画像にするためでしょ

379Name_Not_Found2018/11/07(水) 13:39:24.96ID:???
SEO会社にimgとalt使えって言われたことある
それも意味あるんかなぁ

380Name_Not_Found2018/11/07(水) 13:47:43.41ID:???
差があった時期もあった

381Name_Not_Found2018/11/07(水) 13:56:39.45ID:???
>>378
imgのaltと違うんかね?

382Name_Not_Found2018/11/07(水) 13:58:15.72ID:???
タイトルを画像にすることなんかないなあ
ほとんどの場合、Webフォントをsubset化して+cssで装飾してる

383Name_Not_Found2018/11/07(水) 14:10:44.10ID:???
>>374
フェレットでそんな記事読んだな。

https://ferret-plus.com/6036
ほとんどのホームページでは、H1タグは テキスト というよりもロゴ画像で囲んでいることのほうが多いのではないでしょうか。

384Name_Not_Found2018/11/07(水) 15:42:34.88ID:???
img src
って必ずWidth Height 指定した方がいいのかな。

素材画像のサイズそのまま表示されたらいい時でも

385Name_Not_Found2018/11/07(水) 15:47:57.11ID:???
好きにしろ

386Name_Not_Found2018/11/07(水) 16:09:26.55ID:???
>>384
気にしたことないな
SPサイトくらいか

387Name_Not_Found2018/11/07(水) 17:11:22.60ID:D6OVyDfn
>>384
大きさを明示すべき理由は
画像の読み込みが進むに連れて、ページのレイアウトがガコガコ動いてしまうから、というもの
なのでガコガコしないようにスタイルを書いてあればOK

388Name_Not_Found2018/11/07(水) 17:14:44.56ID:???
画像サイズ指定しないと読み込みのパフォーマンス落ちた気がするが、もうその情報は古いかね

389Name_Not_Found2018/11/07(水) 17:35:39.45ID:???
いやGoogleがAMPの要件に挙げてんだからパフォーマンスがらみだろ

390Name_Not_Found2018/11/07(水) 18:52:26.46ID:SKekrxCb
>>378
>>373
ああそうか・・・ありがとう

391Name_Not_Found2018/11/07(水) 22:28:49.90ID:???
>>382
最近だとロゴのSVG画像じゃね?
altにテキスト入れときゃ問題ないけど

392Name_Not_Found2018/11/07(水) 22:50:32.82ID:???
>>382
書体限られるじゃんそれ

393Name_Not_Found2018/11/07(水) 23:07:02.54ID:???
>>391
>>392
ん?サイトロゴとかじゃなくタイトルでしょ?
「プライバシーポリシー」とか「会社概要」とかのページタイトル
そんな特殊なフォント使う?

394Name_Not_Found2018/11/08(木) 10:36:26.66ID:???
結構あるかな、例えば
フォントにイラストが付いていて変形されてたり一部に色が付いてたり
背景テクスチャに乗算でフォントが乗ってるとか
エッジに紙のような処理が施されてたりスタンプのような加工がされてたり
縁取りが2重3重に付いてたりとまあいろいろ

395Name_Not_Found2018/11/08(木) 14:14:46.67ID:kX71hxJk
>>374
余談だけど
paddingで押し出すやり方は
Androidで、長押しするとテキスト出てきちゃう機種があるので注意を

396Name_Not_Found2018/11/08(木) 23:39:51.49ID:???
text-indentでテキストすっとばすのってブラックハットと同じ手法じゃん
テキストを背景と同じ色にして隠し埋めするのと同じで
CSSや画像内の文字すら認識できるGoogleにはバレバレだろうけど、プラスにもマイナスにもならなそう

397Name_Not_Found2018/11/08(木) 23:42:38.96ID:???
いや認識してもらう為にやってる訳だが

398Name_Not_Found2018/11/09(金) 10:45:12.66ID:???
自分のやらないことは非常識
自分のやっていることが常識
という思い込みは愚者への第一歩である

哲学者エトゲル・ダーフィト

399Name_Not_Found2018/11/09(金) 12:46:50.12ID:???
>>374
スパム
https://support.google.com/webmasters/answer/66353?hl=ja
普通にimg要素でやりなさい
そもそも、前景と背景の使い分けがおかしいし

400Name_Not_Found2018/11/09(金) 12:50:49.12ID:ASEv2lmV
まったく問題ねえけどなあ
単体の単語ではなく、文字と図がいくつもレイアウトされてしまってる画像とかだと
alt属性の文字列だけでは説明しきれないから
背景画像にして、その要素の中にHTMLで詳しく書く、とかよくやる
検索にもちゃんと引っかかるし、そのせいで検索スパム扱いされたこともねえな

401Name_Not_Found2018/11/09(金) 12:51:37.99ID:ASEv2lmV
たぶんだけど
検索スパム判定は、そんなに単純じゃないんだと思う

402Name_Not_Found2018/11/09(金) 21:41:10.05ID:???
質問お願いします

親要素は背景の枠組み
その中の文章が違うため改行数が変わり
下に配置させたい画像?も位置が変わってしまいます

子要素に
position: absolute;
bottom: 0;
これで設定しようとしたのですが
その親要素を複数回使用してるため
position: relative;を使うと全ての配置がおかしくなってしまいます

この場合自分で改行を追加して行を合わせる
もしくは親要素を一つずつ変更していくしかないのでしょうか?

403Name_Not_Found2018/11/09(金) 22:07:08.69ID:???
今日初めてこのスレにきたけど、
文章で書かれても全然わからんね

404Name_Not_Found2018/11/10(土) 00:53:33.92ID:???
じっくり読めばわかるだろ
と、じっくりがんばって読んだけどまじでわからなくて草

405Name_Not_Found2018/11/10(土) 01:30:53.28ID:???
>>402
つまり親要素と言ってるものが複数横並びになっていて、親要素同士の高さと画像の位置を全部一緒にしたい?

4064022018/11/10(土) 01:38:17.00ID:???
説明が下手ですみません

classでサイズを指定した親要素の中に
文章と画像(スワイプ)を入れようとしてます
それと同じclassを何度も使い、違う内容の文章を書いてるのですが
文章量が違うため、画像の位置がバラバラになってしまいます

調べたところ
親要素に
position: relative;
子要素に
position: absolute;
bottom: 0;
で下に配置できるとのことでしたが
先ほどお伝えした通り同じclassを何度も使ってるので
position: relative;を使うと全て同じ位置に重なってしまい
配置がおかしくなってしまいます

この場合、かなり量はあるんですが一つ一つclassを変える
もしくは改行のタグを入れて合わせていくしかないでしょうか?

407Name_Not_Found2018/11/10(土) 02:57:41.49ID:???
>>406
いや適切にクラス名与えてればそんなことにはならないはず
どっか閉じタグ忘れたりしてない?

408Name_Not_Found2018/11/10(土) 05:54:00.53ID:???
>>406
クラスは何個も書いていいんだよ
今まで使ってた親要素のクラス名を「zaku」として
新たに「gelgoog」というクラスを用意して

.gelgoog{ position: relative; }

<div class=“zaku”>今までのやつ</div>

<div class=“zaku gelgoog”>あたらしいやつ</div>

ってすれば、後者にはザクとゲルググの両方のスタイルが適用されるので
今までのやつに影響することなく、やりたいことできるっしょ

409Name_Not_Found2018/11/10(土) 08:40:26.92ID:EHwUXFqT
background: url('image.png');
background: url(image.png);
のどちらでも出来たのですが、クオーテーションマークは無しでも良いですか?

410Name_Not_Found2018/11/10(土) 09:55:37.51ID:???
>>409
どっちでもいいよ
ちなみにダブルクォーテーションでもいい
ただし、ないとは思うけどURLにスペースが入る場合は必須
俺はなし派

411Name_Not_Found2018/11/10(土) 10:04:40.87ID:???
>>406
relativeとabsoluteをつける要素を間違えてるんじゃない?

412Name_Not_Found2018/11/10(土) 10:16:27.39ID:EHwUXFqT
>>410
ありがとうございました。

413Name_Not_Found2018/11/10(土) 11:00:19.99ID:???
せめてHTMLタグの階層ぐらいはかいてくれないとまだ意味がわからない
本当に解決したいなら質問内容を伝えるのに図ぐらいは描いてほしいところ

414Name_Not_Found2018/11/10(土) 11:11:30.80ID:???
<container><img><文字></container>
<container>ちがう文章1</container>
<container>ちがう文章2</container>

みたいになってて(クラス名=タグ名の略式だとおもってね)
container に relative を使うとちがう文章にも影響がでるからつかえない
っていいたいのかな?

そもそも役割のおなじものにちがうスタイルをあてたくなるってことがナンセンスだから
relativeをあてたいクラスにはちがう役割があるはずでちがう名前をつけるべきかと

<container><swipe><img><span>文字</span><swipe></container>
でswipeにrelativeをつけるとか

<container container-swipe><swipe><img><span>文字</span><swipe></container>
.container.container-swipe に限定してrekativeをつけるとか

CMSの自動出力なんかでHTMLをどうしても変更できないとかなら
.container:nth-child(1) とかで何番目のクラスにだけスタイルを適用とかもできる

415Name_Not_Found2018/11/10(土) 12:39:12.79ID:???
何度もすみません

水色で小さく枠どった背景の中に
青い線が文章、黄緑がスワイプ画像です
文章がそれぞれ違うので画像の高さがばらばらになります
画像は枠内の一番下に統一したいです
classはfloatがrightのものもあります
left rightともに何度も使ってます

4164152018/11/10(土) 12:40:40.93ID:???
<div class="left">
<p>
あああああああああああああ<br />
</p>
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide"><img src="1.jpg"></div>
<div class="swiper-slide"><img src="2.jpg"></div>
</div>

<div class="swiper-pagination"></div>

<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>

.left{
float: left;
width: 650px;
height: 600px;
margin: 50px auto 120px 180px;
padding: 30px;
border: 50px;
border-radius: 30px 30px 30px 30px;
background-color: #faf7e6;
}

417Name_Not_Found2018/11/10(土) 13:08:31.56ID:???
画像の高さが決まってるなら親要素に画像の高さ分のpadding-bottomを設定して画像をabsoluteで下付にする
もしくは
matchHeight.jsなど高さ揃えのプラグインをいれてテキストの高さを揃える

floatをやめてflex使えばいけそうだけどな

418Name_Not_Found2018/11/10(土) 13:45:01.99ID:???
.left, .right {
position: relative;
}
.swiper-container {
position: fixed;
bottom: 0;
}
だけでいいような気が

419Name_Not_Found2018/11/10(土) 14:28:07.35ID:???
それこそ absolute で重なっていいんだったら backgroud-image で済む話じゃないのん

文章と重なってほしくないなら
.left の中に文章エリアとスワイプエリアの2つがきっちりわけられてるし
.left {
display: flex;
flex-direction: column;
justify-content: space-between;
}
でいいと思う

420Name_Not_Found2018/11/10(土) 18:28:05.96ID:EHwUXFqT
ulの中の数個のliに以下のようにafterを追加しました。
li::after{
 content:"★";
 position:absolute;
 right:0;
 bottom:0;
 ・・・
}
など指定。
こうすればliの後ろに★が出ると思ったのですが、実際は画面の最下部に出ました。
どうやらliではなくてbodyに対してrightやbottomの指定が効いているようなのです。
そう言う事ってありますか?

421Name_Not_Found2018/11/10(土) 18:48:33.64ID:???
absoluteが何を基準にしてるか調べて

422Name_Not_Found2018/11/10(土) 18:52:08.00ID:EHwUXFqT
>>421
どうやって調べるんですか?

423Name_Not_Found2018/11/10(土) 18:56:51.62ID:???
すみませんWEB系に行こうと勉強してるんですが、教えてください

CSSの最初にhtml,body,p,h1...という感じでにタグを網羅してからmarginpadding:0やってるサイトをよく見かけるんですが、
全選択セレクタの *{マージンパディング0} の方を仕事としてWEB製作やってく上で使ったら駄目な理由とかってありますか?

424Name_Not_Found2018/11/10(土) 19:03:20.42ID:???
>>422
right、bottomってどこを基準にして設定したいの?
で、それをあなたちゃんと指定している?してないからbodyが基準になってるんじゃないの

425Name_Not_Found2018/11/10(土) 19:07:44.57ID:EHwUXFqT
>>424
>right、bottomってどこを基準にして設定したいの?
liを基準にしたいです。
と言うか、liのafterでabsolute指定すると、それはliに対して指定した事になると思っていたのですが、
それは間違いですか?

426Name_Not_Found2018/11/10(土) 19:15:13.38ID:???
>>423
日本語で

427Name_Not_Found2018/11/10(土) 19:23:10.14ID:???
>>425
liを基準にしたいって書くんだよ
あとはグーグルでabsoluteの挙動について調べればわかる

428Name_Not_Found2018/11/10(土) 19:46:18.99ID:???
>>423
リセットCSSってやつね
ブラウザの差異を吸収するために使うけど当然デメリットも有る
まあここら辺読んでみるといい

ttp://blog.3streamer.net/html-css-beginner/reset-css-1/

429Name_Not_Found2018/11/10(土) 19:57:52.56ID:???
absoluteは親をたどって最初にstatic以外の要素を基準にして位置が決定される
特定の親要素の中にabsoluteで配置したい場合はその親要素にrelativeを指定する
relativeをどこにもつけないとbodyを基準にした相対配置になる

430Name_Not_Found2018/11/10(土) 20:17:26.75ID:EHwUXFqT
>>429
そうなんですか!
それは知らなかったです。
ありがとうございました。

431Name_Not_Found2018/11/10(土) 21:15:51.32ID:???
>>428
有難うございます
一回用意しとけばコピペで済む話なんで、可能なら*ではなくリセットかけるタグをそれぞれ書いた方が良い。ということですね

どっかからコピペして使うことにします

432Name_Not_Found2018/11/10(土) 21:18:24.22ID:???
ぜんぜん違うけどまあいいや
実際に仕事で動作環境指定されてはじめて問題になることで最初に覚えることじゃないし好きにしていいよ

4334152018/11/10(土) 22:34:52.84ID:???
皆さんの知恵を拝借し、なんとかできました
助かりました
ありがとうございました

434Name_Not_Found2018/11/10(土) 23:24:30.97ID:???
inputのボーダーをチカチカ点滅させたいんですがCSSで可能でしょうか?
出来ればルーレットのように点滅しながら回転させたいです。
https://www.youtube.com/watch?v=yVF-Dhz2oKE
こんなふうに。

435Name_Not_Found2018/11/10(土) 23:27:37.51ID:???
可能だとは思うけどめんどうくさそう

436Name_Not_Found2018/11/10(土) 23:28:45.91ID:???
GIF用意して背景画像にするのが楽なんじゃないの

437Name_Not_Found2018/11/11(日) 04:42:18.48ID:???
cssのanimation keyframe使えば可能だと思う

438Name_Not_Found2018/11/11(日) 14:38:00.68ID:???
google fontsってローカルに保存してつかえますか?

439Name_Not_Found2018/11/11(日) 17:24:57.92ID:???
はい

440Name_Not_Found2018/11/11(日) 21:48:32.82ID:???
htmlとcssだけでニコニコのコメントみたいに横方向に流すことってできますか?

441Name_Not_Found2018/11/11(日) 21:59:48.37ID:???
はい

442Name_Not_Found2018/11/11(日) 22:00:35.43ID:???
>>441
どうやるんですか

443Name_Not_Found2018/11/11(日) 22:15:37.02ID:???
ttps://developer.mozilla.org/ja/docs/Web/CSS/CSS_Animations/Using_CSS_animations
文字列がブラウザーのウィンドウを横切る

444Name_Not_Found2018/11/11(日) 22:35:11.07ID:???
>>443
ありがとうございます

横に動くたびに文字が細かく動くのがちょっと気持ち悪いですね

445Name_Not_Found2018/11/12(月) 19:22:53.82ID:???
要素の高さが足りないと背景で指定している画像が
見切れてしまいますが、それを自動的に防ぐ方法ありますか?

<style>
.hoge{
background: url("https://www.google.co.jp/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png") no-repeat 0 0;
background-color: #ddd;
}
</style>
<div class="hoge">
ここのdivの高さを背景画像の高さに応じて自動的に変化するようにしたい
できればmin-heightのように最低値として
</div>

446Name_Not_Found2018/11/12(月) 19:36:54.95ID:???
img要素にするのが一番簡単じゃないの

447Name_Not_Found2018/11/12(月) 19:38:28.02ID:???
>>446
そうですよね...
img要素って縦横比も自動的に保つし
何気に素晴らしい

448Name_Not_Found2018/11/12(月) 19:55:53.37ID:???
imgが素晴らしいってよりbgは用途が違うからなぁ

449Name_Not_Found2018/11/12(月) 20:53:56.95ID:???
少なくとも背景画像サイズをCSSで認識する方法はないので background-image では無理
img を使うしかない

450Name_Not_Found2018/11/13(火) 13:19:41.72ID:???
compassで幅・高さ測って
要素の縦横比を合わせる
ってことはちょくちょくする

451Name_Not_Found2018/11/13(火) 16:11:18.16ID:???
>>208>>210
こういう古いcssライブラリ見つけたぞ
http://benschwarz.github.io/gallery-css/
これにcss scroll snapくっつければいいんや!

452Name_Not_Found2018/11/13(火) 19:47:48.50ID:qy0X8zKf
javascriptで、要素の高さとかを合わせるようにしてるんだけど、描写後に変更するから画面が少しちらつく。

どうしたらええやろか…
Hiddenして、要素の高さ合わせた後にhidden解除したらいけると思ったけどダメだった…

453Name_Not_Found2018/11/13(火) 20:43:00.17ID:???
>>452
最近よくあるやつ
ページ遷移する度にloadingの画面になってアイコンを数秒見せてごまかすやつは?

454Name_Not_Found2018/11/13(火) 21:27:58.87ID:???
>>453
loading画面の要件がないので使えない。
あくまで普通に開くことが必要…

まぁ俺が気になったから直したいだけなんだが…

455Name_Not_Found2018/11/14(水) 00:23:44.09ID:???
wordファイルから効率良くきれいなhtml用のソースを作成する方法ないかな?
インラインスタイルが邪魔で削除したいが、変な所で改行されてたり微妙に正規表現で上手く消せない・・・

4564552018/11/14(水) 00:25:41.74ID:???
DreamweaverCCで画面切り替えると検索窓がいちいち消えるのなんとかならないのだろうか
入力しておいた文字が消えるし、常に表示しておきたい

457Name_Not_Found2018/11/14(水) 00:44:32.70ID:???
>>456
それよりマルチ画面対応を先にしろと

458Name_Not_Found2018/11/14(水) 02:00:23.18ID:PBwVpdkn
ライブとコードの画面をマルチにできる様に?
あれ謎よね 一番最初に実装しなきゃならんでしょあんなの
DWあんまり使ってないから良いけど

459Name_Not_Found2018/11/14(水) 02:06:03.42ID:???
ChromeでDevTool開けば似たようなもんだろ。

460Name_Not_Found2018/11/14(水) 04:10:00.54ID:+5SfBosb
Dreamweaver結構使ってるんやね

慣れなくて速攻使うのやめたわ…

461Name_Not_Found2018/11/14(水) 08:33:40.76ID:???
あどべの技術力じゃ無理なのじゃ

462Name_Not_Found2018/11/14(水) 08:46:12.43ID:???
逆にDW以外だとみんななに使ってるのか知りたい
JSPが編集できるとうれしいんだけど

463Name_Not_Found2018/11/14(水) 08:54:25.42ID:???
vscode

464Name_Not_Found2018/11/14(水) 10:04:14.85ID:???
>>458
ちがう
ファイルをマルチ画面(分割画面)でひらけるようにだ。
なんでわざわざ別ファイル開いてウィンドウ吸着解除して手でならべなかなゃならんのだ?
お前の関連ファイルタブは飾りか?っておもうわ
ライブとかどうでもいい。

465Name_Not_Found2018/11/14(水) 10:16:24.48ID:???
よくない

466Name_Not_Found2018/11/14(水) 10:17:50.81ID:???
>>463
いいという話は聞くけど、DWから乗り換えろといったら反発されるんでは

467Name_Not_Found2018/11/14(水) 10:26:53.40ID:???
エディタなんてなんでもよくてDwテンプレートの代わりに何使うかでしょ

468Name_Not_Found2018/11/14(水) 11:06:34.69ID:???
画面の一部に blur 効果の窓をつけたいんだけど
背景画像が固定じゃないとつけられない?
すでに表示してるページの上にぼかし窓のせたいんだけど

ttps://hacknote.jp/archives/2470/
とかいくつかサイトみてると背景と同じ画像を設定するってあるので
普通のページ要素をぼかすのは無理なのかな

469Name_Not_Found2018/11/14(水) 12:49:56.16ID:???
>>467
まさにそれ

470Name_Not_Found2018/11/14(水) 13:07:57.10ID:???
>>468
blurは要素をぼかし窓にするものではなく設定した要素自体がぼける
blurした要素に背景がなければ下がくっきり見える
sectionにblurしたところでsectionの中身がぼけるだけ
くっきりした背景(body)の上にぼけた文字(section)が載ってる状態になる
section:beforeにしてもそいつに背景がないと意味をなさない
透明をぼけさせても透明だからね
なので下に見える背景画像と同じ背景画像を設定してそいつをぼけさせると一見ぼかし窓っぽく見えるという騙しテクニック

471Name_Not_Found2018/11/14(水) 18:51:03.65ID:???
Brackets使ってるがDWよりマシとはいえもっさりしてるから乗り換え検討中

472Name_Not_Found2018/11/14(水) 19:11:47.16ID:???
さくさく動いて快適なのはsublimeだな

473Name_Not_Found2018/11/14(水) 19:19:18.51ID:???
atomモッサリなのにvscodeに次いで二番手、sublimeはサクサクなのになんで廃れたんだ?

474Name_Not_Found2018/11/14(水) 19:58:42.92ID:???
vscodeが軽くなって一択になったわ
他のエディタでできることだいたいできる
sublimeは軽いし見た目も良いエディタだけどライセンス催促とコード補完の弱さとサイドバーの使いづらさで捨てた

475Name_Not_Found2018/11/14(水) 21:26:08.02ID:???
>>470
となると固定画像以外の文字や動画含むドキュメント自体にblur窓をつけるのは無理なんですね
ありがとうございました

476Name_Not_Found2018/11/14(水) 21:30:57.55ID:???
ライセンスは金払えばいいだろw
他は、まあおっしゃる通り
vscodeはどんどん良くなっていくな、手離せなくなってきた

477Name_Not_Found2018/11/14(水) 22:11:24.27ID:???
>>475
ttps://teratail.com/questions/114413

478Name_Not_Found2018/11/14(水) 22:16:27.12ID:???
>>476
vscodeでsublimeのctrl+,に相当するのってなんかある?(タグ領域の選択的なやつ)

479Name_Not_Found2018/11/14(水) 22:20:24.60ID:???
いい加減ツールスレいけよ
質問がない間はいいが質問流してまで雑談続けるバカは何なんだ

480Name_Not_Found2018/11/14(水) 22:25:24.81ID:???
>>479
そういうのは荒れるし自分も流してるじゃん俺もな。

481Name_Not_Found2018/11/14(水) 23:13:37.99ID:???
bpm って何か理解してないままコーディングしている

482Name_Not_Found2018/11/15(木) 01:35:02.99ID:???
beats per minute

483Name_Not_Found2018/11/15(木) 08:01:32.04ID:???
>>473
Atom使ってる人多いね
。Sublimeは有料だからでは?

484Name_Not_Found2018/11/15(木) 08:02:43.90ID:???
サイズ指定はpxを極力さけたほうがいいよな

485Name_Not_Found2018/11/15(木) 09:29:55.71ID:???
>>484
なんで?

486Name_Not_Found2018/11/15(木) 09:47:58.64ID:???
>>485
レスポンシブにするには、相対的なサイズ指定がよろしくない?

487Name_Not_Found2018/11/15(木) 11:03:51.56ID:???
誰かが作ったフォントサイズ関数使うと想像以上にフォントサイズが小さくなる

488Name_Not_Found2018/11/15(木) 12:55:52.87ID:???
>>473
atomはgithub謹製なのがでかい
あとsublimeが軽いがまだ不安定だった頃だったし

489Name_Not_Found2018/11/15(木) 13:33:03.42ID:???
リセットCSS は自作するもの? ノーマライズとか無駄にでかいよな。

490Name_Not_Found2018/11/15(木) 13:58:17.67ID:???
じゃあ自作すればいいんじゃね

491Name_Not_Found2018/11/15(木) 14:44:47.37ID:???
>>478
emmet:バランスアウトで出来た

492Name_Not_Found2018/11/15(木) 15:11:04.55ID:???
>>489
必要最低限だけリセットしてる

493Name_Not_Found2018/11/15(木) 16:04:07.45ID:???
reboot.cssやnormalize.cssを削って作る。

494Name_Not_Found2018/11/15(木) 17:17:03.68ID:5kh5dpTO
テーブルの初歩的な質問ですがすみません。
下記で<tr>要素を縦並びにしたいのですが、横に繋がってしまいます指摘お願いします。
<table border="1" cellspacing="0" cellpadding="0"; id="dailytable">
<tbody>
<tr><td class="hour" rowspan="2"><br></td><td colspan="2" class="timetable">aaa</td>
<td rowspan="2" class="hour"><br></td>
</tr>
<tr><td class="station"><span class="station-name"><a href="#" target="_blank">a</a>
</span></td><td class="station"><span class="station-name"><a href="#" target="_blank">b</a></span></td>
</tr>
<!--一つ目の縦につなげたい要素--!>
<tr><td rowspan="12" class="hour">6</td><td rowspan="12" class="program">
<div class="time">06:00-07:00</div><div class="title"><a href="">a</a></div>
<div class="actress">a</div></td><td rowspan="12" class="program"><div class="time">06:00-07:00</div><div class="title">
<a href="">aa</a></div><div class="actress">a</div></td><td rowspan="12" class="hour">6</td>
</tr>

下記に続く↓

495Name_Not_Found2018/11/15(木) 17:18:33.96ID:???
493の続き

<!--2つ目の縦に繋げたい要素--!>

<tr><td rowspan="12" class="hour">6</td>
<td rowspan="12" class="program"> <div class="time">06:00-07:00</div>
<div class="title"><a href="">a</a></div>
<div class="actress">a</div></td><td rowspan="12" class="program"><div class="time">06:00-07:00</div>
<div class="title"><a href="">aa</a></div><div class="actress">a</div></td><td rowspan="12" class="hour">6</td>
</tr>
</tbody>
</table>

宜しくお願いします。

4964942018/11/15(木) 17:22:23.35ID:???
画像で見るとこのような感じです
https://i.imgur.com/Njb8qox.jpg
二つ目の<tr>要素を縦に繋げたいです
宜しくお願いします

497Name_Not_Found2018/11/15(木) 17:57:06.53ID:???
DWの質問スレが無いんだがどこで聞いたらいい?

マルチカーソルで複数個所を同時に編集する際、
Ctrl+pのようなタグで括るショートカットが効かないんだが、
複数個所を選択して一括でタグで括る方法ないかな(手で打たないで)

498Name_Not_Found2018/11/15(木) 19:25:45.14ID:???
ここではないことは確か

499Name_Not_Found2018/11/15(木) 23:54:08.32ID:???
>>489
最近はめっきりReboot.cssだな

500Name_Not_Found2018/11/16(金) 09:52:25.89ID:???
>>496
確かに謎だね
HTMLはあってるようにみえる
rowspan だけの行ってダメだったりするのかな…
ちなみにrowspan=12は何のためにつけてるの?
高さを指定したいならCSSにまかせてrowspanなしにすれば縦に並ぶけど

501Name_Not_Found2018/11/16(金) 11:49:18.69ID:???
俺もreboot.cssだな。だけどどれでもたいした違いはないだろう。

502Name_Not_Found2018/11/16(金) 12:52:38.00ID:???
>>496
tdがすべてrowspan="12"なのでtr12行単位で横に並ぶ
表示が1行のうちは頭位置揃ってるけど2行以上になると階段状になるのでどういうことか理解しやすいかと

あと、tableのid前のセミコロンが余計
コメント閉じは --!> ではなく -->

503Name_Not_Found2018/11/17(土) 00:35:22.14ID:???
VSCode などの構文解析できるエディタを使えば、

コメントになったかどうかは、色が変わるから、すぐわかる

504Name_Not_Found2018/11/17(土) 04:19:28.86ID:Cp+G4Otv
すいません。
サイトにランダムで飛べるページを作ろうと思いまして、色々と質問していたところ
.entry-title-link
要素が無いから飛べないと言われました。そもそもこの.entry-title-link要素とは何なのでしょうか?

505Name_Not_Found2018/11/17(土) 05:34:46.86ID:???
質問していたやつに聞け

506Name_Not_Found2018/11/17(土) 07:52:10.27ID:???
「entry-title がありません」「entry-title css」「entry-title wordpress」で検索!

wordpress のスレで聞けば?

507Name_Not_Found2018/11/17(土) 11:15:43.24ID:???
background-imageで画像のサイズをmax-widthにしたい場合、どうしたらいいの?

508Name_Not_Found2018/11/17(土) 12:03:29.18ID:???
auto contain cover px % しか無理だね

509Name_Not_Found2018/11/17(土) 12:06:03.24ID:???
背景を max-width したい場合ってのがよくわからん
背景はしょせん背景だからみきれようとどうでもいい
というよりどうでもいいものを背景にするべき

画像を画面内でみせたいなら img にするべき

510Name_Not_Found2018/11/17(土) 13:10:55.22ID:???
文字セット って10個ぐらいフォント並んでるのがあるが、あんなに必要か?

511Name_Not_Found2018/11/17(土) 18:36:28.92ID:???
デバイスフォント使い分けかな

512Name_Not_Found2018/11/17(土) 20:01:10.99ID:???
>>509
べきw
実務やったことないなら口出すなよ

513Name_Not_Found2018/11/17(土) 20:38:12.90ID:???
>>509
自分がデザインしたわけじゃないんだがね。
わかりやすいのだとこういうのとか
https://hp-seed.jp/useful/img/pixta_30140996_M.jpg
100%だと実際のピクセルより引き伸ばされてボヤけるからダメ。
imgをz-indexで重ねるのはいいけど本来の用途と違う気がする(altとかどうすんねん)

514Name_Not_Found2018/11/17(土) 20:39:03.31ID:???
>>512
質問者の俺が言ったと思われたら嫌だから
穏便な口調でおねがします

515Name_Not_Found2018/11/17(土) 22:11:28.50ID:???
>>514
ぜんぜん関係ないけど、こういうレスって初めて見た気がする
匿名掲示板なんだから、これは自分じゃない、ってことはよくありそうだけどね
ただ、いくら何でも質問者がこんなレスはしないと思うよ

516Name_Not_Found2018/11/17(土) 22:12:19.61ID:???
ID出ないスレだしな

517Name_Not_Found2018/11/17(土) 22:16:36.18ID:???
width:100% max-width:1200px
みたいな指定が多い

518Name_Not_Found2018/11/17(土) 22:57:11.05ID:V7h8h9GY
Webフォントって使ってる?
自分のサイトで試しにGoogleフォントの日本語使って問題ないっぽいけど客のに使うのはちゅうちょする

519Name_Not_Found2018/11/17(土) 23:08:05.21ID:???
重たいもんなー

520Name_Not_Found2018/11/17(土) 23:24:55.63ID:???
>>512
じゃあ答えてやれば?

実際無理なものは無理
それはCSSが不便なんじゃなくそうするべきではないからそういう機能がついてないだけ

521Name_Not_Found2018/11/17(土) 23:33:10.72ID:???
>>518
Notosansjapaneseを常用してる

522Name_Not_Found2018/11/17(土) 23:49:07.14ID:???
>>521
うちもNoto。
検証して見る限り、重いっても誤差かなと思うけど、みんな使ってるか気になった

523Name_Not_Found2018/11/17(土) 23:58:35.07ID:???
日本語Webフォントはサブセットで使ってる
そうすればくそ小さくなるから気にせず使える
あとはNoto Sansなら使ってるサイト多いからキャッシュ使われる確率高い

524Name_Not_Found2018/11/18(日) 08:12:59.77ID:???
FontAwesomeなどのアイコンは使わないことにしている。あれは重いよね。

525Name_Not_Found2018/11/18(日) 08:16:00.19ID:???
「Noto Sans Japanese」の不要なものは削除して必要なものだけ読み込む方法【Webフォント高速化】
https://haniwaman.com/noto-sans-japanese/

5265072018/11/18(日) 09:51:52.82ID:???
>>520
そうするべきじゃないと言われても、実際の現場ではこういう対応が必要なデザインが上ってきてるわけでして、、

それとこの1例でも別に完全否定するようなデザインではないと思うんだが。(自分ならレスポンシブでこんなのしないけど)
https://hp-seed.jp/useful/img/pixta_30140996_M.jpg
とてもとてもありふれたものじゃん?

css3になる前だったらこれら文字とリボンそのまま画像にするのが一般的な対応だったわけだが
css3を駆使すればテキストと背景でなんとかできそうな気がして聞いてみたわけだが
まあ、無理という事でOKだね

527Name_Not_Found2018/11/18(日) 11:03:25.08ID:???
だから img つかえって言ってんの
backgroud-image では無理なだけでデザインが無理とはいってない

528Name_Not_Found2018/11/18(日) 11:10:39.53ID:???
>>507=>>512=>>526 だったのかよ

529Name_Not_Found2018/11/18(日) 11:19:46.48ID:???
>>526
このデザインだったら width height100% でいいじゃん

レスポンシブで大きさ変えたらどのみちぼやけるし
大きさを変えないで完全固定するか
ぼやけてもいいかどっちかしか選択肢なんてなくない?

530Name_Not_Found2018/11/18(日) 11:24:39.07ID:???
>>526
話の流れがちゃんとわかってないけどこれが質問者なの?

というかこのデザインで max-width が必要になるってどういうこと?
ななめに表示するためにブロック自体に画像の上にのるように
max-width: 60%; margin-left:20% みたいにしたいってのはわかるけど
背景だけ max-width つけたら文字拡大したときに文字だけはみでることになるじゃん

531Name_Not_Found2018/11/18(日) 11:59:45.96ID:???
サイズレスポンシブなデザインはプログラミングに近いセンスがいるからなー
4Kモニタk時代がきていつまでも幅1000pxとか1200pxとか固定するわけにもいかなくなってきたし

5325072018/11/18(日) 12:03:53.51ID:???
>>527
誰?>>509?
↓これおかしくね?このデザインだとリボンはどうみても背景だよね?
> 背景はしょせん背景だからみきれようとどうでもいい
> というよりどうでもいいものを背景にするべき


>>512は違うよ


>>526
いや、最大値は原寸までで、小さくなる分には小さくなるようにしたい。
つまりmax-width:100%

>>530
そうだよ。
>max-width: 60%; margin-left:20% みたいにしたいってのはわかるけど
↑違うし
文字拡大はこの際、対応しなくていいよもう。
最大値は原寸までで、小さくなる分には小さくなるようにしたい。

533Name_Not_Found2018/11/18(日) 12:05:39.85ID:???
アンカ間違えた

>>528
>>512は違うよ


>>529
いや、最大値は原寸までで、小さくなる分には小さくなるようにしたい。
つまりmax-width:100%

534Name_Not_Found2018/11/18(日) 12:07:58.54ID:???
>>531
いうて1000より縮まないようにしとくだけで広がる分には問題ないように作るのはそんな大変じゃないかと
1年ほど前に400px幅の絶対配置で作られたサイトはみたことあるが…

よほど奇抜なデザインしてない限り画像解像度を高めにしておいて
font-size を vw 指定
margin padding や位置指定に px じゃなく rem と % 使う
改行位置に依存したデザインをさける

ぐらいだと思う

5355072018/11/18(日) 12:08:00.15ID:???
もうカオスでややこしいから
この質問は終わりでいいや。
cssでできるやついるかどうかをしりたかっただけ。

536Name_Not_Found2018/11/18(日) 12:09:54.72ID:???
>>534
それってデザイン画像があまり無いサイトの話だよね。

537Name_Not_Found2018/11/18(日) 12:11:22.62ID:???
>文字拡大はこの際、対応しなくていいよもう
だったらブロック自体に画像サイズと同じ max-width をつけておいて背景は contain なり 100% でいいじゃん

5385072018/11/18(日) 12:11:55.29ID:???
>>537
うんそれでいいと思うわ。

5395072018/11/18(日) 12:14:27.77ID:???
>>537は優秀そうだな
そもそもの質問は違うんだが、
例の対応方法としては一番共感するわ。
と言う事で終了。

540Name_Not_Found2018/11/18(日) 13:41:32.28ID:???
>>532
509=527=537 ぜんぶ同じだが?

>このデザインだとリボンはどうみても背景だよね?
それはデザイン者の意図次第
リボン全体を画面におさめたい=リボンという形に意味がある=背景ではない
背景であるなら形や全体図形にこだわるべきではない=見切れても問題ない画像にすべき

単に文字にかさなってるから背景というわけじゃない

>最大値は原寸までで、小さくなる分には小さくなるようにしたい
これが意味がわからない
要件定義をきっちりしてないとなにをしたいのかわからない

文字と独立に背景だけ縮んだらはみだすわけじゃん
ふつうは body とかに min-width 設定して一定以上ちぢまないようにするものだけど
仮にそうしないで画面縮めたら文字だけ折り返すかはみでるかして
どのみちりぼんから文字の横か縦どちらかがはみでる

541Name_Not_Found2018/11/18(日) 13:46:01.99ID:???
>>531
そこそこ大手のウェブ制作会社だけどまだpixel指定だよ
サイズレスポンシブ?っていうの?
覚えないとやばいのかな…

542Name_Not_Found2018/11/18(日) 13:50:11.31ID:???
うちもまだサイズフリーのレスポンシブでくんでくれって案件はきたことないな
ただいわれてみればモニタが4Kなのにいつまでも1000固定で作ってるわけには行かないよな

543Name_Not_Found2018/11/18(日) 13:55:39.28ID:???
いつも小さいモニターの話しか出てこないけど、
いつか大きいモニターにも対応しなきゃならんくなるのか
そうすると画像はSVG一択なのかな

544Name_Not_Found2018/11/18(日) 14:21:47.79ID:???
メディアクエリでスマホ版と2パターンデザインするだけじゃあかんのか?
それもただ複数カラム floatとflexをばらして無効にするぐらいしかやってないわ

545Name_Not_Found2018/11/18(日) 14:25:49.07ID:???
逆に言うとほとんどがモバイル対応しかやってない今
サイズフリーレスポンシブ4K対応を唄えば仕事取り放題だよ
ノウハウがたまるまではそれなりに技術が必要になるが

546Name_Not_Found2018/11/18(日) 14:56:28.65ID:G1HgllPO
サイズレスポンシブだと
pixel指定もmax-widhtが必須になる感じか

547Name_Not_Found2018/11/18(日) 15:24:17.11ID:???
まだそういう求人見たことないな
いまだにスマホ大丈夫ですか?って聞かれる
早くIE11を見放して欲しい

548Name_Not_Found2018/11/18(日) 15:30:31.71ID:???
ttps://webtan.impress.co.jp/e/2018/04/04/28482

半年ほど前から大画面対応の話はちらほらきくけど
現場レベルだとなかなかすぐに対応かえるってのは難しいんじゃね

549Name_Not_Found2018/11/18(日) 15:55:09.55ID:???
WindowsServer2016インストールしたら標準ブラウザがEdgeじゃなくてIE11だった

550Name_Not_Found2018/11/18(日) 17:25:16.50ID:???
動画以外で4Kを使う場面が思い浮かばなかった

551Name_Not_Found2018/11/18(日) 17:41:40.29ID:???
つーか検証できる環境が無いな

552Name_Not_Found2018/11/18(日) 17:46:21.46ID:???
今時、4Kモニターでネット見る人なんて
ゲーマーかこだわりエンジニアかオタクしかいないからなぁ
一般人は8割スマホとタブレット
PCあっても学生は液晶がクソな低価格のノートPCかアップル製品
ご家庭だと10年前のノートとかザラだし

553Name_Not_Found2018/11/18(日) 17:55:58.35ID:???
つまりIE8に対応するようなものか

554Name_Not_Found2018/11/18(日) 18:50:11.20ID:???
もう3〜4万から買えるし次買うなら4Kって人は多いと思うけどな

555Name_Not_Found2018/11/18(日) 18:58:40.28ID:???
数年後考えるとね

556Name_Not_Found2018/11/18(日) 20:14:58.79ID:???
一般人が数年後にディスプレイ買うかな…

557Name_Not_Found2018/11/18(日) 20:37:48.55ID:???
>>552
サイトによるじゃん

558Name_Not_Found2018/11/18(日) 21:02:44.29ID:???
4Kって解像度だよね?
ならば px 単位のリアルな大きさは変化しないことになるので
特に対応する必要はないんじゃないのか?

559Name_Not_Found2018/11/18(日) 21:21:03.87ID:???
昔からべき論者は自分で知らない出来ないことをべきべき言って批判しかしてこないからな

560Name_Not_Found2018/11/18(日) 23:15:57.07ID:???
文字列に下線を引いて、その下に注釈文字列を書き込む方法を教えて下さい

例えば、

   あいうえお
   --------
いろは

みたいな感じにしたいです。
よろしくお願いします。

561Name_Not_Found2018/11/18(日) 23:16:28.90ID:???
いろは のインデントがズレましたがやりたい事はわかると思います。

562Name_Not_Found2018/11/19(月) 00:55:20.57ID:???
<style>
.notice {
display: inline-block;
border-bottom: solid 1px black;text-decoration: position: relative;
}

.notice-text {
font-size: 80%;
position: absolute;
display: block;
}
</style>

かきくけこ<span class="notice">あいうえお<span class="notice-text">いろは</span></span>さしすせそ

とか?

<span class="notice" title="いろは">あいうえお</span>
みたいなこともできるけど

563Name_Not_Found2018/11/19(月) 01:16:16.66ID:???
>>562
ありがとうございます。

ところで、「いろは」を"下に配置する"という明示的命令はないのに、positionという言葉だけでなぜ「いろは」が下に配置されるんでしょうか?
それと、
「text-decoration: position: relative;」という"3連"の表記は初めて見たのでどう理解すればいいのか分からないのですが、
解説しているサイトを教えて頂ければと思います。

564Name_Not_Found2018/11/19(月) 01:18:37.50ID:???
書き間違いだな

565Name_Not_Found2018/11/19(月) 01:20:44.64ID:???
したり顔

566Name_Not_Found2018/11/19(月) 01:32:31.36ID:???
>>562
問題がありました
その仕方だと

かきくけこ<span class="notice">あいうえお<span class="notice-text">いろは</span></span>さしすせそ<br />
ああああああああああああああああああああああああ

とすると、「いろは」と「ああああ…」が重なってしまいます

567Name_Not_Found2018/11/19(月) 01:34:09.14ID:???
text-decoration:

については無くてもよいと言う事で理解しました。

568Name_Not_Found2018/11/19(月) 07:38:42.61ID:???
疑似クラスみたいな感じで特定の文字色や背景色の要素だけを指定する方法ってありますか?

569Name_Not_Found2018/11/19(月) 09:31:33.44ID:???
行頭文字なら指定できるけどそれ以外はjavascriptじゃないと無理じゃないかな
特定の文字にタグをつければできるから
内容が固定なんだったらエディタの replace とかつかえばタグにするのは簡単だけど

570Name_Not_Found2018/11/19(月) 09:33:56.79ID:???
>>566
line-height あければいいんじゃないの?

というか要件定義をきっちりしてほしい
注釈がはいった場合だけ行間をあけたいのか
常に注釈が入るスペーををあけておくのか

571Name_Not_Found2018/11/19(月) 10:00:08.45ID:???
スペー

572Name_Not_Found2018/11/19(月) 10:17:16.04ID:???

573Name_Not_Found2018/11/19(月) 10:38:23.99ID:???
>>568
特定の文字色や背景色があるってことは
そこに何かしらの要素があるってことじゃろ?

574Name_Not_Found2018/11/19(月) 11:19:49.38ID:???
>>573
http://www.jquerystudy.info/reference/selectors/equals.html
これを参考にcolor=〇〇で指定してるけど何故かうまく行かない……

575Name_Not_Found2018/11/19(月) 11:52:54.10ID:tqrnCjgk
こういうのってどんくらい気をつけてる?

ttps://sole-color-blog.com/blog/31/

ぶっちゃけ同じ値にしてもズレまくるから、見た目重視にやってるんだが、こだわる人がいて面倒。

576Name_Not_Found2018/11/19(月) 12:26:32.63ID:???
>>575
なんか不毛だな…
最初からブラウザでデザインするような拡張機能ねーかな…

577Name_Not_Found2018/11/19(月) 12:40:44.04ID:???
>>575
>同じ値にしてもズレまくるから、見た目重視にやってる

↑全く持ってその通り。
数値が当てにならない。結局見ながら何度も修正するハメになる

578Name_Not_Found2018/11/19(月) 13:05:15.13ID:???
line-heightの挙動に理解がないデザイナーはわりといる

579Name_Not_Found2018/11/19(月) 13:05:36.64ID:???
ただのバカだろ

580Name_Not_Found2018/11/19(月) 15:46:55.13ID:???
HTMLの出力として、各行に行番号を表示させる方法について説明しているサイトを教えて下さい。
ググっても殆どは「HTMLソース編集中に」行番号を表示させる事ばかりが載っているので、私の望みではないです。

細部の仕様については使いながら考えていきたいと思っています。

581Name_Not_Found2018/11/19(月) 16:08:06.11ID:cvABDKO5
>>580
code-prettifyとかsyntax-highlighterとか
そのへんの話かな?

582Name_Not_Found2018/11/19(月) 16:11:04.39ID:cvABDKO5
>>575
最近はnoto使うことが多いから
デザインカンプ通りの数値でほぼ大丈夫だな
トラッキング→letter-spacingの変換はsassのmixinでやってる

583Name_Not_Found2018/11/19(月) 16:19:16.30ID:???
>>581
行番号の表示スタイルとしてはそれなんですが、それも結局はソースコードを読者に見せるための行番号表示であって、
私の望むところとしては、普通の文章に行番号をつけて読者に見せたいんです

584Name_Not_Found2018/11/19(月) 16:29:27.85ID:???
>>583
普通の文章だと横幅によって行番号は変わる。
文章の中で○行を参照してくださいとか
書かないと約束できるか?

585Name_Not_Found2018/11/19(月) 16:37:40.12ID:???
>>584
取りあえず使えるサイト教えて下さい

586Name_Not_Found2018/11/19(月) 16:42:11.66ID:???
prism.js というものがソースコードをプログラマー読者向けに書けるようにしてくれるみたいですが、
これが「結果として出てくる普通のHTML文章」に適応できたらいいんですがね

587Name_Not_Found2018/11/19(月) 17:07:57.00ID:???
>>583
こういうのが嫌なら自分で作るしかねえんじゃね?
需要ねえし
そのブロックのline-heightに合わせて
左に行番号をじゃーっと羅列すりゃあいい

やり方はJSスレで聞いておくれ

588Name_Not_Found2018/11/19(月) 17:56:14.71ID:???

589Name_Not_Found2018/11/19(月) 18:07:10.79ID:???
>>584
そんなことを書くバカはいちいち相手にしない
社内でまともに相手にしようとしてるヤツがいたらやめろと言うレベル
んなもんまともに対応するのが当然と思われたらかなわんわ

590Name_Not_Found2018/11/19(月) 18:27:52.30ID:???
>>588
これ、正確に数えられるんか?
ざっとしか見てないけど、1emの幅を測ってボックスの高さ超えるまで足してるみたいだけど

591Name_Not_Found2018/11/19(月) 18:29:29.10ID:???
うーーん、やっぱお前ら程度の頭には入門書を越える内容となると途端に何の有益な回答も得られないか…
せいぜい<div>,<span>,float,margin,paddingレベルの「初級ワード」を駆使して入門者に教えた気分に浸っとけwww

592Name_Not_Found2018/11/19(月) 18:30:28.77ID:???
そうだねじゃあこの件は閉めよう次の方〜

593Name_Not_Found2018/11/19(月) 19:05:25.85ID:???
Bulmaってフレームワーク使ってみたい
HTMLもJSも知識なくても頑張って勉強したら使えるかな

594Name_Not_Found2018/11/19(月) 19:13:07.73ID:???
>>593
いいえ

595Name_Not_Found2018/11/19(月) 19:13:24.92ID:???
<div style="display:none">
はインラインといいますが、

以下2つの呼び方ってありますか?
<link rel="stylesheet" type="text/css" href="foo.css" media="all">

<style type="text/css">
div {
display:none;
}
</style>

596Name_Not_Found2018/11/19(月) 19:33:34.46ID:???
あってません

597Name_Not_Found2018/11/19(月) 19:36:38.51ID:???
あるかないかを聞いています。
あってるかあってないかではありません。

598Name_Not_Found2018/11/19(月) 19:40:16.10ID:???
いいえ、あるきません

599Name_Not_Found2018/11/19(月) 19:44:33.07ID:aX6xe0rD
>>596-598
ID出し忘れました、すいません

>>595への回答、よろしくお願いします

600Name_Not_Found2018/11/19(月) 20:09:23.66ID:???
>>595
internal
external

601Name_Not_Found2018/11/19(月) 20:09:52.29ID:???
>>600
ありがとうございました!

602Name_Not_Found2018/11/19(月) 21:26:20.78ID:???
>>595
一般的には外部css、内部cssって呼ぶ

603Name_Not_Found2018/11/19(月) 21:43:25.06ID:???
>>583
レスポンシブどうすんの。

604Name_Not_Found2018/11/19(月) 21:50:57.68ID:???
ボックス内のテキストに1文字ずつ<span>をつける

ひとつずつoffsetTopを見ていって、数値が変わったら行が変わった位置になる

行番号の要素を追加

window.onresizeで上記をもう一度

これでどうだろう?

605Name_Not_Found2018/11/19(月) 21:58:30.62ID:???
重くなりそうだな
そんな押し付けがましくやることなのか

606Name_Not_Found2018/11/19(月) 23:48:44.40ID:???
質問させてください
HTMLのdialogタグでモーダルウィンドウを表示したところ、ウィンドウが画面の左に寄せて表示されてしまいました
特にそういった設定はしておらず、調べてもどうもデフォルトで真ん中になっているようで良い情報がなかったのですが、どこか怪しいところとか、確認すべき箇所ってありますか?
ブラウザはChromeです

607Name_Not_Found2018/11/19(月) 23:57:28.26ID:???
>>606
dialog {
display: block;
margin: 0 auto;
}

多分親要素がtext-align:leftか何かを設定している

608Name_Not_Found2018/11/20(火) 00:04:11.28ID:???
>>604
俺ならwrapperと左に兄弟要素作って
見出しに使い、親要素のheight=元のボックスのheightってのをやってみるかな
なんにしろめんどくさいけど

609Name_Not_Found2018/11/20(火) 00:06:30.38ID:???
>>607
ありがとうございます
後で試してみます
新しいタグは当たり前ですが情報少ないですね…かなり便利そうなので普及してほしい

610Name_Not_Found2018/11/20(火) 00:17:23.86ID:???
フロントは専門外なので勉強のためにここを
のぞいてるんだけど、そんなタグがあるなんて
初めて知った
へー。

611Name_Not_Found2018/11/20(火) 01:35:03.92ID:???
>>607
display: blockを指定するとダイアログの下の表示がずれてしまいましたが、
margin: 0 autoだけでもきちんと中央に表示されたので解決しました
早い回答ありがとうございました

612Name_Not_Found2018/11/20(火) 09:21:20.19ID:???
margin: autoはblockにしか効かないんじゃなかったか・・・?

613Name_Not_Found2018/11/20(火) 12:26:23.62ID:???
レスポンシブで、スマホの時はヘッダ(ナビ)とフッタ固定にしてるんだけど
背景を画面全体で一枚置いてるだけなので、スクロールすると文字が被っちゃう

固定部分に重なった文字だけ色を背景画像に近づける、もしくはコンテンツだけを固定部分に重ならないようにスクロールできるようにすることは可能ですか?
できればCSSとタグだけで実装できるなら嬉しい…
手打ちだけで使えるならJavaScriptもがんばってみま

614Name_Not_Found2018/11/20(火) 12:36:39.60ID:???
>>613
中心部分にpaddingを付けて、paddingの上にヘッダ・フッタを乗せるようにする
中心の部分にpadding漬けにくかったら、body要素にでもpadding付けて後はヘッダ・フッタのtopなどで調節すればok
cssだけで行ける

615Name_Not_Found2018/11/20(火) 13:43:17.87ID:???
>>614
あざっす!
やってみます

616Name_Not_Found2018/11/20(火) 14:47:13.63ID:???
paddingの浅漬け

617Name_Not_Found2018/11/20(火) 14:55:02.44ID:???
marginの糠漬け

618Name_Not_Found2018/11/20(火) 17:18:27.97ID:???
ちょっとしたモーダルウィンドウを画面中央にするのってcssだけじゃ無理なのかなあ
cssだけでてきたら素敵なんだけどなあ

619Name_Not_Found2018/11/20(火) 17:26:48.69ID:???
checkedで表示切り替え
display:block
position:fixed
flex(ほか何でもいいけど)で中央揃え

本気出せばこの辺で行ける

620Name_Not_Found2018/11/20(火) 17:49:06.79ID:???
ちょっとしたモーダルなら
margin上下左右ゼロではダメかね?

621Name_Not_Found2018/11/20(火) 17:53:06.86ID:???
モーダル、あなた突かれているのよ

622Name_Not_Found2018/11/20(火) 18:45:27.01ID:???
flexとかmarginだと親要素の中央じゃない?
画面(ウィンドウ)より縦長のページで画面中央にしたい
bodyのheightがウィンドウの高さより高いからbodyの中央にしても画面外に行くんだよね

623Name_Not_Found2018/11/20(火) 19:10:36.13ID:???
calc使えばよくね

624Name_Not_Found2018/11/20(火) 19:12:58.66ID:dd1HvjpL
fixedじゃいかんの?

625Name_Not_Found2018/11/20(火) 19:30:04.55ID:???
サイズ決まってるならcalc
決まってないなら
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
とか

626Name_Not_Found2018/11/20(火) 19:33:44.23ID:???
画面全体を覆う要素を用意してモーダルを包み、flexとalign-items:centerとか
汎用性低い?

627Name_Not_Found2018/11/20(火) 21:14:19.36ID:???
エスパーにそこそこ自信あったが
>>613の意味がわからなかった
何がどこの何と被るのか、主語が無いのはこういう奴のあるあるパターンなんだが、
今回はだめだたわ

628Name_Not_Found2018/11/21(水) 02:11:01.29ID:???
>>623
calcでどう位置をだせばいいの?

>>625
それだと画面の外に出るね
例えば1920x1080のモニタで高さ2000pxのページの一番上を表示してる時にそれすると画面の下の方に見切れるよね

>>626
画面全体を覆う要素というのが用意できないかと…

画面の高さと表示してる位置が取れないからなんかもやもやする…

629Name_Not_Found2018/11/21(水) 02:49:00.03ID:???
モーダルウィンドウをなにでどう表示したときの話をしてるんだ?
625のやり方ではみ出るってのがよくわからなう

630Name_Not_Found2018/11/21(水) 09:19:10.00ID:???
>>628
109vw * 100vhの要素にflexで入れればいけるんじゃ

631Name_Not_Found2018/11/21(水) 09:21:06.83ID:???
親要素より子要素の高さがあるときalign-itemsの挙動ってどうなるっけ

632Name_Not_Found2018/11/21(水) 10:10:19.38ID:???
>>628
画面中央であってページ全体の中央じゃないでしょ?
だったら100vw100vhのdivをfix,flexの縦横centerにして中にdivおけばいけるでしょ

633Name_Not_Found2018/11/21(水) 13:06:53.41ID:???
>>632
俺もこれだわ

634Name_Not_Found2018/11/21(水) 13:28:19.58ID:???
>>618
作ったよ
pushって要素をクリックすればウィンドウっぽいものが出るようになっている

http://jsfiddle.net/cLty4hpg/2/

635Name_Not_Found2018/11/21(水) 20:01:01.82ID:???
>>627
z-indexのことかと思ったけど614を読んでもよくわからなかった

636Name_Not_Found2018/11/21(水) 23:36:10.06ID:???
>>634
以前、cssのdisplayプロパティには表示/非表示を切り替える役割(jQueryでいう.show()/.hide())と
インライン/ブロックなどのレイアウトを切り替える役割の2種類があって

表示/非表示を汎用クラスで使用する場合、無理があるって言ったら
このスレで意味不明とか言ってスゲーバカにされたわ。

言いたかったのはあなたのような使い方で、表示/非表示をここではflexを使用しているが
汎用クラスにする場合、出来ないっつー事だったんだがな
バカにされた意味が未だにわからん。

637Name_Not_Found2018/11/21(水) 23:54:54.90ID:???
>>636
どっちがどっちの言い分かわかんない文

638Name_Not_Found2018/11/21(水) 23:57:24.94ID:???
> 以前、cssのdisplayプロパティには表示/非表示を切り替える役割(jQueryでいう.show()/.hide())と
> インライン/ブロックなどのレイアウトを切り替える役割の2種類があって

・インラインで表示
・ブロックで表示
・表示しない(インラインでもブロックでもない)
の1種類しか役割はない
「表示しない」もレイアウトの一つ

> 表示/非表示を汎用クラスで使用する場合、無理があるって言ったら
> このスレで意味不明とか言ってスゲーバカにされたわ。
何が言いたいのかわからん。意味不明と言われても当然だろう

> 言いたかったのはあなたのような使い方で、表示/非表示をここではflexを使用しているが
> 汎用クラスにする場合、出来ないっつー事だったんだがな
何が出来ないのかさっぱりわからない。日本語がおかしい

639Name_Not_Found2018/11/21(水) 23:58:02.65ID:???
>>636
>>636が正しいと思うよ。
表示非表示に関しては、そもそもがcssの欠陥だと思う

class="show block"や、class="show flex"みたいにするか。めちゃくちゃかっこ悪いけど
汎用classにするならwrapperをdisplay:inlineにすると影響が少ないのかな

そもそも論を言うとここはやはりjQueryに任せるべきか

640Name_Not_Found2018/11/22(木) 00:02:37.99ID:???
> class="show block"や、class="show flex"みたいにするか。めちゃくちゃかっこ悪いけど

意味不明。show blockがあるってことは、その反対
「ブロックで表示しない」や「flexで表示しない」があるってことか?

それは一体どういう意味だ?
表示しないのであれば、そこになにもないで当然だろう

そこにもの(ブロック等)があるが見えないだけっていうのならvisibilityがある
displayは物自体がなくなるのだから、それはブロックでもflexでもない

641Name_Not_Found2018/11/22(木) 00:10:13.65ID:???
> 言いたかったのはあなたのような使い方で、表示/非表示をここではflexを使用しているが
> 汎用クラスにする場合、出来ないっつー事だったんだがな

.onっていう汎用クラス使ってるじゃん

642Name_Not_Found2018/11/22(木) 00:12:06.71ID:???
visibilityは使い勝手悪くない?
何かバグも合ったはずだけど忘れた

643Name_Not_Found2018/11/22(木) 00:15:17.76ID:???
使い勝手?
visibilityを使ってこんな裏技考えてみましたとかやる気か?

そこに物はあるが見えなくしたいってときに使うだけだろ

644Name_Not_Found2018/11/22(木) 00:48:27.89ID:???
>>639
なんで汎用クラスにしたら全部が全部汎用クラスでの運用になるん?

645Name_Not_Found2018/11/22(木) 07:40:03.20ID:???
>>639
>そもそもがcssの欠陥
その欠陥は認知されていて、過去に box-suppress とかいう表示切り替え専用のプロパティが提案されたこともあった

なので現状では、元のスタイルを display:none で上書きする専用のclass(その class を外せば flex や giid など何であれ、元のdisplayに復帰する)か、hidden属性で対処するしかない(それで十分とも言えるので box-suppressはお蔵入りになったのかもしれん)

646Name_Not_Found2018/11/22(木) 08:45:10.41ID:???
>>645
ありがとう!
歴史に詳しい人がいるとうまくまとまるね

647Name_Not_Found2018/11/22(木) 10:07:56.05ID:???
>>645
提案されて却下ってことは、みんなが欠点に気づいていないってことじゃなくて、
それは欠点ではないと結論が出たってことなんだよ

648Name_Not_Found2018/11/22(木) 10:09:19.98ID:???
>>645
> なので現状では、元のスタイルを display:none で上書きする専用のclass(その class を外せば flex や giid など何であれ、元のdisplayに復帰する)か、hidden属性で対処するしかない

対処するしか無いんじゃなくて、そのやり方がCSSの正しいやり方ってことだよ
他の属性だってみんなそのやり方なんだから

649Name_Not_Found2018/11/22(木) 12:18:18.11ID:???
1つだけわかった
たぶん、意味不明とか反論している人は、使用場面に遭遇した事ないんだわ
以前に動的サイトをロクに作った事無い奴に、その手法は動的では使えないよって
言っても最初全く通じなかったのと同じだわ

わかる人だけは何人か反応してるからもういいわ

650Name_Not_Found2018/11/22(木) 12:46:29.60ID:???
汎用クラス .on があったとして
表示させるためのプロパティがdisplay:blockだったとすると
flexでレイアウトしていた要素は非表示から表示時にflex状態で復帰できないとか
display:noneで非表示してしまうと再表示時に再度コンテンツの読み込み直しになるとか
そういうところが不便ってことじゃなくて?

651Name_Not_Found2018/11/22(木) 13:17:31.14ID:???
やっぱおまえら
unsetは使わんの?IEで使えないから

652Name_Not_Found2018/11/22(木) 13:23:55.74ID:???
>>651
使えんかったのか
普通に使ってたわ

653Name_Not_Found2018/11/22(木) 14:34:44.15ID:???
>>649
使用場面に遭遇したことがあるというのなら、
その使用場面を言えば?

それが出来ないから意味不明って指摘に反論できないんだろ。
自分が悪いのに他人のせいにするな

654Name_Not_Found2018/11/22(木) 16:41:08.86ID:???
>>649
ホームラン級に日本語下手

655Name_Not_Found2018/11/22(木) 17:08:31.57ID:???
>>651
ずっと前から欲しかった機能だわこれ
存在を知らなかった

656Name_Not_Found2018/11/22(木) 19:01:13.13ID:???
>>650
そういう事。だからラッパーに頼るしかなくなる

>>651
IEでバグるから回避して以来、ずっと忘れてた・・・
今って問題なく使えるの?

657Name_Not_Found2018/11/22(木) 19:11:09.25ID:???
IEは今でも駄目だと思う>unset

658Name_Not_Found2018/11/22(木) 19:16:42.27ID:???
> そういう事。だからラッパーに頼るしかなくなる

えぇ?それが理由ならお前の勘違いってことじゃん
ラッパーなんかいらないし

<div class="dialog on">ダイアログ</div>

.dialog { display: none; }
.dialog.on { display: block; }

クラス名は階層にしなくても繋げられるんですよ?

659Name_Not_Found2018/11/22(木) 19:38:45.75ID:???
>>658
.dialog.on { display: block; }
これがblockかflexかinlineかわからないよねって話してるの

660Name_Not_Found2018/11/22(木) 19:39:40.74ID:???
.red { color: red } と書いたらだめな理由知ってる?
クラス名 = 見た目 になってるからだめ

クラス名で一律に見た目が決定されたらだめなんだよ

同じ理由で .on { display: block } というのもだめ
.on というのは見た目ではなくて状態を表す言葉。

.on という状態でどういう見た目になるかは
そのコンポーネント次第

661Name_Not_Found2018/11/22(木) 19:42:20.22ID:???
>>659
display: blockって書いてあるんだからblockじゃん?
flexならdisplay: flex、inlineならdisplay: inline って書くんだよ

CSSの勉強をしよう!

662Name_Not_Found2018/11/22(木) 19:54:56.96ID:???
未だに全て物のはインライン要素かブロック要素のどちらかに分類されるって
思ってるのかな?

HTML5でそういう分類は廃止されたんだが
https://developer.mozilla.org/ja/docs/Web/HTML/Block-level_elements

663Name_Not_Found2018/11/22(木) 19:56:04.27ID:???
>>661
それがonという汎用classで使いまわせないって話

664Name_Not_Found2018/11/22(木) 19:59:38.02ID:???
onでまわせないならoffでまわせばいいじゃない

665Name_Not_Found2018/11/22(木) 19:59:38.28ID:???
>>657
やっぱアカンか、ありがとう
IEいつまで独自仕様なんだろう

666Name_Not_Found2018/11/22(木) 20:00:17.96ID:???
>>663
> それがonという汎用classで使いまわせないって話

あー、やっぱりだw 良くない使い方をしている
汎用classで使いまわしたらだめ

だ・め

理由は>>660にも書いたとおり

長くやってる人ならわかってると思うんだけど、
クラス名の使い方には二通りある

一つはコンポーネントを表すクラス名
もう一つは状態を表すクラス名

状態を表すクラス名は、見た目と紐づけてはいけない
つまり.onという汎用classで使い回すなんてことはやってはいけない。

ある状態でどういう見た目になるかはコンポーネント次第。
だから、.dialog.on { 見た目 } にコンポーネントと紐づけて使う
.on { 見た目 } のような使い方をしてはいけない

667Name_Not_Found2018/11/22(木) 20:00:22.45ID:???
>>664
そう、offは出来る
display:none !important
で必ず非表示になるからそれは問題ないんだ

668Name_Not_Found2018/11/22(木) 20:01:05.49ID:???
>>667
!importantを使うのも下手の証拠

669Name_Not_Found2018/11/22(木) 20:02:40.41ID:???
>>666
>状態を表すクラス名は、見た目と紐づけてはいけない
>つまり.onという汎用classで使い回すなんてことはやってはいけない。
では、理由をどうぞ

>>668
100%消したいんだからimportantを付ける事に何の問題があるの?

670Name_Not_Found2018/11/22(木) 20:04:12.62ID:???
>>669
> では、理由をどうぞ

だから>>660に書いたって言ってるだろうが

671Name_Not_Found2018/11/22(木) 20:04:55.42ID:???
良くないと言われているから何も考えずに従っているだけだろう
bootstrap等のフレームワークは
>状態を表すクラス名は、見た目と紐づけてはいけない
紐づけまくっているが、どう問題があるんだ?
フレームワークだからいいとか言うなよ

672Name_Not_Found2018/11/22(木) 20:05:55.90ID:???
> 良くないと言われているから何も考えずに従っているだけだろう
> bootstrap等のフレームワークは
> >状態を表すクラス名は、見た目と紐づけてはいけない
> 紐づけまくっているが、どう問題があるんだ?

紐づけていない。状態を表すクラスは必ずコンポーネントと組み合わせて使われている

673Name_Not_Found2018/11/22(木) 20:07:42.49ID:???
.赤 { color: 赤 } と .表示 { 表示 } は
どちらも同じ間抜けな使い方だってことに気づいてないんだよな

初心者やで

674Name_Not_Found2018/11/22(木) 20:09:06.95ID:???
非表示にしたい時に
.off{
display:none !important;
}
つければいいだけじゃん

675Name_Not_Found2018/11/22(木) 20:10:06.05ID:???
>>674
だからいい加減

赤 { color: 赤 } とか .表示 { 表示 } は
.非表示 { 非表示 } みたいな使い方はやめろ

676Name_Not_Found2018/11/22(木) 20:13:29.41ID:???
>>672
http://studio-key.com/Bootstrap/glidDecoration03.html
>紐づけていない。状態を表すクラスは必ずコンポーネントと組み合わせて使われている
??

677Name_Not_Found2018/11/22(木) 20:19:05.53ID:???
jQuery何かでtoggle()を使う場合、.>>674みたいに自作classのトグルにしないとバグる事があるよ
普通は問題ないけど、プラグイン何かで設定されるインライン要素のdisplay:noneに勝てない事がある

678Name_Not_Found2018/11/22(木) 20:21:53.34ID:???
>>676
そいつはそもそも状態を表すクラスじゃないし、
メディアクエリーと組み合わせて使われてる

ダイアログのようにJavaScriptからつけたり外したりしねーだろ
状態というのは変わるものだ。変わらないものは状態ではない

679Name_Not_Found2018/11/22(木) 20:31:20.38ID:???
>>678
ウィンドウサイズによって変わるなら同じ事だね
で、メディアクエリーなら問題なくこういう使い方してもいいって事なのね
ふ〜ん
まぁ俺は良いと思うけど

680Name_Not_Found2018/11/22(木) 20:36:35.76ID:???
フレームワークってそういうもんなんだから、フレームワークだからいいって言い切って良かったのに
何を意地になってんだか

681Name_Not_Found2018/11/22(木) 20:42:55.62ID:???
別にフレームワークだからって綺麗に実装されてるわけじゃないしな、CSSに限らず

まあフレームワークと違って自分達で書いたコードは自分達が保守運用するんだからメンテしやすいに越したことはない

682Name_Not_Found2018/11/22(木) 20:45:57.82ID:???
>>660
それってさー、むかーしから言う人いるけど矛盾がない?
「redってネットワークのことです」って言われたらそれまでで
結局その言語を理解できる人だけにしか通じない話じゃん
意味ない気がする

結局classやidなんて識別子でしかないんだから
何書いても問題ねえよ

683Name_Not_Found2018/11/22(木) 20:55:55.55ID:???
おすずの本教えてください

684Name_Not_Found2018/11/22(木) 21:02:15.29ID:???

685Name_Not_Found2018/11/22(木) 21:09:35.27ID:???
状態を表すクラス名に見た目(css)を紐付けるのは問題ないわ。コンポーネントごとに状態に対しての見た目が変わったっていい。
問題は見た目をクラス名にすることであって。

686Name_Not_Found2018/11/22(木) 21:14:16.75ID:???
>>684
それはお鈴(おりん)ちゃんだ!

687Name_Not_Found2018/11/22(木) 21:28:54.30ID:HOJRMS6b
質問です。
youtubeの動画を埋め込む際、見終わった後の関連動画を表示させない方法で
2018年現在も有効な方法ってありますか?

ここに書いてあるような「?rel=0」って現在は効かないですよね?
https://beginners-high.com/youtube-kanren-display/

688Name_Not_Found2018/11/22(木) 21:28:56.79ID:???
いやー勉強になるなー

689Name_Not_Found2018/11/22(木) 21:35:52.18ID:???
>>660

同じ理由で .on { display: block } というのもだめ
.on というのは見た目ではなくて状態を表す言葉。

矛盾してない?
自分で 見た目{見た目} がだめっていってon{display:block}はonが見た目じゃなくて状態を表してるから
っておなじ理由じゃないじゃん

690Name_Not_Found2018/11/22(木) 21:43:57.12ID:???
要は
.hoge .on{display:block}はダメ
.hoge.on{display:block}はokってことだろ?
なんでこれだけのことをやれ汎用だコンポーネントだとぐちゃぐちゃいってんの?日本語壊滅すぎるだろ

691Name_Not_Found2018/11/22(木) 21:55:48.73ID:???
うひゃー、全然分からんわ

692Name_Not_Found2018/11/22(木) 21:57:20.79ID:NTIoZt38

693Name_Not_Found2018/11/22(木) 22:00:51.00ID:???
基本クラス名は好きな食べ物の名前にしてる

694Name_Not_Found2018/11/22(木) 22:16:54.87ID:???
>>689
王長島だからセーフ

695Name_Not_Found2018/11/22(木) 22:38:46.36ID:???
colorの値ってborder,text-decoration,box-shadow等の色に継承されてんだな
なんでfont-colorってプロパティ名にしなかったのかやっとわかった

696Name_Not_Found2018/11/23(金) 00:01:33.25ID:???
>>692
明確なご回答アリガトゴザイマス!!

697Name_Not_Found2018/11/23(金) 00:59:14.20ID:???
>>689
> 矛盾してない?

全然矛盾してない。.onを状態として扱うなら、
.onのときに表示するか非表示にするかはコンポーネント次第。

つまり、 .dialogと組み合わせて初めて
どういう表示になるかが特定できる

.onだけで決めてはだめという話


>>690
> .hoge .on{display:block}はダメ
> .hoge.on{display:block}はokってことだろ?

ほら間違ってる。だから説明がいるんだよw

.onが状態(JavaScriptから変更するもの)ならば、.onだけで
見た目が決定されたらだめ。必ずコンポーネントを表すクラスと組み合わせて使う
.hoge .on は .on だけでは何も決まらず、 .hoge と組み合わせているから問題ない

698Name_Not_Found2018/11/23(金) 01:04:24.08ID:???
>>682
> それってさー、むかーしから言う人いるけど矛盾がない?
> 「redってネットワークのことです」って言われたらそれまでで

何がそれまでなのかわからない。
.redを赤という意味で使うなって話だろ。
.redをネットワークの意味で使ってるなら別にいいよ
本当にネットワークの意味で使ってるならな
お前の屁理屈は、それまでだなw

699Name_Not_Found2018/11/23(金) 01:11:04.02ID:???
>>656
> そういう事。だからラッパーに頼るしかなくなる

どうやら反論もないし、ラッパーはいらないってことでいいね

700Name_Not_Found2018/11/23(金) 01:50:05.20ID:???
>>697
.hoge.on{}だって、ほかと組合わさってるじゃんほんと意味不
ほらwとか書いてないで日本語ちゃんとかいてくれよ

701Name_Not_Found2018/11/23(金) 02:26:26.35ID:???
>>697
css以前に日本語が出来て無い
言ってる事が合ってるかどうか以前に何を言ってるかわからない
酔っ払ってるの?

702Name_Not_Found2018/11/23(金) 02:32:41.94ID:???
>>697
690はお前への援護レスだろうに…間違ってねぇじゃんよ。お前がそのすぐ下に書いてるコメントと…

703Name_Not_Found2018/11/23(金) 02:33:16.20ID:???
>>700
理解できない頭は辛いなw

.on { 見た目 }
やってはいけないのはこれだけ
状態を意味するクラスに直接見た目を書いてはいけない

これ以上の説明いる?

704Name_Not_Found2018/11/23(金) 02:39:45.04ID:???
>>703
言わんとすることはわかるが、幾ら何でも説明が下手すぎる
cssの表現なんて見た目以外ないんだから何を指して「見た目」と言っているのか
そこを説明しないと

705Name_Not_Found2018/11/23(金) 02:49:52.74ID:???
>>697
状態を意味するかどうかなんてわかんないじゃん

706Name_Not_Found2018/11/23(金) 02:52:30.58ID:???
>>704
頭が短絡的すぎる

「状態を示すクラス単独に見た目を書くな」と言ったんだよ
言い換えると「状態を示すクラスはコンポーネントを示すクラスと組み合わせて見た目を書け」
と言ってるんだよ。誰が「見た目を書くな」っていったんだ。
「状態を示すクラス単独に」を抜かすんじゃねーよボケ

> 状態を意味するかどうかなんてわかんないじゃん
状態である以上変わるもの。変わらないならば状態ではない。
JavaScriptでつけたり外したりするのが状態だよ

707Name_Not_Found2018/11/23(金) 02:55:41.75ID:???
クラス名を気分でつけてのかな?
クラス設計というものを勉強したほうが良いぞ
BEMとかOOCSSとか(まあこれらはやりすぎだと思ってるが)

708Name_Not_Found2018/11/23(金) 06:29:45.11ID:???
>>707
自分がいく職場は気分でつけるところばかり
BEMの職場にいったら破綻してた
運用で人がチェンジするから学習が必要なのは無理っぽい

709Name_Not_Found2018/11/23(金) 06:52:47.99ID:???
× 運用で人がチェンジするから学習が必要なのは無理っぽい
○ 学習してない人にチェンジするから学習が必要なのは無理っぽい
◎ 素人にチェンジするから学習が必要なのは無理っぽい

710Name_Not_Found2018/11/23(金) 08:29:03.92ID:???
>>699
俺は東京生まれHIPHOP育ち

711Name_Not_Found2018/11/23(金) 09:55:47.66ID:???
接頭語つける系は自分が分かりやすくてすき

712Name_Not_Found2018/11/23(金) 10:19:17.44ID:???
>>703
さんざん日本語へたすぎるっていわれてるのに…日本語へたな上に頭まで固いとか老害かよ

713Name_Not_Found2018/11/23(金) 10:21:01.33ID:???
老害じゃなくて中学生だろう
さすがにこんなのが社会にいるとは思いたくないぞ
たまにいるけど

714Name_Not_Found2018/11/23(金) 10:23:59.64ID:???
>>700>>706をどう満たしてないの?
状態状態いってるけど全てのプロパティは見た目だぞ?
見た目と状態がある!って言ってるだけ

715Name_Not_Found2018/11/23(金) 10:47:59.74ID:???
>>716
「状態を表すクラス単独に見た目を書いてはいけない」
繰り返していってみ

どうも端折る傾向にあるからさ

716Name_Not_Found2018/11/23(金) 11:03:02.50ID:???
CSS設計の各用語がわかりません
https://kuroeveryday.blogspot.com/2017/03/css-structure-and-rules.html

例えば FLOCSS だとこんなに種類があります
・Foundation
・Layout
・Object-Component
・Component
・Project
・Utillity

これらはどう違うのでしょうか?
どう使い分ければ良いのでしょうか?

またOOCSS、BEM、SMACSS、RSCSSでは
FLOCSSの一部しかないようですが、何故なくても大丈夫なのでしょうか?

まずは、違いを教えてください。

717Name_Not_Found2018/11/23(金) 11:04:47.70ID:???
今話をしている「状態」というのは
https://qiita.com/mrd-takahashi/items/07dc3b4bad027daa2884

.item-nav__item--state_active {…}

こういうもののことですか?

718Name_Not_Found2018/11/23(金) 11:05:56.49ID:???
>>714

>>716-717へのレスお願いします。

719Name_Not_Found2018/11/23(金) 11:40:17.90ID:???
>>718
なんで>>714へのレスなのアンカーミス?
>>714は状態=見た目派
状態が見た目とは完全に違うものとして存在すると言ってるのは>>706だよ

720Name_Not_Found2018/11/23(金) 11:43:32.09ID:???
>>715
>>700はクラス単独じゃないじゃん…
見た目かいちゃいけなかったらcssできないじゃん

721Name_Not_Found2018/11/23(金) 12:18:23.21ID:???
>>719
アンカミスではない。話のレベルを数段階上に引き上げる

状態というのはなにか?
どのフレームワークにも状態という概念がある

これをお前に説明できるか?

722Name_Not_Found2018/11/23(金) 12:19:00.99ID:???
>>720
見た目書いたらいけないなんて
一言も言っていない。

お前は馬鹿なのか?

723Name_Not_Found2018/11/23(金) 12:27:19.46ID:???
>>721
これは今作った俺用のフレームワークだけど、これに状態という概念があるのか?
俺も知らなかったわ〜そんなもの搭載したつもり一切ないのにな
http://jsfiddle.net/kqs0o4p1/

724Name_Not_Found2018/11/23(金) 12:34:36.53ID:???
>>723
それはフレームワークじゃない。
ただのゴミカス

725Name_Not_Found2018/11/23(金) 12:35:41.78ID:???
というか、有名フレームワークはどれも状態がある
どうしよう困った。なら状態という概念がないフレームワークを考え出してやろう


有名フレームワークにはどれも状態があるからなー!
(ちくしょう)

という考えで作り出されたものに価値はない

726Name_Not_Found2018/11/23(金) 12:38:57.11ID:???
さて>>716の対比によると、状態というのはSMACSSで
そのまんま英語にした、Stateで表せされる。BEMではModifierだ
まあどれでもいいのだが、どのフレームワークも
単独で使っておらず、コンポーネントと組み合わせて
見た目が決まってるというのがわかる。

例えば、BEMだが、LargeというModifierは
menu__item--large のように、
menu__itemというBlock、Elementと組み合わせている

言い換えるとlargeだけではどのような見た目か決定することはない。
menu__itemのlargeなのだ

727Name_Not_Found2018/11/23(金) 13:14:25.06ID:???
なんだ…老害のうえに自演キチガイかよ…話のレベルを上げる?そもそもの日本語のレベルまともにしてから出直せよ

728Name_Not_Found2018/11/23(金) 13:18:20.26ID:???
ま…まさかだけどonはダメだけどitem_display-onはokとか言い出すの?
まさか違うよね?いつから命名規則の話にすり替えられた?

729Name_Not_Found2018/11/23(金) 14:42:33.48ID:???
いったいなんのはなしをしているんだ…?

730Name_Not_Found2018/11/23(金) 15:59:28.41ID:???
>>725
「どのフレームワークにも」
状態がないフレームワークはフレームワークではないとおっしゃるのですね
なるほど

731Name_Not_Found2018/11/23(金) 16:05:30.92ID:???
>>728
何故かフレームワークならそれは状態を表すからokという事らしい
フレームワークなんてそういうものなんだから、FWは別で基本的には〜〜みたいにしてさっさと手仕舞いすればよかったのに
頑固だから謎の俺ルールがどんどんでてきて収集つかなくなっている

732Name_Not_Found2018/11/23(金) 16:22:24.74ID:???
>>726
まぁもうネタばらしすると、
お前が論破され叩かれ続けるのは決まっていた
俺が誘導したんだけどな

cssはそもそも設計がクソすぎて、100%正解の記述なんてどこにもない。
そもそも論を言えばフロント周りは集客が出来てコンバーションが取れれば何でも良い
全部画像だろうがなんだろうがどうでもいい場面すらある

それを経験し、皆わかっていてどこかで線引して妥協しているのに、
お前は自分の100点だけが正しいと思い込んで他人を批判し続けた
1~99点、101〜200点の人から叩かれて当たり前だ

733Name_Not_Found2018/11/23(金) 16:26:48.92ID:???
こんな小さくて細けえことにうだうだ問答繰り返して気持ち悪い

734Name_Not_Found2018/11/23(金) 18:50:42.93ID:???
なんだただの自演か

735Name_Not_Found2018/11/23(金) 18:58:45.07ID:OpqctT/9
inputタグを折り返すにはどうすればいいんでしたっけ、それとも無理でしたっけ?

長いので2行以上に折り返したい(けど改行コードは入力してほしくない)入力欄を作るには、textareaでkeyupだかするたびにreplaceで改行コードを取り除くしかないですかね?

736Name_Not_Found2018/11/23(金) 19:06:36.73ID:???
<details>
<summary><ol><li>a</li><li>b</li></ol></summary>
<ul>
<li>c</li>
</ul>
</details>

が期待通りの出力になりません
なぜですか?

737Name_Not_Found2018/11/23(金) 19:07:38.81ID:???
つまり

1.a
2.b

をひとまとまりとして?マークがついて欲しいのにずれて表示されます

738Name_Not_Found2018/11/23(金) 19:08:21.20ID:???
▲←これを右に90度傾けたマークの表示位置が上手く行かないんですね

739Name_Not_Found2018/11/23(金) 19:24:58.85ID:???
>>735
>改行コードを入力してほしくない
これは難しい。ブラウザでなんとでも入呂できる

通常はそのままサニタイズだけしてDBに入力させる
その後、改行が多いようなら管理画面の表示では改行をなくすなどの処理をかませる

7407352018/11/23(金) 21:54:26.00ID:OpqctT/9
>>739
より正確に言うと身内向けで、うっかり改行を防ぎたくて…
(最終的にチェックされたり置換されたりはしますが、最後だとやり直しの手間が増えたり、予期せぬ置換が起こったりするので)

あるいは改行コードをアイコン的な感じで目に見えるようにできればいいのですが
editable化されたdivならともかく、ただのinputやtextareaでは難しいでしょうか

○文字目に改行コードがありますよって赤文字を出したりすることは簡単でしょうけれど
…あ、その位置を元にline-heightなどで計算してposition:absoluteでアイコンを重ねて表示すれば無理やり行けなくもない…のかな…?

741Name_Not_Found2018/11/24(土) 06:01:55.20ID:???
flex って1度使うと子孫要素は height 一切できなくなるの?
内側で地図やグラフのJSライブラリを使いたいから
height100% をずっと指定したいんだけど…

有名な chart.js も flex の内側だとつかえないし
使わずにすむなら使わないほうがいいのかな

742Name_Not_Found2018/11/24(土) 06:29:01.30ID:???
flexboxは互換性考えたらゴミだっていってんのに
このスレやたらflex推すバカが居るからな
同じことができるならfloatやinline-block使っとけ
flex使わないといけないのは不特定多数の等間隔配置したいときだけ

743Name_Not_Found2018/11/24(土) 07:12:50.17ID:???
>742
そうなんですね…

よくある
1カラムヘッダ
2カラムでサイドバー
をそれぞれ可変長でもってて
それ以外の領域にめいっぱいグラフを表示させるってどうすればいいですか?

header
----------
side | chart

可変要素に対して残りの高さや幅めいっぱい使うというのが flex-grow を使う以外にやり方が分からなくて…

744Name_Not_Found2018/11/24(土) 07:32:45.21ID:???
flex使おうがJSならサイズとることはできるから
chart.js使うってことはJSかけるならJSでサイズセットしたほうがはやくね?

745Name_Not_Found2018/11/24(土) 16:48:12.09ID:???
独自ドメインって個人レベルがお名前.comのようなサービスを介さないで
取得する事ってできるもんなんですか?

746Name_Not_Found2018/11/24(土) 17:03:55.74ID:???
大企業レベルでも国レベルでも不可能

747Name_Not_Found2018/11/24(土) 17:07:39.43ID:???
国はお名前.com介してないだろwwww

748Name_Not_Found2018/11/24(土) 17:14:55.23ID:???
別の会社利用しているかもしれないが
同じようなもん

749Name_Not_Found2018/11/24(土) 18:57:53.30ID:???
>>744
jsはあまりなれてなくてchart.jsもテンプレのデータだけ入れ替えて使うぐらいで
設定変えるとか全くわからなくて半日かけてもうまくリサイズしてくれない…

あきらめて flex つかわずにレイアウトすることにします
ありがとうございました

750Name_Not_Found2018/11/24(土) 19:41:06.21ID:???
こういうときこそflexならなにでもできる君こねーの

751Name_Not_Found2018/11/24(土) 20:45:27.42ID:???
まぁそういうものだからねw
自分が不利なときには絶対来ないw

752Name_Not_Found2018/11/24(土) 20:56:28.84ID:???
flexならなんでもできる!!!

753Name_Not_Found2018/11/24(土) 21:00:09.60ID:???
flexって未だに互換性イマイチなの?
高さ合わせて横並びにする時、pading9999+margin9999のハックなんてもう使いたくないよ

754Name_Not_Found2018/11/24(土) 21:01:53.90ID:???
htol#niqやります!

755Name_Not_Found2018/11/24(土) 21:25:01.35ID:???
画像の回り込みみたいのはfloatしかできないよね
それ以外はflex使うけど
CSSGridはIE問題があるから手出してない

756Name_Not_Found2018/11/24(土) 21:39:12.52ID:???
そもそもそんな新聞みたいな段組でデザインすることが無い
もちろんそういう案件が来たら使うけどね

757Name_Not_Found2018/11/24(土) 21:45:20.88ID:???
flexならなんでもできるよ
信じて使ってみ

758Name_Not_Found2018/11/24(土) 22:42:55.64ID:???
>>757
いや、出来るけど得手不得手が大きすぎる
画像の回り込みだけはfloat最強だろう

759Name_Not_Found2018/11/25(日) 01:10:09.37ID:???
>>742
互換性考えたらゴミというと、具体的にどういうことでしょうか?

760Name_Not_Found2018/11/25(日) 01:59:50.94ID:???
実際>>743がflexのせいで動かないっていってんじゃん
DOMのレイアウトだけならモダンブラウザはほぼ対応してるけど
JSライブラリの中にはまだまだflex使うと動かないものはあるってことだろ

761Name_Not_Found2018/11/25(日) 03:11:10.60ID:???
>>759
まだ古いIEやらを相手にしてる人も少数だがいるんだよ

762Name_Not_Found2018/11/25(日) 10:35:29.09ID:???
画像の回り込みデザインみかけなくなったな。
レスポンシブに弱いからか。

763Name_Not_Found2018/11/25(日) 10:49:18.92ID:???
>>762
だと思う。モバイルで回り込みは見づらすぎるからな
最近はpc版もモバイルをそのまま横長にするだけってのも増えてきたし、
今後はもっと減っていくんじゃないか

764Name_Not_Found2018/11/25(日) 11:10:43.10ID:???
flex最強
できないことはなにもない

765Name_Not_Found2018/11/25(日) 11:20:37.61ID:???
css grid 最強

766Name_Not_Found2018/11/25(日) 14:09:38.26ID:???
>>764
末尾要素を変な技使わないと左寄せできない

他にもいくつかあったが忘れた。
ケースバイケースで使い分けてるわ。
floatが苦手なんでしょ?

767Name_Not_Found2018/11/25(日) 14:12:39.39ID:???
どんなケースか忘れたが、flexは中身の要素の高さを認識できない時があった。

768Name_Not_Found2018/11/25(日) 14:22:04.96ID:???
なんでcssは何十年建ってもまともなレイアウトが出来ないんだよw

769Name_Not_Found2018/11/25(日) 14:29:34.96ID:???
結局リッチクライアントを達成するにあたって昔ながらの枠組みを無理やり拡張しようとしたのが間違いだったということさ

770Name_Not_Found2018/11/25(日) 16:11:44.79ID:???
floatが苦手な奴がおるかよバーカ

771Name_Not_Found2018/11/25(日) 16:25:40.07ID:HigpdOxS
あいう
あいう
あいう

flexboxでdisplay.flexでこんな感じにしきつまって、これをサイトの幅に合わせたいんですがどうすればいいんですか?
widthでpx指定するとスマホとかノートpcではみ出しちゃいそうですし

772Name_Not_Found2018/11/25(日) 16:27:51.51ID:???
>>771
言ってる意味がよく分からんか
width:100%じゃあかんの

773Name_Not_Found2018/11/25(日) 20:28:25.93ID:???
SSIでのHTMLファイルのインクルードがよろしくないらしいけど、今は何でインクルードするのが一番良いんですか?

774Name_Not_Found2018/11/25(日) 20:40:19.84ID:???
作業者がHTMLプリプロセッサを使ってローカルでインクルード化します

775Name_Not_Found2018/11/25(日) 22:13:31.80ID:???
>>773
php
もう誰も使ってない変な技術は使うのやめといたほうがいい

776Name_Not_Found2018/11/25(日) 23:13:38.07ID:???
SSIがよろしくないのにPHPはよろしいの?

777Name_Not_Found2018/11/25(日) 23:16:06.48ID:???
>>776
ここまで実質標準で世界中で使われているなら、デバッグも十分済んでるだろう
そう納得して使っている

まぁapacheのバックドアが数十年ほったらかしだったりするんだけどね〜
ま〜いっか〜みたいな〜

778Name_Not_Found2018/11/25(日) 23:37:15.15ID:???
いまは主流はapacheじゃないし

779Name_Not_Found2018/11/26(月) 01:10:32.20ID:???
nginxはまだ追い付いてないよ?

780Name_Not_Found2018/11/26(月) 01:41:54.96ID:???
>>775
ヒューかっこいー

781Name_Not_Found2018/11/26(月) 08:38:56.78ID:???
SSIで出来る事って限られてるからphpyり悪用はされにくいとは思うけどな

782Name_Not_Found2018/11/26(月) 21:21:42.05ID:???
はびこんちぇっかーにまにへすとがあらへんってゆあれる。。。

jsonチェッカーで構文は合ってるみたいだしちゃんとhead内のそのへんに
<link rel="manifest" href="/manifest.json">
も入れてるんだけど記述する位置でも決まってたりするの?

783Name_Not_Found2018/11/26(月) 21:34:16.80ID:???
なんでこんな気持ち悪く書けるの

784Name_Not_Found2018/11/26(月) 23:47:35.07ID:???
はてなブログで


<details>
<summary><ol>
<li>aaa</li>
<li>bbb</li>
</ol></summary>
<ol>
<li>A1</li>
</ol>
</details>


と書くと、見出し部分がaaaとbbbのリストではなく、 「[詳細]」 という文字列に勝手に置き換えられてしまいます
なぜですか?
はてなブログ以外なら普通にいけたんですが

785Name_Not_Found2018/11/27(火) 00:01:53.60ID:???
はてブロに質問すりゃいいじゃん

786Name_Not_Found2018/11/27(火) 00:41:03.48ID:???
無料のブログは広告やウィルスを貼れないように置換することがある
その見出しがなんで置換されるのかは分からん。>>785だね

787Name_Not_Found2018/11/27(火) 01:34:37.33ID:???
>>782
そのタグの書き方がおかしいとか?

/manifest.json のパスがおかしいとか?
./ や、../ から始めるとか?

788Name_Not_Found2018/11/27(火) 05:51:10.65ID:???
HTMLじゃなくてマークダウンでしょ

7897822018/11/27(火) 06:39:12.49ID:???
>>787
そこの記述チェッカーにかけて見たら引用符が間違ってたわ
サンクス

790Name_Not_Found2018/11/27(火) 10:37:57.35ID:???
TVはもう4Kの次の8Kが話題になってる
8Kテレビは今の4倍の7680×4320ピクセルだってよ

これがwebにも取り入れられたら大変だわ
横幅7680ピクセルのデザインモックなんて作ってたら非効率過ぎて死ねるわな
それでいてスマホのサイズにもレスポンシブ対応ってなったら対応幅が広すぎだわ

791Name_Not_Found2018/11/27(火) 10:55:49.73ID:???
次はウェブサイトがギガ泥棒になるのか

792Name_Not_Found2018/11/27(火) 11:20:54.98ID:???
いちいち高解像度に対応してたら
写真素材も高解像度のしか使えないから
全部買い直しになるし金かかって仕方なくなりそう

793Name_Not_Found2018/11/27(火) 11:50:50.46ID:???
>>790
今はモバイルファースト、PC版は横幅広げてbodyにpadding、サイドバー付けるだけってとこが多いよ
横幅がなんぼになろうと対して変わらん

794Name_Not_Found2018/11/27(火) 14:05:45.29ID:???
>>790
8kの本懐はデジタルサイネージだよ

795Name_Not_Found2018/11/27(火) 17:36:43.34ID:???
>>794
直近は東京オリンピックのテレビ需要に合わせて普及をはかってるらしい
出演者向けにそれに合わせた化粧品も開発されているとかなんとか

796Name_Not_Found2018/12/01(土) 09:00:31.43ID:???
<hr />って前後に改行が入りますけど、
前後に改行が入らない<hr />ってどうすればいいですか?

797Name_Not_Found2018/12/01(土) 09:15:35.11ID:???
>>796
何のためにやるのか分からないけど、
あまり推奨できる書き方ではない

http://jsfiddle.net/gmcsrh5w/

798Name_Not_Found2018/12/01(土) 09:51:49.20ID:???
>>797どうもです

799Name_Not_Found2018/12/01(土) 10:03:09.56ID:???
https://codepen.io/infologicmation/pen/dQaPYW

xという文字列に対する vertical-align: center;
が効いていません。
なぜでしょうか?

(xという文字(列)はここに表示したいのでposition属性はこのままにしておきたいです)

800Name_Not_Found2018/12/01(土) 10:03:43.93ID:???
<ul>
<li><span class="samp">X</span>
<a>hello</a></li>
<li>bye</li>
</ul>

CSSは

li {
position: relative;
}
a {
font-size: 200%;
vertical-align: middle;
}
span {
position: absolute;
left: -35px;
width: 50px;
font-size: 80%;
vertical-align: bottom;
}

です

801Name_Not_Found2018/12/01(土) 10:36:58.28ID:???
>>799-800
そもそも
vertical-align: center;
が無いよ

あと右寄せとか勉強する時はborder入れとくと分かりやすいかもね
https://codepen.io/anon/pen/JexoyW

802Name_Not_Found2018/12/01(土) 10:39:52.43ID:???
え?
vertical-align は center じゃなくて middle じゃないんですか?

803Name_Not_Found2018/12/01(土) 10:44:59.75ID:???
>>802
質問者?回答者?どっちだ

>xという文字列に対する vertical-align: center;が効いていません。
と最初に質問したのは
>>799だよ
無けりゃそりゃ効かない

804Name_Not_Found2018/12/01(土) 11:48:07.20ID:???
>>803
気持ち悪いな
最初の質問て書き間違えただけだろう
それぐらい読み取ってやれよ

805Name_Not_Found2018/12/01(土) 12:17:03.92ID:???
vertical-align: bottom;

vertical-align: middle;
で終わり
https://codepen.io/anon/pen/XyObgV

806Name_Not_Found2018/12/01(土) 12:39:19.68ID:???
ブラウザのデフォルトcssって切る事は出来ないのでしょうか?
reset.cssで打ち消すしか無いのでしょうか

807Name_Not_Found2018/12/01(土) 12:44:31.18ID:???
>>806
デフォルトで何も表示されなくなってほしいってこと?

808Name_Not_Found2018/12/01(土) 13:40:25.37ID:rbLtVslJ
フレックスボックス飽きた
何か面白いcssありませんか?

809Name_Not_Found2018/12/01(土) 13:43:35.67ID:???
cssに飽きたらprefetchとか試してみては
cssばかり触ってても得るものは少ないぞ

810Name_Not_Found2018/12/01(土) 14:14:57.57ID:???
>>808
css grid

811Name_Not_Found2018/12/01(土) 22:03:05.72ID:???
>>805
vertical-align: middle;
にしても全然効いていません

812Name_Not_Found2018/12/01(土) 22:04:42.25ID:???
>>811
https://codepen.io/anon/pen/wQNgmP
効いてるよ
xはBOXの真ん中にある

813Name_Not_Found2018/12/01(土) 22:05:16.40ID:???
position: absolute;
を消すと垂直方向について中央にそろえれますが、position: absolute;は絶対に外したくないです。

814Name_Not_Found2018/12/01(土) 22:06:10.96ID:???
と言うかどこの真ん中に揃えたいの?

815Name_Not_Found2018/12/01(土) 22:07:48.53ID:???
>>812
成る程
確かに「その箱のサイズにおいては」middleになっていますね
でも私がやりたいのは, li タグと揃える という意味での垂直方向についての中央揃えなのでちょっと違います
(つまり、中点・ と中心線を揃えたい)

816Name_Not_Found2018/12/01(土) 22:10:32.86ID:???
サンプルコードにおいて
aタグの文字サイズを200%、vertical-align:middle にしているのはそのためなんです。
そうすることでli内の文字サイズに応じてliの箱のサイズが変わったり、liの中点・の位置が微妙に変わったりしますが
それでもこの中点・に揃うようにspanを垂直方向について中央揃えしたいのです。

817Name_Not_Found2018/12/01(土) 22:11:33.17ID:???
例えば、サンプルコードにおいて
span タグに「top: 12px;」とすれば"その時は"上手く行きますが…これはその場しのぎなのでダメです

818Name_Not_Found2018/12/01(土) 22:26:44.76ID:???
>>816>>817
こう?
https://codepen.io/anon/pen/YRBNMN

liの点どっかいってワロタ

819Name_Not_Found2018/12/01(土) 22:44:33.35ID:???
>>818
確かに中点が消えてしまってること以外についてはまさしくそれです
その状態から中点を復活させることが出来たら最高なのですが…

820Name_Not_Found2018/12/01(土) 22:57:43.64ID:???
>>819
https://codepen.io/anon/pen/ZmweKY
こんなアホみたいなcssだとメンテするだけで人生おわりそうだ

821Name_Not_Found2018/12/01(土) 23:33:30.50ID:???
>>820
そんなその場しのぎの中点は不適切です
中点以外に○や■を使うことだってありますので。

822Name_Not_Found2018/12/01(土) 23:51:56.80ID:???
>>821
どれかを諦めるしかないねぇ
display:flexを使わずにこれを組むならaとspanのheightかline-heightを決め打ちするしかない
中黒はdisplay:list-itemに付くものだからflexとの併用は不可能
後はdivかますかね
https://codepen.io/anon/pen/PxVmqv

ださw

823Name_Not_Found2018/12/02(日) 00:41:34.18ID:???
>>822
ありがとうございます。
現状>>822がベターっぽいですね

824Name_Not_Found2018/12/02(日) 11:55:49.45ID:???
バターだな

825Name_Not_Found2018/12/02(日) 13:06:25.97ID:???
htmlもCSSもJavaScriptもちゃんと整備したのになんでワイのサイトは中身がないんや?

826Name_Not_Found2018/12/02(日) 13:19:46.46ID:???
お前が内臓詰まってるのに中身がない男と言われるのと一緒。

827Name_Not_Found2018/12/02(日) 14:08:47.15ID:???
内臓は全部換金したから詰まってへんのや

828Name_Not_Found2018/12/02(日) 16:47:49.81ID:???
内臓が

829Name_Not_Found2018/12/02(日) 17:52:28.86ID:???
ないぞう

830Name_Not_Found2018/12/02(日) 18:08:02.05ID:???
そうですか。

831Name_Not_Found2018/12/02(日) 18:10:26.69ID:???
つまりまとめると
頑張っていこうって事?

832Name_Not_Found2018/12/02(日) 18:19:35.24ID:???
少しでもいいから毎日続けるのが大事
毎日1ページ書けば一年後には365ページだ

833Name_Not_Found2018/12/02(日) 18:30:38.15ID:???
>>825
そりゃ鍋と包丁と食材だけ買っても
おいしいごはんにはならんのと同じじゃ

834Name_Not_Found2018/12/04(火) 13:26:42.69ID:???
いやその場合、鍋と包丁とフライパンがあって食材がないんじゃ

835Name_Not_Found2018/12/04(火) 15:54:59.93ID:???
いや、食材もあるけどレシピがないから自分流で適当に作ったらものすごくまずくなったパターン

836Name_Not_Found2018/12/04(火) 16:33:48.03ID:???
食器はあるんじゃ

837Name_Not_Found2018/12/04(火) 17:21:03.60ID:???
料理の上手い嫁がいればいい

838Name_Not_Found2018/12/04(火) 17:24:51.80ID:???
女は負債

839Name_Not_Found2018/12/04(火) 17:39:17.92ID:???
お酒はぬるめの燗がいい

840Name_Not_Found2018/12/04(火) 21:23:56.09ID:???
まとめると酒・ギャンブル・女を経験して人生勉強をつめば、サイトも中身がしっかりつまったいいものができる

841Name_Not_Found2018/12/04(火) 21:35:24.10ID:???
>>840
悪徳通信教材のサイトを作ろう

842Name_Not_Found2018/12/04(火) 22:30:26.01ID:???
たった3つのことをするだけで、
思ったことが自然に英語で口から出てくる
ようになるのです

843Name_Not_Found2018/12/04(火) 23:48:22.75ID:???
唐辛子を練り込んだ繊維の痩せるTシャツ
のサイトなら作ったことあるぞ

844Name_Not_Found2018/12/05(水) 00:03:09.26ID:???
痛そう

845Name_Not_Found2018/12/05(水) 16:56:55.36ID:QRh4PMkL
>>844
むしろ痛かったら良かったんだけどな
少なくとも成分は有るってことだから

笑えるくらい売れなかったなあ、販売主は父ちゃんだったんだが( ;∀;)

846Name_Not_Found2018/12/05(水) 18:59:16.90ID:???
サイトがひどかったんだろうなあ

847Name_Not_Found2018/12/05(水) 21:04:33.55ID:QRh4PMkL
>>846
痩せるのがコンセプトなのに
痩せるって書けないし
本当に痩せない商品の広告作る気持ちわかって( ;∀;)

848Name_Not_Found2018/12/05(水) 21:46:56.77ID:???
薬事法にひっかかるのけ

849Name_Not_Found2018/12/05(水) 23:04:35.22ID:???
それは企画段階で間違ってたと思うよ。

850Name_Not_Found2018/12/05(水) 23:09:39.58ID:QRh4PMkL
>>849
家族全員わかってたよ( ;∀;)

851Name_Not_Found2018/12/05(水) 23:29:05.82ID:cMV8t0DX
htmlとjavascriptの勉強に、webサイトのソースもうとしてるのですが、
divタグの中にdata-sesid=とdata-base=っとのが出てきました。
<div id="" data-sesid="" data-base="">

data-sesid=とdata-base=なんかありましたっけ?
検索しても何も引っかからないから、さっぱりわかりません。
教えてくだい。

852Name_Not_Found2018/12/05(水) 23:32:08.30ID:???

853Name_Not_Found2018/12/05(水) 23:32:22.10ID:???
>>851
カスタムデータ属性
https://developer.mozilla.org/ja/docs/Web/HTML/Global_attributes/data-*

data-sesidの"sesid"の部分はサイト作成者が決めて使うものだよ

854Name_Not_Found2018/12/05(水) 23:36:54.86ID:???
ケコーンオメ

855Name_Not_Found2018/12/05(水) 23:44:45.27ID:cMV8t0DX
>>852-853
>カスタムデータ属性
初めて聞きました。勉強してきます。
ありがとうございました。

856Name_Not_Found2018/12/05(水) 23:59:51.88ID:???
俺も毎朝飲んでますカスタムデータ属性

857Name_Not_Found2018/12/06(木) 06:52:29.31ID:???
テキストボックスの背景色って、特殊な指定をしなければいけないんでしょうか
firefoxのサイドバーの検索ボックスなんですが、なぜか色が変わりません
textbox#search-box{background-color:red !important;}

858Name_Not_Found2018/12/06(木) 09:34:07.44ID:???
>>850
www

859Name_Not_Found2018/12/06(木) 12:54:34.82ID:???
>>850
どうしてそうなった…

860Name_Not_Found2018/12/06(木) 18:31:46.38ID:???
>>857
textboxというタグはありません
input[type=text]かid(class)のみで指定してください

861Name_Not_Found2018/12/06(木) 19:36:05.16ID:???
もしくはtextareaじゃね

862Name_Not_Found2018/12/06(木) 19:38:58.70ID:???
出来ましたありがとう

863Name_Not_Found2018/12/06(木) 20:13:07.97ID:???
よくある2段組み構成で質問です。

<header></header>
<div id="container">
 <div id="contents">
  記事本文
  <aside>広告</aside>
  記事本文続き
 </div>

 <aside>
  サイドバー
 </aside>
</div>

#contentsのタグをarticleかmainにしたいのですがどちらが妥当でしょうか?

864Name_Not_Found2018/12/06(木) 20:56:15.61ID:???
広告が<aside>でいいかは知らん
後、まぁ全部divでも対してSEOに影響ないよ

<header></header>
<main>
 <article>
  記事本文
  <aside>広告</aside>
  記事本文続き
 </article>

</main>
 <aside>
  サイドバー
 </aside>

865Name_Not_Found2018/12/06(木) 21:23:21.60ID:???
どうも、SEOよりdivを減らそう=F12で見やすくという目的です
mainとarticleの片方より両方あったほうがいいのでしょうか?

866Name_Not_Found2018/12/06(木) 21:39:49.06ID:???
HTMLのタグごときでSEOになんてならないから
SEOがどうとかいうのは全て嘘だと思って構わん

867Name_Not_Found2018/12/06(木) 21:44:39.40ID:???
じゃあ全部divとspanでいいじゃん

868Name_Not_Found2018/12/06(木) 21:56:07.65ID:???
そうだよ。SEO的(笑)にはそれでも全然違いはない
いい加減詳しくない人相手ににSEO詐欺するのはやめろってこと

869Name_Not_Found2018/12/06(木) 22:27:36.53ID:???
SEOは置いといて結局どっちなんだ

870Name_Not_Found2018/12/06(木) 22:33:19.15ID:???
瀬尾

871Name_Not_Found2018/12/06(木) 22:42:26.35ID:???
>>869
アウトラインを視覚的に表示するツールを使え
アウトラインをどうしたいかで決めろ

872Name_Not_Found2018/12/06(木) 22:49:05.69ID:qWMrDUCv
>>867
10年前くらいからたまーにいじって確認してるけど
あんまり検索順位に変わりないなあ
<title>と<div>と<a>と<img>だけのサイト

873Name_Not_Found2018/12/06(木) 22:52:02.07ID:???
Webアプリだと記事とかあんまないからarticleは使わないなあ

874Name_Not_Found2018/12/06(木) 23:33:47.97ID:???
mainは1回、article下ダメとか明確なことはともかく使い分けはよくわからんなあ

875Name_Not_Found2018/12/06(木) 23:37:46.20ID:???
>>867
そう。SEOが必要ないgoogleはほぼ全てdiv

>>869
デザインにこだわりがない場合、
アウトラインに従うと作る時になんも考えなくていいから超楽
こだわりがあるなら全部divでもいい

876Name_Not_Found2018/12/07(金) 00:01:21.64ID:???
>>875
いってること矛盾の塊じゃん

877Name_Not_Found2018/12/07(金) 00:04:45.81ID:???
HTML5になって数年たつけど
テンプレで仕込んである以外でarticle、aside使ってるサイトってあんまないよなぁ

878Name_Not_Found2018/12/07(金) 00:06:10.40ID:???
>>877
アウトラインめんどくさいんだよ
見出し付けるとどうしてもおかしくなる場面が出てくるから、
じゃあもうdivでいいやってなる

879Name_Not_Found2018/12/07(金) 00:07:31.42ID:???
WordPressの最新デフォのTwenty Seventeenも
>>864さんのように<main><article>で括ってるから
一般的にはそれで間違いないでしょ

880Name_Not_Found2018/12/07(金) 00:08:34.92ID:???
数年じゃそんなもんよ
門書に当たり前のように載って、かつ今の現役が引退する頃にやっと普及を始める
HTMLに限らず、言語仕様なんてそんなもんだ

881Name_Not_Found2018/12/07(金) 00:09:55.52ID:???
<main hidden>とかもいつか日の目を見る日が来るんかね
あまりメリットを感じないけど

882Name_Not_Found2018/12/07(金) 00:28:29.69ID:yQS9/4fr
>>877
ちょっとでも同じパターンが繰り返すときは使うなあarticle

883Name_Not_Found2018/12/07(金) 01:33:16.80ID:???
なぜSEO的にタグの違いの効果がないのかと言うと
一つは重要なタグが検索を歪めるために不正に利用されてしまったために
重要なタグを重要としてみなすことが、マイナスの効果をもたらすようになったから

そしてGoogleの目的は適切なコンテンツを見つけやすいようにすることなわけで
タグを間違って使っていたとしても、コンテンツの質とは無関係なわけで
特定のタグを重要視する意味がないことに気づいた。これが二つ目の理由

884Name_Not_Found2018/12/07(金) 09:40:40.44ID:???
まあ開発スピードを優先すべきだとは思うけど、綺麗に書くのに越したことはない

885Name_Not_Found2018/12/07(金) 09:50:41.16ID:???
たとえ効果無くてもSEO意識して書くと後からみた時にすげー見やすい
SEOどうこうは好き勝手に書くアホを戒めるための物だと思う

886Name_Not_Found2018/12/07(金) 09:58:25.62ID:???
SEOはSEO業者(笑)がSEO施工(施工ってなんだwww)することで
検索順位が上がりますよ(そんな根拠はない)といって
無知な中小企業から金をぼったくるためのものだろw

887Name_Not_Found2018/12/07(金) 10:23:56.63ID:???
施行はしこうと読んだりせこうと読んだりする。
世論もよろんと読んだりせろんと読んだり。
上記はどちらで読んでも意味が変わらない単語だが、読みで意味が変わる単語もある。
かっこいい例が思い出せないが、簡単なものなら上手とか。

888Name_Not_Found2018/12/07(金) 11:23:12.55ID:???
SEO会社とやったことあるけどdivをulにしろとかロゴはbackgroundじゃなくてimgにしろとか細かかったな

SEOとは別かもだけど構造化データとかrole属性とかどこまで意味があるんだか

889Name_Not_Found2018/12/07(金) 12:46:43.10ID:???
構造化データはgoogleの検索結果用じゃないのか

890Name_Not_Found2018/12/07(金) 16:08:07.29ID:???
HTML5が始動しめの頃、
h1タグ複数OKがGoogle側に認識、対応されてなかったろ
たぶん今もされてないと思ってる
それとレスポンシブ前のスマホサイトは別で作るのが主流だった頃も
重複lコンテンツとみなされてたろ
しってるんだぞ

891Name_Not_Found2018/12/07(金) 16:22:51.25ID:???
>>890
>h1タグ複数OK
これはマジでトラウマ
全部作り直したゾ・・・

892Name_Not_Found2018/12/07(金) 16:25:08.68ID:???
作り直すってレベルじゃねえだろ

893Name_Not_Found2018/12/07(金) 16:25:57.40ID:???
え、グーグルだと同一ページにh1が重複したらダメなんですか

894Name_Not_Found2018/12/07(金) 16:39:11.02ID:???
>>892
html5!何も考えずに全部h1だーwwwわーいwww
→全ページ整合性考えながらの見出し付け直し

持ち上げてから落とされると結構キツイんだ、これが

895Name_Not_Found2018/12/07(金) 17:00:37.45ID:???
<section id=“@1“>
<header>@1</header>
</section>

<section id=“@2“>
<header>@2</header>
</section>

<section id=“@3“>
<header>@3</header>
</section>

みたいにheaderって1ページで複数使ったらダメなんですか?

896Name_Not_Found2018/12/07(金) 17:01:27.54ID:???
別になんの問題もないよ

897Name_Not_Found2018/12/07(金) 17:17:34.02ID:???
>>895より正確に書くと

<section id=“@1“>
<header><h1>@1</h1></header>
</section>

<section id=“@2“>
<header><h1>@2</h1></header>
</section>

<section id=“@3“>
<header><h1>@3</h1></header>
</section>

みたいにheaderの中にh1入れまくって1ページで複数使ってるのですが

898Name_Not_Found2018/12/07(金) 17:27:55.73ID:???
>>897
文法違反ですら無いんだから問題ないって言ってる

899Name_Not_Found2018/12/07(金) 18:52:44.44ID:???
cssで動画にフィルターはかけられますか?

900Name_Not_Found2018/12/07(金) 18:53:47.66ID:???
違反じゃないけど俺はh2で統一する
なんとなく

901Name_Not_Found2018/12/07(金) 19:01:27.57ID:???
header, footerはたまに複数書く
h1は一個、h2はたくさん書いてる

902Name_Not_Found2018/12/07(金) 19:02:06.79ID:???
>>897
>>900が正解
すぐ上にh1にしてバカをみた話があるじゃん
当時はわざわざh1につくりなおすバカまでいて笑ったわ

903Name_Not_Found2018/12/07(金) 19:16:56.78ID:???
w3cが仕様を新しくしたところで
肝心のGoogleが対応する気が無いとダメだよな

勝手に「今度からh1は複数OKにするからヨロシク!まだ草案だから変わるかもしれんけどね」とか言われて
その他仕様も期日も他人に決められてさ
Googleはわざわざ無償で頑張るかな?

自分なら菓子折もって挨拶に来られても「あらら、そうですか。じゃあ手が空いたら後でやっときますよ」
くらいの対応になるわ

904Name_Not_Found2018/12/07(金) 19:19:09.80ID:???
>>903
そうならないように、実質google他ベンダーの変更をW3Cが受け入れるという流れになっている

905Name_Not_Found2018/12/07(金) 19:35:18.98ID:???
>>904
WHATWGやブラウザの開発部署と検索エンジンの開発部署は別な気がしてさ・・

906Name_Not_Found2018/12/07(金) 21:17:49.60ID:???
>>897です
皆さんありがとうございます
h1をh2に直します

907Name_Not_Found2018/12/07(金) 22:03:49.12ID:???
で何度も言うように、SEOなんて意味がないから
h1でもh2でも複数あっても、なんの効果もない

908Name_Not_Found2018/12/07(金) 22:10:02.10ID:???
とっかかりがbootstrapだったので構文というものを全く理解せず制作していましたが
最近になってcds gridでグリッドレイアウトができることを知り、セマンティックウェブをちゃんと勉強したいと思うようになったので質問させていただきました。
ありがとうございます

909Name_Not_Found2018/12/07(金) 22:10:59.15ID:???
さすがにh1とdescription、title辺りは影響あるよ
順位というより、検索結果の表示が変わる可能性がある

910Name_Not_Found2018/12/07(金) 22:21:36.92ID:???
たしかに構文全く正しくないdivだらけのbootstrapと他スニペットまみれのサイトでもgoogle検索で上位になっているので構文は気にしなくていいのかもしれないですが、リニューアルを機にちゃんと中身の見栄えも良くしたいと欲が出てしまいました
ただhttpsにすると検索上位から落ちるとかも見て少し心配ではあります

911Name_Not_Found2018/12/07(金) 22:27:24.38ID:???
ちゃんと勉強したいのなら正しいことを知るべき

まず1ページにh1が複数あってもHTMLの仕様的に
正しいし対応していないブラウザはまず無い

Googleも(最初から)複数のh1に対応しているし
(ずっと前から)h1が複数だろうがh2に変えようが
ランクに影響を与えることはない

騒いでるのはSEO業者だけ。
h1はもとから複数あってもいいのに、
馬鹿なSEO業者が、h1は一つしか書かないほうがいいのだ(根拠なし)と言ってるのをみて
Googleが「馬鹿だなぁ、何回書いてもいいのに」と訂正してるだけ
もちろんこれは今も変わってない

HTMLの仕様も今も変わってない。ただ古いブラウザで対応してないかもしれないから
使わないほうがいいと言われてるだけ。だがそんなブラウザは現存しないだろう

そして馬鹿なSEO業者だけが、大慌てで書き直してる
何も変わらないのに、自分の妄想で生み出した大きな影響があるというデマに
振り回されてる。

912Name_Not_Found2018/12/07(金) 22:41:26.69ID:???
だいたいどういうタグが適切なのかは、意味によって決まるのに
タグだけ書いてだめですかってわかるわけ無いだろ

セマンティックウェブをちゃんと勉強したいなら、
タグの使い方じゃなくて、どういう意味にしたいのかをちゃんと自分で考えろ

タグをどうするかはその後だろ

913Name_Not_Found2018/12/07(金) 23:04:41.20ID:???
>>899
かけられます
z-indexとbackground-coler:rgb()で透過いけます

914Name_Not_Found2018/12/07(金) 23:15:59.74ID:???
>>911
・googleが気を利かせてるから大体は大丈夫
・ただ個人的には好ましくないと思う
https://asobism.com/archives/154

SEOに過度に敏感になる必要はないけど、
気にする余裕があるなら合わせておくぐらいはやってもいいと思う

915Name_Not_Found2018/12/07(金) 23:44:04.10ID:???
>>911
> 馬鹿なSEO業者だけが、大慌てで書き直してる
> 何も変わらないのに、自分の妄想で生み出した大きな影響があるというデマに
> 振り回されてる。

違う違う。SEO業者がなにで稼いでるのか考えろよ。
h1が複数使われていると検索結果が悪くなりますよ。急いで直さないと大変なことになりますよ。さあSEOやりましょう、お任せください!で製作費で金取るんだぞ。
製作後の検索結果が良くて儲かるわけでも、悪くて金払ってもらえないわけでもない。(払わなかったら裁判で100%勝てると言う意味)
https://ja.m.wikipedia.org/wiki/FUD

全然慌ててない。大喜びでどうでもいい部分を直してる直してる。
どのように変更するかはどうでもいい。元と違っていることが重要。
作業の証拠になる。
デマに振り回されてるのではなく、デマで振り回してる。

916Name_Not_Found2018/12/07(金) 23:47:20.61ID:???
>>911
HTML4の時はさすがに複数はダメと思ってたが
あくまでしきたりだったんだな

917Name_Not_Found2018/12/07(金) 23:53:41.30ID:???
>>914
ミューラー氏の回答でさ、
>最も重要な見出しが<h1>タグになってさえいれば、

ってあるけど複数h1だとどれが最も重要かを伝える為には
アウトラインで明示する必要でてくるじゃん
やっぱ構造化は必要やないのけ?

918Name_Not_Found2018/12/08(土) 00:24:52.75ID:???
余裕があるならするに越したことない。
AMP対応もかなり効果あった

919Name_Not_Found2018/12/08(土) 00:37:21.02ID:???
>>915
SEO業者に話を聞いたけど、結構心が痛むと言っていたわ

>>916>>917
HTMLの正しい文法とgoogleがどこまで解釈するかはかなり異なる

ぶっちゃけgoogleはページ内のテキストをかなり解釈してくれる

h1、title、descriptionは、他の文章に比べて少し重みを加えて解釈する感じ
h1を前提にページの内容を解釈はしていない

全部h1で作ったり、h1無しで作ったことがあるから何となく分かる、あまり大きい影響はない。
ただ良い影響は無い

あと構造化データは検索結果の表示を変えるのが主な役目だと思う
検索順位というより、クリック率に影響すると思う
めんどくさすぎるのでやってないから知らんけど
https://www.akindo2000.net/blog/structured-markup/

920Name_Not_Found2018/12/08(土) 02:55:45.42ID:???
SEOの結果を抜きにしてもSEO意識して構文や構造をきちんと考えて書くことでそれ自体がコーディング規約みたいになってきれいなコードになる
あとあとメンテナンスや変更で触る時に昔の自分のコードや他人のコード見ても「うわなんじゃこりゃ」とはならずわかりやすくなってる

921Name_Not_Found2018/12/08(土) 05:27:13.08ID:???
youtubeの動画にCSSでフィルターすることはできますか?

922Name_Not_Found2018/12/08(土) 09:12:51.55ID:???
>>921
基本的には無理
上にopecity書けた要素被せる程度
apiがあればjsから操作できるかも知れない

923Name_Not_Found2018/12/08(土) 09:27:45.46ID:???
上にかぶせるというのはページ全体にフィルターということでしょうか

924Name_Not_Found2018/12/08(土) 09:49:56.53ID:???
>>918
AMPで見た目ほぼ同じに作ったのに使われなかった悲しい過去がある…

925Name_Not_Found2018/12/08(土) 09:51:02.23ID:???
>>923
ごめん、上に被せるのは間違い。操作できなくなった
iframeにopacityを書けて、下にフィルターとなる色を置くと色の調節が出来る
http://jsfiddle.net/srpvodc0/

926Name_Not_Found2018/12/08(土) 10:16:45.44ID:???
↑回答どうも
フィルターだと濁った感じになりますね
明るさの調整ってできるんでしょうか

927Name_Not_Found2018/12/08(土) 10:30:04.18ID:???
>>926
cssのfilter使えばいいよ
http://jsfiddle.net/srpvodc0/2/

928Name_Not_Found2018/12/08(土) 10:45:33.34ID:???
youtube以外の動画にもフィルター使う方法ってありますか
個別に指定していくしかないんでしょうか
iframe使ってないサイトもあるのかな

929Name_Not_Found2018/12/08(土) 10:48:13.55ID:???
全ての要素に同じclassを指定するだけ
めんどくさかったらラッパー使って一括でもいいけど背景にもかかってしまうから後でめんどくさくなる

930Name_Not_Found2018/12/08(土) 13:29:39.55ID:???
↑iframeって埋め込みタグですか?
ページを解析してもiframeが見当たらないです

firefoxのusercontentで使いたいのですが

931Name_Not_Found2018/12/08(土) 13:37:56.75ID:???
自分用か、それ先に言ってくれ
それなら属性セレクタで行ける
http://jsfiddle.net/srpvodc0/3/

932Name_Not_Found2018/12/08(土) 16:32:33.87ID:???
↑いえ、ブラウザでyoutubeを視聴しますよね
そのときに動画にフィルタをかけたいんです
ページ内の解析をしてもiframeはないみたいです

933Name_Not_Found2018/12/08(土) 16:58:41.19ID:???
videoタグにそのcss当てれば行けたおy

934Name_Not_Found2018/12/08(土) 18:04:31.70ID:???
pornhubでもいけた
ありがとうまさよしさん

935Name_Not_Found2018/12/08(土) 18:04:52.38ID:???
動画って基本的にビデオタグだけなんすかね

936Name_Not_Found2018/12/08(土) 18:19:17.28ID:???
だからGIFがSNS時代に大復活したんじゃん。

937Name_Not_Found2018/12/08(土) 19:19:25.05ID:???
岐阜動画

938Name_Not_Found2018/12/08(土) 19:31:36.28ID:???
>>909
体験上それには同意
h1,h2,h3の順で抜けがないとかな

939Name_Not_Found2018/12/08(土) 23:06:44.45ID:???
firefoxのコンテキストメニューの背景を変更したいのですが、menupopupではだめなようです
一番外側にあるのがmenupopupに見えるんですが、どう指定したらいいんでしょうか
http://s.kota2.net/1544277950.jpg
背景の白い線?か余白が変更できないです

940Name_Not_Found2018/12/09(日) 13:13:59.56ID:???
usercontentでbackground-imageの色を変更したいのですが、これが使われている要素はいろいろですよね
background-imageに対しての指定はできないんでしょうか

941Name_Not_Found2018/12/09(日) 13:35:45.45ID:???
cssのフィルターは文字のコントラストは変更できないんでしょうかね

942Name_Not_Found2018/12/09(日) 13:56:40.72ID:???
>>941
1色しかないのにコントラストも何もないのでは

943Name_Not_Found2018/12/09(日) 16:28:04.02ID:EXtO1Pyz
なんで俺の作るサイトはこんなにダサいんですか?
XPっぽいって言われます
テーブルはそんなにだめですか?

944Name_Not_Found2018/12/09(日) 16:51:08.03ID:???
>>943
テーブルのせいだと思ってる時点でダメだと思うよ

945Name_Not_Found2018/12/09(日) 17:11:37.35ID:???
>>943
ここに晒せば評価してやるぞ

946Name_Not_Found2018/12/09(日) 17:16:22.60ID:???
属性だけを書き換える事はできますか
<a class></a>
<div></div>

947Name_Not_Found2018/12/09(日) 17:17:18.96ID:???
>>946
js

948Name_Not_Found2018/12/09(日) 17:18:56.11ID:???
属性だけを書き換える事はできますか
要素は不特定です

949Name_Not_Found2018/12/09(日) 17:27:22.02ID:???
js

950Name_Not_Found2018/12/09(日) 18:38:45.33ID:???
js

951Name_Not_Found2018/12/09(日) 20:42:27.06ID:bC0hzbWq
>>943
CSSフレームワーク使う
WindowsをやめてMacにする
(WindowsのダサいUIセンスに自分が影響されてしまうため)

952Name_Not_Found2018/12/09(日) 20:48:57.73ID:???
>>946
let arr = document.getElementsByTagName('*');
for (const dom of arr) {
dom.setAttribute("attrname", "value")
}

953Name_Not_Found2018/12/09(日) 21:20:45.67ID:mG6Xx9nR
よくわからん挙動しました。
html,css,javascriptから少し遠ざかっていて
最近、勉強し直したのですが、教えください。

sample.htmlをローカスサーバーlocalhostで
実行前:A.jsがscriptタグにある
実行後:A.jsとB.jsとC.jsのscriptタグにある

となっており、sample.htmlにB.jsとC.jsが追加されいました。
※A,B,C.jsはライブラリっぽいやつです。

sample.htmlを実行しすると、sample.htmlが書き直し?って可能なのでしょうか?
ちなみにA.jsの中にB.jsもC.jsの文字列もなかったです。

ありのまま〜のジョジョのAAの同じ心情です。

954Name_Not_Found2018/12/09(日) 21:24:09.24ID:???
ローカスって?表計算ソフト?

955Name_Not_Found2018/12/09(日) 21:25:39.68ID:mG6Xx9nR
>>954
>ローカスって?表計算ソフト?
誤字です。xamppのローカルホスト
http://localhost/〜でやりました。

956Name_Not_Found2018/12/09(日) 21:33:52.69ID:???
>953
もう少し落ち着いて

javascriptを使ってscriptタグ自体を生成することは可能
phpで書き換えることも可能
原因は複数考えられるので、中身見てみないと分からない

957Name_Not_Found2018/12/09(日) 21:45:22.07ID:???
正確にいうと、ライブラリの解読して勉強しよして、自分のローカルにコピペ
意味不明な挙動に遭遇。
これは、htmlとかサーバとかのなんかの機能を使っている?
あるいはjavascriptでやっている?
な状況です。

実行するsample.htmlをviewer_loader_v0.1.9mw_2018-10-09.jsのみscriptタグにあって
viewer_loader_v0.1.9mw_2018-10-09.jsは自分の実力ではすぐには解読できません。
https://d21agqkwgk4jud.cloudfront.net/MW-Common/RS4B/v0.1.9mw_2018-10-09/js/viewer_loader_v0.1.9mw_2018-10-09.js

で、実行して、firefoxで実行時のソースを見ると下記2つがscriptタグに追記されていました。
https://d21agqkwgk4jud.cloudfront.net/MW-Common/RS4B/v0.1.9mw_2018-10-09/js/viewer_image_v0.1.9mw_2018-10-09.js
https://d21agqkwgk4jud.cloudfront.net/MW-Common/RS4B/v0.1.9mw_2018-10-09/js/config.js

958Name_Not_Found2018/12/09(日) 21:47:42.74ID:mG6Xx9nR
>>957です
間違ってsageてました

959Name_Not_Found2018/12/09(日) 21:49:18.60ID:???
>>957
こんなもん読んでも勉強にはならんよ
追加されてちゃんと動いているなら別に問題は無い

googlemapやSNSボタンなど、htmlが変わる事は普通にある

960Name_Not_Found2018/12/09(日) 22:06:59.81ID:???
>>911
なにもわかってなくて長文とかw
お前が書いてること逆だからw

961Name_Not_Found2018/12/09(日) 22:09:57.32ID:???
>>951みたいなこというやつが一番ダサイから気を付けることだな

962Name_Not_Found2018/12/09(日) 22:11:34.14ID:???
>>957
おまえはまず国語を勉強してからにしろ

963Name_Not_Found2018/12/10(月) 00:13:53.00ID:???
>>960
逆というのなら、その根拠でも書いたら?
Googleがこうやればいいって言ってるブログとかさ

964Name_Not_Found2018/12/10(月) 00:19:25.03ID:???
>>943
なつーかさ、ギラギラ感が足りないのよギラギラ感。
俗に言うギラッチってやつ。
もっとこう、vlinkとか使ってチカチカさせたりさ、
招き猫の目を光らせてみるとかそういう
アグレッシブでギラッチな感じが足りない無いんだよねぇ

965Name_Not_Found2018/12/10(月) 00:27:03.78ID:???
>>911の言ってる事はたぶん正しい。
確かにHTML4時代からh1の複数使用は構文エラーではなかったようだよ。
もう自分が新人時代から先輩たちに刷り込まれてたから気が付かなかったわ。

966Name_Not_Found2018/12/10(月) 06:12:54.11ID:???
>>963
元々慣例的に(hに順列、意味をつける)ということで
html4時代(2000年台)からh1はひとつで作るものだったのをさも近年それがh1は複数でもokになった!!!と若輩どもが騒ぎだした。
Googleの回答も検索仕様により時期毎に違うのはあたりまえでむしろ当初(2000年代)から一貫してh1は複数でokと言っているというのであればそれは捏造若しくはお前がそう思っているだけ、はたまたここ数年でwebやり始めたやつってだけ。

967Name_Not_Found2018/12/10(月) 06:23:15.99ID:???
>>966
そんな勝手なw

968Name_Not_Found2018/12/10(月) 06:25:46.06ID:???
誰に聞いたのそんなこと
h1がひとつって

あと2000年の頭にはもうXHTMLが勧告されてる
HTML4系は90年代の花形だったな

969Name_Not_Found2018/12/10(月) 06:27:52.20ID:???
んで HTMLとしてvalidなのかということと
グーグルがどう思うかってのは
わけて考えるべきことよ

970Name_Not_Found2018/12/10(月) 07:52:33.15ID:???
font weightの%って効かないの?

971Name_Not_Found2018/12/10(月) 08:29:57.47ID:???
html5.0で複数h1が良くなったんだよ
で、5.1で複数h1が禁止になった
これは思いっきり体験したから間違いない。

googleはもう少し緩くて複数でもいいけど1個がいいんじゃね?知らんけど
まぁコンテンツ充実させなよナード
ってスタンスは変わってない
多分アルゴリズム自動化しすぎてもう分かってない

>970
効くよ

972Name_Not_Found2018/12/10(月) 08:59:42.59ID:4af5usYY
てか、h1いらねーし、仮に必要だとしてもloveとなtokyoって名前にしてる
あとheaderもいらないな
旧世代のおっさんはhtml4で決まりきったデザインでも作ってて

973Name_Not_Found2018/12/10(月) 09:02:31.80ID:???
>>972
h1が必要か不要かも分からないの?

974Name_Not_Found2018/12/10(月) 09:20:18.46ID:???
>>968
勧告と普及は別な

975Name_Not_Found2018/12/10(月) 09:40:57.29ID:???
>>971
ボールドか普通かの2段階でしか効かないですよね?

976Name_Not_Found2018/12/10(月) 14:13:17.09ID:???

977Name_Not_Found2018/12/10(月) 16:10:21.16ID:???
懐かしのanotherHtmlLINTでもhtml4で複数h1が怒られなかったぞ

978Name_Not_Found2018/12/10(月) 19:04:04.45ID:???
>>971ですがすいません
font-weightに%は効かないです、申し訳ない
font-sizeか何かと思いっきり見間違えてました。

979Name_Not_Found2018/12/10(月) 19:07:03.10ID:???
>>971
> html5.0で複数h1が良くなったんだよ
最初からOK

> で、5.1で複数h1が禁止になった
禁止になってない

嘘つくなって

980Name_Not_Found2018/12/10(月) 19:23:03.56ID:???

981Name_Not_Found2018/12/10(月) 20:25:09.88ID:???
>>980
ありがとう。「おすすめしない」って書いてあるから
複数のh1が禁止じゃないことが完全に証明されたね

982Name_Not_Found2018/12/10(月) 20:36:30.38ID:???
一連の流れを見て思ったんだけど、
アウトラインをh1から始めるかどうかだと思うんだけど

983Name_Not_Found2018/12/10(月) 20:48:13.59ID:???
whatwgより

4.3.6 The h1, h2, h3, h4, h5, and h6 elements
https://html.spec.whatwg.org/multipage/sections.html#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements

・通常はh1一個で見出しレベルはどんどん下げていく
・アウトラインごとにh1から始めるのはok。ページに何個あっても問題無し
・両方混ぜてアウトラインごとに見出しレベルを下げてもok
・上記はどれを選んでも良い

html4以前でh1複数が良かったかどうかは知らないけど、h1複数書いた事は無かったな
今更どうでもいいけどね

984Name_Not_Found2018/12/10(月) 21:08:01.15ID:???
やっぱ>>966じゃん

985Name_Not_Found2018/12/10(月) 21:14:19.32ID:???
HTML4でもh1複数はOKだよ

>>984
適当なことを言わないように

986Name_Not_Found2018/12/10(月) 21:18:00.64ID:???
h1複数ok派はアウトラインに付きって条件ちゃんと付けてくれ
勘違いする奴出てると思う

987Name_Not_Found2018/12/10(月) 21:19:41.56ID:???
条件って言ってもな。全てのHTMLのバージョンで
複数のh1は許可されている。正しいHTMLである
としか言いようがないんで

条件?「全てのHTMLのバージョン」でいいのか?
「全て」なのに「条件」としてあつかうのは不思議だw

988Name_Not_Found2018/12/10(月) 21:26:14.03ID:???
>>985
okとかじゃなくてじゃあお前はhtml4のころ複数h1で作ってたの?それで回りになんにも言われなかった?

989Name_Not_Found2018/12/10(月) 21:30:11.27ID:???
>>988
HTML validatorでチェックしていたし
むしろ逆に正しくないHTML書いてるやつに文句言っていたほうだ

990Name_Not_Found2018/12/10(月) 22:36:30.96ID:???
>>988
逆に、自分が勝手にそう思い込んでただけなんでしょう
いつの時代もいくつ書いても普通にvalidだよ

勝手な想像だが、ダメだと言い張ってる子は
実際には90年台にはウェブ制作するような年齢手間はなかったのではなかろか

グーグルがSEOと戦い始めるまで
h1の数なんて誰も気にすらしてなかったし
ていうか、JISのあれで注目されるくらいまで
h1とかそもそも使ってないサイトが多かったし

991Name_Not_Found2018/12/10(月) 22:37:09.36ID:???
誤字った
年齢ではなかった

992Name_Not_Found2018/12/10(月) 22:53:45.63ID:???
>>989
全部テーブルで作ってた時代とか透過gifのスペーサーとかしってる?
そういうやつにも文句いってたんだよね?

993Name_Not_Found2018/12/10(月) 22:58:16.77ID:HzF5jEEG
もう暗黒期(テーブルレイアウト等)のことは忘れようぜ
憎きIEとその子供Edgeは居なくなった
今後はChrome最新版で動きさえすればいいのだ
堂々とES2015で書き、FlexboxのCSSフレームワークを使いなさい

994Name_Not_Found2018/12/10(月) 23:28:00.89ID:Xy1kPhq4
次スレ立ててくるよ?

995Name_Not_Found2018/12/10(月) 23:34:50.20ID:Xy1kPhq4
HTML/CSS のどんな質問にも優しく答えるスレ 35
http://mevius.5ch.net/test/read.cgi/hp/1544452458/

996Name_Not_Found2018/12/10(月) 23:44:01.03ID:???

997Name_Not_Found2018/12/10(月) 23:57:00.01ID:???
確かにHTML4で実際H1を使うとなるとどうなるかわからんな
sectionタグもないわけだし

998Name_Not_Found2018/12/10(月) 23:57:27.14ID:???
↑H1複数を使うと

999Name_Not_Found2018/12/11(火) 00:16:12.03ID:???
あんなことにもこんなことにもササッと答える優しいスレだと聞いてきました
質問してみます

1000Name_Not_Found2018/12/11(火) 00:16:32.67ID:???
どうぞ

10011001Over 1000Thread
このスレッドは1000を超えました。
新しいスレッドを立ててください。
life time: 63日 12時間 30分 35秒

10021002Over 1000Thread
5ちゃんねるの運営はプレミアム会員の皆さまに支えられています。
運営にご協力お願いいたします。


───────────────────
《プレミアム会員の主な特典》
★ 5ちゃんねる専用ブラウザからの広告除去
★ 5ちゃんねるの過去ログを取得
★ 書き込み規制の緩和
───────────────────

会員登録には個人情報は一切必要ありません。
月300円から匿名でご購入いただけます。

▼ プレミアム会員登録はこちら ▼
https://premium.5ch.net/

▼ 浪人ログインはこちら ▼
https://login.5ch.net/login.php

レス数が1000を超えています。これ以上書き込みはできません。