HTML/CSS のどんな質問にも優しく答えるｽﾚ 39 ﾐｯｸﾐｸ
■ このスレッドは過去ログ倉庫に格納されています
ここは初心者からベテランまで、全ての人を対象に優しく答えるスレです
類似質問、重複質問、丸投げ大いに結構。HTML / CSS 関係の事なら何でもOK
分からない人は何回聞いても結構。質問するときはIDを出すためにメール欄を
age にすることをおすすめします。
回答してくれる方は優しい人のみ！ 質問者に対して暴言を吐く人はこのスレを見るな！！
終わった話を蒸し返すやつは このスレにくるな！！！
自分で調べろという回答も禁止！！回答するかさもなくば何も書き込むな！！
質問側も節度あるレスで！質問前にスレ内を検索しましょう
■次スレについて
基本的にレスナンバー>>980を取った人（立てられない場合は次の宣言者）が立てて下さい
重複を避けるため、独断でスレ立てはせず必ず意思表示をしてから立てて下さい（>>980を取った場合も）
立てられない事が予め分かっている場合は、>>980付近の書き込みは自重しましょう
■前スレ
HTML/CSS のどんな質問にも優しく答えるスレ 38
https://mevius.5ch.net/test/read.cgi/hp/1555113111/
■関連スレ
Webサイト制作初心者用質問スレ part250
https://mevius.5ch.net/test/read.cgi/hp/1546055063/
■HTML
HTML Living Standard 日本語訳
https://momdo.github.io/html/index.html
■CSS
Selectors Level 4 日本語訳
https://triple-underscore.github.io/selectors4-ja.html iFrameタグがない時代のものすごい古いブラウザだと未対応だね サイズ指定 レスポンシブに最も強いのは vwなのかな vwが最強なの？
とりあえず、emは割と拡大縮小で文字のレイアウトはchromeだと崩れやすい印象。
レスポンシブの時は未検証だけど、拡大縮小に強いのはpx >emだと思っている 前スレ>>992
> vwで文字が可変してくれるようになったのですが、ウィンドウが大きくなると、文字が拡大しずきて困っています。
> vwに対してこれ以上は大きくなるな(怒)みたいな指定は可能ですか？
これ参考になる？
http://neos21.hatenablog.com/entry/2017/12/29/080000 フォルクスはステーキじゃなくてサラダバーのために行く 質問とかしてみたいとか思ったりしてるんですけど
何か作法のようなしきたりとかあるんですか？ ホリエモンチャンネル見てたら質問のムダな長さにイライラするよね Wordpress使ったらSpeed Insightで60以下確定？ 置換に優れたフリーソフトを探してるのですが
オススメありますでしょうか？
条件
①複数ファイルを一括で置換できる
②正規表現が使える
③複数行置換できる
④検索もできる（ヒット数を調べられる）
「複数行置換」てソフトが良いかと思ったら④ができない・・・
置換は出来るのに置換前に検索でヒット数が出せないとかもうアホかと・・ >>22
まあ君がアホなのはどうしようもないだろうね > 回答してくれる方は優しい人のみ！ 質問者に対して暴言を吐く人はこのスレを見るな！！ >>24
うわw君すごいアホじゃん！
マジかよｗｗ >>22
サクラエディタのGrep置き換えでできるよ。 >>30
ありがと～
処理結果もちゃんとしててイイネ！ >>30
ちなみにこれ複数行の置換はどうやるの？？ vs codeも複数行に原則、対応してないやんけ
わざわざ1行にして改行コード入れんのとかやってられんでしょ。 できるかどうか知らないけど、grep, Ruby は？
でも複数行置換って、正規表現でどう書くの？
RubyとPerl のm オプションは、意味が異なるらしい！
Rubyのmは、正規表現で「.」が改行を含むようになるだけ！ >>40
プログラムはようわからんからめんどいイメージ。
DWみたいに何も考えないでソースコピペして5秒くらいで置換したい。
https://web-diy.jp/images/blog/2016/09/19_01_01.png
↑これは、複数行だからとか行数も改行コードもタブも何も意識しなくていい。
そのまま正規表現つかえばいいだけ。
こういうのが理想。 置換したい複数行ソースをコピペしてきてはっつけて
5秒で一括50ファイルくらい終わらせられるものが世の中にあるのに
それが出来ないことが不快になってしまった。
まあ正規表現時にエスケープしたりとかあるけど手間はそんくらい 誰か作ってくれよ
作ったら売れるぜ
売ってるなら1万円までなら買うわ ページ全体をdivで囲ってセンタリングしたいのですが、
<div style="width:900px; align: center; border:1px solid black">
hello, world
</div>
これだとセンタリングができないのですが、alignの代わりにmargin: 0 auto ならセンターに寄ります。
alignではセンタリングできないのでしょうか？ >>46
検索側を複数行だぞ？
どう見ても1行だよねそれ ああ\nとか分からない人なのね。そりゃ他のツール使うしかないね。 >>52
はあ？改行コードの話なんて最初の最初の方でしてるじゃん？？ 質問者より回答者の方がレベル低いねじれパターンきてんね >>47
align:center って古い気がする。できるできないとはズレる話ですまないが align:centerは別に廃止されるわけでもないし関係無い
廃止されるのは<center>タグであって、その代替がむしろalign:center align: center; って使えるの？
w3cので、チェックするとそんな属性ないんだが！ってエラーになるよ ぁぁぁ、すいません、「align」というcss名は無いのですね。
ということは、全体を囲むwrapperに使うdivは「margin: 0 auto」しか無いと考えてokですか？
>>49-50,57
text-alignは知っていたのですが、divのセンターなのでtextではないのでalignという名前で使ってしまいました。 >>61
そうだよ。
ブロックレベル要素なんて概念は無くなったとか言われてるけど、結局まだ残ってて、
ブロックレベル要素はalign="center"ではセンタリングできない。 >>63
昔tableタグだけレイアウト組んでた時代に、align="center"やってた癖が出てしまったみたい。
リハビリで今、divに慣れようとしているけど、指摘されるまでdivにも使えると思い込んでいたわ。
IE8や、html5策定中の頃と比べると、今から始めるほうがまだ幸せなのかな。
xhtml時代にdivの入れ子の多さとcssなるものに目を回して以来webから遠ざかってけど、なんとか慣れてきた。 そりゃIE6とfloatいう2大難関があって、
jsも大変だったし.png関連もバグだらけだし
角丸もシャドウも使えなかったし変な難易度が高かった >>65
htmlやcssが好きで先取りしてた何人かがその時期、顧客から無理な要求されて
「ハックなんとか使わなきゃ」「IE6から8死ね」とかブツブツ言いながら壊れていったわ・・・
tableタグしかできない自分は外されて助かった。 >>63
div要素もセンタリングできる
センタリングできるかどうかは要素では決まらない。
だからブロックレベル要素なんてものはない
証拠
https://jsfiddle.net/pqo01hsd/ HTML5では（ほぼ？）すべての要素が
ブロック表示にもインライン表示にも変更できる
要素ごとにこれはブロックとか決まってない >>68
はあ？？？
display: inline; ←なにこれ・・・
デフォルトの事いってんのに
んなことすりゃなんだってできんだろがアホか >>68は最近始めたんだろ？
HTML5とcssでの表示指定になーーーーーーーーんの関連性もない。
んなことHTML4からできたわ
初心者が俺様に意見スンナ >>69
> デフォルトの事いってんのに
デフォルト？なにが？
今はブロック"要素"の話だろ？
要素の話をするならCSSは関係ない。
displayが何に設定されていたとしても
それはあくまでCSSで設定する見た目の話であって
要素は変わらない。
要素にブロックとかインラインという区別はなくなった >>70
> HTML5とcssでの表示指定になーーーーーーーーんの関連性もない。
> んなことHTML4からできたわ
何も関係ないから、CSSでどう表示指定したとしても、
HTML4ではdivはブロック要素というカテゴリに含まれているし、
HTML5ではブロック要素というカテゴリはなくなった
CSSの表示指定で、HTMLのカテゴリが変わるわけないんだよ
HTMLとCSSでなーーーーーーーーんの関連性もないんだから display: block （見た目をブロック表示にする）
ブロック要素（HTMLのカテゴリ）をごっちゃにするなよ
この２つは全く別のもんだ
HTML4ではdivをdisplay:inlineにしたとしても
これはインライン表示するブロック要素であって
divがインライン要素になったわけじゃないんだよ タグでセンタリングしたいなら
<div align=“center”>
CSSでセンタリングしたいなら
ブロック要素（div、pなど）ならmargin:0 auto;
インライン要素（span、liなど）ならtext-align:center; display:flex
justify-content:center
これでセンタリングする みんなはさ、タグ書く時はインデントしまくってる？
<div>
<ul>
<li>
<a href="">てすと </a>
</li>
</ul>
</div>
こんな感じのやつ。
初めて他人のコード見て、これやってる人がいて
縦線が出るエディター使ってないし、
すっごい読みにくいんだけど、みんな割とこれは標準なの？ あー、スペースで書くと消えちゃうのか。
山みたいにインデントしてまくるやつのはなしね >>80
お前が言ってるのインデントじゃないじゃん
インデントが10だったり8だったり7だったり
そういうのはインデントがおかしいっていうんだよ >>80
オートインデント、縦線も出してる
面倒でも環境構築して楽できるところは楽しないともったいないよ いろいろ自力で頑張ってみたのですが上手くいかないのでお知恵拝借させてください。
前提：
5行2列のtableがある
border-collapse:separate; border-spacing: 5px; border-radius: 10px; で
角丸のタイル風？になっている
各セルには1行、ないし2行の文字が入っており、tdにpadding: 7px 0 7px 60px; で
上下の余白と左端からのインデントを取っている
やりたいこと：
このtableをページ内項目へのジャンプリンクのメニューとして使用するため、
各セルを、セル全体をリンクボタンのように使いたい
hoverで背景色が変わるようにしたい
試したこと：
・aタグをblock要素にしてwidthとheightを100%にする
→ vertical-alignが効かない
・paddingではなくline-heightで調整
→ 2行の文字が入るセルがうまくいかない
・paddingをtdではなくaタグに設定し、ネガティブmarginを取って調整、
tdはoverflow: hidden; する
→ 文字の長さがバラバラなので、右方向のpadding・margin設定ができない
・上記のaタグでセル内の文字列をくくるのではなく、文字列の前に
空タグとして挿入する
→ wordpressの自動整形で消される…（諸事情によりプラグイン導入不可）
何か方法ありませんでしょうか。 すみません、これだけ長々と書いておいてアレなのですが、
よく見たら2行のセルは数個しかなかったので、
＞・paddingではなくline-heightで調整
＞ → 2行の文字が入るセルがうまくいかない
基本はこれで、2行のセルにだけ個別にstyleを指定してなんとかなりました。
お騒がせしました。 >>88
わたしならaをimg化して貼り込む。
hoverは画像の切り替えで対応する。 >>88
<td><a href=""><span>test<br>test</span></a></td>
/* tableの場合 */
td a {
display: table;
text-align: center;
width: 100%;
height: 100%;
span {
display: table-cell;
vertical-align: middle;
}
}
/* flexの場合 */
td a {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
span {
}
}
どっちかで上手くいかない？
想定してることが違ったらごめん >>88は普通tableでやらん
メニューリストだからul>liだろうな 画像とかCSSの指定がルート相対指定になってるサイトの回収を頼まれた案件で
ローカルサーバー使用禁止みたいな環境だった場合
みんなさんならどうやって解決しますか？ Node.jsとかPHPの実行環境すらインストール禁止みたいなクソ制作環境で
ルート相対パス指定されてた場合
みんなさんならどう乗り越えますか？ >>93
安い案件なら、置き換えで絶対パスにしちゃうとか？
全部、相対パスに直せって話なの？ 黒いバーの上にulのliをfloatで表示するやり方わかりませんか？ >>95
ふつうは本番と同じサバ環境にステージング環境を作る
ローカルサーバーが使えても、それはすべき >>97
わかりますよ。左上の黒いアイテムあるじゃないですか？
その右にバーを持っていって上の線を目安として
ul自体を絶対的な感じにしてz-indexで前にすれば後ろにいきますよ。 カネカの古いステージングサイトがフルオープンになってたのは驚いたな
あのレベルの会社でも杜撰な管理してるとこが引き受けてるとは ■ このスレッドは過去ログ倉庫に格納されています
