HTML/CSS のどんな質問にも優しく答えるｽﾚ 39 ﾐｯｸﾐｸ
類似質問、重複質問、丸投げ大いに結構。HTML / CSS 関係の事なら何でもOK
分からない人は何回聞いても結構。質問するときはIDを出すためにメール欄を
age にすることをおすすめします。
回答してくれる方は優しい人のみ！ 質問者に対して暴言を吐く人はこのスレを見るな！！
終わった話を蒸し返すやつは このスレにくるな！！！
自分で調べろという回答も禁止！！回答するかさもなくば何も書き込むな！！
質問側も節度あるレスで！質問前にスレ内を検索しましょう
■次スレについて
基本的にレスナンバー>>980を取った人（立てられない場合は次の宣言者）が立てて下さい
重複を避けるため、独断でスレ立てはせず必ず意思表示をしてから立てて下さい（>>980を取った場合も）
立てられない事が予め分かっている場合は、>>980付近の書き込みは自重しましょう
■前スレ
HTML/CSS のどんな質問にも優しく答えるスレ 38
https://mevius.2ch.sc/test/read.cgi/hp/1555113111/
■関連スレ
Webサイト制作初心者用質問スレ part250
https://mevius.2ch.sc/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
https://ja.wikipedia.org/wiki/%E3%81%BF%E3%81%8F%E3%81%BF%E3%81%8F%E3%81%AB%E3%81%97%E3%81%A6%E3%81%82%E3%81%92%E3%82%8B%E2%99%AA%E3%80%90%E3%81%97%E3%81%A6%E3%82%84%E3%82%93%E3%82%88%E3%80%91
とりあえず、emは割と拡大縮小で文字のレイアウトはchromeだと崩れやすい印象。
レスポンシブの時は未検証だけど、拡大縮小に強いのはpx >emだと思っている
> vwで文字が可変してくれるようになったのですが、ウィンドウが大きくなると、文字が拡大しずきて困っています。
> vwに対してこれ以上は大きくなるな(怒)みたいな指定は可能ですか？
これ参考になる？
http://neos21.hatenablog.com/entry/2017/12/29/080000
いいね！
何か作法のようなしきたりとかあるんですか？
ありますん
ない。
ある。
現在に至るまでの経緯を・・・
>>1
オススメありますでしょうか？
条件
①複数ファイルを一括で置換できる
②正規表現が使える
③複数行置換できる
④検索もできる（ヒット数を調べられる）
「複数行置換」てソフトが良いかと思ったら④ができない・・・
置換は出来るのに置換前に検索でヒット数が出せないとかもうアホかと・・
まあ君がアホなのはどうしようもないだろうね
うわw君すごいアホじゃん！
マジかよｗｗ
サクラエディタのGrep置き換えでできるよ。
ありがと～
処理結果もちゃんとしててイイネ！
ちなみにこれ複数行の置換はどうやるの？？
vs codeは？
わざわざ1行にして改行コード入れんのとかやってられんでしょ。
でも複数行置換って、正規表現でどう書くの？
RubyとPerl のm オプションは、意味が異なるらしい！
Rubyのmは、正規表現で「.」が改行を含むようになるだけ！
https://www.greptips.com/posts/1140/
プログラムはようわからんからめんどいイメージ。
DWみたいに何も考えないでソースコピペして5秒くらいで置換したい。
https://web-diy.jp/images/blog/2016/09/19_01_01.png
↑これは、複数行だからとか行数も改行コードもタブも何も意識しなくていい。
そのまま正規表現つかえばいいだけ。
こういうのが理想。
5秒で一括50ファイルくらい終わらせられるものが世の中にあるのに
それが出来ないことが不快になってしまった。
まあ正規表現時にエスケープしたりとかあるけど手間はそんくらい
作ったら売れるぜ
売ってるなら1万円までなら買うわ
原則ってなんだよｗｗｗ
Rやホラッチョｗｗｗｗ
https://code.visualstudio.com/updates/v1_29#_multiline-search
<div style="width:900px; align: center; border:1px solid black">
hello, world
</div>
これだとセンタリングができないのですが、alignの代わりにmargin: 0 auto ならセンターに寄ります。
alignではセンタリングできないのでしょうか？
リファレンス参照
https://developer.mozilla.org/ja/docs/Web/CSS/text-align
はい。できません。
検索側を複数行だぞ？
どう見ても1行だよねそれ
はあ？改行コードの話なんて最初の最初の方でしてるじゃん？？
何度も書いてんのになんで理解できないのさ・・
https://dotup.org/uploda/dotup.org1865683.png
align:center って古い気がする。できるできないとはズレる話ですまないが
廃止されるのは<center>タグであって、その代替がむしろalign:center
w3cので、チェックするとそんな属性ないんだが！ってエラーになるよ
ということは、全体を囲むwrapperに使うdivは「margin: 0 auto」しか無いと考えてokですか？
>>49-50,57
text-alignは知っていたのですが、divのセンターなのでtextではないのでalignという名前で使ってしまいました。
そうだよ。
ブロックレベル要素なんて概念は無くなったとか言われてるけど、結局まだ残ってて、
ブロックレベル要素はalign="center"ではセンタリングできない。
昔tableタグだけレイアウト組んでた時代に、align="center"やってた癖が出てしまったみたい。
リハビリで今、divに慣れようとしているけど、指摘されるまでdivにも使えると思い込んでいたわ。
IE8や、html5策定中の頃と比べると、今から始めるほうがまだ幸せなのかな。
xhtml時代にdivの入れ子の多さとcssなるものに目を回して以来webから遠ざかってけど、なんとか慣れてきた。
jsも大変だったし.png関連もバグだらけだし
角丸もシャドウも使えなかったし変な難易度が高かった
htmlやcssが好きで先取りしてた何人かがその時期、顧客から無理な要求されて
「ハックなんとか使わなきゃ」「IE6から8R」とかブツブツ言いながら壊れていったわ・・・
tableタグしかできない自分は外されて助かった。
div要素もセンタリングできる
センタリングできるかどうかは要素では決まらない。
だからブロックレベル要素なんてものはない
証拠
https://jsfiddle.net/pqo01hsd/
ブロック表示にもインライン表示にも変更できる
要素ごとにこれはブロックとか決まってない
はあ？？？
display: inline; ←なにこれ・・・
デフォルトの事いってんのに
んなことすりゃなんだってできんだろがアホか
HTML5とcssでの表示指定になーーーーーーーーんの関連性もない。
んなことHTML4からできたわ
初心者が俺様に意見スンナ
> デフォルトの事いってんのに
デフォルト？なにが？
今はブロック"要素"の話だろ？
要素の話をするならCSSは関係ない。
displayが何に設定されていたとしても
それはあくまでCSSで設定する見た目の話であって
要素は変わらない。
要素にブロックとかインラインという区別はなくなった
> HTML5とcssでの表示指定になーーーーーーーーんの関連性もない。
> んなことHTML4からできたわ
何も関係ないから、CSSでどう表示指定したとしても、
HTML4ではdivはブロック要素というカテゴリに含まれているし、
HTML5ではブロック要素というカテゴリはなくなった
CSSの表示指定で、HTMLのカテゴリが変わるわけないんだよ
HTMLとCSSでなーーーーーーーーんの関連性もないんだから
ブロック要素（HTMLのカテゴリ）をごっちゃにするなよ
この２つは全く別のもんだ
HTML4ではdivをdisplay:inlineにしたとしても
これはインライン表示するブロック要素であって
divがインライン要素になったわけじゃないんだよ
<div align=“center”>
CSSでセンタリングしたいなら
ブロック要素（div、pなど）ならmargin:0 auto;
インライン要素（span、liなど）ならtext-align:center;
justify-content:center
これでセンタリングする
<div>
<ul>
<li>
<a href="">てすと </a>
</li>
</ul>
</div>
こんな感じのやつ。
初めて他人のコード見て、これやってる人がいて
縦線が出るエディター使ってないし、
すっごい読みにくいんだけど、みんな割とこれは標準なの？
山みたいにインデントしてまくるやつのはなしね
しないよ。めんどくさい。
インデントするに決まってるじゃん
お前が言ってるのインデントじゃないじゃん
インデントが10だったり8だったり7だったり
そういうのはインデントがおかしいっていうんだよ
オートインデント
オートインデント、縦線も出してる
面倒でも環境構築して楽できるところは楽しないともったいないよ
前提：
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を指定してなんとかなりました。
お騒がせしました。
わたしならaをimg化して貼り込む。
hoverは画像の切り替えで対応する。
<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 {
}
}
どっちかで上手くいかない？
想定してることが違ったらごめん
メニューリストだからul>liだろうな
ローカルサーバー使用禁止みたいな環境だった場合
みんなさんならどうやって解決しますか？
ルート相対パス指定されてた場合
みんなさんならどう乗り越えますか？
安い案件なら、置き換えで絶対パスにしちゃうとか？
全部、相対パスに直せって話なの？
ふつうは本番と同じサバ環境にステージング環境を作る
ローカルサーバーが使えても、それはすべき
わかりますよ。左上の黒いアイテムあるじゃないですか？
その右にバーを持っていって上の線を目安として
ul自体を絶対的な感じにしてz-indexで前にすれば後ろにいきますよ。
100～のスレッドの続きを読む