HTML/CSS のどんな質問にも優しく答えるスレ 34
■ このスレッドは過去ログ倉庫に格納されています
ここは初心者からベテランまで、全ての人を対象に優しく答えるスレです
類似質問、重複質問、丸投げ大いに結構。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 >>718
なんで>>714へのレスなのアンカーミス？
>>714は状態＝見た目派
状態が見た目とは完全に違うものとして存在すると言ってるのは>>706だよ >>715
>>700はクラス単独じゃないじゃん…
見た目かいちゃいけなかったらcssできないじゃん >>719
アンカミスではない。話のレベルを数段階上に引き上げる
状態というのはなにか？
どのフレームワークにも状態という概念がある
これをお前に説明できるか？ >>720
見た目書いたらいけないなんて
一言も言っていない。
お前は馬鹿なのか？ >>721
これは今作った俺用のフレームワークだけど、これに状態という概念があるのか？
俺も知らなかったわ〜そんなもの搭載したつもり一切ないのにな
http://jsfiddle.net/kqs0o4p1/ >>723
それはフレームワークじゃない。
ただのゴミカス というか、有名フレームワークはどれも状態がある
どうしよう困った。なら状態という概念がないフレームワークを考え出してやろう
有名フレームワークにはどれも状態があるからなー！
（ちくしょう）
という考えで作り出されたものに価値はない さて>>716の対比によると、状態というのはSMACSSで
そのまんま英語にした、Stateで表せされる。BEMではModifierだ
まあどれでもいいのだが、どのフレームワークも
単独で使っておらず、コンポーネントと組み合わせて
見た目が決まってるというのがわかる。
例えば、BEMだが、LargeというModifierは
menu__item--large のように、
menu__itemというBlock、Elementと組み合わせている
言い換えるとlargeだけではどのような見た目か決定することはない。
menu__itemのlargeなのだ なんだ…老害のうえに自演キチガイかよ…話のレベルを上げる？そもそもの日本語のレベルまともにしてから出直せよ ま…まさかだけどonはダメだけどitem_display-onはokとか言い出すの？
まさか違うよね？いつから命名規則の話にすり替えられた？ >>725
「どのフレームワークにも」
状態がないフレームワークはフレームワークではないとおっしゃるのですね
なるほど >>728
何故かフレームワークならそれは状態を表すからokという事らしい
フレームワークなんてそういうものなんだから、FWは別で基本的には〜〜みたいにしてさっさと手仕舞いすればよかったのに
頑固だから謎の俺ルールがどんどんでてきて収集つかなくなっている >>726
まぁもうネタばらしすると、
お前が論破され叩かれ続けるのは決まっていた
俺が誘導したんだけどな
cssはそもそも設計がクソすぎて、100%正解の記述なんてどこにもない。
そもそも論を言えばフロント周りは集客が出来てコンバーションが取れれば何でも良い
全部画像だろうがなんだろうがどうでもいい場面すらある
それを経験し、皆わかっていてどこかで線引して妥協しているのに、
お前は自分の100点だけが正しいと思い込んで他人を批判し続けた
1~99点、101〜200点の人から叩かれて当たり前だ こんな小さくて細けえことにうだうだ問答繰り返して気持ち悪い inputタグを折り返すにはどうすればいいんでしたっけ、それとも無理でしたっけ？
長いので2行以上に折り返したい（けど改行コードは入力してほしくない）入力欄を作るには、textareaでkeyupだかするたびにreplaceで改行コードを取り除くしかないですかね？ <details>
<summary><ol><li>a</li><li>b</li></ol></summary>
<ul>
<li>c</li>
</ul>
</details>
が期待通りの出力になりません
なぜですか？ つまり
1.a
2.b
をひとまとまりとして?マークがついて欲しいのにずれて表示されます ▲←これを右に90度傾けたマークの表示位置が上手く行かないんですね >>735
＞改行コードを入力してほしくない
これは難しい。ブラウザでなんとでも入呂できる
通常はそのままサニタイズだけしてDBに入力させる
その後、改行が多いようなら管理画面の表示では改行をなくすなどの処理をかませる >>739
より正確に言うと身内向けで、うっかり改行を防ぎたくて…
(最終的にチェックされたり置換されたりはしますが、最後だとやり直しの手間が増えたり、予期せぬ置換が起こったりするので)
あるいは改行コードをアイコン的な感じで目に見えるようにできればいいのですが
editable化されたdivならともかく、ただのinputやtextareaでは難しいでしょうか
○文字目に改行コードがありますよって赤文字を出したりすることは簡単でしょうけれど
…あ、その位置を元にline-heightなどで計算してposition:absoluteでアイコンを重ねて表示すれば無理やり行けなくもない…のかな…？ flex って１度使うと子孫要素は height 一切できなくなるの？
内側で地図やグラフのJSライブラリを使いたいから
height100% をずっと指定したいんだけど…
有名な chart.js も flex の内側だとつかえないし
使わずにすむなら使わないほうがいいのかな flexboxは互換性考えたらゴミだっていってんのに
このスレやたらflex推すバカが居るからな
同じことができるならfloatやinline-block使っとけ
flex使わないといけないのは不特定多数の等間隔配置したいときだけ >742
そうなんですね…
よくある
1カラムヘッダ
2カラムでサイドバー
をそれぞれ可変長でもってて
それ以外の領域にめいっぱいグラフを表示させるってどうすればいいですか？
header
----------
side | chart
可変要素に対して残りの高さや幅めいっぱい使うというのが flex-grow を使う以外にやり方が分からなくて… flex使おうがJSならサイズとることはできるから
chart.js使うってことはJSかけるならJSでサイズセットしたほうがはやくね？ 独自ドメインって個人レベルがお名前.comのようなサービスを介さないで
取得する事ってできるもんなんですか？ 別の会社利用しているかもしれないが
同じようなもん >>744
jsはあまりなれてなくてchart.jsもテンプレのデータだけ入れ替えて使うぐらいで
設定変えるとか全くわからなくて半日かけてもうまくリサイズしてくれない…
あきらめて flex つかわずにレイアウトすることにします
ありがとうございました こういうときこそflexならなにでもできる君こねーの まぁそういうものだからねw
自分が不利なときには絶対来ないw flexって未だに互換性イマイチなの？
高さ合わせて横並びにする時、pading9999＋margin9999のハックなんてもう使いたくないよ 画像の回り込みみたいのはfloatしかできないよね
それ以外はflex使うけど
CSSGridはIE問題があるから手出してない そもそもそんな新聞みたいな段組でデザインすることが無い
もちろんそういう案件が来たら使うけどね >>757
いや、出来るけど得手不得手が大きすぎる
画像の回り込みだけはfloat最強だろう >>742
互換性考えたらゴミというと、具体的にどういうことでしょうか？ 実際>>743がflexのせいで動かないっていってんじゃん
DOMのレイアウトだけならモダンブラウザはほぼ対応してるけど
JSライブラリの中にはまだまだflex使うと動かないものはあるってことだろ >>759
まだ古いIEやらを相手にしてる人も少数だがいるんだよ 画像の回り込みデザインみかけなくなったな。
レスポンシブに弱いからか。 >>762
だと思う。モバイルで回り込みは見づらすぎるからな
最近はpc版もモバイルをそのまま横長にするだけってのも増えてきたし、
今後はもっと減っていくんじゃないか >>764
末尾要素を変な技使わないと左寄せできない
他にもいくつかあったが忘れた。
ケースバイケースで使い分けてるわ。
floatが苦手なんでしょ？ どんなケースか忘れたが、flexは中身の要素の高さを認識できない時があった。 なんでcssは何十年建ってもまともなレイアウトが出来ないんだよｗ 結局リッチクライアントを達成するにあたって昔ながらの枠組みを無理やり拡張しようとしたのが間違いだったということさ あいう
あいう
あいう
flexboxでdisplay.flexでこんな感じにしきつまって、これをサイトの幅に合わせたいんですがどうすればいいんですか？
widthでpx指定するとスマホとかノートpcではみ出しちゃいそうですし >>771
言ってる意味がよく分からんか
width:100%じゃあかんの SSIでのHTMLファイルのインクルードがよろしくないらしいけど、今は何でインクルードするのが一番良いんですか？ 作業者がHTMLプリプロセッサを使ってローカルでインクルード化します >>773
php
もう誰も使ってない変な技術は使うのやめといたほうがいい >>776
ここまで実質標準で世界中で使われているなら、デバッグも十分済んでるだろう
そう納得して使っている
まぁapacheのバックドアが数十年ほったらかしだったりするんだけどね〜
ま〜いっか〜みたいな〜 SSIで出来る事って限られてるからphpｙり悪用はされにくいとは思うけどな はびこんちぇっかーにまにへすとがあらへんってゆあれる。。。
jsonチェッカーで構文は合ってるみたいだしちゃんとhead内のそのへんに
<link rel="manifest" href="/manifest.json">
も入れてるんだけど記述する位置でも決まってたりするの？ はてなブログで
<details>
<summary><ol>
<li>aaa</li>
<li>bbb</li>
</ol></summary>
<ol>
<li>A1</li>
</ol>
</details>
と書くと、見出し部分がaaaとbbbのリストではなく、 ｢[詳細]｣ という文字列に勝手に置き換えられてしまいます
なぜですか？
はてなブログ以外なら普通にいけたんですが 無料のブログは広告やウィルスを貼れないように置換することがある
その見出しがなんで置換されるのかは分からん。>>785だね >>782
そのタグの書き方がおかしいとか？
/manifest.json のパスがおかしいとか？
./ や、../ から始めるとか？ >>787
そこの記述チェッカーにかけて見たら引用符が間違ってたわ
サンクス TVはもう4Kの次の8Kが話題になってる
8Kテレビは今の4倍の7680×4320ピクセルだってよ
これがwebにも取り入れられたら大変だわ
横幅7680ピクセルのデザインモックなんて作ってたら非効率過ぎて死ねるわな
それでいてスマホのサイズにもレスポンシブ対応ってなったら対応幅が広すぎだわ いちいち高解像度に対応してたら
写真素材も高解像度のしか使えないから
全部買い直しになるし金かかって仕方なくなりそう >>790
今はモバイルファースト、PC版は横幅広げてbodyにpadding、サイドバー付けるだけってとこが多いよ
横幅がなんぼになろうと対して変わらん >>794
直近は東京オリンピックのテレビ需要に合わせて普及をはかってるらしい
出演者向けにそれに合わせた化粧品も開発されているとかなんとか <hr />って前後に改行が入りますけど、
前後に改行が入らない<hr />ってどうすればいいですか？ >>796
何のためにやるのか分からないけど、
あまり推奨できる書き方ではない
http://jsfiddle.net/gmcsrh5w/ https://codepen.io/infologicmation/pen/dQaPYW
xという文字列に対する vertical-align: center;
が効いていません。
なぜでしょうか？
(xという文字(列)はここに表示したいのでposition属性はこのままにしておきたいです) <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;
}
です >>799-800
そもそも
vertical-align: center;
が無いよ
あと右寄せとか勉強する時はborder入れとくと分かりやすいかもね
https://codepen.io/anon/pen/JexoyW え？
vertical-align は center じゃなくて middle じゃないんですか？ >>802
質問者？回答者？どっちだ
＞xという文字列に対する vertical-align: center;が効いていません。
と最初に質問したのは
>>799だよ
無けりゃそりゃ効かない >>803
気持ち悪いな
最初の質問て書き間違えただけだろう
それぐらい読み取ってやれよ vertical-align: bottom;
↓
vertical-align: middle;
で終わり
https://codepen.io/anon/pen/XyObgV ブラウザのデフォルトcssって切る事は出来ないのでしょうか？
reset.cssで打ち消すしか無いのでしょうか >>806
デフォルトで何も表示されなくなってほしいってこと？ フレックスボックス飽きた
何か面白いcssありませんか？ cssに飽きたらprefetchとか試してみては
cssばかり触ってても得るものは少ないぞ >>805
vertical-align: middle;
にしても全然効いていません position: absolute;
を消すと垂直方向について中央にそろえれますが、position: absolute;は絶対に外したくないです。 >>812
成る程
確かに｢その箱のサイズにおいては｣middleになっていますね
でも私がやりたいのは, li タグと揃える という意味での垂直方向についての中央揃えなのでちょっと違います
(つまり、中点・ と中心線を揃えたい) サンプルコードにおいて
aタグの文字サイズを200％、vertical-align:middle にしているのはそのためなんです。
そうすることでli内の文字サイズに応じてliの箱のサイズが変わったり、liの中点・の位置が微妙に変わったりしますが
それでもこの中点・に揃うようにspanを垂直方向について中央揃えしたいのです。 例えば、サンプルコードにおいて
span タグに｢top: 12px;｣とすれば"その時は"上手く行きますが…これはその場しのぎなのでダメです ■ このスレッドは過去ログ倉庫に格納されています
