X



HTML/CSS のどんな質問にも優しく答えるスレ 35
■ このスレッドは過去ログ倉庫に格納されています
0001Name_Not_Found2018/12/10(月) 23:34:18.61ID:Xy1kPhq4
ここは初心者からベテランまで、全ての人を対象に優しく答えるスレです

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

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

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

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

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

■関連スレ
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
0446Name_Not_Found2019/01/03(木) 08:11:51.20ID:???
>>445
ありがとうございます。
しかし、リスト表記時の「・」はどうしても残しておかなければなりません
0448Name_Not_Found2019/01/03(木) 08:49:23.30ID:???
さすがにそれはその場しのぎすぎてちょっと実用に耐えないです
0449Name_Not_Found2019/01/03(木) 08:50:50.76ID:???
li要素でflexプロパティを使用しても、li要素の点「・」が消えなければいいのですがね…
0450Name_Not_Found2019/01/03(木) 09:07:06.52ID:???
うお、できたwww
すげー時間の無駄だったwww

spanとp両方に
display: list-item;
漬けてるから好きな方外してくれ

あと、(1)とか文字の位置は
text-indent: -100px;
で調節すればok
https://codepen.io/anon/pen/RExEdW
0451Name_Not_Found2019/01/03(木) 10:53:58.50ID:???
>>450
ありがとうございます。
ベストではないですが、現状ではそれがベターなのでそれで使わさせて貰います
0453Name_Not_Found2019/01/03(木) 11:43:49.72ID:???
自分が考えついた物はベスト
人に教えてもらったいい物はベター
人に教えてもらった物はクソ
これがしったか初心者クオリティ
0454Name_Not_Found2019/01/03(木) 11:58:41.25ID:???
ではベストではない点について言わせて貰いますと
>>450で見た目上、生成されている「・」はliの「・」ではなく、span.insert_stringに対して生成されたlist-itemによる「・」であって
これは本筋ではないと感じました。(HTML上の論理的な構造が変わっている)

僕の中でのベストとしては、HTML内の構造はそのままで、(javascriptで?)insert_stringを適切に移動”だけ”させて、>>450みたいにしたものだったのですが。
0455Name_Not_Found2019/01/03(木) 11:58:45.03ID:???
次の方どうぞー
0457Name_Not_Found2019/01/03(木) 15:29:13.50ID:???
リストマーカーってあんまりそのまま使わなくなっちゃったなー
0458Name_Not_Found2019/01/03(木) 15:36:18.04ID:???
使うとしても一旦消してbeforeで中黒付けるかな
ブラウザでどう表示されるか分からんのは怖い
0459Name_Not_Found2019/01/03(木) 21:51:25.51ID:???
>>458
俺もそれだなあ

list-style周りがあまり発展しないのは
やっぱ使う奴が少ないからなんだろうか
0460Name_Not_Found2019/01/03(木) 22:08:25.16ID:???
>>459
だろうね
そもそもモバイル化に伴って、リスト自体が少なくなったと思う
ulやolはあんまり使わない。メニューぐらいかな?メニューだと絶対にlist-styleは使わない
あとは何かの手続き順序とか、ランキングの表でもあればolを使うかもしれない
とにかくlist-styleは使い勝手が悪い
0461Name_Not_Found2019/01/04(金) 00:07:52.25ID:???
画面に直接マッキーで点入れたいとこに打てばいんじゃね?
俺って天才かよ
0462Name_Not_Found2019/01/04(金) 00:16:50.21ID:???
>>461
fixedやろ、それは考えてフフッってしてやめた
わざわざ言うもんじゃないんだ
0463Name_Not_Found2019/01/04(金) 00:44:20.67ID:c0sgFhpu
箇条書きは甘え
0464Name_Not_Found2019/01/04(金) 12:25:57.51ID:???
ブログで数学の証明を書いてますので箇条書きは使いまくりですね
0465Name_Not_Found2019/01/05(土) 00:31:24.08ID:???
隣接セレクタが効きません。なんでだめなんだ...?

// HTML ------------------------
<div class="menu">
<ul>
<li>Menu 1</li>
<li>Menu 2</li>
<li>Menu 3</li>
</ul>
</div>


// CSS ------------------------
.menu li + .menu li {
margin-top: 10px;
}
0467Name_Not_Found2019/01/05(土) 00:41:16.73ID:???
>>466
それでいいのか...!有難う有難う感謝です
0468Name_Not_Found2019/01/06(日) 00:11:51.87ID:OgZAvs+d
Twitterウィジェットのtweetswindが使えなくなってしまったので、新しくfeedwindを使って表示させたいのですが、うまくできません

