HTML/CSS の質問に優しく答えるスレ 30
■ このスレッドは過去ログ倉庫に格納されています
ここは初心者からベテランまで、全ての人を対象に優しく答えるスレです
類似質問大いに結構。分からない人は何回聞いても結構HTML / CSS 関係の事なら何でもOK
質問するときはIDを出すためにメール欄を age にすることをおすすめします
回答してくれる方は優しい人のみ！質問者に対して暴言を吐く人は このスレを見るな！！終わった話を蒸し返すやつは このスレにくるな！！！
質問側も節度あるレスで！質問前にスレ内を検索しましょう
■次スレについて
基本的にレスナンバー>>980を取った人（立てられない場合は次の宣言者）が立てて下さい
重複を避けるため、独断でスレ立てはせず必ず意思表示をしてから立てて下さい（>>980を取った場合も）
立てられない事が予め分かっている場合は、>>980付近の書き込みは自重しましょう
■前スレ
HTML/CSS の質問に優しく答えるスレ 29
http://mevius.2ch.net/test/read.cgi/hp/1503136885/
■関連スレ
Webサイト制作初心者用質問スレ part248
http://mevius.2ch.net/test/read.cgi/hp/1494233240/
■HTML
HTML Living Standard 日本語訳
https://momdo.github.io/html/index.html
■CSS
Selectors Level 4 日本語訳
https://triple-underscore.github.io/selectors4-ja.html >>182
動かないのが正解なんだけどね
button要素のコンテンツモデルははフレージングなんだけど
インタラクティブコンテンツを内包することは出来ないのよ
だからa要素を中に入れるのはNG
でもそれ以外ならOKで、a要素でやるのと同じように、img要素とかを入れてもいい
やる人少ないけど >>193
細かくありがとうーもちろん仕様は理解した上で使ってないよ
p>aとbutton>spanでスタイル揃えたいとき(input使いたくないとき)なんかは便利なのかな >>194
input要素との違いは子要素持てるかどうかなんだろうね
MDNだとクリックやタップした時のfocusの違いにも言及してるね >>186
デザインだけの話ならaでもbuttonでも同じだよ
例えばbootstrapでclassにbtn付ければaもbuttonもsubmitも同じボタンデザインになる
なのでデザインのためにおかしなタグを使うのはやめた方がいい
リンクはって遷移させるんならaにすべき >>191
ダウンロードなんて機能はないよ。
リンクした結果それがファイルに相当するものなら
ブラウザが勝手にダウンロードするだけ。
物によってはダウンロードせずにブラウザ内に表示するだろ？
特定のリソースに結びつかないものはボタン
リソースに結びついているものはリンク >>198
うん、だからそのhtmlをブラウザが判別するんだよ
ダウンロードって機能は本質的にないんだよ
そもそも論を言えば全部ダウンロードだし どっちでもいいがこれは確かだな。
buttonに近い＝誰もボタン機能とは言ってない。
download="～"はある。 >>201
いやお前はまず日本語を勉強してくれ
buttonに近い
ってなんの定義だよ なんとなくだろ
どうでもいいこといちいち気にし過ぎ プログラムに少しでも携わるなら、仕様に関しては妥協してはならない input type=“button”>の存在意義を教えてください JavaScriptと連携させて何かの処理を行うためにあります >>205>>208
お前ら。
昔は
input type=“button”>
しかなかっただけ。
今はそれを使う理由はない
buttonタグでいい >>207
またconstさんかな
押し付けがましいんだよな あ、押し付けがましいは>>207さんのことではなく、一応
いかん、もう寝よ そろそろPHPとか覚えようかね…
仕事で使えるようになるまで途方もなくかかりそうだが phpマニュアル全部嫁
一ヶ月もあれば読めるし、だいたいのphpっは読めるようになる PHP技術者認定試験なんてあるんだな
資格に意味はほとんどないだろうけど一先ずの勉強の方向性見つけるにはわかりやすいか もう生のPHPなんて扱うことないんじゃないか
フレームワーク覚えていかに使いこなすかのほうがよほど有益で安全だと思う PHPってフロントエンドじゃWordPress触れる程度の実力で十分な気がする
バックエンドやるってんなら当たり前のように知識ないと無理だけど
知識あるに越したことないけどね。大体フォームなんかは会社でフォーマットがある気がする >>205
ボタンを置きたくて、かつ、子要素を取りたくない時 htmlのソース上はタグを改行やインデントで整列させたい
でもタグ間の空白類が邪魔、ってときどうすればいいですか
<body>
<div>
</div>
<div>
</div>
</body> わかりづらい上に適当じゃない例でした
<html><body><input><input><input></body></html>
と、それぞれの<input>の前に改行・タブが入ったときとを比べると
後者は<input>の間に隙間ができると思います、これです >>219
猛反発されるのを承知で書くが
<タグ>なかみ</タグ
> <タグ>なかみ</タグ> >>221
あと隙間っていうのはおかしいかも
半角スペース1個だよ
HTML内の連続する半角スペース、タブ文字、改行文字は
1個のスペースにするって、ティムたんが決めた >>225
これ目から鱗
cssでwhite-spaceがあるんだし、trimできたっていいじゃんな >>227
ちゃんと調べたわけじゃないけど
HTML内の英文を途中で改行したりさらにインデントしたりすることを考えて
こうなっているんだろうなと
んでこのスペースをなんとかする方法は
スタックオーバーフロウとかでもよく見たから
英語圏でもうっとおしがられてるんだろうに
なんで残ってんだろう… 空白類も空白類以外の文字も<input>も全部インライン要素だから
単純にタグとタグの間の空白類を除去してしまうと
"a b c d"の空白も
"<span>a</span> <span>b</span> <span>c</span> <span>d</span>"の空白も
等しくなくなってしまいそう、とか
ブロック要素でオプション的に指定できるようにすればそれで済むもするが {% spaceless %}{% endspaceless %}使ってるな
smartyの時代は{strip}{/strip}だった >>226
HTML では要素と要素の隙間の空白列（ inter-element whitespace という用語が定義されている）は、ある種の文脈では無視するものとされているが、
半角スペース1個であったかのように扱うと決めているのは CSSのはず
（DOM が半角スペース1個になるわけではないし、ティムは関わってないんじゃないか？） >>219
<li>なら終了タグ省略で>>225と同じになるぞ
<ul>
<li>1こめ
<li>2こめ
<li>3こめ
</ul>
これは
<ul>
<li>1こめ
</li><li>2こめ
</li><li>3こめ
</li></ul>
と同じ どこもかしこも、なんで記事にもっと読むとか、続きを読むとかをアホみたいに入れてるの？
これって、SEO対策なんかな？
読むユーザーから矛盾してると思うんだけど、これ意味あるんか？ SEO対策なんてものは存在しない
何をやった所で意味があるかないかなんかわからないんだから >>219
インライン要素の改行は隙間ができる
対処法としては
①
<span>テキスト</span><!--
--><span>テキスト</span>
のように改行をコメントにする
②
<div class="wrapper">
<span>テキスト</span>
<span>テキスト</span>
</div>
のように改行するインライン要素を何かで囲む
んで、CSSで
.wrapper {
letter-spacing: -.4em;
}
.wrapper span {
letter-spacing: normal;
}
のように親要素の文字間をつめて、子要素の文字間をノーマルに戻すことで回避できる
他にも上のレスであるように閉じタグ省略とかタグの書き方工夫したりとかもあるから
自分の好きなのでいいと思うよ それよく見るし俺も使うけど、
0.4emって何のことなの サイトのCSS（と、それに付随するHTMLのクラス名）を修正しようと思います。
クラス名を分かりやすく改名したり、必要ないクラスを消したり、2つに分けていたクラスを一つにしたり等あると思います。
この作業をするにあたって注意すること、アドバイス等ありましたら教えてください。 影のinsetについてなんですが
box-shadow: 0px -15px 30px -2px white inset;
などとすると４方向に影がつきます
垂直方向だけ、または横方向だけに影をつけることは出来ますか >>238
横レスで申し訳ないけど、remとemの使いどころがよく分からんのだけど
どういう時に使うの？ jqueryの.css() で何らかの属性を取得した場合、
帰って来る英単語は小文字であると保証されていますか？
たとえば
white-spaceの値を取得すると'pre'だったのですが、'PRE'とか'Pre'などに
なる可能性もありますか？ 書いたとおりに取得されるで良いんじゃないの？
全部小文字で書いてれば迷うこともない >>235
ユーザーの離脱率、ページ閲覧時間は年々短くなっている
少しでも興味をもたせようという計らい
>>243
emは死ぬほど使うよ
pxで指定すると非常にめんどくさいことになる
>>245
強ければ小文字に変換したら？ >>235
上の通りと、広告の表示回数が増える
結果SEO対策の１つとなってる
>>243
emは文字サイズほぼ全てで使ってる
固定サイズ枠の中からはみ出したくないとき除いて px指定って本当に使わなくなったな
widthは%、marginはem remはルート(html？body？)の割合だっけ
px指定と比べた時の利点って、フォントサイズを一括で調整しやすいとかになるのかな？ いちおう豆知識として説明しておくと「em」はアルファベットの「M」のこと
アルファベットにはそれぞれ形と名称が定義されてて、形の定義が「M」でその名称が「em」
なので「em」で「エム」と読む
「M」は縦横ともに幅一杯使うから印刷業界でこの大きさを1とする単位として「em」が使われるようになった
それが今も残ってる 最近はhtmlにfont-size:62.5%かけてremだな
疑似要素ではIEでバグがあるからem
メディアクエリもem。pxはsafariで拡大したときにバグる 拡大縮小は動作保証外にしてるわ
chromeでも結構バグるのに手に負えない 243だけど皆さんありがとう
width以外はpx指定してたから勉強し直そう ＜input type="search"/＞
で、IEはクリアのxアイコンが出るのですが
[ x]
chrome, FFは出ません。どうしたら出せますか？ >>259
クリアのアイコンの実装は義務付けられていない
実装されてない場合は出しようが無い
何らかの隠しオプションはあるかもしれないが >>260
ありがとうございました。
>クリアのアイコンの実装は義務付けられていない
そう言うのはどこを調べれば書いてあるのでしょうか？ W3Cなどで大体のブラウザの共通仕様は書かれているけど
＞義務付けられていない
を調べるのは大変かも ＨＴＭＬの動画を見たんですが、ダブルクォーテーションを入力した時に
１回の入力で""と２つ同時に画面に出て間にカーソルが入ってました
とても便利だなと思ってお尋ねしたいんですがどうしたらいいのでしょうか？ >>261
論理的なふるまいを除く UIの詳細はブラウザの裁量に任されることが多い。
入力方式など、最適なUIはプラットフォームに依存するので。
その例だと IE は Windows のしきたりに合わせてクリアアイコンを付けているのかも（ Windowsは使ってないので憶測だが）。
Chrome やFF はマルチプラットフォームなのでWindows のしきたりよりプラットフォーム間の一貫性を優先しているように思われる。 クリアアイコンってあれもともとSafariが始めたものだろ >>265
付け加えると、ブラウザの裁量が暗黙の了解になってるので、仕様にはわざわざ書かれない（特に必要な場合に限り、指定される） Foxのコンソールに毎回
XML パースエラー: タグの対応が間違っています。終了タグが必要です: </meta>
のエラメが出てうっとうしい
メタタグは終了タグいらないんじゃなかったっけ >>260
お前の書き方が悪い
意味もわからずコピペばかりしてるからだ >>270
<!DOCTYPE html>
でもいるの？ >>272
いらない
>>271
htmlと似た別言語。はっきり言ってスゲー書くのがめんどくさい
詳細はめんどいからぐぐって もしhtml5でもそのエラーが出るならURLを教えて欲しい
拡張機能か、iframe内のエラーような気もする >>274
今気がついたが
・ローカルだと出る
・ローカルでApache(3.2.1)だと出る
・サーバーにアップすると出ない
HTML(A)←ajaxで読み込み－HTML(B) ってことしてて、両方のheadに
<meta name="viewport" content="width=device-width,initial-scale=1.0">
の記述があり、B側の行をエラー表示してる
ちなみにどちらのファイルもname="robots"など他のメタタグあり
Chromeだとローカルでも出ず
スレチなのでこの辺にしときます
>>259見て思い出しただけなので >>275
Content-Typeの問題。
> Content-Type: text/html
終了タグを閉じなくても良い(HTML)。
> Content-Type: application/xhtml+xml
全てのタグを閉じなくてはならない(XML)。
DOCTYPEが何であろうが、XML準拠である事が強制される。 >>278
はい、正解、おめでとう
でも、答えが出るまで3時間かかりました >>280
礼儀のなってない奴だな
教えてもらっておきながら、上から目線の態度が鼻につく >>278
text/htmlに当たると思うがそれでもいるということ？
他のブラウザでエラーが出ないのはなぜ？
>>281
そら別人だよ Content-Typeの問題なら鯖で出ないのはなぜ？ 色々な妨害してくるのは、荒らしだから、相手をするな。
無視しろ
質問者は、荒らしと間違われないように、age て、ID を表示すること。
sage で書かないように
sage で書くと、荒らしと区別がつかないから 教えてもらいたいという人が>>280のようなこと書くわけないな。
しかも常時2chにへばりついてるわけでもなかろうに3時間は早いほうだろ。
いつもの詳しい人かな。 >>283
その辺はブラウザごとに色々あんじゃね？
ガラケーのXHTML書くときに
使えるブラウザとそうでないのあってイライラきたじゃん？ 最初の質問者ではなく便乗質問でもageたほうがいいのかな
日変わったらidも変わるから意味ないようなキガス >>264
なるほど！早速使ってみます
ありがとうございました Templateのアンケートフォームをカスタマイズしたいのです。なんかCSSを使えばできるみたいですが、
その場合、どんなツールが必要でしょうか。 cssでボックスの内側に単純なグラデーションをかけたいですが、どのような記述をすればいいでしょうか
boxshadowだと４方向のグラデーションになります text-alignの変更をアニメーションさせることはできますか？ ■ このスレッドは過去ログ倉庫に格納されています