iframeタグでtweetswindを使っていたので、feedwindでiframe用のコードを取得してコピペしたのですが、元のページが文字化けしてしまいます。元のページはUTF-8です
0469Name_Not_Found2019/01/06(日) 00:40:38.28ID:???
いろんなとこにコピペしてそうな質問だな
0470Name_Not_Found2019/01/06(日) 00:58:03.50ID:???
答えてやりなよw

>>468
「iframe 文字コード」で検索すれば色々でてくる
文字コードは実物みないと解決策がわからん
0471Name_Not_Found2019/01/06(日) 15:07:34.63ID:???
質問です。
たまに画面がグチャってるサイトってありますけど、
こういうのは意図的に、ワザとこうなってるのですか?
http://www.flower-record.com
それとも特定の別ブラウザで見ると、綺麗にレイアウトしてるものなのですか?
自分だけこう見えるってこと?
なぜこうなるのか、意味が分りません
0472Name_Not_Found2019/01/06(日) 15:54:04.93ID:???
>>471
IE11だとまともに見える(デザインセンスは酷いけど)
まぁ、あまり気にしなくていいと思うよ。知り合いなら教えてあげたほうが良いかも
0473Name_Not_Found2019/01/06(日) 18:11:00.38ID:???
<thead>の子でthの代わりにtd使ってもいい?
0475Name_Not_Found2019/01/06(日) 18:27:27.66ID:???
thead,tbody,tfootとth,tdの区別というか意味を理解できてないのかな
thead,tbody,tfootはテーブル全体のヘッダ、本文、フッタでth,tdは各項目のヘッダ、値だからそれによる制約はない
0476Name_Not_Found2019/01/06(日) 18:50:36.32ID:???
こういう構造ってHTML的にOKですか?
二つのリンクはスタイルで間隔開けるんで、ユーザビリティは問題ないです

<p>
<a>Aへのリンク</a>
<a>Bへのリンク</a>
</p>
0477Name_Not_Found2019/01/06(日) 18:58:05.52ID:???
何一つ問題はない
0478Name_Not_Found2019/01/06(日) 19:18:17.71ID:97FTmIUs
フロントの自動化って何使ってる?

Gulp?webpack?npm script?
0479Name_Not_Found2019/01/06(日) 19:30:23.51ID:???
>>476
そもそもどこに問題があるかもと思ったのか
0480Name_Not_Found2019/01/06(日) 19:55:25.68ID:???
しつもんです。
あなたにとってhtmlってなんですか?
0481Name_Not_Found2019/01/06(日) 19:55:50.15ID:???
愛・・・かな
0484Name_Not_Found2019/01/06(日) 23:46:56.87ID:???
そのアンケート意味あんの?
0486Name_Not_Found2019/01/07(月) 14:45:45.75ID:???
flex-wrap:wrapで幅が決まってないアイテムが複数行になった時に
コンテナの右側がガタガタになるのを綺麗に見せるテクってありませんか?

こんなのです
https://jsfiddle.net/uwaoyqc6/
0488Name_Not_Found2019/01/07(月) 16:05:45.60ID:???
>>486
justify-content: space-between;
入れるとか
04894862019/01/07(月) 17:03:41.44ID:???
flex-grow:1でいけました・・・
これ行ごとに効くんですね
知りませんでした
0490Name_Not_Found2019/01/07(月) 21:53:14.87ID:???
お前ら試されて負けたのかw
0491Name_Not_Found2019/01/07(月) 22:42:34.20ID:???
ページ全体の<h1>より上にある<section>や<article>ってどういう扱いなの?
HTML5 Outlinerでは意図したアウトラインになるから、位置は関係なし?
0492Name_Not_Found2019/01/07(月) 22:52:13.80ID:???
変なアウトラインになっている
0493Name_Not_Found2019/01/07(月) 23:07:23.62ID:???
>>492
なってないよ
デフォのコードの下2行を入れ替えても結果同じ
0495Name_Not_Found2019/01/09(水) 05:08:06.96ID:???
https://codepen.io/infologicmation/pen/KbZoqK

先日「連番リストの先頭文字の高さ位置を揃えたい」として質問したものです。
ここの方のアイデアを用いて実装をしていたのですが、問題が起きました。

上記サンプルで言う所の(iii)項目のリスト構造がおかしくなっています。
display : flex の効果が内側の方のリスト<ul>にも影響してしまっているようです。


親要素のflex の効果を、第1子要素(?)のみに適応させていたらよかったものが、第2子要素以降にも適応されたせいで
<ul>がブロック要素であることが解除されて、インライン要素になったことで、おかしくなったみたいです。
0497Name_Not_Found2019/01/09(水) 07:47:21.59ID:???
要するに、現在の問題は、

<ul>
<li style="display:flex;align-items:center;">test:
<ul>
<li>a</li>
</ul>
</li>
</ul>

こう書いた時に、内側の<ul>までflexの効果が効いて、内側の<ul>の"改行・字下げ"効果が消えてしまっていることです。
0498Name_Not_Found2019/01/09(水) 07:53:40.74ID:???
簡単に言うとこう言うことです



<ul>
<li style="display:flex;align-items:center;"><span style="display:list-item;text-indent:-40px;">A</span>←このAの表示位置はここでよいが、
<ul style="display:block;">
<li>ここの&lt;ul&gt;までflexが効いて欲しくない</li>
</ul>
</li>
</ul>
0499Name_Not_Found2019/01/09(水) 08:45:33.00ID:???
何かあっけないぐらいに自己解決できてしまいました

CSSで

display: inline-block;
text-indent: -70px;
text-align: center;

これだけで十分だったんですね
0500Name_Not_Found2019/01/09(水) 09:54:18.03ID:???
https://codepen.io/infologicmation/pen/KbZoqK

やっぱりまだ問題が解決しませんでした。

(3)の「折り畳み要素」をクリックすると、要素が展開されて「ここがその中身」と表示されます
しかし、その時先頭文字である「(3)」の表示位置が勝手に移動されてしまいます。
原因は、details要素を「display:inline-block;」としているからです。
しかし、これを取り除いてしまうと、今度は、(details要素がブロック要素であるため)「(3)」と「折り畳み要素」の表示位置の関係がズレてしまいます。


二律背反の状況になってしまいました。
どうしたらいいですか?
0501Name_Not_Found2019/01/09(水) 10:11:42.50ID:???
何度もレスしてしまいましたが

details.det{
display:inline-block;
vertical-align: top;
}

のようにvertical-alignを追記するといけました。
0502Name_Not_Found2019/01/09(水) 10:21:29.00ID:???
HTML,CSSって複雑化していくほどに、「アッチが立てば、こっちが立たず」っていう状況の連鎖なんですね
Javaのオブジェクト指向やデザインパターンみたいに、HTML+CSSもそういうのってあるんですかね
0504Name_Not_Found2019/01/09(水) 10:39:32.94ID:???
マルチクラスって時点でHTMLのタグはSRP違反
0505Name_Not_Found2019/01/09(水) 13:22:40.57ID:???
srpてどこの馬の骨?
0508Name_Not_Found2019/01/09(水) 15:16:43.65ID:???
>>502
そもそもプログラムとそうでないものを同等に扱おう
って考えが間違ってんじゃねえか?
0509Name_Not_Found2019/01/10(木) 16:45:14.10ID:???
もしかしてこのスレって、プログラムは一切知らずにHTML、CSSだけしか知らない奴っていんのかな
0510Name_Not_Found2019/01/10(木) 16:49:59.42ID:???
だからなに?
プログラムできるのが偉いのか?
0512Name_Not_Found2019/01/10(木) 17:08:09.88ID:???
横に長いコードをインデント入れて整理してたら1ページ2000行を超えてしまったんですが
行数が多いほど読み込みに時間がかかるとか、そういう事ありますか?
0514Name_Not_Found2019/01/10(木) 17:38:09.53ID:???
プログラマーみたいな底辺奴隷にだけはなりたくないな
0515Name_Not_Found2019/01/10(木) 17:40:47.60ID:???
…むかつくがたしかに日本においては90%くらいは底辺奴隷に身をやつしていると認めざるを得ない…
0516Name_Not_Found2019/01/10(木) 17:43:35.28ID:???
プログラミングなんて小学生でもできるものだからな
0517Name_Not_Found2019/01/10(木) 17:59:34.25ID:???
野球なんて小学生でもできるものだからな
0518Name_Not_Found2019/01/10(木) 18:00:26.56ID:???
おれが小学生の時はそんなもんなかったからな
石を打ち欠いたり磨いたりしてたのはなんとなく覚えてる
0519Name_Not_Found2019/01/10(木) 18:31:52.05ID:???
囲碁なんて小学生でもできるものだからな
0520Name_Not_Found2019/01/10(木) 18:37:59.71ID:???
一年坊は対局なんてはえーんだよって言われて
先輩に打ち欠いた碁石を砥石で研がされていたのはいい思い出
0522Name_Not_Found2019/01/10(木) 20:55:26.29ID:???
俺みたいなフロントもバックもやってる孤高のエンジニアからすれば
ものすごく次元の低い喧嘩だな
0523Name_Not_Found2019/01/10(木) 21:29:10.31ID:???
>>512
処理内容やサーバの性能次第としか答えようがない
0524Name_Not_Found2019/01/10(木) 21:54:11.44ID:???
CSSgrid って良いの?
0525Name_Not_Found2019/01/10(木) 22:08:25.71ID:???
>>523
HTML部分のファイルサイズはあまり関係がないという事ですか?
0526Name_Not_Found2019/01/10(木) 22:25:02.43ID:???
>>522
お前の次元が低いからフロントもバックもやるんだろ
そんなもの土方にやらせる仕事
お前は他人を使う能力がないから自分が働かないと何もできない
本当に優れた人間は自分が何もしなくても他人が勝手に仕事をこなしてくれることだからな
0527Name_Not_Found2019/01/10(木) 22:41:08.19ID:???
自分より優れた人に雇われた事ないからわからん
すまん理解してあげられなくて
0528Name_Not_Found2019/01/10(木) 23:26:15.42ID:???
>>525
2000行なら2000回\nが入るってことだ
0530Name_Not_Found2019/01/10(木) 23:44:57.50ID:???
わからない人の質問にわかる人が答える
それだけのことなのに
なんで上だの下だのと順位をつけたがるのか
0531Name_Not_Found2019/01/10(木) 23:46:53.46ID:???
余裕ないんだろw
0532Name_Not_Found2019/01/11(金) 02:03:12.68ID:???
>>512
改行1つに1バイト、スペースやタブ1つに1バイト
2000行なので改行で2KB、それプラススペース・タブ分が無駄に転送量増える
まあ気にすることないけど、気になるならgzipすればいい
ってか最近はgzipするのが当たり前になってきてるから、これを期にしてみれば

>>524
いいけどIEやEdgeでは工夫が必要
Flexboxでさくっといかない時に使ってる
0533Name_Not_Found2019/01/11(金) 06:44:46.10ID:???
こういう疑問や不安て
こんだけネットが速くなってもやっぱ経験するんだな
なんかほっこりした
0534Name_Not_Found2019/01/11(金) 09:28:30.26ID:???
>>530
現実世界で底辺だから、せめてネット上だけでも上に上がった気になりたい
そういう惨めな生物なのだ
0535Name_Not_Found2019/01/11(金) 13:40:21.00ID:???
Viewのプレゼンテーションまでは裏方の仕事だから
末端のHTMLだけで全体の読み込みスピードに影響させる方が難しい
JSは最適化すべきだけどね
0536Name_Not_Found2019/01/11(金) 13:58:01.65ID:???
スピード求めてたみた
htmlにscript要素でjs、style要素でcss書いたら爆速になった
切り分けるのが正義って言い出したのは誰だ
0537Name_Not_Found2019/01/11(金) 13:59:09.38ID:???
と書いた瞬間に答えが出た
昔はそもそも回線速度が遅かったので、
個々のファイルを分けて読み込むロスは気にならなかったのだろう
0538Name_Not_Found2019/01/11(金) 14:33:57.45ID:VcHct3vr
こんにちは。
PCのChromeでテキスト選択できないサイトがあったので、詳細設定でこのドメインのjavascriptを無効にして、さらにUser CSSというアドオンもインストールしたのですが、まだテキスト選択できません。
ソースを見たら本文は普通にHTML記述されているのですが、どのようにしたらテキスト選択できるようになるでしょうか?
ご教示お願いいたします。
http://nicomo.org/
0539Name_Not_Found2019/01/11(金) 14:44:57.57ID:ei6Gl27F
<head>内でuser-select:noneされてるから
ユーザーCSSで値をautoに上書き
0540Name_Not_Found2019/01/11(金) 14:46:21.31ID:???
開発者ツールのコンソールに以下を打ち込んで出てきたテキストをコピー
jQuery("body").text()
0541Name_Not_Found2019/01/11(金) 15:11:11.30ID:???
>>536
リクエスト数減らすのはわりと基本なきがするがなあ
90年台から変わらず
0542Name_Not_Found2019/01/11(金) 15:25:26.98ID:???
>>536
> htmlにscript要素でjs、style要素でcss書いたら爆速になった
> 切り分けるのが正義って言い出したのは誰だ

えとな、今の上級層はな。
切り分けて作成して、ビルドツールを使って埋め込むんや
切り分けるのは今も正義なんだよ
0543Name_Not_Found2019/01/11(金) 15:31:23.24ID:???
切り分けの解釈統一したら?
0545Name_Not_Found2019/01/11(金) 16:40:07.30ID:???
>>541
前からそうだったんですね、すいません

>>542
そうですよね
その辺りってFWでは標準で実装されているのでしょうか?
wordpressしか知らないのですが、標準テーマはjsもcssファイルもガッツリ分かれています

>>544
利用中のvalueserverは非対応とのことでした
残念です、使ってみたい
■ このスレッドは過去ログ倉庫に格納されています

ニューススポーツなんでも実況